From 7e36edd13bde83c314a2231618a2ebdb6636df89 Mon Sep 17 00:00:00 2001
From: Andres2908 <saavedratrejo24@gmail.com>
Date: Tue, 10 Nov 2020 22:38:34 -0600
Subject: [PATCH 1/6] V-1.0

---
 components/responsable/inputTable.vue | 92 +++++++++++++++++++++++++++
 pages/responsable/index.vue           | 33 ++++++++--
 2 files changed, 121 insertions(+), 4 deletions(-)
 create mode 100644 components/responsable/inputTable.vue

diff --git a/components/responsable/inputTable.vue b/components/responsable/inputTable.vue
new file mode 100644
index 0000000..4769877
--- /dev/null
+++ b/components/responsable/inputTable.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="container">
+    <div class="columns">
+      <div class="column is-2">
+        <b-field>
+          <b-input placeholder="No.Cuenta" icon="school" rounded></b-input>
+        </b-field>
+      </div>
+      <div class="column is-2">
+        <b-field>
+          <b-input placeholder="Nombre" icon="account" rounded></b-input>
+        </b-field>
+      </div>
+      <div class="column is-2">
+        <b-field>
+          <b-select placeholder="Status" icon="information" rounded>
+            <optgroup label="Status">
+              <option value="Pre-registro">Pre-registro</option>
+              <option value="Pre-validado">Pre-validado</option>
+              <option value="Registro">Registro</option>
+              <option value="Pre-término">Pre-término</option>
+              <option value="Término">Término</option>
+              <option value="Liberado">Liberado</option>
+              <option value="Rechazado">Rechazado</option>
+            </optgroup>
+          </b-select>
+        </b-field>
+      </div>
+    </div>
+
+    <div class="columns">
+      <section class="column is-12 is-hoverable has-text-centered">
+        <b-table :data="datos" :columns="columns"></b-table>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      datos: [
+        {
+          nombre: 'Andres Hernan Saavedra Trejo',
+          carrera: 'Matematicas Aplicadas y computacion',
+          noCuenta: 419085500,
+          inicio: '1/11/2020',
+          final: '1/5/2020',
+          status: 'Pre-registro'
+        },
+        {
+          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'
+        },
+        {
+          field: 'carrera',
+          label: 'Carrera'
+        },
+        {
+          field: 'noCuenta',
+          label: 'Número de Cuenta'
+        },
+        {
+          field: 'inicio',
+          label: 'Inicio'
+        },
+        {
+          field: 'final',
+          label: 'Final'
+        },
+        {
+          field: 'status',
+          label: 'Status'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/pages/responsable/index.vue b/pages/responsable/index.vue
index 014129f..2046aab 100644
--- a/pages/responsable/index.vue
+++ b/pages/responsable/index.vue
@@ -1,9 +1,34 @@
 <template>
-  <section>
-    hola
-  </section>
+  <div class="container">
+    <div class="section">
+      <p class="is-three-fifths is-offset-one-fifth">
+        Estimado(a) responsable del programa de servicio social: <br />
+        Para registrar a un alumno de servicio social pulsa el botón Agregar
+        Alumno y sigue las instrucciones. <br />
+        Para visualizar los datos completos de un alumno ya registrado o subir
+        su carta de término, poulsa su nombre y se desplegará l aficha técnica
+        con toda la información.
+      </p>
+      <br />
+      <div class="buttons">
+        <b-button type="is-link">Agregar alumno</b-button>
+      </div>
+    </div>
+
+    <section class="section">
+      <inputTable />
+    </section>
+  </div>
 </template>
 
 <script>
-export default {}
+import inputTable from '../../components/responsable/inputTable'
+
+export default {
+  components: {
+    inputTable
+  }
+}
 </script>
+
+<style></style>

From f6c0f860f2e8827d0bd824f3c1b69021d11246f6 Mon Sep 17 00:00:00 2001
From: Andres2908 <saavedratrejo24@gmail.com>
Date: Wed, 11 Nov 2020 18:17:04 -0600
Subject: [PATCH 2/6] V1.1

---
 components/responsable/Prueba.vue | 485 ++++++++++++++++++++++++++++++
 components/responsable/table.vue  |  56 ++++
 pages/responsable/index.vue       |  16 +-
 3 files changed, 550 insertions(+), 7 deletions(-)
 create mode 100644 components/responsable/Prueba.vue
 create mode 100644 components/responsable/table.vue

diff --git a/components/responsable/Prueba.vue b/components/responsable/Prueba.vue
new file mode 100644
index 0000000..7cebfb6
--- /dev/null
+++ b/components/responsable/Prueba.vue
@@ -0,0 +1,485 @@
+<template>
+  <section>
+    <b-field grouped group-multiline>
+      <div class="control">
+        <b-switch v-model="showDetailIcon">Show detail icon</b-switch>
+      </div>
+    </b-field>
+
+    <b-table
+      :data="data"
+      ref="table"
+      paginated
+      per-page="5"
+      :opened-detailed="defaultOpenedDetails"
+      detailed
+      detail-key="id"
+      @details-open="
+        row => $buefy.toast.open(`Expanded ${row.user.first_name}`)
+      "
+      :show-detail-icon="showDetailIcon"
+      aria-next-label="Next page"
+      aria-previous-label="Previous page"
+      aria-page-label="Page"
+      aria-current-label="Current page"
+    >
+      <b-table-column field="id" label="ID" width="40" numeric v-slot="props">
+        {{ props.row.id }}
+      </b-table-column>
+
+      <b-table-column
+        field="user.first_name"
+        label="First Name"
+        sortable
+        v-slot="props"
+      >
+        <template v-if="showDetailIcon">
+          {{ props.row.user.first_name }}
+        </template>
+        <template v-else>
+          <a @click="props.toggleDetails(props.row)">
+            {{ props.row.user.first_name }}
+          </a>
+        </template>
+      </b-table-column>
+
+      <b-table-column
+        field="user.last_name"
+        label="Last Name"
+        sortable
+        v-slot="props"
+      >
+        {{ props.row.user.last_name }}
+      </b-table-column>
+
+      <b-table-column
+        field="date"
+        label="Date"
+        sortable
+        centered
+        v-slot="props"
+      >
+        <span class="tag is-success">
+          {{ new Date(props.row.date).toLocaleDateString() }}
+        </span>
+      </b-table-column>
+
+      <b-table-column label="Gender" v-slot="props">
+        <span>
+          <b-icon
+            pack="fas"
+            :icon="props.row.gender === 'Male' ? 'mars' : 'venus'"
+          >
+          </b-icon>
+          {{ props.row.gender }}
+        </span>
+      </b-table-column>
+
+      <template slot="detail" slot-scope="props">
+        <article class="media">
+          <figure class="media-left">
+            <p class="image is-64x64">
+              <img src="/static/img/placeholder-128x128.png" />
+            </p>
+          </figure>
+          <div class="media-content">
+            <div class="content">
+              <p>
+                <strong
+                  >{{ props.row.user.first_name }}
+                  {{ props.row.user.last_name }}</strong
+                >
+                <small>@{{ props.row.user.first_name }}</small>
+                <small>31m</small>
+                <br />
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+                ornare magna eros, eu pellentesque tortor vestibulum ut.
+                Maecenas non massa sem. Etiam finibus odio quis feugiat
+                facilisis.
+              </p>
+            </div>
+          </div>
+        </article>
+      </template>
+    </b-table>
+  </section>
+</template>
+
+<script>
+import Vue from 'vue'    
+const data = [
+  {
+    id: 1,
+    user: { first_name: 'Jesse', last_name: 'Simmons' },
+    date: '2016/10/15 13:43:27',
+    gender: 'Male'
+  },
+  {
+    id: 2,
+    user: { first_name: 'John', last_name: 'Jacobs' },
+    date: '2016/12/15 06:00:53',
+    gender: 'Male'
+  },
+  {
+    id: 3,
+    user: { first_name: 'Tina', last_name: 'Gilbert' },
+    date: '2016/04/26 06:26:28',
+    gender: 'Female'
+  },
+  {
+    id: 4,
+    user: { first_name: 'Clarence', last_name: 'Flores' },
+    date: '2016/04/10 10:28:46',
+    gender: 'Male'
+  },
+  {
+    id: 5,
+    user: { first_name: 'Anne', last_name: 'Lee' },
+    date: '2016/12/06 14:38:38',
+    gender: 'Female'
+  },
+  {
+    id: 6,
+    user: { first_name: 'Sara', last_name: 'Armstrong' },
+    date: '2016/09/23 18:50:04',
+    gender: 'Female'
+  },
+  {
+    id: 7,
+    user: { first_name: 'Anthony', last_name: 'Webb' },
+    date: '2016/08/30 23:49:38',
+    gender: 'Male'
+  },
+  {
+    id: 8,
+    user: { first_name: 'Andrew', last_name: 'Greene' },
+    date: '2016/11/20 14:57:47',
+    gender: 'Male'
+  },
+  {
+    id: 9,
+    user: { first_name: 'Russell', last_name: 'White' },
+    date: '2016/07/13 09:29:49',
+    gender: 'Male'
+  },
+  {
+    id: 10,
+    user: { first_name: 'Lori', last_name: 'Hunter' },
+    date: '2016/12/09 01:44:05',
+    gender: 'Female'
+  },
+  {
+    id: 11,
+    user: { first_name: 'Ronald', last_name: 'Wood' },
+    date: '2016/12/04 02:23:48',
+    gender: 'Male'
+  },
+  {
+    id: 12,
+    user: { first_name: 'Michael', last_name: 'Harper' },
+    date: '2016/07/27 13:28:15',
+    gender: 'Male'
+  },
+  {
+    id: 13,
+    user: { first_name: 'George', last_name: 'Dunn' },
+    date: '2017/03/07 12:26:52',
+    gender: 'Male'
+  },
+  {
+    id: 14,
+    user: { first_name: 'Eric', last_name: 'Rogers' },
+    date: '2016/06/07 05:41:52',
+    gender: 'Male'
+  },
+  {
+    id: 15,
+    user: { first_name: 'Juan', last_name: 'Meyer' },
+    date: '2017/02/01 04:56:34',
+    gender: 'Male'
+  },
+  {
+    id: 16,
+    user: { first_name: 'Silvia', last_name: 'Rosa' },
+    date: '2017/01/26 11:50:04',
+    gender: 'Female'
+  },
+  {
+    id: 17,
+    user: { first_name: 'Lori', last_name: 'Cunningham' },
+    date: '2016/05/01 10:00:56',
+    gender: 'Female'
+  },
+  {
+    id: 18,
+    user: { first_name: 'Charles', last_name: 'Graham' },
+    date: '2016/05/31 06:43:30',
+    gender: 'Male'
+  },
+  {
+    id: 19,
+    user: { first_name: 'Henry', last_name: 'Morrison' },
+    date: '2016/09/27 16:15:44',
+    gender: 'Male'
+  },
+  {
+    id: 20,
+    user: { first_name: 'Albert', last_name: 'Mendoza' },
+    date: '2016/08/08 05:29:24',
+    gender: 'Male'
+  },
+  {
+    id: 21,
+    user: { first_name: 'Ruby', last_name: 'Snyder' },
+    date: '2017/04/01 12:04:39',
+    gender: 'Female'
+  },
+  {
+    id: 22,
+    user: { first_name: 'Jesse', last_name: 'Warren' },
+    date: '2016/08/20 01:36:38',
+    gender: 'Male'
+  },
+  {
+    id: 23,
+    user: { first_name: 'Carlos', last_name: 'Ferguson' },
+    date: '2016/05/31 10:40:29',
+    gender: 'Male'
+  },
+  {
+    id: 24,
+    user: { first_name: 'Melissa', last_name: 'Peters' },
+    date: '2016/07/23 00:41:54',
+    gender: 'Female'
+  },
+  {
+    id: 25,
+    user: { first_name: 'Arthur', last_name: 'Garza' },
+    date: '2017/03/11 14:11:37',
+    gender: 'Male'
+  },
+  {
+    id: 26,
+    user: { first_name: 'Joe', last_name: 'Berry' },
+    date: '2016/07/09 15:16:56',
+    gender: 'Male'
+  },
+  {
+    id: 27,
+    user: { first_name: 'Joseph', last_name: 'Bishop' },
+    date: '2016/10/04 19:44:54',
+    gender: 'Male'
+  },
+  {
+    id: 28,
+    user: { first_name: 'Sarah', last_name: 'Harper' },
+    date: '2016/09/23 05:09:11',
+    gender: 'Female'
+  },
+  {
+    id: 29,
+    user: { first_name: 'Christopher', last_name: 'Fuller' },
+    date: '2016/04/12 00:05:35',
+    gender: 'Male'
+  },
+  {
+    id: 30,
+    user: { first_name: 'Alan', last_name: 'Mendoza' },
+    date: '2016/04/22 10:48:02',
+    gender: 'Male'
+  },
+  {
+    id: 31,
+    user: { first_name: 'James', last_name: 'Davis' },
+    date: '2017/01/16 15:17:03',
+    gender: 'Male'
+  },
+  {
+    id: 32,
+    user: { first_name: 'Scott', last_name: 'Welch' },
+    date: '2016/10/04 23:31:51',
+    gender: 'Male'
+  },
+  {
+    id: 33,
+    user: { first_name: 'Mildred', last_name: 'Myers' },
+    date: '2016/11/23 13:46:18',
+    gender: 'Female'
+  },
+  {
+    id: 34,
+    user: { first_name: 'Victor', last_name: 'Martinez' },
+    date: '2016/04/06 17:05:07',
+    gender: 'Male'
+  },
+  {
+    id: 35,
+    user: { first_name: 'Susan', last_name: 'Medina' },
+    date: '2016/12/09 10:33:37',
+    gender: 'Female'
+  },
+  {
+    id: 36,
+    user: { first_name: 'Judy', last_name: 'Long' },
+    date: '2016/07/26 16:19:04',
+    gender: 'Female'
+  },
+  {
+    id: 37,
+    user: { first_name: 'Joan', last_name: 'Myers' },
+    date: '2016/09/22 04:55:54',
+    gender: 'Female'
+  },
+  {
+    id: 38,
+    user: { first_name: 'Rachel', last_name: 'Gonzales' },
+    date: '2016/07/15 13:56:38',
+    gender: 'Female'
+  },
+  {
+    id: 39,
+    user: { first_name: 'Roger', last_name: 'Hunt' },
+    date: '2016/08/14 10:43:11',
+    gender: 'Male'
+  },
+  {
+    id: 40,
+    user: { first_name: 'Dorothy', last_name: 'Howard' },
+    date: '2016/06/19 05:34:49',
+    gender: 'Female'
+  },
+  {
+    id: 41,
+    user: { first_name: 'Eugene', last_name: 'Lynch' },
+    date: '2016/12/24 08:19:24',
+    gender: 'Male'
+  },
+  {
+    id: 42,
+    user: { first_name: 'Kathy', last_name: 'Webb' },
+    date: '2017/04/01 21:09:05',
+    gender: 'Female'
+  },
+  {
+    id: 43,
+    user: { first_name: 'Antonio', last_name: 'White' },
+    date: '2017/02/10 06:51:20',
+    gender: 'Male'
+  },
+  {
+    id: 44,
+    user: { first_name: 'Louis', last_name: 'Spencer' },
+    date: '2016/10/08 02:20:22',
+    gender: 'Male'
+  },
+  {
+    id: 45,
+    user: { first_name: 'Andrea', last_name: 'Marshall' },
+    date: '2016/09/04 10:59:57',
+    gender: 'Female'
+  },
+  {
+    id: 46,
+    user: { first_name: 'Eugene', last_name: 'Sims' },
+    date: '2017/03/15 06:39:48',
+    gender: 'Male'
+  },
+  {
+    id: 47,
+    user: { first_name: 'Mildred', last_name: 'Gibson' },
+    date: '2016/04/18 06:43:54',
+    gender: 'Female'
+  },
+  {
+    id: 48,
+    user: { first_name: 'Joan', last_name: 'Arnold' },
+    date: '2016/12/16 04:52:23',
+    gender: 'Female'
+  },
+  {
+    id: 49,
+    user: { first_name: 'Jesse', last_name: 'Schmidt' },
+    date: '2016/06/11 02:44:33',
+    gender: 'Male'
+  },
+  {
+    id: 50,
+    user: { first_name: 'David', last_name: 'Frazier' },
+    date: '2017/02/15 21:46:30',
+    gender: 'Male'
+  },
+  {
+    id: 51,
+    user: { first_name: 'Nicholas', last_name: 'Howell' },
+    date: '2016/11/01 15:08:31',
+    gender: 'Male'
+  },
+  {
+    id: 52,
+    user: { first_name: 'Douglas', last_name: 'Chapman' },
+    date: '2017/02/08 03:33:24',
+    gender: 'Male'
+  },
+  {
+    id: 53,
+    user: { first_name: 'Bruce', last_name: 'Simmons' },
+    date: '2016/07/14 12:11:17',
+    gender: 'Male'
+  },
+  {
+    id: 54,
+    user: { first_name: 'Antonio', last_name: 'George' },
+    date: '2016/11/07 19:12:55',
+    gender: 'Male'
+  },
+  {
+    id: 55,
+    user: { first_name: 'Chris', last_name: 'Marshall' },
+    date: '2016/07/03 12:11:45',
+    gender: 'Male'
+  },
+  {
+    id: 56,
+    user: { first_name: 'Ashley', last_name: 'Hudson' },
+    date: '2016/10/14 21:08:05',
+    gender: 'Female'
+  },
+  {
+    id: 57,
+    user: { first_name: 'Alan', last_name: 'Edwards' },
+    date: '2017/03/22 21:10:25',
+    gender: 'Male'
+  },
+  {
+    id: 58,
+    user: { first_name: 'George', last_name: 'Clark' },
+    date: '2016/04/28 03:15:05',
+    gender: 'Male'
+  },
+  {
+    id: 59,
+    user: { first_name: 'Frank', last_name: 'Porter' },
+    date: '2016/09/08 00:48:14',
+    gender: 'Male'
+  },
+  {
+    id: 60,
+    user: { first_name: 'Christopher', last_name: 'Palmer' },
+    date: '2016/05/24 08:58:12',
+    gender: 'Male'
+  }
+]
+
+const example = {
+  data () {
+    return {
+      data,
+      defaultOpenedDetails: [1],
+      showDetailIcon: true
+    }
+  }
+}
+
+const app = new Vue(example)
+app.$mount('#app')
+</script>
diff --git a/components/responsable/table.vue b/components/responsable/table.vue
new file mode 100644
index 0000000..ba2203a
--- /dev/null
+++ b/components/responsable/table.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="container">
+    <div class="columns">
+      <div class="column is-2">
+        <b-field>
+          <b-input placeholder="No.Cuenta" icon="school" rounded></b-input>
+        </b-field>
+      </div>
+      <div class="column is-2">
+        <b-field>
+          <b-input placeholder="Nombre" icon="account" rounded></b-input>
+        </b-field>
+      </div>
+      <div class="column is-2">
+        <b-field>
+          <b-select placeholder="Status" icon="information" rounded>
+            <optgroup label="Status">
+              <option value="Pre-registro">Pre-registro</option>
+              <option value="Pre-validado">Pre-validado</option>
+              <option value="Registro">Registro</option>
+              <option value="Pre-término">Pre-término</option>
+              <option value="Término">Término</option>
+              <option value="Liberado">Liberado</option>
+              <option value="Rechazado">Rechazado</option>
+            </optgroup>
+          </b-select>
+        </b-field>
+      </div>
+    </div>
+
+    <div class="columns">
+      <section class="column is-12 is-hoverable has-text-centered">
+        <b-table :data="students" :columns="columns"></b-table>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      students: [
+
+      ],
+      searchStudent: {}
+    }
+  },
+  created () {
+    this.$http.get('http://jsonplaceholder..typicode.com/users')
+      .then(res => this.students = res.body)
+  }
+}
+</script>
+
+<style></style>
diff --git a/pages/responsable/index.vue b/pages/responsable/index.vue
index 2046aab..9a4a2e9 100644
--- a/pages/responsable/index.vue
+++ b/pages/responsable/index.vue
@@ -3,30 +3,32 @@
     <div class="section">
       <p class="is-three-fifths is-offset-one-fifth">
         Estimado(a) responsable del programa de servicio social: <br />
