Validacion del ticket

components/admin/tableTickets.vue

@@ -57,7 +57,11 @@ export default {
       console.log(value)
       this.$router.push({
         path: '/admin/ticket/',
-        query: { folio: value.folio },
+        query: {
+          folio: value.folio,
+          monto: value.monto,
+          fecha: value.fechaTicket,
+        },
       })
     },
   },

components/admin/ticket.vue

@@ -1,10 +1,49 @@
 <template>
   <div class="columns">
-    <b-image
-      class="img column is-half is-offset-one-quarter py-5"
-      :src="this.urlTicket"
-      alt="Imagen del ticekt"
-    ></b-image>
+    <div class="column py-5">
+      <b-image
+        class="img"
+        :src="this.urlTicket"
+        alt="Imagen del ticekt"
+      ></b-image>
+    </div>
+    <div class="column mt-6">
+      <p>
+        Administrador por favor revisa que todos los datos sean correctos, en
+        caso de ser así valida el ticket
+      </p>
+
+      <div class="box">
+        <p><b>Folio:</b> {{ $route.query.folio }}</p>
+        <p><b>Cantidad: </b> {{ $route.query.monto }}</p>
+        <p><b>Fecha del ticket:</b> {{ $route.query.fecha }}</p>
+      </div>
+      <div class="has-text-centered pb-5">
+        <b-button
+          type="is-success"
+          @click="
+            validacion(true),
+              imprimirWarning(
+                '¿ Estas seguro que los datos son correctos y quieres validar este ticekt ?',
+                validar
+              )
+          "
+          >Validar</b-button
+        >
+        <b-button
+          type="is-danger"
+          @click="
+            validacion(false),
+              imprimirWarning(
+                '¿ Estas seguro que los datos son incorrectos y quieres declinar el ticket ?',
+                validar
+              )
+          "
+          >Denegar</b-button
+        >
+        <b-button type="is-info" @click="regresar()">Regresar</b-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -12,9 +51,16 @@
 import axios from 'axios'
 
 export default {
+  props: {
+    imprimirMensaje: { type: Function, require: true },
+    imprimirError: { type: Function, require: true },
+    imprimirWarning: { type: Function, required: true },
+    updateIsLoading: { type: Function, require: true },
+  },
   data() {
     return {
       urlTicket: '',
+      validado: null,
     }
   },
   methods: {
@@ -22,15 +68,39 @@ export default {
       axios
         .get(`${process.env.api}/admin/ticket?folio=${this.$route.query.folio}`)
         .then((res) => {
-          console.log(res.config.url)
           this.urlTicket = res.config.url
-          console.log(res)
         })
         .catch((err) => {
           console.log(err)
           // this.imprimirError(err.response.data)
         })
     },
+    validacion(value) {
+      this.validado = value
+    },
+    validar() {
+      const data = {
+        folio: this.$route.query.folio,
+        validacion: this.validado,
+      }
+
+      this.updateIsLoading(true)
+      axios
+        .put(`${process.env.api}/admin/validar`, data)
+        .then((res) => {
+          this.updateIsLoading(false)
+          this.imprimirMensaje(res.data.message)
+          //   this.$router.go(-1)
+        })
+        .catch((err) => {
+          console.log(err)
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
+        })
+    },
+    regresar() {
+      this.$router.go(-1)
+    },
   },
   created() {
     this.traerTicket()
@@ -39,7 +109,8 @@ export default {
 </script>
 <style scoped>
 .img {
-  height: 400px;
-  width: 400px;
+  height: 350px;
+  width: 350px;
+  padding-bottom: 470px;
 }
 </style>

pages/admin/ticket.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="container">
-    <Ticket />
+    <Ticket
+      :imprimirMensaje="imprimirMensaje"
+      :imprimirError="imprimirError"
+      :imprimirWarning="imprimirWarning"
+      :updateIsLoading="updateIsLoading"
+    />
   </div>
 </template>
 
@@ -14,6 +19,65 @@ export default {
   data() {
     return {}
   },
+  methods: {
+    updateIsLoading(booleanValue) {
+      this.isLoading = booleanValue
+    },
+    imprimirError(err = {}, title = '¡Hubo un error!', onConfirm = () => {}) {
+      this.$buefy.dialog.alert({
+        ariaRole: 'alertdialog',
+        ariaModal: true,
+        type: 'is-danger',
+        title,
+        message: err.message,
+        confirmText: 'Entendido',
+        hasIcon: true,
+        iconPack: 'mdi',
+        icon: 'alert-octagon',
+        onConfirm: () => onConfirm(),
+      })
+      if (err.err && err.err === 'token error') {
+        localStorage.clear()
+        this.$router.push('/')
+      }
+    },
+    imprimirMensaje(message, title = '¡Felicidades!', onConfirm = () => {}) {
+      this.$buefy.dialog.alert({
+        ariaRole: 'alertdialog',
+        ariaModal: true,
+        type: 'is-success',
+        title,
+        message,
+        confirmText: 'Ok',
+        hasIcon: true,
+        iconPack: 'mdi',
+        icon: 'check-circle',
+        onConfirm: () => onConfirm(),
+      })
+    },
+    imprimirWarning(
+      message,
+      onConfirm = () => {},
+      title = '¡Espera un minuto!',
+      onCancel = () => {}
+    ) {
+      this.$buefy.dialog.alert({
+        ariaRole: 'alertdialog',
+        ariaModal: true,
+        type: 'is-warning',
+        title,
+        message,
+        confirmText: 'Confirmar',
+        canCancel: true,
+        cancelText: 'Cancelar',
+        hasIcon: true,
+        iconPack: 'mdi',
+        icon: 'help-circle',
+        onConfirm: () => onConfirm(),
+        onCancel: () => onCancel(),
+      })
+    },
+  },
 }
 </script>