From 4b4a2849143d471e6a4699832adead4bf4e63538 Mon Sep 17 00:00:00 2001
From: ale <ale.tasistro@gmail.com>
Date: Tue, 27 May 2025 23:38:37 -0300
Subject: [PATCH] Cambio en layout de productos

---
 .../js/components/pedidos/ProductoCard.vue    | 56 +++++++++--------
 .../components/pedidos/ProductosContainer.vue | 60 +++++++++++++++++--
 2 files changed, 81 insertions(+), 35 deletions(-)

diff --git a/resources/js/components/pedidos/ProductoCard.vue b/resources/js/components/pedidos/ProductoCard.vue
index fa3a978..1b560a0 100644
--- a/resources/js/components/pedidos/ProductoCard.vue
+++ b/resources/js/components/pedidos/ProductoCard.vue
@@ -24,37 +24,35 @@ export default {
 </script>
 
 <template>
-    <div class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
-        <div class="box" style="height:100%">
-            <div class="columns">
-                <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">
-                        <span class="is-left-mobile">
-                            <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 class="box" style="height:100%">
+        <div class="columns">
+            <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">
+                    <span class="is-left-mobile">
+                        <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>
-            <footer class="columns">
-                <div class="column is-three-quarters">
-                    <producto-cantidad
-                        :producto_id="producto.id"
-                        :requiere_notas="producto.requiere_notas">
-                    </producto-cantidad>
-                </div>
-                <div class="column">
-                    <p class="subtitle is-7 is-hidden-mobile" v-if="fuePedido">{{ cantidadEnChismosa }} en chismosa</p>
-                </div>
-            </footer>
         </div>
+        <footer class="columns">
+            <div class="column is-three-quarters">
+                <producto-cantidad
+                    :producto_id="producto.id"
+                    :requiere_notas="producto.requiere_notas">
+                </producto-cantidad>
+            </div>
+            <div class="column">
+                <p class="subtitle is-7 is-hidden-mobile" v-if="fuePedido">{{ cantidadEnChismosa }} en chismosa</p>
+            </div>
+        </footer>
     </div>
 </template>
 
diff --git a/resources/js/components/pedidos/ProductosContainer.vue b/resources/js/components/pedidos/ProductosContainer.vue
index 70c8772..ef9b817 100644
--- a/resources/js/components/pedidos/ProductosContainer.vue
+++ b/resources/js/components/pedidos/ProductosContainer.vue
@@ -1,11 +1,13 @@
 <template>
     <div v-show="visible" class="column">
-        <div class="columns is-multiline is-mobile">
-            <producto-card
-                v-for="(producto,i) in this.productos"
-                :key="i"
-                :producto="producto">
-            </producto-card>
+        <div class="columns is-multiline is-mobile"
+             :class="{ 'align-last-left': isLastRowIncomplete }">
+            <div v-for="(producto,i) in this.productos"
+                 class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
+                <producto-card :key="i"
+                    :producto="producto">
+                </producto-card>
+            </div>
         </div>
     </div>
 </template>
@@ -28,5 +30,51 @@ export default {
             }
         }
     },
+    methods: {
+        checkIfLastRowIncomplete() {
+            this.$nextTick(() => {
+                const wrapper = this.$refs.columnsWrapper;
+                if (!wrapper) return;
+
+                const columns = wrapper.querySelectorAll('.column');
+                if (columns.length === 0) {
+                    this.isLastRowIncomplete = false;
+                    return;
+                }
+
+                const firstRowTop = columns[0].offsetTop;
+
+                let firstRowCount = 0;
+                columns.forEach(col => {
+                    if (col.offsetTop === firstRowTop) firstRowCount++;
+                });
+
+                this.isLastRowIncomplete = this.productos.length % firstRowCount !== 0;
+            });
+        }
+    },
+    data() {
+        return {
+            isLastRowIncomplete: false
+        }
+    },
+    mounted() {
+        this.checkIfLastRowIncomplete();
+        window.addEventListener('resize', this.checkIfLastRowIncomplete);
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.checkIfLastRowIncomplete);
+    },
 }
 </script>
+
+<style>
+.columns.align-last-left {
+    justify-content: flex-start !important;
+}
+.columns.align-last-left > .column:last-child:nth-child(3n),
+.columns.align-last-left > .column:last-child:nth-child(2n),
+.columns.align-last-left > .column:last-child {
+    margin-right: auto;
+}
+</style>