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

Compare commits

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

No commits in common. "39e1eaddcf38a7d1d28b19c419bf0834d7f73747" and "11d18ad4a5d521ffa57e225ce043a2579f5fe247" have entirely different histories.
39e1eaddcf ... 11d18ad4a5

2 changed files with 76 additions and 59 deletions
Show stats Expand all files Collapse all files

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

@ -2,45 +2,55 @@
<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">
<section class="modal-card-head"> <header class="modal-card-head">
<div class="media-content"> <p class="modal-card-title" v-text="producto.nombre"></p>
<p class="modal-card-title"> <button class="delete" aria-label="close" @click.capture="cerrar"></button>
{{ producto.nombre }} </header>
<img v-show="producto.nacional" height="24px" width="24px" src="/assets/uruguay.png" />
<img v-show="producto.economia_solidaria" height="24px" width="24px" src="/assets/solidaria.png">
</p>
<p class="subtitle" v-show="producto.proveedor" v-text="producto.proveedor"></p>
<p class="subtitle is-6" v-show="producto.apto_veganxs">Apto para veganxs.</p>
<p class="subtitle is-6" v-show="producto.apto_celiacxs">Apto para celíacxs.</p>
</div>
</section>
<section class="modal-card-body"> <section class="modal-card-body">
<p class="subtitle is-3 has-text-weight-bold has-text-primary has-text-centered">${{ producto.precio }}</p> <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">
<p class="title is-4" v-text="producto.proveedor"></p>
<p class="subtitle is-4">$<span v-text="producto.precio"></span></p>
<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>
<p class="subtitle is-5"><span v-text="producto.descripcion"></span></p>
<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 class="control">
<input id="cantidad" class="input" type="number" v-model.number="cantidad" style="text-align: center">
</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>
</section> </section>
<footer class="modal-card-foot"> <footer class="modal-card-foot">
<div class="level"> <!-- Habría que ver si cambiar el botón cuando al cantidad es 0 -->
<div class="level-item has-text-centered"> <button class="button is-success" :disabled="cantidad <= 0" @click="agregarProducto">Aceptar</button>
<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,23 +1,30 @@
<template> <template>
<div v-show="visible" class="container is-max-desktop"> <div v-show="visible" class="container">
<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-full"> <div v-for="(producto,i) in productos" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
<div @click.capture="seleccionarProducto(producto)" class="box" style="height:100%"> <div @click.capture="seleccionarProducto(producto)" class="card" style="height:100%">
<div class="columns"> <div class="card-image">
<div class="column is-half"> <figure class="image is-4by3">
<p class="title is-6"> <img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
{{ producto.nombre }} </figure>
<img v-show="producto.nacional" height="20px" width="20px" src="/assets/uruguay.png" /> <figure v-show="producto.nacional" class="image icono is-32x32">
<img v-show="producto.economia_solidaria" height="20px" width="20px" src="/assets/solidaria.png"> <img src="/assets/uruguay.png">
</p> </figure>
<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>
</div> <p class="subtitle is-7">$<span v-text="producto.precio"></span></p>
<div class="column is-half has-text-right"> <p class="subtitle has-text-right is-7" v-if="producto.cantidad != 0"><span v-text="producto.cantidad"></span> en chismosa</p>
<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><!-- END BOX --> </div>
</div><!-- END CARD -->
</div><!-- END BLOCK COLUMN --> </div><!-- END BLOCK COLUMN -->
</div><!-- END COLUMNS --> </div><!-- END COLUMNS -->
</div><!-- END CONTAINER --> </div><!-- END CONTAINER -->