Upload files
This commit is contained in:
210
ui/public/assets/scripts/uploads.list.js
Normal file
210
ui/public/assets/scripts/uploads.list.js
Normal file
@ -0,0 +1,210 @@
|
||||
class Archivo {
|
||||
constructor({folder, filename}) {
|
||||
this.folder = folder
|
||||
this.filename = filename
|
||||
this.modal = null
|
||||
}
|
||||
setModal(modal) {
|
||||
this.modal = modal
|
||||
return this
|
||||
}
|
||||
draw() {
|
||||
return $('<tr></tr>').append(
|
||||
$('<td></td>').append(
|
||||
$('<a></a>').attr('class', 'item').attr('href', _urls.base + ['upload', this.folder, this.filename].join('/')).html(this.filename)
|
||||
)
|
||||
).append(
|
||||
$('<td></td>').attr('class', 'right aligned').append(
|
||||
$('<button></button>').attr('class', 'ui mini circular icon button').append(
|
||||
$('<i></i>').attr('class', 'edit icon')
|
||||
).click((e) => {
|
||||
e.preventDefault()
|
||||
const t = e.currentTarget
|
||||
this.edit()
|
||||
return false
|
||||
})
|
||||
).append(
|
||||
$('<button></button>').attr('class', 'ui mini red circular icon button').append(
|
||||
$('<i></i>').attr('class', 'remove icon')
|
||||
).click((e) => {
|
||||
e.preventDefault()
|
||||
const t = e.currentTarget
|
||||
this.remove()
|
||||
return false
|
||||
})
|
||||
)
|
||||
)
|
||||
}
|
||||
edit() {
|
||||
this.modal.find('form').trigger('reset')
|
||||
this.modal.find('form').find("[name='folder']").val(this.folder)
|
||||
this.modal.find('form').find("[name='old_filename']").val(this.filename)
|
||||
this.modal.find('form').find("[name='filename']").val(this.filename)
|
||||
this.modal.modal('show')
|
||||
}
|
||||
remove() {
|
||||
return sendDelete([_urls.api, 'upload', this.folder, this.filename].join('/')).then((data) => {
|
||||
if (data.deleted) {
|
||||
archivos.get()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const archivos = {
|
||||
id: '#archivos',
|
||||
archivos: [],
|
||||
modals: {
|
||||
add: null,
|
||||
edit: null
|
||||
},
|
||||
get: function() {
|
||||
return {
|
||||
parent: () => {
|
||||
let parent = $(this.id).find('tbody')
|
||||
if (parent.length === 0) {
|
||||
const table = $('<table></table>').attr('class', 'ui striped table').append(
|
||||
$('<thead></thead>').append(
|
||||
$('<tr></tr>').append(
|
||||
$('<th></th>').html('Archivo')
|
||||
).append(
|
||||
$('<th></th>').attr('class', 'right aligned').append(
|
||||
$('<button></button>').attr('class', 'ui tiny green circular icon button').append(
|
||||
$('<i></i>').attr('class', 'plus icon')
|
||||
).click((e) => {
|
||||
e.preventDefault()
|
||||
this.add()
|
||||
return false
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
parent = $('<tbody></tbody>')
|
||||
table.append(parent)
|
||||
$(this.id).append(table)
|
||||
}
|
||||
return parent
|
||||
},
|
||||
archivos: () => {
|
||||
return sendGet(_urls.api + '/uploads').then((data) => {
|
||||
if (data.files === null || data.files.length === 0) {
|
||||
return
|
||||
}
|
||||
$.each(data.files, (i, el) => {
|
||||
const arch = new Archivo(el)
|
||||
arch.setModal(this.modals.edit)
|
||||
this.archivos.push(arch)
|
||||
})
|
||||
}).then(() => {
|
||||
this.draw()
|
||||
})
|
||||
},
|
||||
cuentas: () => {
|
||||
return sendGet(_urls.api + '/cuentas')
|
||||
}
|
||||
}
|
||||
},
|
||||
draw: function() {
|
||||
const tbody = this.get().parent()
|
||||
tbody.html('')
|
||||
$.each(this.archivos, (i, el) => {
|
||||
tbody.append(el.draw())
|
||||
})
|
||||
},
|
||||
add: function() {
|
||||
this.modals.add.find('form').trigger('reset')
|
||||
this.modals.add.modal('show')
|
||||
},
|
||||
doAdd: function() {
|
||||
const data = new FormData(this.modals.add.find('form'))
|
||||
return sendPost(_urls.api + '/categorias/add', data, true).then((resp) => {
|
||||
this.modals.add.modal('hide')
|
||||
this.getCategorias()
|
||||
})
|
||||
},
|
||||
doEdit: function() {
|
||||
const folder = this.modals.edit.find("[name='folder']").val()
|
||||
const filename = this.modals.edit.find("[name='old_filename']").val()
|
||||
const data = JSON.stringify({
|
||||
cuenta: this.modals.edit.find("[name='cuenta']").val(),
|
||||
fecha: this.modals.edit.find("[name='fecha']").val()
|
||||
})
|
||||
sendPut([_urls.api, 'upload', folder, filename].join('/'), data).then((resp) => {
|
||||
this.modals.edit.modal('hide')
|
||||
if (resp.edited) {
|
||||
this.get().archivos()
|
||||
}
|
||||
})
|
||||
},
|
||||
updateCalendar: function(modal) {
|
||||
const today = new Date()
|
||||
const start = new Date(today.getFullYear(), today.getMonth() - 1)
|
||||
modal.find('.ui.calendar').calendar({
|
||||
type: 'month',
|
||||
initialDate: start,
|
||||
maxDate: start,
|
||||
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
|
||||
monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
|
||||
formatter: {
|
||||
date: function(date, settings) {
|
||||
if (!date) return ''
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
return [year, month].join('-')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
updateCuentas: function(modal, data) {
|
||||
if (data.cuentas === null || data.cuentas.length === 0) {
|
||||
return
|
||||
}
|
||||
const select = modal.find("select[name='cuenta']")
|
||||
let values = []
|
||||
$.each(data.cuentas, (i, el) => {
|
||||
const nombre = [el.nombre, el.categoria.nombre].join(' - ')
|
||||
values.push({
|
||||
name: nombre,
|
||||
value: el.id,
|
||||
text: nombre
|
||||
})
|
||||
})
|
||||
select.dropdown({values})
|
||||
},
|
||||
setupModal: function() {
|
||||
this.modals.add = $('#add_modal')
|
||||
this.modals.edit = $('#edit_modal')
|
||||
$.each(this.modals, (i, el) => {
|
||||
el.modal().find('.close.icon').click(() => {
|
||||
el.modal('hide')
|
||||
})
|
||||
this.updateCalendar(el)
|
||||
})
|
||||
this.modals.add.find('form').submit((e) => {
|
||||
e.preventDefault()
|
||||
this.doAdd()
|
||||
return false
|
||||
})
|
||||
this.modals.add.find('#archivo_btn').css('cursor', 'pointer').click(() => {
|
||||
this.modals.add.find("[name='archivo']").trigger('click')
|
||||
})
|
||||
this.modals.add.find("[name='archivo']").change((e) => {
|
||||
const arch = $(e.currentTarget)
|
||||
const filename = arch[0].files[0].name
|
||||
this.modals.add.find('#archivo_btn').find('input').val(filename)
|
||||
})
|
||||
this.modals.edit.find('form').submit((e) => {
|
||||
e.preventDefault()
|
||||
this.doEdit()
|
||||
return false
|
||||
})
|
||||
this.get().cuentas().then((data) => {
|
||||
this.updateCuentas(this.modals.add, data)
|
||||
this.updateCuentas(this.modals.edit, data)
|
||||
})
|
||||
},
|
||||
setup: function() {
|
||||
this.setupModal()
|
||||
this.get().archivos()
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user