Agregar, editar y borrar comentarios
This commit is contained in:
Juan Pablo Vial
@ -27,7 +27,10 @@ $app->group('/ventas', function($app) {
|
||||
});
|
||||
$app->group('/venta/{venta_id}', function($app) {
|
||||
$app->get('/unidades[/]', [Ventas::class, 'unidades']);
|
||||
$app->get('/comentarios[/]', [Ventas::class, 'comentarios']);
|
||||
$app->group('/comentarios', function($app) {
|
||||
$app->post('/add[/]', [Ventas::class, 'addComentario']);
|
||||
$app->get('[/]', [Ventas::class, 'comentarios']);
|
||||
});
|
||||
$app->group('/escritura', function($app) {
|
||||
$app->post('/add[/]', [Ventas\Escrituras::class, 'add']);
|
||||
});
|
||||
|
||||
8
app/resources/routes/api/ventas/comentarios.php
Normal file
8
app/resources/routes/api/ventas/comentarios.php
Normal file
@ -0,0 +1,8 @@
|
||||
<?php
|
||||
use Incoviba\Controller\API\Ventas\Comentarios;
|
||||
|
||||
$app->group('/comentario/{comentario_id}', function($app) {
|
||||
$app->post('/edit[/]', [Comentarios::class, 'edit']);
|
||||
$app->delete('/remove[/]', [Comentarios::class, 'remove']);
|
||||
//$app->get('[/]', [Comentarios::class, 'get']);
|
||||
});
|
||||
@ -3,9 +3,9 @@
|
||||
COMENTARIOS
|
||||
</div>
|
||||
<div class="right aligned column">
|
||||
<a href="javascript: addComment()" style="color: inherit;">
|
||||
<button class="ui icon button" style="background: none; color: inherit; padding: 0;" id="add_comentario_button">
|
||||
<i class="plus icon"></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui segment">
|
||||
@ -13,37 +13,199 @@
|
||||
<tbody id="comentarios"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ui modal" id="addComment">
|
||||
<div class="header">
|
||||
Agregar Comentario
|
||||
</div>
|
||||
<div class="content">
|
||||
<form class="ui form">
|
||||
<div class="three wide field">
|
||||
<label>Fecha</label>
|
||||
<div class="ui calendar" id="fecha">
|
||||
<div class="ui icon input">
|
||||
<input type="text" placeholder="Fecha">
|
||||
<i class="calendar icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Comentario</label>
|
||||
<textarea id="comentario" rows="2"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui black deny button">
|
||||
Cancelar
|
||||
</div>
|
||||
<div class="ui positive right labeled icon button">
|
||||
Agregar
|
||||
<i class="checkmark icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui modal" id="editComment">
|
||||
<div class="header">
|
||||
Edit Comentario
|
||||
</div>
|
||||
<div class="content">
|
||||
<form class="ui form">
|
||||
<input type="hidden" name="id" />
|
||||
<div class="three wide field">
|
||||
<label>Fecha</label>
|
||||
<div class="ui calendar" id="fechaEdit">
|
||||
<div class="ui icon input">
|
||||
<input type="text" placeholder="Fecha">
|
||||
<i class="calendar icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Comentario</label>
|
||||
<textarea id="comentarioEdit" rows="2"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui black deny button">
|
||||
Cancelar
|
||||
</div>
|
||||
<div class="ui positive right labeled icon button">
|
||||
Editar
|
||||
<i class="checkmark icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('page_scripts')
|
||||
<script type="text/javascript">
|
||||
class Comentario
|
||||
{
|
||||
class Comentario {
|
||||
id
|
||||
fecha
|
||||
texto
|
||||
|
||||
constructor({fecha, texto})
|
||||
constructor({id, fecha, texto})
|
||||
{
|
||||
this.id = id
|
||||
this.fecha = new Date(fecha + 'T00:00:00')
|
||||
this.texto = texto
|
||||
}
|
||||
draw(dateFormatter)
|
||||
{
|
||||
return $('<tr></tr>').append(
|
||||
$('<td></td>').html(dateFormatter.format(this.fecha))
|
||||
).append(
|
||||
$('<td></td>').html(this.texto)
|
||||
).append(
|
||||
$('<td></td>').addClass('right aligned').append(
|
||||
$('<a></a>').attr('href', 'javascript: removeComment();').append(
|
||||
$('<i></i>').addClass('minus icon')
|
||||
)
|
||||
)
|
||||
)
|
||||
return [
|
||||
'<tr>',
|
||||
`<td class="collapsing">${dateFormatter.format(this.fecha)}</td>`,
|
||||
`<td>${this.texto}</td>`,
|
||||
'<td class="right aligned">',
|
||||
`<button class="ui tiny tertiary icon button editComentario" data-id="${this.id}">`,
|
||||
'<i class="edit icon"></i>',
|
||||
'</button>',
|
||||
`<button class="ui tiny tertiary red icon button removeComentario" data-id="${this.id}">`,
|
||||
'<i class="minus icon"></i>',
|
||||
'</button>',
|
||||
'</td>',
|
||||
'</tr>'
|
||||
].join("\n")
|
||||
}
|
||||
}
|
||||
class AddModal {
|
||||
props
|
||||
constructor({id}) {
|
||||
this.props = {
|
||||
id
|
||||
}
|
||||
$(this.props.id).modal({
|
||||
onApprove: () => {
|
||||
this.approve()
|
||||
}
|
||||
})
|
||||
const cdo = structuredClone(calendar_date_options)
|
||||
$(this.props.id).find('.ui.calendar').calendar(cdo)
|
||||
this.hide()
|
||||
}
|
||||
approve() {
|
||||
const fecha = $(this.props.id).find('#fecha').calendar('get date')
|
||||
const fechaString = [fecha.getFullYear(), fecha.getMonth()+1, fecha.getDate()].join('-')
|
||||
const comentario = $(this.props.id).find('#comentario').val()
|
||||
const uri = '{{$urls->api}}/venta/{{$venta->id}}/comentarios/add'
|
||||
const body = new FormData()
|
||||
body.append('fecha', fechaString)
|
||||
body.append('texto', comentario)
|
||||
fetchAPI(uri, {method: 'post', body}).then(response => {
|
||||
if (!response) {
|
||||
return
|
||||
}
|
||||
return response.json().then(data => {
|
||||
if (data.added) {
|
||||
comentarios.comentarios.push(new Comentario(data.comentario))
|
||||
comentarios.draw().comentarios()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
show() {
|
||||
const modal = $(this.props.id)
|
||||
modal.find('form').trigger('reset')
|
||||
modal.modal('show')
|
||||
}
|
||||
hide() {
|
||||
const modal = $(this.props.id)
|
||||
modal.modal('hide')
|
||||
}
|
||||
}
|
||||
class EditModal {
|
||||
props
|
||||
constructor({id}) {
|
||||
this.props = {
|
||||
id
|
||||
}
|
||||
$(this.props.id).modal({
|
||||
onApprove: () => {
|
||||
this.approve()
|
||||
}
|
||||
})
|
||||
const cdo = structuredClone(calendar_date_options)
|
||||
$(this.props.id).find('.ui.calendar').calendar(cdo)
|
||||
this.hide()
|
||||
}
|
||||
approve() {
|
||||
const id = $(this.props.id).find("[name='id']").val()
|
||||
const fecha = $(this.props.id).find('#fechaEdit').calendar('get date')
|
||||
const fechaString = [fecha.getFullYear(), fecha.getMonth()+1, fecha.getDate()].join('-')
|
||||
const comentario = $(this.props.id).find('#comentarioEdit').val()
|
||||
const uri = `{{$urls->api}}/ventas/comentario/${id}/edit`
|
||||
const body = new FormData()
|
||||
body.append('fecha', fechaString)
|
||||
body.append('texto', comentario)
|
||||
fetchAPI(uri, {method: 'post', body}).then(response => {
|
||||
if (!response) {
|
||||
return
|
||||
}
|
||||
return response.json().then(data => {
|
||||
if (data.edited) {
|
||||
const idx = comentarios.comentarios.findIndex(comentario => comentario.id === data.comentario_id)
|
||||
comentarios.comentarios[idx] = new Comentario(data.comentario)
|
||||
comentarios.draw().comentarios()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
show() {
|
||||
const modal = $(this.props.id)
|
||||
modal.modal('show')
|
||||
}
|
||||
hide() {
|
||||
const modal = $(this.props.id)
|
||||
modal.modal('hide')
|
||||
}
|
||||
}
|
||||
const comentarios = {
|
||||
comentarios: [],
|
||||
id: '',
|
||||
modals: {
|
||||
add: null,
|
||||
edit: null
|
||||
},
|
||||
fetch: function() {
|
||||
return {
|
||||
comentarios: () => {
|
||||
@ -60,6 +222,7 @@
|
||||
this.comentarios.push(new Comentario(settings))
|
||||
})
|
||||
this.draw().comentarios()
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -73,11 +236,41 @@
|
||||
this.comentarios.forEach(comentario => {
|
||||
body.append(comentario.draw(dateFormatter))
|
||||
})
|
||||
$('.editComentario').on('click', event => {
|
||||
const id = $(event.currentTarget).data('id')
|
||||
const comentario = this.comentarios.find(comentario => comentario.id === id)
|
||||
const modal = this.modals.edit
|
||||
const fecha = new Date(comentario.fecha)
|
||||
$(modal.props.id).find("[name='id']").val(id)
|
||||
$(modal.props.id).find('#fechaEdit').calendar('set date', fecha)
|
||||
$(modal.props.id).find('#comentarioEdit').val(comentario.texto)
|
||||
modal.show()
|
||||
})
|
||||
$('.removeComentario').click(event => {
|
||||
const id = $(event.currentTarget).data('id')
|
||||
const uri = `{{$urls->api}}/ventas/comentario/${id}/remove`
|
||||
fetchAPI(uri, {method: 'delete'}).then(response => {
|
||||
if (!response) {
|
||||
return
|
||||
}
|
||||
return response.json().then(data => {
|
||||
if (data.removed) {
|
||||
this.comentarios = this.comentarios.filter(comentario => comentario.id !== id)
|
||||
this.draw().comentarios()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
setup: function(id) {
|
||||
this.id = id
|
||||
this.modals.add = new AddModal({id: '#addComment'})
|
||||
this.modals.edit = new EditModal({id: '#editComment'})
|
||||
$('#add_comentario_button').click(() => {
|
||||
this.modals.add.show()
|
||||
})
|
||||
this.fetch().comentarios()
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user