forked from nathalie/pedi2
105 lines
3.5 KiB
JavaScript
105 lines
3.5 KiB
JavaScript
Vue.component('chismosa', {
|
|
template: `
|
|
<div class="container">
|
|
<table v-show="this.subpedido.productos.length != 0" class="table is-fullwidth is-striped is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Producto</th>
|
|
<th><abbr title="Cantidad">C</abbr></th>
|
|
<th><abbr title="Precio Total">$</abbr></th>
|
|
<th></th>
|
|
<th><abbr title="Eliminar"></abbr></th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
|
|
<th>{{ this.subpedido.bonos_de_transporte }}</th>
|
|
<th>{{ this.subpedido.subtotal_bonos_de_transporte }}</th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
<tr>
|
|
<th>Total total</th>
|
|
<th></th>
|
|
<th>{{ this.subpedido.total }}</th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<producto-row v-for="producto in this.subpedido.productos" :producto="producto" :key="producto.id"></producto-row>
|
|
</tbody>
|
|
</table>
|
|
<p class="has-text-centered" v-show="this.subpedido.productos.length == 0">Compa, todavía no agregaste nada a la chismosa.</p>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
subpedido: {
|
|
productos:[]
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
/* TODO: tener el camino que se había hecho antes de abrir la chismosa para volver atrás */
|
|
miga: function() {
|
|
return {
|
|
nombre: "Chismosa de " + this.subpedido.nombre,
|
|
href: "/chismosa"
|
|
}
|
|
}
|
|
},
|
|
beforeCreate() {
|
|
axios.get("/subpedidos/obtener_sesion").then(response => {
|
|
this.subpedido = response.data.subpedido;
|
|
this.fetchSubpedido();
|
|
Event.$emit("migas-agregar",this.miga);
|
|
});
|
|
},
|
|
methods: {
|
|
fetchSubpedido() {
|
|
axios.get("/api/subpedidos/" + this.subpedido.id)
|
|
.then(response => {
|
|
this.subpedido = response.data.data;
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
Event.$on('sync-subpedido', () => {
|
|
this.fetchSubpedido();
|
|
});
|
|
}
|
|
});
|
|
|
|
Vue.component('producto-row', {
|
|
template: `
|
|
<tr>
|
|
<td>{{ this.producto.nombre }}</td>
|
|
<td>{{ this.producto.pivot.cantidad }}</td>
|
|
<td>{{ this.producto.pivot.total }}</td>
|
|
<td><button @click.capture="seleccionarProducto(producto)" class="button is-warning">
|
|
<span class="icon">
|
|
<i class="fas fa-edit"></i>
|
|
</span>
|
|
</button></td>
|
|
<td><button @click.capture="eliminarProducto(producto)" class="button is-danger">
|
|
<span class="icon">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</span>
|
|
</button></td>
|
|
</tr>
|
|
`,
|
|
props: {
|
|
producto: Object
|
|
},
|
|
methods: {
|
|
seleccionarProducto(producto) {
|
|
Event.$emit("producto-seleccionado",producto);
|
|
},
|
|
eliminarProducto(producto) {
|
|
Event.$emit("sync-subpedido", 0, this.producto.id);
|
|
Event.$emit("sync-subpedido");
|
|
}
|
|
}
|
|
}) |