-        Para registrar a un alumno de servicio social pulsa el botón Agregar
-        Alumno y sigue las instrucciones. <br />
+        Para registrar a un alumno de servicio social pulsa el botón
+        <strong> Agregar Alumno </strong> y sigue las instrucciones. <br />
         Para visualizar los datos completos de un alumno ya registrado o subir
-        su carta de término, poulsa su nombre y se desplegará l aficha técnica
+        su carta de término, poulsa su nombre y se desplegará la ficha técnica
         con toda la información.
       </p>
       <br />
       <div class="buttons">
-        <b-button type="is-link">Agregar alumno</b-button>
+        <b-button type="is-link">
+          Agregar alumno
+        </b-button>
       </div>
     </div>
 
     <section class="section">
-      <inputTable />
+      <InputTable />
     </section>
   </div>
 </template>
 
 <script>
-import inputTable from '../../components/responsable/inputTable'
+import InputTable from '../../components/responsable/table'
 
 export default {
   components: {
-    inputTable
+    InputTable
   }
 }
 </script>

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 3/6] 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>

From 76d9444dd4d27cfbc4cf4e80a398c591f8589ce5 Mon Sep 17 00:00:00 2001
From: Andres2908 <saavedratrejo24@gmail.com>
Date: Thu, 12 Nov 2020 22:49:18 -0600
Subject: [PATCH 4/6] V-1-3-index

