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

Compare commits

base: nathalie:11d18ad4a5d521ffa57e225ce043a2579f5fe247
Branches Tags
nathalie:master
nathalie:funcion/pedido-ollas
nathalie:funcion/actualizaciones
nathalie:backup-90
..
compare: nathalie:39e1eaddcf38a7d1d28b19c419bf0834d7f73747
Branches Tags
nathalie:funcion/pedido-ollas
nathalie:funcion/actualizaciones
nathalie:master
nathalie:backup-90

3 commits
11d18ad4a5 ... 39e1eaddcf

Author SHA1 Message Date
Rodrigo
39e1eaddcf Poner cantidad 0 saca el producto de la chismosa 2024-08-27 23:32:38 -03:00
Rodrigo
5ca11324a0 Modal de producto ajustado 2024-08-27 23:27:18 -03:00
Rodrigo
758c425f91 Las cards de productos ahora son boxes en lista 2024-08-27 22:51:31 -03:00
2 changed files with 59 additions and 76 deletions
Show stats Expand all files Collapse all files

76
resources/js/components/ProductoModal.vue
View file

@ -2,55 +2,45 @@
<div v-bind:class="visible ? 'is-active modal' : 'modal'"> <div v-bind:class="visible ? 'is-active modal' : 'modal'">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <section class="modal-card-head">
<p class="modal-card-title" v-text="producto.nombre"></p>
<button class="delete" aria-label="close" @click.capture="cerrar"></button>
</header>
<section class="modal-card-body">
<div class="card-image">
<figure v-show="producto.nacional" class="image icono is-32x32" style="z-index:10">
<img src="/assets/uruguay.png">
</figure>
<figure v-show="producto.economia_solidaria" class="image icono is-32x32" style="z-index:10">
<img src="/assets/solidaria.png">
</figure>
<figure class="image is-4by3">
<img
v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
</figure>
</div>
<div class="media-content"> <div class="media-content">
<p class="title is-4" v-text="producto.proveedor"></p> <p class="modal-card-title">
<p class="subtitle is-4">$<span v-text="producto.precio"></span></p> {{ producto.nombre }}
<p class="subtitle is-6"><span v-show="producto.apto_veganxs">Apto para veganxs. </span><span v-show="producto.apto_celiacxs">Apto para celíacxs.</span></p> <img v-show="producto.nacional" height="24px" width="24px" src="/assets/uruguay.png" />
<p class="subtitle is-5"><span v-text="producto.descripcion"></span></p> <img v-show="producto.economia_solidaria" height="24px" width="24px" src="/assets/solidaria.png">
<div class="field has-addons is-centered is-thin-centered">
<p class="control">
<button class="button" @click="cantidad !== 0 ? cantidad-- : cantidad">
<span class="icon is-small">
<!-- Habría que ver de poner un ícono de - -->
</span>
<span>-</span>
</button>
</p> </p>
<p class="control"> <p class="subtitle" v-show="producto.proveedor" v-text="producto.proveedor"></p>
<input id="cantidad" class="input" type="number" v-model.number="cantidad" style="text-align: center"> <p class="subtitle is-6" v-show="producto.apto_veganxs">Apto para veganxs.</p>
</p> <p class="subtitle is-6" v-show="producto.apto_celiacxs">Apto para celíacxs.</p>
<p class="control">
<button class="button" @click="cantidad++">
<span class="icon is-small">
<!-- Habría que ver de poner un ícono de + -->
</span>
<span>+</span>
</button>
</p>
</div>
</div> </div>
</section> </section>
<section class="modal-card-body">
<p class="subtitle is-3 has-text-weight-bold has-text-primary has-text-centered">${{ producto.precio }}</p>
</section>
<footer class="modal-card-foot"> <footer class="modal-card-foot">
<!-- Habría que ver si cambiar el botón cuando al cantidad es 0 --> <div class="level">
<button class="button is-success" :disabled="cantidad <= 0" @click="agregarProducto">Aceptar</button> <div class="level-item has-text-centered">
<div class="field has-addons">
<div class="control">
<button class="button" @click="cantidad !== 0 ? cantidad-- : cantidad">
<i class="fa fa-solid fa-minus"></i>
</button>
</div>
<div class="control">
<input id="cantidad" class="input" type="number" v-model.number="cantidad" style="text-align: center">
</div>
<div class="control">
<button class="button" @click="cantidad++">
<i class="fa fa-solid fa-plus"></i>
</button>
</div>
</div>
</div>
<div class="level-item has-text-centered">
<button class="button" @click.capture="cerrar">Cancelar</button> <button class="button" @click.capture="cerrar">Cancelar</button>
<button class="button is-success" @click="agregarProducto">Aceptar</button>
</div>
</div>
</footer> </footer>
</div> </div>
</div> </div>

37
resources/js/components/ProductosContainer.vue
View file

@ -1,30 +1,23 @@
<template> <template>
<div v-show="visible" class="container"> <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-one-quarter-desktop is-one-third-tablet is-half-mobile"> <div v-for="(producto,i) in productos" :key="i" class="block column is-full">
<div @click.capture="seleccionarProducto(producto)" class="card" style="height:100%"> <div @click.capture="seleccionarProducto(producto)" class="box" style="height:100%">
<div class="card-image"> <div class="columns">
<figure class="image is-4by3"> <div class="column is-half">
<img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'"> <p class="title is-6">
</figure> {{ producto.nombre }}
<figure v-show="producto.nacional" class="image icono is-32x32"> <img v-show="producto.nacional" height="20px" width="20px" src="/assets/uruguay.png" />
<img src="/assets/uruguay.png"> <img v-show="producto.economia_solidaria" height="20px" width="20px" src="/assets/solidaria.png">
</figure> </p>
<figure v-show="producto.economia_solidaria" class="image icono is-32x32">
<img src="/assets/solidaria.png">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-6" v-text="producto.nombre"></p>
<p class="subtitle is-7" v-text="producto.proveedor"></p> <p class="subtitle is-7" v-text="producto.proveedor"></p>
<p class="subtitle is-7">$<span v-text="producto.precio"></span></p> </div>
<p class="subtitle has-text-right is-7" v-if="producto.cantidad != 0"><span v-text="producto.cantidad"></span> en chismosa</p> <div class="column is-half 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>
</div> </div>
</div> </div><!-- END BOX -->
</div><!-- END CARD -->
</div><!-- END BLOCK COLUMN --> </div><!-- END BLOCK COLUMN -->
</div><!-- END COLUMNS --> </div><!-- END COLUMNS -->
</div><!-- END CONTAINER --> </div><!-- END CONTAINER -->