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] 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>