---
 pages/responsable/index.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/pages/responsable/index.vue b/pages/responsable/index.vue
index 9a4a2e9..ccc7580 100644
--- a/pages/responsable/index.vue
+++ b/pages/responsable/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="section">
+    <div class="section pb-0">
       <p class="is-three-fifths is-offset-one-fifth">
         Estimado(a) responsable del programa de servicio social: <br />
         Para registrar a un alumno de servicio social pulsa el botón
@@ -9,9 +9,9 @@
         su carta de término, poulsa su nombre y se desplegará la ficha técnica
         con toda la información.
       </p>
-      <br />
-      <div class="buttons">
-        <b-button type="is-link">
+
+      <div class="buttons section pl-0 pb-0">
+        <b-button type="is-info">
           Agregar alumno
         </b-button>
       </div>
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import InputTable from '../../components/responsable/table'
+import InputTable from '../../components/responsable/inputTable'
 
 export default {
   components: {
@@ -33,4 +33,6 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+
+</style>

From 9d0154d4ea1dfcba02118c1e70b9c3e2279ec551 Mon Sep 17 00:00:00 2001
From: Saavedra Trejo <saavedratrejo24@gmail.com>
Date: Sat, 14 Nov 2020 00:33:15 +0000
Subject: [PATCH 5/6] eliminandoComponente

---
 components/responsable/Prueba.vue | 485 ------------------------------
 1 file changed, 485 deletions(-)
 delete mode 100644 components/responsable/Prueba.vue

diff --git a/components/responsable/Prueba.vue b/components/responsable/Prueba.vue
deleted file mode 100644
index 7cebfb6..0000000
--- a/components/responsable/Prueba.vue
+++ /dev/null
@@ -1,485 +0,0 @@
-<template>
-  <section>
-    <b-field grouped group-multiline>
-      <div class="control">
-        <b-switch v-model="showDetailIcon">Show detail icon</b-switch>
-      </div>
-    </b-field>
-
-    <b-table
-      :data="data"
-      ref="table"
-      paginated
-      per-page="5"
-      :opened-detailed="defaultOpenedDetails"
-      detailed
-      detail-key="id"
-      @details-open="
-        row => $buefy.toast.open(`Expanded ${row.user.first_name}`)
-      "
-      :show-detail-icon="showDetailIcon"
-      aria-next-label="Next page"
-      aria-previous-label="Previous page"
-      aria-page-label="Page"
-      aria-current-label="Current page"
-    >
-      <b-table-column field="id" label="ID" width="40" numeric v-slot="props">
-        {{ props.row.id }}
-      </b-table-column>
-
-      <b-table-column
-        field="user.first_name"
-        label="First Name"
-        sortable
-        v-slot="props"
-      >
-        <template v-if="showDetailIcon">
-          {{ props.row.user.first_name }}
-        </template>
-        <template v-else>
-          <a @click="props.toggleDetails(props.row)">
-            {{ props.row.user.first_name }}
-          </a>
-        </template>
-      </b-table-column>
-
-      <b-table-column
-        field="user.last_name"
-        label="Last Name"
-        sortable
-        v-slot="props"
-      >
-        {{ props.row.user.last_name }}
-      </b-table-column>
-
-      <b-table-column
-        field="date"
-        label="Date"
-        sortable
-        centered
-        v-slot="props"
-      >
-        <span class="tag is-success">
-          {{ new Date(props.row.date).toLocaleDateString() }}
-        </span>
-      </b-table-column>
-
-      <b-table-column label="Gender" v-slot="props">
-        <span>
-          <b-icon
-            pack="fas"
-            :icon="props.row.gender === 'Male' ? 'mars' : 'venus'"
-          >
-          </b-icon>
-          {{ props.row.gender }}
-        </span>
-      </b-table-column>
-
-      <template slot="detail" slot-scope="props">
-        <article class="media">
-          <figure class="media-left">
-            <p class="image is-64x64">
-              <img src="/static/img/placeholder-128x128.png" />
-            </p>
-          </figure>
-          <div class="media-content">
-            <div class="content">
-              <p>
-                <strong
-                  >{{ props.row.user.first_name }}
-                  {{ props.row.user.last_name }}</strong
-                >
-                <small>@{{ props.row.user.first_name }}</small>
-                <small>31m</small>
-                <br />
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
-                ornare magna eros, eu pellentesque tortor vestibulum ut.
-                Maecenas non massa sem. Etiam finibus odio quis feugiat
-                facilisis.
-              </p>
-            </div>
-          </div>
-        </article>
-      </template>
-    </b-table>
-  </section>
-</template>
-
-<script>
-import Vue from 'vue'    
-const data = [
-  {
-    id: 1,
-    user: { first_name: 'Jesse', last_name: 'Simmons' },
-    date: '2016/10/15 13:43:27',
-    gender: 'Male'
-  },
-  {
-    id: 2,
-    user: { first_name: 'John', last_name: 'Jacobs' },
-    date: '2016/12/15 06:00:53',
-    gender: 'Male'
-  },
-  {
-    id: 3,
-    user: { first_name: 'Tina', last_name: 'Gilbert' },
-    date: '2016/04/26 06:26:28',
-    gender: 'Female'
-  },
-  {
-    id: 4,
-    user: { first_name: 'Clarence', last_name: 'Flores' },
-    date: '2016/04/10 10:28:46',
-    gender: 'Male'
-  },
-  {
-    id: 5,
-    user: { first_name: 'Anne', last_name: 'Lee' },
-    date: '2016/12/06 14:38:38',
-    gender: 'Female'
-  },
-  {
-    id: 6,
-    user: { first_name: 'Sara', last_name: 'Armstrong' },
-    date: '2016/09/23 18:50:04',
-    gender: 'Female'
-  },
-  {
-    id: 7,
-    user: { first_name: 'Anthony', last_name: 'Webb' },
-    date: '2016/08/30 23:49:38',
-    gender: 'Male'
-  },
-  {
-    id: 8,
-    user: { first_name: 'Andrew', last_name: 'Greene' },
-    date: '2016/11/20 14:57:47',
-    gender: 'Male'
-  },
-  {
-    id: 9,
-    user: { first_name: 'Russell', last_name: 'White' },
-    date: '2016/07/13 09:29:49',
-    gender: 'Male'
-  },
-  {
-    id: 10,
-    user: { first_name: 'Lori', last_name: 'Hunter' },
-    date: '2016/12/09 01:44:05',
-    gender: 'Female'
-  },
-  {
-    id: 11,
-    user: { first_name: 'Ronald', last_name: 'Wood' },
-    date: '2016/12/04 02:23:48',
-    gender: 'Male'
-  },
-  {
-    id: 12,
-    user: { first_name: 'Michael', last_name: 'Harper' },
-    date: '2016/07/27 13:28:15',
-    gender: 'Male'
-  },
-  {
-    id: 13,
-    user: { first_name: 'George', last_name: 'Dunn' },
-    date: '2017/03/07 12:26:52',
-    gender: 'Male'
-  },
-  {
-    id: 14,
-    user: { first_name: 'Eric', last_name: 'Rogers' },
-    date: '2016/06/07 05:41:52',
-    gender: 'Male'
-  },
-  {
-    id: 15,
-    user: { first_name: 'Juan', last_name: 'Meyer' },
-    date: '2017/02/01 04:56:34',
-    gender: 'Male'
-  },
-  {
-    id: 16,
-    user: { first_name: 'Silvia', last_name: 'Rosa' },
-    date: '2017/01/26 11:50:04',
-    gender: 'Female'
-  },
-  {
-    id: 17,
-    user: { first_name: 'Lori', last_name: 'Cunningham' },
-    date: '2016/05/01 10:00:56',
-    gender: 'Female'
-  },
-  {
-    id: 18,
-    user: { first_name: 'Charles', last_name: 'Graham' },
-    date: '2016/05/31 06:43:30',
-    gender: 'Male'
-  },
-  {
-    id: 19,
-    user: { first_name: 'Henry', last_name: 'Morrison' },
-    date: '2016/09/27 16:15:44',
-    gender: 'Male'
-  },
-  {
-    id: 20,
-    user: { first_name: 'Albert', last_name: 'Mendoza' },
-    date: '2016/08/08 05:29:24',
-    gender: 'Male'
-  },
-  {
-    id: 21,
-    user: { first_name: 'Ruby', last_name: 'Snyder' },
-    date: '2017/04/01 12:04:39',
-    gender: 'Female'
-  },
-  {
-    id: 22,
-    user: { first_name: 'Jesse', last_name: 'Warren' },
-    date: '2016/08/20 01:36:38',
-    gender: 'Male'
-  },
-  {
-    id: 23,
-    user: { first_name: 'Carlos', last_name: 'Ferguson' },
-    date: '2016/05/31 10:40:29',
-    gender: 'Male'
-  },
-  {
-    id: 24,
-    user: { first_name: 'Melissa', last_name: 'Peters' },
-    date: '2016/07/23 00:41:54',
-    gender: 'Female'
-  },
-  {
-    id: 25,
-    user: { first_name: 'Arthur', last_name: 'Garza' },
-    date: '2017/03/11 14:11:37',
-    gender: 'Male'
-  },
-  {
-    id: 26,
-    user: { first_name: 'Joe', last_name: 'Berry' },
-    date: '2016/07/09 15:16:56',
-    gender: 'Male'
-  },
-  {
-    id: 27,
-    user: { first_name: 'Joseph', last_name: 'Bishop' },
-    date: '2016/10/04 19:44:54',
-    gender: 'Male'
-  },
-  {
-    id: 28,
-    user: { first_name: 'Sarah', last_name: 'Harper' },
-    date: '2016/09/23 05:09:11',
-    gender: 'Female'
-  },
-  {
-    id: 29,
-    user: { first_name: 'Christopher', last_name: 'Fuller' },
-    date: '2016/04/12 00:05:35',
-    gender: 'Male'
-  },
-  {
-    id: 30,
-    user: { first_name: 'Alan', last_name: 'Mendoza' },
-    date: '2016/04/22 10:48:02',
-    gender: 'Male'
-  },
-  {
-    id: 31,
-    user: { first_name: 'James', last_name: 'Davis' },
-    date: '2017/01/16 15:17:03',
-    gender: 'Male'
-  },
-  {
-    id: 32,
-    user: { first_name: 'Scott', last_name: 'Welch' },
-    date: '2016/10/04 23:31:51',
-    gender: 'Male'
-  },
-  {
-    id: 33,
-    user: { first_name: 'Mildred', last_name: 'Myers' },
-    date: '2016/11/23 13:46:18',
-    gender: 'Female'
-  },
-  {
-    id: 34,
-    user: { first_name: 'Victor', last_name: 'Martinez' },
-    date: '2016/04/06 17:05:07',
-    gender: 'Male'
-  },
-  {
-    id: 35,
-    user: { first_name: 'Susan', last_name: 'Medina' },
-    date: '2016/12/09 10:33:37',
-    gender: 'Female'
-  },
-  {
-    id: 36,
-    user: { first_name: 'Judy', last_name: 'Long' },
-    date: '2016/07/26 16:19:04',
-    gender: 'Female'
-  },
-  {
-    id: 37,
-    user: { first_name: 'Joan', last_name: 'Myers' },
-    date: '2016/09/22 04:55:54',
-    gender: 'Female'
-  },
-  {
-    id: 38,
-    user: { first_name: 'Rachel', last_name: 'Gonzales' },
-    date: '2016/07/15 13:56:38',
-    gender: 'Female'
-  },
-  {
-    id: 39,
-    user: { first_name: 'Roger', last_name: 'Hunt' },
-    date: '2016/08/14 10:43:11',
-    gender: 'Male'
-  },
-  {
-    id: 40,
-    user: { first_name: 'Dorothy', last_name: 'Howard' },
-    date: '2016/06/19 05:34:49',
-    gender: 'Female'
-  },
-  {
-    id: 41,
-    user: { first_name: 'Eugene', last_name: 'Lynch' },
-    date: '2016/12/24 08:19:24',
-    gender: 'Male'
-  },
-  {
-    id: 42,
-    user: { first_name: 'Kathy', last_name: 'Webb' },
-    date: '2017/04/01 21:09:05',
-    gender: 'Female'
-  },
-  {
-    id: 43,
-    user: { first_name: 'Antonio', last_name: 'White' },
-    date: '2017/02/10 06:51:20',
-    gender: 'Male'
-  },
-  {
-    id: 44,
-    user: { first_name: 'Louis', last_name: 'Spencer' },
-    date: '2016/10/08 02:20:22',
-    gender: 'Male'
-  },
-  {
-    id: 45,
-    user: { first_name: 'Andrea', last_name: 'Marshall' },
-    date: '2016/09/04 10:59:57',
-    gender: 'Female'
-  },
-  {
-    id: 46,
-    user: { first_name: 'Eugene', last_name: 'Sims' },
-    date: '2017/03/15 06:39:48',
-    gender: 'Male'
-  },
-  {
-    id: 47,
-    user: { first_name: 'Mildred', last_name: 'Gibson' },
-    date: '2016/04/18 06:43:54',
-    gender: 'Female'
-  },
-  {
-    id: 48,
-    user: { first_name: 'Joan', last_name: 'Arnold' },
-    date: '2016/12/16 04:52:23',
-    gender: 'Female'
-  },
-  {
-    id: 49,
-    user: { first_name: 'Jesse', last_name: 'Schmidt' },
-    date: '2016/06/11 02:44:33',
-    gender: 'Male'
-  },
-  {
-    id: 50,
-    user: { first_name: 'David', last_name: 'Frazier' },
-    date: '2017/02/15 21:46:30',
-    gender: 'Male'
-  },
-  {
-    id: 51,
-    user: { first_name: 'Nicholas', last_name: 'Howell' },
-    date: '2016/11/01 15:08:31',
-    gender: 'Male'
-  },
-  {
-    id: 52,
-    user: { first_name: 'Douglas', last_name: 'Chapman' },
-    date: '2017/02/08 03:33:24',
-    gender: 'Male'
-  },
-  {
-    id: 53,
-    user: { first_name: 'Bruce', last_name: 'Simmons' },
-    date: '2016/07/14 12:11:17',
-    gender: 'Male'
-  },
-  {
-    id: 54,
-    user: { first_name: 'Antonio', last_name: 'George' },
-    date: '2016/11/07 19:12:55',
-    gender: 'Male'
-  },
-  {
-    id: 55,
-    user: { first_name: 'Chris', last_name: 'Marshall' },
-    date: '2016/07/03 12:11:45',
-    gender: 'Male'
-  },
-  {
-    id: 56,
-    user: { first_name: 'Ashley', last_name: 'Hudson' },
-    date: '2016/10/14 21:08:05',
-    gender: 'Female'
-  },
-  {
-    id: 57,
-    user: { first_name: 'Alan', last_name: 'Edwards' },
-    date: '2017/03/22 21:10:25',
-    gender: 'Male'
-  },
-  {
-    id: 58,
-    user: { first_name: 'George', last_name: 'Clark' },
-    date: '2016/04/28 03:15:05',
-    gender: 'Male'
-  },
-  {
-    id: 59,
-    user: { first_name: 'Frank', last_name: 'Porter' },
-    date: '2016/09/08 00:48:14',
-    gender: 'Male'
-  },
-  {
-    id: 60,
-    user: { first_name: 'Christopher', last_name: 'Palmer' },
-    date: '2016/05/24 08:58:12',
-    gender: 'Male'
-  }
-]
-
-const example = {
-  data () {
-    return {
-      data,
-      defaultOpenedDetails: [1],
-      showDetailIcon: true
-    }
-  }
-}
-
-const app = new Vue(example)
-app.$mount('#app')
-</script>

From 646d891bc503a16358b1f4803711eaa44bb1e2e2 Mon Sep 17 00:00:00 2001
From: Saavedra Trejo <saavedratrejo24@gmail.com>
Date: Sat, 14 Nov 2020 00:34:20 +0000
Subject: [PATCH 6/6] eliminandoComponente

---
 components/responsable/table.vue | 56 --------------------------------
 1 file changed, 56 deletions(-)
 delete mode 100644 components/responsable/table.vue

diff --git a/components/responsable/table.vue b/components/responsable/table.vue
deleted file mode 100644
index ba2203a..0000000
--- a/components/responsable/table.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <div class="container">
-    <div class="columns">
-      <div class="column is-2">
-        <b-field>
-          <b-input placeholder="No.Cuenta" icon="school" rounded></b-input>
-        </b-field>
-      </div>
-      <div class="column is-2">
-        <b-field>
-          <b-input placeholder="Nombre" icon="account" rounded></b-input>
-        </b-field>
-      </div>
-      <div class="column is-2">
-        <b-field>
-          <b-select placeholder="Status" icon="information" rounded>
-            <optgroup label="Status">
-              <option value="Pre-registro">Pre-registro</option>
-              <option value="Pre-validado">Pre-validado</option>
-              <option value="Registro">Registro</option>
-              <option value="Pre-término">Pre-término</option>
-              <option value="Término">Término</option>
-              <option value="Liberado">Liberado</option>
-              <option value="Rechazado">Rechazado</option>
-            </optgroup>
-          </b-select>
-        </b-field>
-      </div>
-    </div>
-
-    <div class="columns">
-      <section class="column is-12 is-hoverable has-text-centered">
-        <b-table :data="students" :columns="columns"></b-table>
-      </section>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      students: [
-
-      ],
-      searchStudent: {}
-    }
-  },
-  created () {
-    this.$http.get('http://jsonplaceholder..typicode.com/users')
-      .then(res => this.students = res.body)
-  }
-}
-</script>
-
-<style></style>