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

Desactivar agregar producto si requiere notas y están vacías

This commit is contained in:
Rodrigo 2024-10-16 21:56:05 -03:00
parent be945b0eee
commit 538cc84e10
1 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
resources/js/components/pedidos/ProductoCantidad.vue
View File

@ -14,7 +14,7 @@
<i class="fa fa-solid fa-plus"></i>
</button>
</div>
<button :disabled="!hayCambios()" class="button is-small is-success ml-1" @click="confirmar()">
<button :disabled="disableConfirm()" class="button is-small is-success ml-1" @click="confirmar()">
<span class="icon">
<i class="fas fa-check"></i>
</span>
@ -25,10 +25,20 @@
</span>
</button>
</div>
<div v-if="producto.requiere_notas" class="field has-addons is-full-width">
<input v-model="notas" class="input" type="text" placeholder="Talle o color" />
<div v-if="producto.requiere_notas" v-bind:class="{'has-icons-right': warningNotas()}" 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="notas" v-bind:class="{'is-danger': warningNotas()}" id="notas" class="input" type="text" placeholder="Talle o color" />
<span v-if="warningNotas()" class="icon is-small is-right">
<i class="fas fa-exclamation-triangle"></i>
</span>
<article v-if="warningNotas()" class="message is-danger is-small">
<div class="message-body">
No se puede dejar este campo vac&iacute;o
</div>
</article>
</div>
</div>
</template>
@ -86,6 +96,13 @@
puedeBorrar() {
return this.cantidadEnChismosa() > 0;
},
warningNotas() {
return this.producto.requiere_notas && this.cantidad > 0 && !this.notas;
},
disableConfirm() {
if (!this.hayCambios() || this.warningNotas()) return true;
return false;
},
}
}
</script>
@ -107,4 +124,12 @@
.contador {
min-width: 178px;
}
.is-danger {
background-color: #fca697;
}
.is-danger::placeholder {
color: #fff;
opacity: 1; /* Firefox */
}
</style>