modal de declinacion

components/admin/datosTicket.vue

@@ -2,7 +2,7 @@
   <div class="box">
     <p class="pb-2"><b>Número de cuenta: </b> {{ numeroCuenta }}</p>
 
-    <b-field label="Folio" horizontal grouped>
+    <b-field label="Ticket" horizontal grouped>
       <b-input v-model="folioA" :disabled="switchFolio" maxlength="7"></b-input>
       <p class="control">
         <b-button

components/admin/modalCancelar.vue

@@ -0,0 +1,73 @@
+<template>
+  <form class="modal-card">
+    <header class="modal-card-head">
+      <h5 class="modal-card-title">
+        ¿Estás seguro de querer declinar este ticket?
+      </h5>
+    </header>
+
+    <section class="modal-card-body">
+      <b-field label="Motivo por el cual vas a declinar el ticket">
+        <b-input type="textarea" maxlength="100" v-model="motivo" expanded />
+      </b-field>
+    </section>
+
+    <footer
+      class="modal-card-foot"
+      style="display: flex; justify-content: space-between"
+    >
+      <b-button type="is-danger" @click="$emit('close')"> Cancelar </b-button>
+
+      <b-button
+        type="is-success"
+        @click="multaPrestamo(), $emit('close')"
+        :disabled="!motivo"
+      >
+        Enviar
+      </b-button>
+    </footer>
+  </form>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  props: {
+    token: { type: Object, require: true },
+    folio: { type: String, require: true },
+    imprimirError: { type: Function, required: true },
+    imprimirMensaje: { type: Function, required: true },
+    updateIsLoading: { type: Function, require: true },
+  },
+  data() {
+    return {
+      motivo: '',
+    }
+  },
+  methods: {
+    multaPrestamo() {
+      const data = {
+        folio: this.folio,
+        validacion: 0,
+        motivo: this.motivo,
+      }
+
+      this.updateIsLoading(true)
+      axios
+        .put(`${process.env.api}/admin/validar`, data, this.token)
+        .then((res) => {
+          this.updateIsLoading(false)
+          this.imprimirMensaje(res.data.message)
+        })
+        .catch((err) => {
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
+        })
+        .finally(() => {
+          this.$router.go(-1)
+        })
+    },
+  },
+}
+</script>

components/admin/ticket.vue

@@ -37,25 +37,15 @@
         <b-button
           type="is-success"
           @click="
-            validacion(1),
-              imprimirWarning(
-                '¿ Estas seguro que los datos son correctos y quieres validar este ticket ?',
-                validar
-              )
+            imprimirWarning(
+              '¿ Estas seguro que los datos son correctos y quieres validar este ticket ?',
+              validar
+            )
           "
           >Validar</b-button
         >
-        <b-button
-          type="is-danger"
-          @click="
-            validacion(0),
-              imprimirWarning(
-                '¿ Estas seguro que los datos son incorrectos y quieres declinar el ticket ?',
-                validar
-              )
-          "
-          >Denegar</b-button
-        >
+        <b-button label="Denegar" type="is-danger" @click="declinarTicket()" />
+
         <b-button type="is-info" @click="regresar()">Regresar</b-button>
       </div>
     </div>
@@ -65,10 +55,12 @@
 <script>
 import axios from 'axios'
 import DatosTicket from './datosTicket.vue'
+import ModalCancelar from './modalCancelar.vue'
 
 export default {
   components: {
     DatosTicket,
+    ModalCancelar,
   },
   props: {
     imprimirMensaje: { type: Function, require: true },
@@ -104,13 +96,10 @@ export default {
           this.imprimirError(err.response.data)
         })
     },
-    validacion(value) {
-      this.validado = value
-    },
     validar() {
       const data = {
         folio: this.folio,
-        validacion: this.validado,
+        validacion: 1,
       }
 
       this.updateIsLoading(true)
@@ -128,6 +117,24 @@ export default {
           this.$router.go(-1)
         })
     },
+    declinarTicket() {
+      const modalProps = {
+        token: this.token,
+        folio: this.folio,
+        imprimirError: this.imprimirError,
+        imprimirMensaje: this.imprimirMensaje,
+        updateIsLoading: this.updateIsLoading,
+      }
+
+      this.$buefy.modal.open({
+        props: modalProps,
+        parent: this,
+        component: ModalCancelar,
+        hasModalCard: true,
+        customClass: 'custom-class custom-class-2',
+        trapFocus: true,
+      })
+    },
     actualizarFolio() {
       this.folio = localStorage.getItem('folio')
       console.log(this.folio)

components/registro/CapturaDatos.vue

@@ -17,10 +17,10 @@
         ><b-icon icon="microsoft-windows" size="is-small"></b-icon>
         Windows</b-radio
       >
-      <b-radio v-model="idArea" v-if="area1" native-value="2"
+      <b-radio v-model="idArea" v-if="area2" native-value="2"
         ><b-icon icon="apple" size="is-small"></b-icon> Mac</b-radio
       >
-      <b-radio v-model="idArea" v-if="area1" native-value="3"
+      <b-radio v-model="idArea" v-if="area3" native-value="3"
         ><b-icon icon="linux" size="is-small"></b-icon> Linux</b-radio
       >
     </div>
@@ -126,6 +126,7 @@ export default {
   data() {
     const today = new Date()
     return {
+      idArea: '',
       areaMac: false,
       area1: true,
       area2: true,
@@ -226,8 +227,7 @@ export default {
       this.idArea = ''
       this.folio = ''
       this.monto = ''
-      this.fechaTicket = ''
-      this.terminos = false
+      ;(this.fechaTicket = null), (this.terminos = false)
       this.dropFiles = []
     },
     deleteDropFile(index) {

pages/admin/ticket.vue

@@ -41,7 +41,11 @@ export default {
         this.$router.push('/')
       }
     },
-    imprimirMensaje(message, title = '¡Felicidades!', onConfirm = () => {}) {
+    imprimirMensaje(
+      message,
+      title = '¡Acción confirmada!',
+      onConfirm = () => {}
+    ) {
       this.$buefy.dialog.alert({
         ariaRole: 'alertdialog',
         ariaModal: true,