campos editables

components/admin/tableTickets.vue

@@ -39,7 +39,7 @@
         {{ props.row.Usuario.numeroCuenta }}
       </b-table-column>
 
-      <b-table-column field="folio" label="Folio" centered v-slot="props"
+      <b-table-column field="ticket" label="Ticket" centered v-slot="props"
         >{{ props.row.folio }}
       </b-table-column>
 
@@ -47,14 +47,12 @@
         {{ props.row.monto }}
       </b-table-column>
 
-      <b-table-column field="ticket" label="Ticket" centered v-slot="props">
-        <b-button
-          type="is-info"
-          v-if="props.row.folio"
-          @click="verTicket(props.row)"
-          >Ver ticket</b-button
-        >
-
+      <b-table-column
+        field="inscripcion"
+        label="Inscripción"
+        centered
+        v-slot="props"
+      >
         <b-button
           type="is-success"
           v-if="!props.row.folio && !props.row.monto && !props.row.fechaTicket"
@@ -70,6 +68,31 @@
           "
           >Validar</b-button
         >
+
+        <b-button
+          type="is-danger"
+          v-if="!props.row.folio && !props.row.monto && !props.row.fechaTicket"
+          @click="
+            usuario(
+              props.row.Usuario.numeroCuenta,
+              props.row.Usuario.idUsuario
+            ),
+              imprimirWarning(
+                '¿Estas seguro de querer validar esta inscripción ?',
+                validarSinTicket
+              )
+          "
+          >Cancelar</b-button
+        >
+      </b-table-column>
+
+      <b-table-column centered v-slot="props">
+        <b-button
+          type="is-info"
+          v-if="props.row.folio"
+          @click="verTicket(props.row)"
+          >Ver ticket</b-button
+        >
       </b-table-column>
     </b-table>
   </div>

components/admin/ticket.vue

@@ -6,23 +6,9 @@
           <b-loading :is-full-page="isFullPage" v-model="isLoading">
           </b-loading>
         </b-image>
-        <!-- <div class="overlay" @click="isImageModalActive = true">
-          <b-icon
-            class="icon"
-            icon="magnify-plus"
-            size="is-small"
-            type="is-black"
-          />
-        </div> -->
       </figure>
     </div>
 
-    <!-- <b-modal v-model="isImageModalActive">
-      <p class="image">
-        <img :src="urlTicket" />
-      </p>
-    </b-modal> -->
-
     <div class="column is-1"></div>
 
     <div class="column mt-6">
@@ -36,9 +22,48 @@
       </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> {{ fecha($route.query.fecha) }}</p>
+        <b-field label="Folio" horizontal grouped>
+          <b-input
+            v-model="$route.query.folio"
+            :disabled="switchFolio"
+          ></b-input>
+          <p class="control">
+            <b-button
+              type="is-primary"
+              icon-left="pencil"
+              @click="habilitar('folio')"
+            >
+            </b-button>
+          </p>
+        </b-field>
+
+        <b-field label="Cantidad" horizontal>
+          <b-input
+            v-model="$route.query.monto"
+            :disabled="switchMonto"
+          ></b-input>
+          <p class="control">
+            <b-button
+              type="is-primary"
+              icon-left="pencil"
+              @click="habilitar('monto')"
+            >
+            </b-button>
+          </p>
+        </b-field>
+
+        <b-field label="Fecha del ticket" horizontal>
+          <b-datepicker v-model="fechaTicket" :disabled="switchFecha">
+          </b-datepicker>
+          <p class="control">
+            <b-button
+              type="is-primary"
+              icon-left="pencil"
+              @click="habilitar('fecha')"
+            >
+            </b-button>
+          </p>
+        </b-field>
       </div>
       <div class="has-text-centered pb-5">
         <b-button
@@ -71,7 +96,6 @@
 
 <script>
 import axios from 'axios'
-import moment from 'moment'
 
 export default {
   props: {
@@ -84,10 +108,16 @@ export default {
     return {
       token: '',
 
-      isImageModalActive: false,
+      switchFolio: true,
+      switchMonto: true,
+      switchFecha: true,
+
+      fechaTicket: new Date(this.$route.query.fecha),
+
       isLoading: true,
       isFullPage: true,
       urlTicket: '',
+
       validado: null,
     }
   },
@@ -128,8 +158,18 @@ export default {
           this.$router.go(-1)
         })
     },
-    fecha(fecha) {
-      return moment(fecha).format('L')
+    habilitar(tipo) {
+      tipo == 'folio' && this.switchFolio == true
+        ? (this.switchFolio = false)
+        : (this.switchFolio = true)
+
+      tipo == 'monto' && this.switchMonto == true
+        ? (this.switchMonto = false)
+        : (this.switchMonto = true)
+
+      tipo == 'fecha' && this.switchFecha == true
+        ? (this.switchFecha = false)
+        : (this.switchFecha = true)
     },
     regresar() {
       this.$router.go(-1)
@@ -150,37 +190,6 @@ export default {
   padding-bottom: 470px;
 }
 
-.overlay {
-  position: absolute;
-  top: 4%;
-  bottom: 0;
-  left: 0;
-  right: 40%;
-  height: 470px;
-  width: 350px;
-  opacity: 0;
-  transition: 0.5s ease;
-  background-color: white;
-}
-
-/* When you mouse over the container, fade in the overlay icon*/
-.containerImg:hover .overlay {
-  opacity: 0.3;
-}
-
-/* The icon inside the overlay is positioned in the middle vertically and horizontally */
-.icon {
-  color: black;
-  font-size: 100px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  -ms-transform: translate(-50%, -50%);
-  text-align: center;
-  z-index: 2;
-}
-
 .zoom {
   transition: transform 0.2s;
 }