Mejoras estéticas y cambios cuando el pedido está aprobado

resources/js/components/pedidos/ProductoCantidad.vue

@@ -1,32 +1,37 @@
 <template>
-    <div>
+    <div class="is-justify-content-center">
-        <div class="field has-addons contador">
+        <div class="field has-addons is-justify-content-center contador">
             <div class="control">
-                <button class="button is-small" :disabled="cantidadControl < 1" @click.capture="decrementar();">
+                <button class="button is-small" :disabled="cantidadControl < 1" v-if="!aprobado"  @click.capture="decrementar();">
                     <i class="fa fa-solid fa-minus"></i>
                 </button>
             </div>
             <div class="control">
-                <input id="cantidad" v-model="cantidadControl" class="input is-small" type="number"
+                <input id="cantidad"
-                       style="text-align: center">
+                       v-model="cantidadControl"
+                       class="input is-small"
+                       type="number"
+                       style="text-align: center"
+                       :readonly="aprobado">
             </div>
-            <div class="control" @click="incrementar();">
+            <div class="control">
-                <button class="button is-small">
+                <button class="button is-small" v-if="!aprobado" @click="incrementar();">
                     <i class="fa fa-solid fa-plus"></i>
                 </button>
             </div>
-            <button :disabled="!hayCambios || cantidadControl < 0" class="button is-small is-success ml-1" @click="confirmar()">
+            <button :disabled="!hayCambios || cantidadControl < 0" v-if="!aprobado" 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()">
+            <button :disabled="!puedeBorrar" v-if="!aprobado"  class="button is-small is-danger ml-1" @click="borrar()">
                 <span class="icon">
                     <i class="fas fa-trash-alt"></i>
                 </span>
             </button>
         </div>
-        <div v-if="requiere_notas" :class="{'has-icons-right': notas_warning_visible}"
+        <div v-if="!aprobado && requiere_notas"
+             :class="{'has-icons-right': notas_warning_visible}"
              class="control is-full-width has-icons-left">
             <span class="icon is-small is-left">
                 <i class="fas fa-sticky-note"></i>
@@ -45,7 +50,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from "vuex";
+import { mapActions, mapGetters, mapState } from "vuex";
 
 export default {
     props: {
@@ -77,6 +82,7 @@ export default {
         this.actualizar();
     },
     computed: {
+        ...mapState('pedido', ["aprobado"]),
         ...mapGetters('pedido', ["enChismosa", "cantidad", "notas"]),
         cantidadEnChismosa() {
             return this.cantidad(this.producto_id);
@@ -88,7 +94,7 @@ export default {
             return this.cantidadControl !== this.cantidadEnChismosa || this.notasControl !== this.notasEnChismosa;
         },
         puedeBorrar() {
-            return this.enChismosa(this.producto_id);
+            return this.enChismosa(this.producto_id) && !this.aprobado;
         },
         faltaNotas() {
             return this.requiere_notas && this.cantidadControl > 0 && !this.notasControl;
@@ -140,7 +146,7 @@ input[type=number] {
 }
 
 .contador {
-    min-width: 178px;
+    min-width: 1.5rem;
 }
 
 .is-danger {

resources/js/components/pedidos/ProductoCard.vue

@@ -1,6 +1,6 @@
 <script>
 import ProductoCantidad from "./ProductoCantidad.vue";
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 
 export default {
     name: "ProductoCard",
@@ -12,12 +12,17 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('pedido',["enChismosa", "cantidad"]),
+        ...mapState('ui', ["show_chismosa"]),
+        ...mapState('pedido', ["aprobado"]),
+        ...mapGetters('pedido', ["enChismosa", "cantidad"]),
         fuePedido() {
             return this.enChismosa(this.producto.id);
         },
         cantidadEnChismosa() {
             return this.cantidad(this.producto.id);
+        },
+        conIconos() {
+            return this.producto.economia_solidaria || this.producto.nacional;
         }
     },
 }
@@ -25,32 +30,37 @@ export default {
 
 <template>
     <div class="box" style="height:100%">
-        <div class="columns">
+        <div class="columns is-mobile">
             <div class="column">
                 <p class="title is-6">
                     {{ producto.nombre }}
                 </p>
-                <span class="subtitle is-7 hidden-from-tablet" v-if="fuePedido">{{ cantidadEnChismosa }}</span>
             </div>
             <div class="column is-one-quarter has-text-right">
-                <p class="has-text-weight-bold has-text-primary">
+                <p class="has-text-weight-bold has-text-primary block">
-                    <span class="is-left-mobile">
+                    ${{ producto.precio }}
-                        <img v-show="producto.economia_solidaria" height="30px" width="30px" src="/assets/solidaria.png" alt="proveedor de economía solidaria">
-                        <img v-show="producto.nacional" height="30px" width="30px" src="/assets/uruguay.png" alt="proveedor nacional"/>
-                    </span>
-                    $<span v-text="producto.precio"></span>
                 </p>
             </div>
         </div>
-        <footer class="columns">
+        <footer>
-            <div class="column is-three-quarters">
+            <div class="columns is-justify-content-left is-mobile">
-                <producto-cantidad
+                <div v-if="conIconos" class="column has-text-left">
-                    :producto_id="producto.id"
+                    <span>
-                    :requiere_notas="producto.requiere_notas">
+                        <img v-show="producto.economia_solidaria" height="30px" width="30px" src="/assets/solidaria.png" alt="proveedor de economía solidaria">
-                </producto-cantidad>
+                        <img v-show="producto.nacional" height="30px" width="30px" src="/assets/uruguay.png" alt="proveedor nacional"/>
-            </div>
+                    </span>
-            <div class="column">
+                </div>
-                <p class="subtitle is-7 is-hidden-mobile" v-if="fuePedido">{{ cantidadEnChismosa }} en chismosa</p>
+                <div class="column"
+                     :class="conIconos ? 'is-three-quarters-mobile is-two-thirds-tablet' : 'is-full'">
+                    <producto-cantidad
+                        v-if="!aprobado"
+                        :producto_id="producto.id"
+                        :requiere_notas="producto.requiere_notas">
+                    </producto-cantidad>
+                    <div class="has-text-centered mt-2" v-if="fuePedido && aprobado">
+                        <p class="subtitle is-7">{{ cantidadEnChismosa }} en chismosa</p>
+                    </div>
+                </div>
             </div>
         </footer>
     </div>

resources/js/components/pedidos/ProductosContainer.vue

@@ -4,7 +4,8 @@
              class="columns is-multiline is-mobile"
              :class="{ 'align-last-left': isLastRowIncomplete }">
             <div v-for="(producto,i) in this.productos"
-                 class="block column is-full-mobile is-half-tablet is-one-third-desktop is-one-quarter-fullhd">
+                 class="block column is-full-mobile is-half-tablet is-one-quarter-fullhd"
+                :class="show_chismosa ? 'is-half-desktop' : 'is-one-third-desktop'">
                 <producto-card :key="i"
                     :producto="producto">
                 </producto-card>
@@ -21,6 +22,7 @@ export default {
     components: { ProductoCard },
     computed: {
         ...mapState('productos', ["productos", "filtro"]),
+        ...mapState('ui', ["show_chismosa"]),
         visible() {
             return this.filtro !== null;
         },