233 lines
8.7 KiB
PHP
233 lines
8.7 KiB
PHP
<div class="ui modal" id="import_modal">
|
|
<div class="header">
|
|
Importar Precios
|
|
</div>
|
|
<div class="content">
|
|
<div class="ui form">
|
|
<input type="hidden" id="import_project_id" name="import_project_id" value="" />
|
|
<div class="three wide field">
|
|
<div class="ui calendar" id="import_date">
|
|
<div class="ui left icon input">
|
|
<i class="calendar icon"></i>
|
|
<input type="text" name="fecha" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fields">
|
|
<div class="four wide field">
|
|
<button class="ui button" id="import_template">
|
|
<i class="file icon"></i>
|
|
Descargar plantilla
|
|
</button>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox import_format">
|
|
<input type="radio" name="format" value="csv" />
|
|
<label>CSV</label>
|
|
</div>
|
|
<div class="ui radio checkbox import_format">
|
|
<input type="radio" name="format" value="xlsx" checked />
|
|
<label>XLSX</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input class="ui invisible file input" type="file" id="import_file" name="file" />
|
|
<label class="ui placeholder segment" for="import_file">
|
|
<div class="ui icon header">
|
|
<i class="upload icon"></i>
|
|
Archivo de Precios
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui red cancel icon button">
|
|
<i class="remove icon"></i>
|
|
</div>
|
|
<div class="ui green ok icon button">
|
|
<i class="checkmark icon"></i>
|
|
Importar
|
|
</div>
|
|
</div>
|
|
|
|
@include('layout.body.scripts.xlsx')
|
|
|
|
@push('page_scripts')
|
|
<script>
|
|
class ImportTemplate {
|
|
ids = {
|
|
button: '',
|
|
format: ''
|
|
}
|
|
components = {
|
|
button: null,
|
|
$format: null
|
|
}
|
|
data = {
|
|
filename: '',
|
|
format: '',
|
|
columns: [],
|
|
csv: {
|
|
separator: '',
|
|
},
|
|
}
|
|
buildData() {
|
|
const data = []
|
|
data.push(this.data.columns.map(column => column.charAt(0).toUpperCase() + column.slice(1)))
|
|
data.push(this.data.columns.map(column => ''))
|
|
return data
|
|
}
|
|
download(event) {
|
|
event.preventDefault()
|
|
|
|
if (this.data.format === 'csv') {
|
|
this.downloadCsv()
|
|
}
|
|
if (this.data.format === 'xlsx') {
|
|
this.downloadXlsx()
|
|
}
|
|
|
|
return false
|
|
}
|
|
downloadCsv() {
|
|
const data = []
|
|
data.push(Object.keys(this.data.columns))
|
|
data.push(Object.values(this.data.columns))
|
|
const blob = new Blob([data.map(row => row.join(this.data.csv.separator)).join('\n')], {type: 'text/csv'})
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = this.data.filename + '.csv'
|
|
a.click()
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
downloadXlsx() {
|
|
const workbook = XLSX.utils.book_new()
|
|
const worksheet = XLSX.utils.json_to_sheet([this.data.columns])
|
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Plantilla de Precios')
|
|
XLSX.writeFile(workbook, this.data.filename + '.xlsx', { compression: true })
|
|
}
|
|
constructor() {
|
|
this.ids.button = 'import_template'
|
|
this.ids.format = 'import_format'
|
|
|
|
this.data.filename = 'Plantilla de Precios'
|
|
this.data.format = 'xlsx'
|
|
this.data.columns = {
|
|
Fecha: '',
|
|
'Proyecto*': 'Proyecto es opcional. Se toma el proyecto seleccionado',
|
|
'Tipo*': 'Tipo es optional. Se toma departamento.',
|
|
Unidad: '',
|
|
Valor: ''
|
|
}
|
|
this.data.csv.separator = ';'
|
|
|
|
this.setup()
|
|
}
|
|
setup() {
|
|
this.components.button = document.getElementById(this.ids.button)
|
|
this.components.button.addEventListener('click', this.download.bind(this))
|
|
|
|
this.components.$format = $(`.${this.ids.format}`)
|
|
this.components.$format.checkbox({
|
|
fireOnInit: true,
|
|
onChange: () => {
|
|
const radios = this.components.$format.find('[name="format"]').toArray()
|
|
const checkedRadio = radios.filter(elem => elem.checked)[0]
|
|
this.data.format = checkedRadio.value
|
|
}
|
|
})
|
|
}
|
|
}
|
|
class ImportModal {
|
|
ids = {
|
|
modal: '',
|
|
project: '',
|
|
calendar: '',
|
|
file: ''
|
|
}
|
|
components = {
|
|
$modal: null,
|
|
form: null,
|
|
project: null,
|
|
$calendar: null,
|
|
file: null,
|
|
$file: null,
|
|
template: null
|
|
}
|
|
constructor() {
|
|
this.ids.modal = 'import_modal'
|
|
this.ids.project = 'import_project_id'
|
|
this.ids.calendar = 'import_date'
|
|
this.ids.file = 'import_file'
|
|
|
|
this.setup()
|
|
}
|
|
show(project_id) {
|
|
this.components.project.value = project_id
|
|
this.components.$modal.modal('show')
|
|
}
|
|
dragDrop(event) {
|
|
event.preventDefault()
|
|
|
|
if (event.originalEvent.dataTransfer && event.originalEvent.dataTransfer.files.length > 0) {
|
|
this.components.file.files = event.originalEvent.dataTransfer.files
|
|
}
|
|
}
|
|
import() {
|
|
const url = '{{ $urls->api }}/ventas/precios/import'
|
|
const method = 'post'
|
|
const body = new FormData()
|
|
body.set('project_id', this.components.project.value)
|
|
const date = this.components.$calendar.calendar('get date')
|
|
body.set('date', [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'))
|
|
body.set('file', this.components.file.files[0])
|
|
APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
|
if (json.status === true) {
|
|
window.location.reload()
|
|
return
|
|
}
|
|
console.debug(json)
|
|
})
|
|
}
|
|
setup() {
|
|
this.components.$modal = $(`#${this.ids.modal}`)
|
|
this.components.$modal.modal({
|
|
onApprove: () => {
|
|
this.import()
|
|
}
|
|
})
|
|
|
|
this.components.form = this.components.$modal.find('form')
|
|
this.components.form.submit(event => {
|
|
event.preventDefault()
|
|
this.import()
|
|
return false
|
|
})
|
|
|
|
this.components.project = document.getElementById(this.ids.project)
|
|
|
|
this.components.$calendar = $(`#${this.ids.calendar}`)
|
|
const cdo = structuredClone(calendar_date_options)
|
|
cdo['maxDate'] = new Date()
|
|
this.components.$calendar.calendar(cdo)
|
|
|
|
this.template = new ImportTemplate()
|
|
|
|
this.components.file = document.getElementById(this.ids.file)
|
|
this.components.$file = $(this.components.file.parentNode.querySelector('label'))
|
|
this.components.$file.css('cursor', 'pointer')
|
|
this.components.$file.on('dragover', event => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
})
|
|
this.components.$file.on('dragenter', event => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
})
|
|
this.components.$file.on('drop', this.dragDrop.bind(this))
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|