diff --git a/resources/js/app.js b/resources/js/app.js
index 068e9a6..76282e5 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -95,6 +95,7 @@ const app = new Vue({
axios.get('/api/subpedidos/' + this.pedido)
.then(response => {
this.pedido = response.data.data;
+ Event.$emit("pedido-actualizado");
});
} else {
axios.get('/admin/obtener_sesion')
@@ -116,21 +117,23 @@ const app = new Vue({
}).then((response) => {
this.pedido = response.data.data
this.$toast('Pedido actualizado exitosamente')
+ Event.$emit("pedido-actualizado");
});
- });
+ });
// Actualizar monto y notas de devoluciones
Event.$on('sync-devoluciones', (total, notas) => {
if (this.pedido.aprobado) {
this.$toast('No se puede modificar un pedido ya aprobado', 2000);
return;
}
-
+
axios.post("api/subpedidos/" + this.pedido.id + "/sync_devoluciones", {
total: total,
notas: notas,
}).then((response) => {
this.pedido = response.data.data;
this.$toast('Pedido actualizado');
+ Event.$emit("pedido-actualizado");
});
});
diff --git a/resources/js/components/CartelPedidoAprobado.vue b/resources/js/components/CartelPedidoAprobado.vue
index c43fa1f..be6f8a4 100644
--- a/resources/js/components/CartelPedidoAprobado.vue
+++ b/resources/js/components/CartelPedidoAprobado.vue
@@ -1,10 +1,31 @@
<template>
- <div v-show="this.$root.pedido.aprobado" class="notification is-warning has-text-centered">
+ <div v-show="aprobado" class="notification is-warning has-text-centered">
Tu pedido fue <strong>aprobado</strong>, por lo que no puede ser modificado
</div>
</template>
<script>
+ export default {
+ data() {
+ return {
+ aprobado: false,
+ }
+ },
+ mounted() {
+ Event.$on('pedido-actualizado', this.actualizarEstado);
+ if (this.$root.pedido != null) {
+ this.actualizarEstado();
+ }
+ },
+ methods: {
+ pedidoAprobado: function() {
+ return this.$root.pedido.aprobado;
+ },
+ actualizarEstado: function() {
+ this.aprobado = this.pedidoAprobado();
+ },
+ },
+ }
</script>
<style>
diff --git a/resources/js/components/CategoriasContainer.vue b/resources/js/components/CategoriasContainer.vue
index ff21a86..62fd96b 100644
--- a/resources/js/components/CategoriasContainer.vue
+++ b/resources/js/components/CategoriasContainer.vue
@@ -1,5 +1,5 @@
<template>
- <div v-show="visible" class="block ml-3 mr-3">
+ <div v-show="visible" class="column">
<div class="columns is-multiline is-mobile">
<div v-for="(categoria,i) in categorias" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
<div @click.capture="seleccionarCategoria(categoria)" class="card" style="height:100%" >
diff --git a/resources/js/components/Chismosa.vue b/resources/js/components/Chismosa.vue
index b9309e0..cd8d7f6 100644
--- a/resources/js/components/Chismosa.vue
+++ b/resources/js/components/Chismosa.vue
@@ -1,55 +1,83 @@
<template>
- <div>
- <table v-show="productos.length != 0" class="chismosa-tabla table is-narrow is-striped is-bordered">
- <thead>
- <tr>
- <th>Producto</th>
- <th><abbr title="Cantidad">C</abbr></th>
- <th><abbr title="Precio Total">$</abbr></th>
- <th><abbr title="Eliminar"></abbr></th>
- </tr>
- </thead>
- <tfoot>
- <tr>
- <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>
- </tr>
- <tr v-if="this.$root.devoluciones">
- <th><p>Devoluciones</p></th>
- <td><p :title="this.$root.pedido.devoluciones_notas">...</p></td>
- <th class="has-text-right">-{{ this.$root.pedido.devoluciones_total }}</th>
- <th>
- <button @click.capture="modificarDevoluciones()" class="button is-warning">
- <span class="icon">
- <i class="fas fa-edit"></i>
- </span>
- </button>
- </th>
- </tr>
- <tr>
- <th>Total total</th>
- <th></th>
- <th class="has-text-right">{{ total }}</th>
- <th></th>
- </tr>
- </tfoot>
- <tbody>
- <producto-row v-for="producto in productos" :producto="producto" :key="producto.id"></producto-row>
- </tbody>
- </table>
- <p class="has-text-centered" v-show="productos.length == 0">
- Compa, todavía no agregaste nada a la chismosa.
- </p>
+ <div class="column is-one-third">
+ <div class="fixed-right">
+ <table v-show="mostrar_tabla" class="table is-striped is-bordered tabla-chismosa is-narrow">
+ <thead>
+ <tr>
+ <th>Producto</th>
+ <th>Cantidad</th>
+ <th><abbr title="Precio Total">$</abbr></th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
+ <th class="has-text-right">{{ cantidad_bonos_transporte }}</th>
+ <th class="has-text-right">{{ total_bonos_transporte }}</th>
+ </tr>
+ <tr v-if="this.$root.devoluciones">
+ <th><p>Devoluciones</p></th>
+ <td>
+ <abbr :title="notas_devoluciones">{{ notas_devoluciones_abbr }}</abbr>
+ <button @click.capture="modificarDevoluciones()" class="button is-warning is-small">
+ <span class="icon">
+ <i class="fas fa-edit"></i>
+ </span>
+ </button>
+ </td>
+ <th class="has-text-right">-{{ devoluciones }}</th>
+ </tr>
+ <tr>
+ <th>Total total</th>
+ <th></th>
+ <th class="has-text-right">{{ total }}</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <producto-row v-for="producto in productos" :producto="producto" :key="producto.id"></producto-row>
+ </tbody>
+ </table>
+ <p class="has-text-centered" v-show="!mostrar_tabla">
+ Compa, todavía no agregaste nada a la chismosa.
+ </p>
+ </div>
</div>
</template>
<script>
export default {
- computed: {
- productos: function() {
- return this.$root.productos
+ data() {
+ return {
+ mostrar_tabla: false,
+ cantidad_bonos_transporte: 0,
+ total_bonos_transporte: 0,
+ devoluciones: 0,
+ notas_devoluciones: "",
+ notas_devoluciones_abbr: "",
+ total: 0,
+ productos: [],
+ }
+ },
+ mounted() {
+ Event.$on('pedido-actualizado', this.pedidoActualizado);
+ Event.$on('toggle-chismosa', this.pedidoActualizado);
+ },
+ methods: {
+ pedidoActualizado: function() {
+ this.mostrar_tabla = this.$root.productos.length > 0;
+ this.cantidad_bonos_transporte = this.cantidadBonosDeTransporte();
+ this.total_bonos_transporte = this.totalBonosDeTransporte();
+ this.devoluciones = this.$root.pedido.devoluciones_total;
+ this.notas_devoluciones = this.$root.pedido.devoluciones_notas;
+ this.notas_devoluciones_abbr = this.notas_devoluciones.substring(0, 15);
+ if (this.notas_devoluciones.length > 15) {
+ this.notas_devoluciones_abbr += "...";
+ }
+ this.total = this.$limpiarInt(this.$root.devoluciones ? this.$root.pedido.total_menos_devoluciones : this.$root.pedido.total);
+ this.productos = this.$root.productos
+ },
+ modificarDevoluciones: function() {
+ Event.$emit("modificar-devoluciones");
},
cantidadBonosDeTransporte: function() {
return this.$limpiarInt(this.$root.pedido.subtotal_bonos_de_transporte) / 15
@@ -57,22 +85,18 @@
totalBonosDeTransporte: function() {
return this.$limpiarInt(this.$root.pedido.subtotal_bonos_de_transporte)
},
- total: function() {
- return this.$limpiarInt(this.$root.devoluciones ? this.$root.pedido.total_menos_devoluciones : this.$root.pedido.total)
- }
},
- methods: {
- modificarDevoluciones: function() {
- Event.$emit("modificar-devoluciones");
- },
- }
}
</script>
<style>
-@media (max-width: 719px) {
- .chismosa-tabla {
- max-width: 80vw;
+ .tabla-chismosa {
+ width: 100%;
}
-}
-</style>
+ .fixed-right {
+ position: fixed;
+ overflow-y: auto;
+ max-height: 81vh;
+ margin-right: 20px;
+ }
+</style>
\ No newline at end of file
diff --git a/resources/js/components/ChismosaDropdown.vue b/resources/js/components/ChismosaDropdown.vue
index 9e8c834..26bb8e3 100644
--- a/resources/js/components/ChismosaDropdown.vue
+++ b/resources/js/components/ChismosaDropdown.vue
@@ -5,16 +5,9 @@
<span class="icon is-small mr-1">
<img src="/assets/chismosa.png">
</span>
- <span v-text="'$' + this.$limpiarInt($root.devoluciones ? $root.pedido.total_menos_devoluciones : $root.pedido.total)"></span>
+ <span v-text="'$' + total"></span>
</a>
</div>
- <div class="dropdown-menu chismosa-menu" :id="id" role="menu">
- <div class="dropdown-content">
- <div class="dropdown-item">
- <chismosa></chismosa>
- </div>
- </div>
- </div>
</div>
</template>
@@ -32,33 +25,21 @@ export default {
},
data() {
return {
- activa: false
+ activa: false,
+ total: 0,
}
},
+ mounted() {
+ Event.$on('pedido-actualizado', this.actualizar);
+ },
methods: {
toggle() {
- this.activa = !this.activa
+ this.activa = !this.activa;
+ Event.$emit("toggle-chismosa", this.activa);
+ },
+ actualizar() {
+ this.total = this.$limpiarInt(this.$root.devoluciones ? this.$root.pedido.total_menos_devoluciones : this.$root.pedido.total);
},
},
}
</script>
-
-<style>
-
-@media (max-width: 719px) {
- .chismosa-menu {
- vertical-align: top;
- overflow-y: auto;
- max-height: 75vh;
- max-width: 100vw;
- }
-}
-
-@media (min-width: 720px) {
- .chismosa-menu {
- vertical-align: top;
- overflow-y: auto;
- max-height: 75vh;
- }
-}
-</style>
diff --git a/resources/js/components/PedidoBody.vue b/resources/js/components/PedidoBody.vue
new file mode 100644
index 0000000..d8e671d
--- /dev/null
+++ b/resources/js/components/PedidoBody.vue
@@ -0,0 +1,31 @@
+<template>
+ <div class="columns ml-3 mr-3">
+ <categorias-container :class="chismosaActiva ? 'hide-below-1024' : ''"></categorias-container>
+ <productos-container :class="chismosaActiva ? 'hide-below-1024' : ''"></productos-container>
+ <chismosa v-show="chismosaActiva"></chismosa>
+ </div>
+</template>
+
+<script>
+ import Chismosa from './Chismosa.vue';
+ import ProductosContainer from './ProductosContainer.vue';
+ import CategoriasContainer from './CategoriasContainer.vue';
+
+ export default {
+ componets: {
+ Chismosa,
+ ProductosContainer,
+ CategoriasContainer,
+ },
+ data() {
+ return {
+ chismosaActiva: false,
+ }
+ },
+ mounted() {
+ Event.$on('toggle-chismosa', (activa) => {
+ this.chismosaActiva = activa;
+ });
+ },
+ }
+</script>
diff --git a/resources/js/components/Producto/ProductoCantidad.vue b/resources/js/components/Producto/ProductoCantidad.vue
new file mode 100644
index 0000000..93ec5cd
--- /dev/null
+++ b/resources/js/components/Producto/ProductoCantidad.vue
@@ -0,0 +1,100 @@
+<template>
+ <div class="field has-addons contador">
+ <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-1" @click="confirmar()">
+ <span class="icon">
+ <i class="fas fa-check"></i>
+ </span>
+ </button>
+ <button :disabled="!puedeBorrar()" class="button is-small is-danger ml-1" @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() {
+ if (this.producto.pivot !== undefined) {
+ this.cantidad = this.producto.pivot.cantidad;
+ this.enChismosa = this.cantidad;
+ }
+ 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;
+ if (this.producto.pivot != null) {
+ this.producto.pivot.cantidad = cantidad;
+ } else {
+ 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;
+ }
+
+ .contador {
+ min-width: 178px;
+ }
+</style>
\ No newline at end of file
diff --git a/resources/js/components/ProductoCard.vue b/resources/js/components/ProductoCard.vue
index 1d5cc0d..1ee70b6 100644
--- a/resources/js/components/ProductoCard.vue
+++ b/resources/js/components/ProductoCard.vue
@@ -1,6 +1,11 @@
<script>
+import ProductoCantidad from './Producto/ProductoCantidad.vue';
+
export default {
name: "ProductoCard",
+ components: {
+ ProductoCantidad,
+ },
props: {
producto: Object
},
@@ -71,32 +76,7 @@ export default {
</div>
<footer class="columns">
<div class="column is-three-quarters">
- <div class="field has-addons">
- <div class="control">
- <button :disabled="cantidad < 1" 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() || cantidad < 0" 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>
- Notas: <input v-model="notas" />
+ <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>
diff --git a/resources/js/components/ProductoRow.vue b/resources/js/components/ProductoRow.vue
index 1edad25..8767667 100644
--- a/resources/js/components/ProductoRow.vue
+++ b/resources/js/components/ProductoRow.vue
@@ -1,27 +1,21 @@
<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="eliminarProducto()" class="button is-danger">
- <span class="icon">
- <i class="fas fa-trash-alt"></i>
- </span>
- </button></td>
</tr>
</template>
<script>
- export default {
+ import ProductoCantidad from './Producto/ProductoCantidad.vue';
+
+ export default {
+ components: {
+ ProductoCantidad,
+ },
props: {
producto: Object
},
- methods: {
- seleccionarProducto() {
- Event.$emit("producto-seleccionado",this.producto);
- },
- eliminarProducto() {
- Event.$emit("sync-subpedido", 0, this.producto.id);
- }
- }
}
</script>
diff --git a/resources/js/components/ProductosContainer.vue b/resources/js/components/ProductosContainer.vue
index 6c22916..3f34f15 100644
--- a/resources/js/components/ProductosContainer.vue
+++ b/resources/js/components/ProductosContainer.vue
@@ -1,5 +1,5 @@
<template>
- <div v-show="visible" class="block ml-6 mr-6">
+ <div v-show="visible" class="column">
<div class="columns is-multiline is-mobile">
<producto-card v-for="(producto,i) in productos" :key="i" :producto="producto">
</producto-card><!-- END BLOCK COLUMN -->
diff --git a/resources/views/productos.blade.php b/resources/views/productos.blade.php
index fd29893..d3877a4 100644
--- a/resources/views/productos.blade.php
+++ b/resources/views/productos.blade.php
@@ -1,9 +1,6 @@
@extends('layouts.app')
@section('content')
-<chismosa></chismosa>
-<categorias-container></categorias-container>
-<productos-container></productos-container>
-<producto-modal></producto-modal>
+<pedido-body></pedido-body>
<devoluciones-modal></devoluciones-modal>
@endsection