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

ProductosContainer.vue usa ProductoCard.vue

This commit is contained in:
Alejandro Tasistro 2024-08-29 22:51:46 -03:00
parent 781ef8a7a1
commit ddd8d57d2b
1 changed files with 8 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
resources/js/components/ProductosContainer.vue
View File

@ -1,63 +1,17 @@
<template> <template>
<div v-show="visible" class="container is-max-desktop"> <div v-show="visible" class="container is-max-desktop">
<div class="columns is-multiline is-mobile"> <div class="columns is-multiline is-mobile">
<div v-for="(producto,i) in productos" :key="i" class="block column is-half-desktop is-full-mobile is-full-tablet"> <producto-card v-for="(producto,i) in productos" :key="i" :producto="producto" class="block column is-half-desktop is-full-mobile is-full-tablet">
<div @click.capture="seleccionarProducto(producto)" class="box" style="height:100%"> </producto-card><!-- END BLOCK COLUMN -->
<div class="columns">
<div class="column is-three-quarters">
<p class="title is-6">
{{ producto.nombre }}
</p>
<p class="subtitle is-7" v-text="producto.proveedor"></p>
</div>
<div class="column is-one-quarter has-text-right">
<p class="has-text-weight-bold has-text-primary">$<span v-text="producto.precio"></span></p>
<p class="subtitle is-7" v-if="producto.cantidad !== 0">{{ producto.cantidad }} en chismosa</p>
</div>
</div>
<footer class="columns">
<div class="column is-three-quarters">
<div class="field has-addons">
<div class="control">
<button class="button is-small">
<i class="fa fa-solid fa-minus"></i>
</button>
</div>
<div class="control">
<input id="cantidad" v-model="producto.cantidad" class="input is-small" type="number" style="text-align: center">
</div>
<div class="control">
<button class="button is-small">
<i class="fa fa-solid fa-plus"></i>
</button>
</div>
<button class="button is-small is-success ml-3">
<span class="icon">
<i class="fas fa-check"></i>
</span>
</button>
<button class="button is-small is-danger ml-3">
<span class="icon">
<i class="fas fa-trash-alt"></i>
</span>
</button>
</div>
</div>
<div class="column is-one-quarter has-text-right">
<p>
<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"/>
</p>
</div>
</footer>
</div><!-- END BOX -->
</div><!-- END BLOCK COLUMN -->
</div><!-- END COLUMNS --> </div><!-- END COLUMNS -->
</div><!-- END CONTAINER --> </div><!-- END CONTAINER -->
</template> </template>
<script> <script>
import ProductoCard from "./ProductoCard.vue";
export default { export default {
components: {ProductoCard},
data() { data() {
return { return {
productos: [], productos: [],
@ -90,14 +44,10 @@ export default {
}); });
}, },
methods: { methods: {
seleccionarProducto(producto) { params(filtro,valor) {
Event.$emit("producto-seleccionado",producto);
},
params: function(filtro,valor) {
let params = { paginar: this.paginar } let params = { paginar: this.paginar }
params[filtro] = valor params[filtro] = valor
return params return params
},
} }
} }</script>
}
</script>