154 lines
4.5 KiB
Vue
154 lines
4.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="field has-addons contador">
|
|
<div class="control">
|
|
<button class="button is-small" @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">
|
|
</div>
|
|
<div class="control" @click="incrementar();">
|
|
<button class="button is-small">
|
|
<i class="fa fa-solid fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<button :disabled="!hayCambios" 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()">
|
|
<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}"
|
|
class="control is-full-width has-icons-left">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-sticky-note"></i>
|
|
</span>
|
|
<input v-model="notasControl" v-bind:class="{'is-danger': notas_warning_visible}" id="notas" class="input" type="text" placeholder="Talle o color"/>
|
|
<span v-if="notas_warning_visible" class="icon is-small is-right">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</span>
|
|
<article v-if="notas_warning_visible" class="message is-danger is-small">
|
|
<div class="message-body">
|
|
No se puede dejar este campo vacío
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapGetters } from "vuex";
|
|
|
|
export default {
|
|
props: {
|
|
producto_id: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
requiere_notas: {
|
|
type: Number,
|
|
required: true,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
cantidadControl: 0,
|
|
notasControl: '',
|
|
notas_warning_visible: false,
|
|
}
|
|
},
|
|
watch: {
|
|
cantidadEnChismosa() {
|
|
this.actualizar();
|
|
},
|
|
notasEnChismosa() {
|
|
this.actualizar();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.actualizar();
|
|
},
|
|
computed: {
|
|
...mapGetters('pedido', ["enChismosa", "cantidad", "notas"]),
|
|
cantidadEnChismosa() {
|
|
return this.cantidad(this.producto_id);
|
|
},
|
|
notasEnChismosa() {
|
|
return this.notas(this.producto_id);
|
|
},
|
|
hayCambios() {
|
|
return this.cantidadControl !== this.cantidadEnChismosa || this.notasControl !== this.notasEnChismosa;
|
|
},
|
|
puedeBorrar() {
|
|
return this.enChismosa(this.producto_id);
|
|
},
|
|
faltaNotas() {
|
|
return this.requiere_notas && this.cantidadControl > 0 && !this.notasControl;
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions('pedido', ["modificarChismosa"]),
|
|
decrementar() {
|
|
this.cantidadControl -= 1;
|
|
},
|
|
incrementar() {
|
|
this.cantidadControl += 1;
|
|
},
|
|
borrar() {
|
|
this.cantidadControl = 0;
|
|
this.confirmar();
|
|
},
|
|
async confirmar() {
|
|
if (this.faltaNotas) {
|
|
this.notas_warning_visible = true;
|
|
return;
|
|
}
|
|
await this.modificarChismosa({
|
|
producto_id: this.producto_id,
|
|
cantidad: this.cantidadControl,
|
|
notas: this.notasControl
|
|
});
|
|
},
|
|
actualizar() {
|
|
this.cantidadControl = this.cantidadEnChismosa;
|
|
this.notasControl = this.notasEnChismosa;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* Chrome, Safari, Edge, Opera */
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Firefox */
|
|
input[type=number] {
|
|
appearance: textfield;
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
.contador {
|
|
min-width: 178px;
|
|
}
|
|
|
|
.is-danger {
|
|
background-color: #fca697;
|
|
}
|
|
|
|
.is-danger::placeholder {
|
|
color: #fff;
|
|
opacity: 1; /* Firefox */
|
|
}
|
|
</style>
|