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

Cambio en layout de productos

Browse source
This commit is contained in:
Alejandro Tasistro 2025-05-27 23:38:37 -03:00
parent a641247748
commit 4b4a284914
2 changed files with 81 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
resources/js/components/pedidos/ProductoCard.vue
View file

@ -24,37 +24,35 @@ export default {
</script> </script>
<template> <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="box" style="height:100%"> <div class="columns">
<div class="columns"> <div class="column">
<div class="column"> <p class="title is-6">
<p class="title is-6"> {{ producto.nombre }}
{{ producto.nombre }} </p>
</p> <span class="subtitle is-7 hidden-from-tablet" v-if="fuePedido">{{ cantidadEnChismosa }}</span>
<span class="subtitle is-7 hidden-from-tablet" v-if="fuePedido">{{ cantidadEnChismosa }}</span> </div>
</div> <div class="column is-one-quarter has-text-right">
<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"> <span class="is-left-mobile">
<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.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"/>
<img v-show="producto.nacional" height="30px" width="30px" src="/assets/uruguay.png" alt="proveedor nacional"/> </span>
</span> $<span v-text="producto.precio"></span>
$<span v-text="producto.precio"></span> </p>
</p>
</div>
</div> </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> </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> </div>
</template> </template>

60
resources/js/components/pedidos/ProductosContainer.vue
View file

@ -1,11 +1,13 @@
<template> <template>
<div v-show="visible" class="column"> <div v-show="visible" class="column">
<div class="columns is-multiline is-mobile"> <div class="columns is-multiline is-mobile"
<producto-card :class="{ 'align-last-left': isLastRowIncomplete }">
v-for="(producto,i) in this.productos" <div v-for="(producto,i) in this.productos"
:key="i" class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
:producto="producto"> <producto-card :key="i"
</producto-card> :producto="producto">
</producto-card>
</div>
</div> </div>
</div> </div>
</template> </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> </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>