nathalie
/
pedi2
3
3
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

ProductoCantidad template WIP

This commit is contained in:
Rodrigo 2024-09-15 12:48:34 -03:00
parent 728c54b3f3
commit 6fc7021317
4 changed files with 96 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
resources/js/components/Chismosa.vue
View File

@ -7,8 +7,6 @@
<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>
@ -16,28 +14,23 @@
<th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
<th class="has-text-right">{{ cantidadBonosDeTransporte() }}</th>
<th class="has-text-right">{{ totalBonosDeTransporte() }}</th>
<th></th>
<th></th>
</tr>
<tr v-if="this.$root.devoluciones">
<th><p>Devoluciones</p></th>
<td><p :title="notasDevoluciones()">...</p></td>
<th class="has-text-right">-{{ devoluciones() }}</th>
<th>
<td>
<p :title="notasDevoluciones()">...</p>
<button @click.capture="modificarDevoluciones()" class="button is-warning">
<span class="icon">
<i class="fas fa-edit"></i>
</span>
</button>
</th>
<th></th>
</td>
<th class="has-text-right">-{{ devoluciones() }}</th>
</tr>
<tr>
<th>Total total</th>
<th></th>
<th class="has-text-right">{{ total() }}</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>

88
resources/js/components/Producto/ProductoCantidad.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div class="field has-addons">
<div class="control">
<button class="button is-small" @click.capture="decrementar();">
<i class="fa fa-solid fa-minus"></i>
</button>
</div>
<div class="control">
<input id="cantidad" v-model="cantidad" class="input is-small" type="number" style="text-align: center">
</div>
<div class="control" @click="incrementar();">
<button class="button is-small">
<i class="fa fa-solid fa-plus"></i>
</button>
</div>
<button :disabled="!hayCambios()" class="button is-small is-success ml-3" @click="confirmar()">
<span class="icon">
<i class="fas fa-check"></i>
</span>
</button>
<button :disabled="!puedeBorrar()" class="button is-small is-danger ml-3" @click="borrar()">
<span class="icon">
<i class="fas fa-trash-alt"></i>
</span>
</button>
</div>
</template>
<script>
export default {
props: {
producto: Object
},
data() {
return {
cantidad: this.producto.cantidad,
enChismosa: this.producto.cantidad,
}
},
mounted() {
Event.$on('sync-subpedido', (cantidad,productoId) => {
if (this.producto.id === productoId)
this.sincronizar(cantidad);
});
},
methods: {
decrementar() {
this.cantidad -= 1;
},
incrementar() {
this.cantidad += 1;
},
confirmar() {
Event.$emit('sync-subpedido', this.cantidad, this.producto.id);
},
borrar() {
this.cantidad = 0;
this.confirmar();
},
sincronizar(cantidad) {
this.cantidad = cantidad;
this.producto.cantidad = cantidad;
this.enChismosa = cantidad;
},
hayCambios() {
return this.cantidad != this.enChismosa;
},
puedeBorrar() {
return this.enChismosa > 0;
},
}
}
</script>
<style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
appearance: textfield;
-moz-appearance: textfield;
}
</style>

26
resources/js/components/ProductoCard.vue
View File

@ -68,31 +68,7 @@ export default {
</div>
<footer class="columns">
<div class="column is-three-quarters">
<div class="field has-addons">
<div class="control">
<button class="button is-small" @click.capture="decrementar();">
<i class="fa fa-solid fa-minus"></i>
</button>
</div>
<div class="control">
<input id="cantidad" v-model="cantidad" class="input is-small" type="number" style="text-align: center">
</div>
<div class="control" @click="incrementar();">
<button class="button is-small">
<i class="fa fa-solid fa-plus"></i>
</button>
</div>
<button :disabled="!hayCambios()" class="button is-small is-success ml-3" @click="confirmar()">
<span class="icon">
<i class="fas fa-check"></i>
</span>
</button>
<button :disabled="!puedeBorrar()" class="button is-small is-danger ml-3" @click="borrar()">
<span class="icon">
<i class="fas fa-trash-alt"></i>
</span>
</button>
</div>
<producto-cantidad :producto="producto"></producto-cantidad>
</div>
<div class="column">
<p class="subtitle is-7 is-hidden-mobile" v-if="enChismosa !== 0">{{ enChismosa }} en chismosa</p>

22
resources/js/components/ProductoRow.vue
View File

@ -1,18 +1,10 @@
<template>
<tr>
<td>{{ this.producto.nombre }}</td>
<td class="has-text-right">{{ this.producto.pivot.cantidad }}</td>
<td class="has-text-right">
<producto-cantidad :producto="producto"></producto-cantidad>
</td>
<td class="has-text-right">{{ Math.ceil(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()" class="button is-danger">
<span class="icon">
<i class="fas fa-trash-alt"></i>
</span>
</button></td>
</tr>
</template>
producto
@ -21,13 +13,5 @@ producto
props: {
producto: Object
},
methods: {
seleccionarProducto() {
Event.$emit("producto-seleccionado",this.producto);
},
eliminarProducto() {
Event.$emit("sync-subpedido", 0, this.producto.id);
}
}
}
</script>