From 6ca9d69cc9bac0a09e2d6c3f4356c06e8ac9bc6e Mon Sep 17 00:00:00 2001
From: Andres2908 <saavedratrejo24@gmail.com>
Date: Thu, 12 Nov 2020 22:40:56 -0600
Subject: [PATCH] V-1.2-tablaProvisional

---
 components/responsable/inputTable.vue | 188 +++++++++++++++++++++-----
 1 file changed, 151 insertions(+), 37 deletions(-)

diff --git a/components/responsable/inputTable.vue b/components/responsable/inputTable.vue
index 4769877..5d47023 100644
--- a/components/responsable/inputTable.vue
+++ b/components/responsable/inputTable.vue
@@ -1,19 +1,27 @@
 <template>
   <div class="container">
     <div class="columns">
-      <div class="column is-2">
+      <div class="column is-3">
         <b-field>
-          <b-input placeholder="No.Cuenta" icon="school" rounded></b-input>
+          <b-input placeholder="No.Cuenta"
+              minlength="9"
+              maxlength="9"
+              icon="school"
+              rounded></b-input>
         </b-field>
       </div>
-      <div class="column is-2">
+
+      <div class="column is-3">
         <b-field>
-          <b-input placeholder="Nombre" icon="account" rounded></b-input>
+          <b-input placeholder="Nombre"
+          icon="account"
+          rounded></b-input>
         </b-field>
       </div>
-      <div class="column is-2">
+
+      <div class="column is-3">
         <b-field>
-          <b-select placeholder="Status" icon="information" rounded>
+          <b-select placeholder="Status" icon="information" expanded rounded>
             <optgroup label="Status">
               <option value="Pre-registro">Pre-registro</option>
               <option value="Pre-validado">Pre-validado</option>
@@ -29,8 +37,39 @@
     </div>
 
     <div class="columns">
-      <section class="column is-12 is-hoverable has-text-centered">
-        <b-table :data="datos" :columns="columns"></b-table>
+      <section class="column is-12">
+          <b-table
+              :data="data"
+              ref="table"
+              paginated
+              per-page="5"
+              hoverable
+              striped>
+
+              <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
+                  <span @click="cualquiera(props.row.nombre)">{{ props.row.nombre }}</span>
+              </b-table-column>
+
+              <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
+                  <span @click="cualquiera(props.row.carrera)">{{ props.row.carrera }}</span>
+              </b-table-column>
+
+              <b-table-column field="numeroCuenta" label="Número de Cuenta" v-slot="props" centered>
+                  <span @click="cualquiera(props.row.numeroCuenta)">{{ props.row.numeroCuenta }}</span>
+              </b-table-column>
+
+              <b-table-column field="fechaInicio" label="Inicio" centered v-slot="props">
+                  <span @click="cualquiera(props.row.fechaInicio)">{{ props.row.fechaInicio }}</span>
+              </b-table-column>
+
+              <b-table-column field="fechaFin" label="Final" centered v-slot="props">
+                  <span @click="cualquiera(props.row.fechaFin)">{{ props.row.fechaFin }}</span>
+              </b-table-column>
+
+              <b-table-column field="status" label="Status" v-slot="props" centered>
+                  <span @click="cualquiera(props.row.status)" class="tag" :class="type(props.row.status)">{{ props.row.status }}</span>
+              </b-table-column>
+          </b-table>
       </section>
     </div>
   </div>
@@ -40,51 +79,126 @@
 export default {
   data () {
     return {
-      datos: [
+      data: [
         {
-          nombre: 'Andres Hernan Saavedra Trejo',
-          carrera: 'Matematicas Aplicadas y computacion',
-          noCuenta: 419085500,
-          inicio: '1/11/2020',
-          final: '1/5/2020',
-          status: 'Pre-registro'
+          idRegistro: 1, // span
+          nombre: 'Lemuel',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'pre-validado',
+          idStatus: 1
         },
         {
-          nombre: 'Andres Hernan Saavedra Trejo',
-          carrera: 'Matematicas Aplicadas y computacion',
-          noCuenta: 419085500,
-          inicio: '1/11/2020',
-          final: '1/5/2020',
-          status: 'Pre-registro'
-        }
-      ],
-      columns: [
-        {
-          field: 'nombre',
-          label: 'Nombre'
+          idRegistro: 1, // span
+          nombre: 'Andrés Hernan Saavedra Trejo',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'pre-registro',
+          idStatus: 1
         },
         {
-          field: 'carrera',
-          label: 'Carrera'
+          idRegistro: 1, // span
+          nombre: 'Marco',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'pre-validado',
+          idStatus: 1
         },
         {
-          field: 'noCuenta',
-          label: 'Número de Cuenta'
+          idRegistro: 1, // span
+          nombre: 'Eithan',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'pre-registro',
+          idStatus: 1
         },
         {
-          field: 'inicio',
-          label: 'Inicio'
+          idRegistro: 1, // span
+          nombre: 'Brenda',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'registro',
+          idStatus: 1
         },
         {
-          field: 'final',
-          label: 'Final'
+          idRegistro: 1, // span
+          nombre: 'Lemuel',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'pre-termino',
+          idStatus: 1
         },
         {
-          field: 'status',
-          label: 'Status'
+          idRegistro: 1, // span
+          nombre: 'Lemuel',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'termino',
+          idStatus: 1
+        },
+        {
+          idRegistro: 1, // span
+          nombre: 'Lemuel',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'liberado',
+          idStatus: 1
+        },
+        {
+          idRegistro: 1, // span
+          nombre: 'Lemuel',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'rechazado',
+          idStatus: 1
         }
       ]
     }
+  },
+  methods: {
+    onPageChange (page) {
+      this.page = page
+      this.loadAsyncData()
+    },
+    type (status) {
+      /* const Status = parseFloat(status) Investigar para que sirve :) */
+      if (status === 'pre-registro') {
+        return 'is-dark'
+      } else if (status === 'pre-validado') {
+        return 'is-warning'
+      } else if (status === 'registro') {
+        return 'is-info'
+      } else if (status === 'pre-termino') {
+        return 'is-link'
+      } else if (status === 'termino') {
+        return 'is-success'
+      } else if (status === 'liberado') {
+        return 'is-success'
+      } else if (status === 'rechazado') {
+        return 'is-danger'
+      }
+    },
+    cualquiera (variable) {
+      console.log(variable)
+    }
   }
 }
 </script>