Mejoras estéticas y cambios cuando el pedido está aprobado
This commit is contained in:
parent
2ee7fca584
commit
210c91f3a8
3 changed files with 51 additions and 33 deletions
|
|
@ -1,32 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="field has-addons contador">
|
||||
<div class="is-justify-content-center">
|
||||
<div class="field has-addons is-justify-content-center contador">
|
||||
<div class="control">
|
||||
<button class="button is-small" :disabled="cantidadControl < 1" @click.capture="decrementar();">
|
||||
<button class="button is-small" :disabled="cantidadControl < 1" v-if="!aprobado" @click.capture="decrementar();">
|
||||
<i class="fa fa-solid fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input id="cantidad" v-model="cantidadControl" class="input is-small" type="number"
|
||||
style="text-align: center">
|
||||
<input id="cantidad"
|
||||
v-model="cantidadControl"
|
||||
class="input is-small"
|
||||
type="number"
|
||||
style="text-align: center"
|
||||
:readonly="aprobado">
|
||||
</div>
|
||||
<div class="control" @click="incrementar();">
|
||||
<button class="button is-small">
|
||||
<div class="control">
|
||||
<button class="button is-small" v-if="!aprobado" @click="incrementar();">
|
||||
<i class="fa fa-solid fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button :disabled="!hayCambios || cantidadControl < 0" class="button is-small is-success ml-1" @click="confirmar()">
|
||||
<button :disabled="!hayCambios || cantidadControl < 0" v-if="!aprobado" class="button is-small is-success ml-1" @click="confirmar()">
|
||||
<span class="icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button :disabled="!puedeBorrar" class="button is-small is-danger ml-1" @click="borrar()">
|
||||
<button :disabled="!puedeBorrar" v-if="!aprobado" class="button is-small is-danger ml-1" @click="borrar()">
|
||||
<span class="icon">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="requiere_notas" :class="{'has-icons-right': notas_warning_visible}"
|
||||
<div v-if="!aprobado && requiere_notas"
|
||||
:class="{'has-icons-right': notas_warning_visible}"
|
||||
class="control is-full-width has-icons-left">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-sticky-note"></i>
|
||||
|
|
@ -45,7 +50,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from "vuex";
|
||||
import { mapActions, mapGetters, mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -77,6 +82,7 @@ export default {
|
|||
this.actualizar();
|
||||
},
|
||||
computed: {
|
||||
...mapState('pedido', ["aprobado"]),
|
||||
...mapGetters('pedido', ["enChismosa", "cantidad", "notas"]),
|
||||
cantidadEnChismosa() {
|
||||
return this.cantidad(this.producto_id);
|
||||
|
|
@ -88,7 +94,7 @@ export default {
|
|||
return this.cantidadControl !== this.cantidadEnChismosa || this.notasControl !== this.notasEnChismosa;
|
||||
},
|
||||
puedeBorrar() {
|
||||
return this.enChismosa(this.producto_id);
|
||||
return this.enChismosa(this.producto_id) && !this.aprobado;
|
||||
},
|
||||
faltaNotas() {
|
||||
return this.requiere_notas && this.cantidadControl > 0 && !this.notasControl;
|
||||
|
|
@ -140,7 +146,7 @@ input[type=number] {
|
|||
}
|
||||
|
||||
.contador {
|
||||
min-width: 178px;
|
||||
min-width: 1.5rem;
|
||||
}
|
||||
|
||||
.is-danger {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import ProductoCantidad from "./ProductoCantidad.vue";
|
||||
import { mapGetters } from "vuex";
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "ProductoCard",
|
||||
|
|
@ -12,12 +12,17 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('pedido',["enChismosa", "cantidad"]),
|
||||
...mapState('ui', ["show_chismosa"]),
|
||||
...mapState('pedido', ["aprobado"]),
|
||||
...mapGetters('pedido', ["enChismosa", "cantidad"]),
|
||||
fuePedido() {
|
||||
return this.enChismosa(this.producto.id);
|
||||
},
|
||||
cantidadEnChismosa() {
|
||||
return this.cantidad(this.producto.id);
|
||||
},
|
||||
conIconos() {
|
||||
return this.producto.economia_solidaria || this.producto.nacional;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -25,32 +30,37 @@ export default {
|
|||
|
||||
<template>
|
||||
<div class="box" style="height:100%">
|
||||
<div class="columns">
|
||||
<div class="columns is-mobile">
|
||||
<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 class="has-text-weight-bold has-text-primary block">
|
||||
${{ producto.precio }}
|
||||
</p>
|
||||
</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>
|
||||
<footer>
|
||||
<div class="columns is-justify-content-left is-mobile">
|
||||
<div v-if="conIconos" class="column has-text-left">
|
||||
<span>
|
||||
<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>
|
||||
</div>
|
||||
<div class="column"
|
||||
:class="conIconos ? 'is-three-quarters-mobile is-two-thirds-tablet' : 'is-full'">
|
||||
<producto-cantidad
|
||||
v-if="!aprobado"
|
||||
:producto_id="producto.id"
|
||||
:requiere_notas="producto.requiere_notas">
|
||||
</producto-cantidad>
|
||||
<div class="has-text-centered mt-2" v-if="fuePedido && aprobado">
|
||||
<p class="subtitle is-7">{{ cantidadEnChismosa }} en chismosa</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
class="columns is-multiline is-mobile"
|
||||
:class="{ 'align-last-left': isLastRowIncomplete }">
|
||||
<div v-for="(producto,i) in this.productos"
|
||||
class="block column is-full-mobile is-half-tablet is-one-third-desktop is-one-quarter-fullhd">
|
||||
class="block column is-full-mobile is-half-tablet is-one-quarter-fullhd"
|
||||
:class="show_chismosa ? 'is-half-desktop' : 'is-one-third-desktop'">
|
||||
<producto-card :key="i"
|
||||
:producto="producto">
|
||||
</producto-card>
|
||||
|
|
@ -21,6 +22,7 @@ export default {
|
|||
components: { ProductoCard },
|
||||
computed: {
|
||||
...mapState('productos', ["productos", "filtro"]),
|
||||
...mapState('ui', ["show_chismosa"]),
|
||||
visible() {
|
||||
return this.filtro !== null;
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue