From 7b64ccd32006732705f90ac5cd6e5f2cda19f995 Mon Sep 17 00:00:00 2001
From: Andres2908 <saavedratrejo24@gmail.com>
Date: Mon, 23 Nov 2020 15:35:03 -0600
Subject: [PATCH] git checkout tomy

---
 components/admin/servicio/modificar/form.vue  |  59 +++-
 .../servicio/programa/tablaResponsables.vue   | 253 +++++++++++++++
 components/admin/servicio/vistaServicio.vue   | 138 ++++++--
 components/alumno/DataAlumno.vue              | 264 +++++++++++++++
 components/alumno/ejemplo.vue                 |   4 +-
 components/responsable/inputTable.vue         |  28 +-
 nuxt.config.js                                |   6 +
 pages/admin/programa/index.vue                |  22 ++
 pages/alumno/cuestionario/index.vue           |  65 +++-
 pages/alumno/index.vue                        |   7 +-
 pages/responsable/nuevo/index.vue             | 301 ++++++++----------
 11 files changed, 916 insertions(+), 231 deletions(-)
 create mode 100644 components/admin/servicio/programa/tablaResponsables.vue
 create mode 100644 components/alumno/DataAlumno.vue
 create mode 100644 pages/admin/programa/index.vue

diff --git a/components/admin/servicio/modificar/form.vue b/components/admin/servicio/modificar/form.vue
index 69ab048..4bbd800 100644
--- a/components/admin/servicio/modificar/form.vue
+++ b/components/admin/servicio/modificar/form.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <b-button class="is-info">Regresar</b-button>
+    <b-button class="is-info" @click="regresar()">Regresar</b-button>
     <br><br>
     <p class="is-size-2">Editar información del alumno</p>
     <br>
@@ -9,8 +9,7 @@
         <b-input
           type="email"
           v-model="nuevo.correo"
-          v-bind:placeholder="viejo.correo"
-          value="">
+          v-bind:placeholder="viejo.correo">
         </b-input>
       </b-field>
       <b-field label="Fecha de inicio">
@@ -22,7 +21,7 @@
         </b-datepicker>
       </b-field>
       <transition name="fade">
-        <b-field label="Fecha de fin" v-if="fechaInicio">
+        <b-field label="Fecha de fin" v-if="fechaInicio[0]">
           <b-datepicker
             v-bind:placeholder="viejo.fechaInicio"
             v-model="fechaFin[0]"
@@ -35,7 +34,7 @@
         <b-input type="text" v-model="nuevo.direccion" v-bind:placeholder="viejo.direccion"></b-input>
       </b-field>
       <b-field label="Teléfono">
-        <b-input type="number" value="" v-bind:placeholder="viejo.telefono"></b-input>
+        <b-input type="number" v-bind:placeholder="viejo.telefono" maxlength="10"></b-input>
       </b-field>
       <b-field label="Fecha de nacimiento">
         <b-datepicker
@@ -45,12 +44,12 @@
         </b-datepicker>
       </b-field>
       <b-field label="ID status">
-        <b-input type="" value="" v-bind:placeholder="viejo.idStatus"></b-input>
+        <b-input type="" v-bind:placeholder="viejo.idStatus"></b-input>
       </b-field>
       <p class="is-size-5">Carta de aceptación</p>
       <br>
       <b-field>
-        <b-upload v-model="nuevo.cartaAceptacion" drag-drop expanded>
+        <b-upload v-model="nuevo.cartaAceptacion" type="is-black" v-on:input="validarExt(1)" accept="application/pdf" drag-drop expanded>
           <section class="section">
             <div class="content has-text-centered">
               <p>
@@ -64,7 +63,7 @@
       <p class="is-size-5">Carta de término</p>
       <br>
       <b-field>
-        <b-upload v-model="nuevo.cartaTermino" drag-drop expanded>
+        <b-upload v-model="nuevo.cartaTermino" type="is-black" v-on:input="validarExt(2)" accept="application/pdf" drag-drop expanded>
           <section class="section">
             <div class="content has-text-centered">
               <p>
@@ -78,7 +77,7 @@
       <p class="is-size-5">Informe global</p>
       <br>
       <b-field>
-        <b-upload v-model="nuevo.informeGlobal" drag-drop expanded>
+        <b-upload v-model="nuevo.informeGlobal" type="is-black" v-on:input="validarExt(3)" accept="application/pdf" drag-drop expanded>
           <section class="section">
             <div class="content has-text-centered">
               <p>
@@ -90,9 +89,9 @@
         </b-upload>
       </b-field>
       <br>
-      <b-button v-if="mostrar()" class="is-info">
-        Actualizar Datos
-      </b-button>
+      <b-button class="is-info" @click="regresar()">Regresar</b-button>
+      <b-button v-if="mostrar()" class="is-info">Actualizar Datos</b-button>
+      <b-button v-else disabled class="is-info">Actualizar Datos</b-button>
     </div>
   </div>
 </template>
@@ -128,13 +127,13 @@ export default {
       fechaNacimiento: [],
       fechaInicio: [],
       fechaFin: [],
-      minDate1: new Date('2020-01-02')
+      minDate1: new Date('2020-01-01')
     }
   },
   methods: {
     dangerToast () {
       this.$buefy.toast.open({
-        message: 'Correo invalido',
+        message: 'Asegurate de ingresar un PDF',
         type: 'is-danger'
       })
     },
@@ -151,9 +150,39 @@ export default {
         this.nuevo.informeGlobal.name ||
         this.nuevo.idStatus
       ) {
+        if (this.nuevo.correo) {
+          if (validator.isEmail(this.nuevo.correo)) {
+            return true
+          } else {
+            return false
+          }
+        }
         return true
       }
-      return false
+    },
+    validarExt (a) {
+      const extPermitidas = /(.pdf)$/i
+      switch (a) {
+        case 1: if (!extPermitidas.exec(this.nuevo.cartaAceptacion.name)) {
+          this.dangerToast()
+          this.nuevo.cartaAceptacion = {}
+        }
+          break
+        case 2: if (!extPermitidas.exec(this.nuevo.cartaTermino.name)) {
+          this.dangerToast()
+          this.nuevo.cartaTermino = {}
+        }
+          break
+        case 3: if (!extPermitidas.exec(this.nuevo.informeGlobal.name)) {
+          this.dangerToast()
+          this.nuevo.informeGlobal = {}
+        }
+          break
+      }
+    },
+    regresar () {
+      localStorage.removeItem('idRegistro')
+      this.$router.push('/admin/servicio')
     }
   },
   computed: {
diff --git a/components/admin/servicio/programa/tablaResponsables.vue b/components/admin/servicio/programa/tablaResponsables.vue
new file mode 100644
index 0000000..a576070
--- /dev/null
+++ b/components/admin/servicio/programa/tablaResponsables.vue
@@ -0,0 +1,253 @@
+<template>
+  <!--<div class="container">
+    <div class="table-responsive-md">
+      <table class="table mt-3 table-hover">
+        <thead>
+          <tr>
+            <th>Nombre de responsable</th>
+            <th>Correo</th>
+          </tr>
+        </thead>
+        <tbody class="renglon">
+          <tr
+            v-for="responsable in responsables"
+            :key="responsable.idResponsable"
+            @click="verRegistro(responsable.idResponsable)"
+          >
+            <td>{{ responsable.nombre }}</td>
+            <td>{{ responsable.correo }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </div>-->
+  <section>
+    <b-table
+      class="tabla"
+      hoverable
+      :data="responsables"
+      striped
+      paginated
+      :total="total"
+      :per-page="perPage"
+      @page-change="onPageChange"
+      aria-next-label="Next page"
+      aria-previous-label="Previous page"
+      aria-page-label="Page"
+      aria-current-label="Current page">
+      <template v-for="column in columns">
+        <b-table-column :key="column.id" v-bind="column">
+        <template
+          v-if="column.searchable && !column.numeric"
+          slot="searchable"
+          slot-scope="props">
+          <b-input
+            v-model="props.filters[props.column.field]"
+            placeholder="Buscar por..."
+            icon="magnify"
+            class="busqueda"/>
+        </template>
+        <template v-slot="props">
+          <span @click="verRegistro(props.row.idResponsable)">{{ props.row[column.field] }}</span>
+        </template>
+        </b-table-column>
+      </template>
+    </b-table>
+  </section>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      page: 1,
+      perPage: 20,
+      total: 0,
+      responsables: [
+        {
+          idResponsable: 1,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 2,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 3,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 4,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 5,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 6,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 7,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 8,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 9,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 10,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 11,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 12,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 13,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 14,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 15,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 16,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 17,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 18,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 19,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 20,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 21,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 22,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 23,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 24,
+          nombre: 'Lemuel',
+          correo: 'correo2'
+        }
+      ],
+      columns: [
+        {
+          field: 'idResponsable',
+          visible: false
+        },
+        {
+          field: 'nombre',
+          label: 'Nombre responsable',
+          searchable: true,
+          centered: true
+        },
+        {
+          field: 'correo',
+          label: 'Correo electrónico',
+          searchable: true,
+          centered: true
+        }
+      ]
+    }
+  },
+  methods: {
+    verRegistro (idResponsable) {
+      localStorage.setItem('idResponsable', idResponsable)
+      this.$router.push('/programa/responsableinfo')
+      console.log(idResponsable)
+    },
+    onPageChange (page) {
+      this.page = page
+      this.loadAsyncData()
+    }
+  },
+  computed: {
+    busquedaNombreResponsable () {
+      return this.responsables.filter(responsables =>
+        responsables.nombreResp.includes(this.buscarNombreResponsable)
+      )
+    }
+  },
+  watch: {
+    busquedaCorreoResponsable () {
+      this.obtenerResponsables()
+    }
+  }/* ,
+  async created () {
+    await this.obtenerResponsables()
+  } */
+}
+</script>
+
+<style scoped>
+  .renglon:hover {
+    cursor: pointer !important;
+  }
+  .busqueda {
+    width: 200%;
+    margin-left: 50%;
+  }
+  .tabla {
+    margin-top: 50px;
+    margin-bottom: 100px;
+    border: 3px solid #1b3d70;
+    border-radius: 10px;
+    padding: 20px;
+  }
+</style>
diff --git a/components/admin/servicio/vistaServicio.vue b/components/admin/servicio/vistaServicio.vue
index 2bdaa59..72209ad 100644
--- a/components/admin/servicio/vistaServicio.vue
+++ b/components/admin/servicio/vistaServicio.vue
@@ -1,7 +1,93 @@
 <template>
-    <div class="container">
-      <p class="h2">{{ title }}</p>
+  <div class="container">
+    <div class="mb-5">
+      <b-button class="boton is-info" @click="$router.push('./')">
+        Regresar
+      </b-button>
+      <b-button class="boton is-info" @click="$router.push('./servicio/modificar')">
+        Editar información
+      </b-button>
     </div>
+    <div id="Status">
+      <p class="is-size-3" v-if="alumno.idStatus == 1">
+        Pre Registro
+      </p>
+      <p class="is-size-3" v-else-if="alumno.idStatus == 2">
+        Pre Registro Válidado
+      </p>
+      <p class="is-size-3" v-else-if="alumno.idStatus == 3">
+        Registro
+      </p>
+      <p class="is-size-3" v-else-if="alumno.idStatus == 4">
+        Pre Término
+      </p>
+      <p class="is-size-3" v-else-if="alumno.idStatus == 5">
+        Término
+      </p>
+      <p class="is-size-3" v-else-if="alumno.idStatus == 6">
+          Liberación
+      </p>
+    </div>
+    <div id="programa">
+      <br>
+      <p class="is-size-4">Datos del programa</p><br>
+      <p class="is-size-5">Programa: <span> {{alumno.programa}} </span></p>
+      <p class="is-size-5">Clave del programa: <span> {{alumno.clavePrograma}} </span></p>
+      <p class="is-size-5">Dependecia: <span> {{alumno.dependecia}} </span></p>
+      <p class="is-size-5">Institución: <span> {{alumno.institucion}} </span></p>
+      <br>
+    </div>
+    <div id="datosPersonales">
+      <p class="is-size-4" >Datos personales</p><br>
+      <p class="is-size-5 mt-5" v-if="alumno.nombre">Nombre: <span> {{alumno.nombre}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.noCuenta">Número de cuenta: <span> {{alumno.noCuenta}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.carrera">Carrera: <span> {{alumno.carrera}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.correo">Correo: <span> {{alumno.correo}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.creditos">Créditos: <span> {{alumno.creditos}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.fechaInicio">Fecha de inicio: <span> {{alumno.fechaInicio}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.fechaFin">Fecha de fin: <span> {{alumno.fechaFin}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.telefono">Teléfono: <span> {{alumno.telefono}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.direccion">Dirección: <span> {{alumno.direccion}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.fechaNacimiento">Fecha de nacimiento: <span> {{alumno.fechaNacimiento}} </span></p>
+    </div>
+    <div id="enlaces">
+      <br>
+      <div class="level">
+        <a href="google.com" class="has-text-link link">Ver carta de aceptación</a>
+        <b-button class="is-danger" v-if="alumno.idStatus == 1">
+          Rechazar
+        </b-button>
+      </div>
+      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 1">Confirmar el pre-registro del alumno</h3>
+      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 4">Termino</h3>
+      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 5">Validar el término del alumno</h3>
+      <div class="level">
+        <a href="google.com" class="has-text-link link">Ver carta de término</a>
+        <b-button class="is-danger" v-if="alumno.idStatus == 5">
+          Rechazar
+        </b-button>
+      </div>
+      <div class="level">
+        <a href="google.com" class="has-text-link link">Ver informe global de actividades</a>
+        <b-button class="is-danger" v-if="alumno.idStatus == 5">
+          Rechazar
+        </b-button>
+      </div>
+      <p v-if="alumno.cuestionarioP">Cuenta con cuestionario de programa resuelto.</p>
+      <p v-if="alumno.cuestionarioA">Cuenta con cuestionario de alumno resuelto.</p>
+    </div>
+    <div id="acciones" class="my-5">
+      <b-button class="is-success" v-if="mostrarConfirmar()">
+        Confirmar
+      </b-button>
+      <b-button class="is-danger">
+        Cancelar
+      </b-button>
+      <b-button class="is-info" @click="$router.push('./')">
+        Regresar
+      </b-button>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -9,9 +95,9 @@ export default {
   data () {
     return {
       alumno: {
-        fechaInicio: '',
-        fechaFin: '',
-        idStatus: 1
+        fechaInicio: '14/2/2020',
+        fechaFin: '14/8/2020',
+        idStatus: 5
       },
       idRegistro: window.localStorage.getItem('idRegistro'),
       token: {
@@ -28,27 +114,37 @@ export default {
       mensajeCancel: '',
       spinner: false,
       vistoBueno: false,
-      acatlan: false,
-      title: 'Hola'
+      acatlan: false
     }
   },
   methods: {
-    elegirTitulo: function () {
-      switch (this.alumno.idStatus) {
-        case 1: this.title = 'Pre Registro'
-          break
-        case 2: this.title = 'Pre Registro Válido'
-          break
-        case 3: this.title = 'Registro'
-          break
-        case 4: this.title = 'Pre Término'
-          break
-        case 5: this.title = 'Termino'
-          break
-        case 6: this.title = 'Liberación'
-          break
+    mostrarConfirmar () {
+      if (this.alumno.idStatus === 1) return true
+      else if (this.alumno.idStatus === 5) {
+        if (!this.alumno.acatlanContigo) return true
+        else if (this.vistoBueno) return true
       }
+      return false
     }
   }
 }
 </script>
+
+<style scoped>
+.boton {
+  margin-top: 2%;
+}
+.is-size-5{
+  margin-bottom: 10px;
+}
+.link-f {
+  font-size: 27px !important;
+}
+.link {
+  display: flex;
+  justify-content: flex-start;
+  font-size: 20px;
+  margin-top: 10px;
+}
+
+</style>
diff --git a/components/alumno/DataAlumno.vue b/components/alumno/DataAlumno.vue
new file mode 100644
index 0000000..7f3691e
--- /dev/null
+++ b/components/alumno/DataAlumno.vue
@@ -0,0 +1,264 @@
+<template>
+  <section>
+    <div class="container px-3">
+      <div class="progressBar my-6">
+            <b-steps type="is-success" size="is-large" :has-navigation="false" v-model="activeStep">
+              <b-step-item label="Pre Registro" icon="account-plus"></b-step-item>
+              <b-step-item label="Registro" icon="account-clock"></b-step-item>
+              <b-step-item label="Registro Validado" icon="account"></b-step-item>
+              <b-step-item label="Pre Termino" icon="account-details"></b-step-item>
+              <b-step-item label="Termino" icon="account-clock"></b-step-item>
+              <b-step-item label="Liberacion" icon="account-check"></b-step-item>
+            </b-steps>
+      </div>
+
+      <div  class="info" >
+          <div class="info-programa">
+          <h3 class="title is-3">Información del programa</h3>
+          <p><strong> Programa: </strong> {{ programa.nombre }} </p>
+          <p><strong> Institución: </strong> {{ programa.institucion }}</p>
+          <p><strong> Dependencia: </strong> {{ programa.dependencia }}</p>
+          <p><strong> Clave del programa: </strong> {{ programa.clave }}</p>
+          </div>
+          <div class="info-alumno mt-6">
+          <h3 class="title is-3">Información del alumno</h3>
+          <p><strong> Nombre: </strong> {{ alumno.nombre }} </p>
+          <p><strong> Número de cuenta: </strong> {{ alumno.cuenta }}</p>
+          <p><strong> Carrera: </strong> {{ alumno.carrera }}</p>
+          <p><strong> Correo: </strong> {{ alumno.correo }}</p>
+
+          <div class="mt-4 info-extra" v-if="activeStep >= 2">
+            <p><strong> Direccion: </strong> {{ alumno.direccion }}</p>
+            <p><strong> Telefono: </strong> {{ alumno.telefono }}</p>
+            <p><strong> Fecha de nacimiento: </strong> {{ alumno.nacimiento }}</p>
+          </div>
+          </div>
+
+      </div>
+
+      <div class="registro" v-if="activeStep==1">
+      <h3 class="title is-3 my-5">Formulario Pre-registro</h3>
+          <form >
+            <b-field label="Fecha de nacimiento">
+                      <b-datepicker
+                        placeholder="Inicio"
+                        icon="calendar-today"
+                        v-model="nacimiento"
+                        >
+                      </b-datepicker>
+            </b-field>
+
+            <b-field label="Telefono">
+                <b-input placeholder="Telefono" maxlength="10" v-model="telefono" type="tel" >
+                </b-input>
+            </b-field>
+
+            <b-field label="Direccion">
+              <b-input maxlength="200 " placeholder="Direccion" type="textarea" v-model="direccion"></b-input>
+            </b-field>
+
+          </form>
+           <div class="my-4 mb-6">
+           <b-field >
+                <button
+                :disabled="nacimiento=='' || telefono=='' || direccion==''"
+                class="button is-success is-medium"
+                @click="open"
+                >
+                    Enviar
+                </button>
+              </b-field>
+              </div>
+
+      </div>
+
+      <div class="registro-validado"  v-if="activeStep==2">
+        <p class="mensaje">
+         <span class="block is-size-5"> Estimado alumno(a): </span> <br> <br>
+          Te informamos que la dependencia en donde decidiste realizar tu servicio social ya validó tu registro.
+
+        </p>
+      </div>
+
+      <div class="pre-termino" v-if="activeStep==3">
+        <h3 class="title is-4 mt-6">Cuestionario de evaluación del programa de servicio social</h3>
+        <div class=" my-6" v-if="alumno.cuestionario==false">
+          <b-button tag="router-link"
+            to="/alumno/cuestionario"
+            type="is-info is-light "
+            icon-left="book-open"
+            class="border-info"
+            size="is-medium"
+            >
+              cuestionario
+          </b-button>
+        </div>
+        <div class="is-flex " v-else>
+          <p class="block is-size-5">Cuestionario contestado </p>
+          <b-icon
+              icon="check-bold"
+              size="is-small"
+              type="is-success">
+          </b-icon>
+        </div>
+
+        <h3 class="title is-4 mt-6">Informe global de actividades (en formato .PDF. No se aceptan fotos).</h3>
+        <div v-if="alumno.informe==false">
+        <b-field type="black">
+          <b-upload v-model="file" type="black" drag-drop expanded accept="application/pdf">
+            <section class="section">
+              <div class="content has-text-centered">
+                <p>
+                  <b-icon icon="upload" size="is-large"></b-icon>
+                </p>
+                <p>{{ file.name || "Arrastra aquí tu archivo o da click para buscar"}}</p>
+              </div>
+            </section>
+          </b-upload>
+
+        </b-field>
+         <b-field class="derecha">
+                <button :disabled='file == ""'
+                class="button is-success is-medium mb-4"
+                @click="open"
+                style="float: right;">
+                    Enviar
+                </button>
+              </b-field>
+        </div>
+        <div class="is-flex " v-else>
+          <p class="block is-size-5">Informe contestado </p>
+          <b-icon
+              icon="check-bold"
+              size="is-small"
+              type="is-success">
+          </b-icon>
+        </div>
+
+        <p class="mensaje has-text-justified">
+        <span class="block is-size-5">Estimado alumno(a): </span><br><br>
+        Te informamos que el Área de Registro y Control de Servicio Social ha validado tu solicitud de registro de servicio social por lo que el siguiente trámite lo realizarás hasta que concluyas 480 horas en un periodo de mínimo 6 meses y obtengas tu carta de término por parte de la institución, quien se encargará de subir dicho archivo a este sistema, además de responder un cuestionario sobre tu desempeño. A su vez, deberás responder el siguiente cuestionario de evaluación del programa de servicio social en donde participaste y enviar el informe global de actividades elaborado por ti, con firma y sello de visto bueno de tu jefe inmediato. En cuanto el Área de Registro y Control de Servicio Social valide tu solicitud, podrás revisar las indicaciones del siguiente paso en el panel llamado “Liberación” Cualquier duda puedes acudir al área de Registro y Control de Servicio Social en COESI de lunes a viernes de 10:00 a 14:00 hrs. y de 16:00 a 20:00 hrs. o bien, comunicarte al 5623 1686 o al correo registross@acatlan.unam.mx
+        </p>
+      </div>
+
+      <div class="termino" v-if="activeStep==4">
+
+      <p class="mensaje has-text-justified">
+        <span class="block is-size-5">Estimado alumno(a): </span><br><br>
+Espera a que tus documentos sean validados por el Departamento
+      de Servicio Social y Bolsa de Trabajo
+        </p>
+      </div>
+
+      <div class="Liberacion" v-if="activeStep==5">
+      <p></p>
+
+      <p>
+      </p>
+        <p class="mensaje has-text-justified">
+        <span class="block is-size-5">Estimado alumno(a): </span><br><br>
+Te confirmamos que has concluido con los trámites necesarios para la liberación de tu servicio social por lo que ahora sólo queda esperar a que en máximo 15 días hábiles se te notifique por correo electrónico a partir de cuándo puedes recoger la copia de tu carta de liberación en las ventanillas del Área de Registro y Control de Servicio Social.
+<br>
+ Cualquier duda puedes acudir al área de Registro y Control de Servicio Social en COESI de lunes a viernes de 10:00 a 13:00 hrs. y de 16:00 a 19:00 hrs. o bien, comunicarte al 5623 1686 o al correo registross@apolo.acatlan.unam.mx
+        </p>
+
+      </div>
+
+    <!--   <pre class="my-6">{{$data}}</pre> -->
+    </div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      activeStep: 1,
+      file: [],
+      nacimiento: '',
+      telefono: '',
+      direccion: '',
+      alumno: {
+        carrera: 'Matematicas Aplicadas',
+        nombre: 'Jose Jose Lopez Lopez',
+        cuenta: '123456789',
+        correo: 'ejmplo@eje.com',
+        direccion: 'avenida 21 estado de mexico',
+        nacimiento: "16/04/2000",
+        telefono: '5511223344',
+        cuestionario: true,
+        informe: true
+
+      },
+      programa:{
+        nombre: 'programa 1',
+        institucion: 'institucion 1',
+        dependencia: 'dependecia 1',
+        clave: '023'
+      }
+    }
+  },
+  methods: {
+    open () {
+      const loadingComponent = this.$buefy.loading.open({
+        container: this.isFullPage ? null : this.$refs.element.$el
+      })
+      setTimeout(() => loadingComponent.close(), 3 * 1000)
+    }
+  },
+  computed: {
+    baseSteps () {
+      return [
+        {
+          label: 'Pictures',
+          content: 'Pictures: Lorem ipsum dolor sit amet.',
+          displayed: true
+        },
+        {
+          label: 'Music',
+          content: 'Music: Lorem ipsum dolor sit amet.',
+          displayed: this.showMusic
+        },
+        {
+          label: 'Games',
+          content: 'Games: Lorem ipsum dolor sit amet.',
+          displayed: true,
+          visible: this.showGames
+        },
+        {
+          label: 'Videos',
+          content: 'Videos: Lorem ipsum dolor sit amet.',
+          displayed: true
+        }
+      ]
+    },
+    steps () {
+      const steps = [...this.baseSteps]
+      return steps
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+.border-info{
+  border: 1px solid #167df0 ;
+}
+.info-alumno p{
+  margin-bottom: .8rem;
+
+}
+.info-programa p{
+  margin-bottom: .8rem;
+
+}
+.mensaje{
+  margin: 3.5rem 0;
+}
+.else{
+  display: flex;
+  align-content: center !important;
+}
+</style>
diff --git a/components/alumno/ejemplo.vue b/components/alumno/ejemplo.vue
index 014129f..be22198 100644
--- a/components/alumno/ejemplo.vue
+++ b/components/alumno/ejemplo.vue
@@ -1,6 +1,6 @@
 <template>
-  <section>
-    hola
+  <section class="container">
+    <p>hola</p>
   </section>
 </template>
 
diff --git a/components/responsable/inputTable.vue b/components/responsable/inputTable.vue
index bfcf83d..e2e1c74 100644
--- a/components/responsable/inputTable.vue
+++ b/components/responsable/inputTable.vue
@@ -63,7 +63,7 @@
               >
 
               <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
-                  <span @click="verifica()">{{ props.row.nombre }}</span>
+                  <span @click="cualquiera(props.row.nombre)">{{ props.row.nombre }}</span>
               </b-table-column>
 
               <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
@@ -83,7 +83,7 @@
               </b-table-column>
 
               <b-table-column field="status" label="Status" v-slot="props" centered>
-                  <span @click="cualquiera(props.row.status)" class="tag" :class="types(props.row.status)">{{ props.row.status }}</span>
+                  <span @click="obtenerDatos()" class="tag" :class="types(props.row.status)">{{ props.row.status }}</span>
               </b-table-column>
 
               <b-table-column field="cartaTermino" label="Carta Término" v-slot="props" centered v-if="id == 2">
@@ -133,6 +133,7 @@
 <script>
 // import validator from 'validator'
 import BotonesCarga from './botonesCarga.vue'
+import axios from 'axios'
 
 export default {
   components: {
@@ -254,7 +255,7 @@ export default {
           idStatus: 1
         }
       ],
-      newSearch: {}
+      datos: {}
     }
   },
   props: {
@@ -319,22 +320,19 @@ export default {
       console.log(this.numeroCuenta)
       console.log(this.nombre)
       console.log(this.status)
-      console.log(this.id)
+      console.log(this.datos)
     },
     addSearch (e) {
       e.preventDefault()
       console.log('Agregando busqueda')
-    }/*
-    esNumero (numero) {
-      const ultimaLetra = numero.length - 1
-
-      if (numero && !validator.isNumeric(numero[ultimaLetra])) { return numero.substr(0, ultimaLetra) }
-      return numero
-    }/*
-    maxLength (str, max) {
-      if (str.lenght > max) { return str.substr(0, max) }
-      return str
-    } */
+    },
+    obtenerDatos () {
+      axios.get('https://c91c3b1fd956.ngrok.io/servicio/servicios_responsable?idUsuario=28&pagina=1')
+        .then(res => {
+          console.log(res.data)
+          this.datos = res.data
+        })
+    }
   }
 }
 </script>
diff --git a/nuxt.config.js b/nuxt.config.js
index b5b0d19..ea3e28c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -49,5 +49,11 @@ export default {
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {
+  },
+  env: {
+    api: 'http://localhost:3000'
+    //api: 'https://5b3a8798f24a.ngrok.io'
+    //api: 'https//venus.acatlan.unam.mx/pruebas_pcpuma'
   }
+
 }
diff --git a/pages/admin/programa/index.vue b/pages/admin/programa/index.vue
new file mode 100644
index 0000000..81cf115
--- /dev/null
+++ b/pages/admin/programa/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="container">
+    <p class="is-size-2 mb-5">Programas de Servicio Social</p>
+    <b-button class="is-info" @click="regresar()">Regresar</b-button>
+    <TablaResponsables />
+  </div>
+</template>
+
+<script>
+import tablaResponsables from '../../../components/admin/servicio/programa/tablaResponsables'
+export default {
+  components: {
+    tablaResponsables
+  },
+  methods: {
+    regresar () {
+      localStorage.removeItem('idRegistro')
+      this.$router.push('./')
+    }
+  }
+}
+</script>
diff --git a/pages/alumno/cuestionario/index.vue b/pages/alumno/cuestionario/index.vue
index 014129f..006d05e 100644
--- a/pages/alumno/cuestionario/index.vue
+++ b/pages/alumno/cuestionario/index.vue
@@ -1,9 +1,68 @@
 <template>
-  <section>
-    hola
+  <section class="container">
+    <p class="is-size-2">Formulario</p>
+    <br>
+    <b-field label="Nombre: ">
+      <b-input
+        type="text"
+        v-model="nombre"
+        placeholder="nombre">
+      </b-input>
+    </b-field>
+    <b-field label="Ocupación: ">
+      <b-input
+        type="text"
+        v-model="ocupacion"
+        placeholder="Ocupación">
+      </b-input>
+    </b-field>
+    <b-field label="Dirección: ">
+      <b-input
+        type="text"
+        v-model="direccion"
+        placeholder="Dirección">
+      </b-input>
+    </b-field>
+    <b-field label="Código postal: ">
+      <b-input
+        type="text"
+        v-model="codigoPostal"
+        placeholder="Código postal">
+      </b-input>
+    </b-field>
+    <b-field label="Número de personas que viven en el hogar: ">
+      <b-input
+        type="text"
+        v-model="noPersonasHogar"
+        placeholder="Número de personas que viven en el hogar">
+      </b-input>
+    </b-field>
+    <b-field label="Edad del jefe de familia: ">
+      <b-input
+        type="text"
+        v-model="edadGfeFam"
+        placeholder="Edad jefe de familia">
+      </b-input>
+    </b-field>
+    <br>
+    <b-button class="is-info">
+      Enviar formulario
+    </b-button>
+    <br><br><br><br><br><br>
   </section>
 </template>
 
 <script>
-export default {}
+export default {
+  data () {
+    return {
+      nombre: '',
+      ocupacion: '',
+      direccion: '',
+      codigoPostal: null,
+      noPersonasHogar: null,
+      edadGfeFam: null
+    }
+  }
+}
 </script>
diff --git a/pages/alumno/index.vue b/pages/alumno/index.vue
index 014129f..bc6507d 100644
--- a/pages/alumno/index.vue
+++ b/pages/alumno/index.vue
@@ -1,9 +1,12 @@
 <template>
   <section>
-    hola
+    <DataAlumno />
   </section>
 </template>
 
 <script>
-export default {}
+import DataAlumno from '../../components/alumno/DataAlumno'
+export default {
+  components: { DataAlumno }
+}
 </script>
diff --git a/pages/responsable/nuevo/index.vue b/pages/responsable/nuevo/index.vue
index 2829993..04c09d1 100644
--- a/pages/responsable/nuevo/index.vue
+++ b/pages/responsable/nuevo/index.vue
@@ -1,15 +1,27 @@
 <template>
+  <div class="container">
   <div class="columns is-mobile">
-    <div class="column column is-10 is-offset-1">
-      <section class="mensaje is-size-5-desktop is-size-5-widescreen is-size-5-fullhd">
-        <p class="block">Estimado(a) responsable de programa de servicio social:</p>
-        <p class="block">
+    <div class="column ">
+
+      <b-button tag="router-link"
+                to="/responsable"
+                type="is-info is-light "
+                icon-left="arrow-left-box"
+                class="border-info my-5"
+                >
+                regresar
+      </b-button>
+
+      <section class="mensaje has-text-justified is-size-6 ">
+        <p class="block is-size-5">Estimado(a) responsable de programa de servicio social:</p>
+
+        <p class="block ">
           Te solicitamos llenar cuidadosamente los campos solicitados a continuación
           para iniciar el trámite de registro de servicio social de nuestro
           alumno(a), quien a su vez completará posteriormente el proceso en este
           mismo sistema con otros datos.
         </p>
-        <p class="block">
+        <p class="block ">
           Es muy importante escribir correctamente el correo del alumno para que el
           sistema pueda enviarle la notificación correspondiente de que ya puede
           ingresar a completar su registro. También debes tomar en cuenta que la
@@ -25,95 +37,78 @@
       </section>
 
       <section>
-        <h1 class="title is-1 my-6">
+        <h1 class="title is-1  titleAnadir">
           Añadir Servicio Social
         </h1>
-
-        <form>
-          <div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
-            <div class="column is-full-mobile is-three-quarters-tablet is-two-thirds-desktop is-two-thirds-widescreen is-half-fullhd">
-
-              <b-field class="columns">
+          <div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd pl-0">
+            <div class="column  pl-0">
+            <form>
+              <b-field class="column p-0 my-5 is-full">
                       <input
-                      class="input column is-two-thirds"
+                      class="input column "
                       v-model="noCuenta"
                       message="Solo numeros"
                       required="required"
                       maxlength="9" type="number"
                       placeholder="Cuenta"
-                      min="0"></input>
+                      min="0" />
 
                       <p class="control">
-                        <b-button class="button is-info" @click="buscar(alumno.cuenta)">Buscar</b-button>
+                        <b-button class="button is-info" @click=" simple()">Buscar</b-button>
                       </p>
               </b-field>
 
-              <b-field  label="Nombre" >
-                  <b-input :value="alumno.nombre" disabled></b-input>
+              <b-field label="Nombre">
+                <div class="input">{{ alumno.nombre }}</div>
               </b-field>
 
-              <b-field  label="Carrera" >
-                  <b-input :value="alumno.carrera"  disabled></b-input>
+              <b-field label="Carrera">
+                <div class="input">{{ alumno.carrera }}</div>
               </b-field>
 
-              <b-field label="Creditos" >
-                  <b-input :value="alumno.creditos" disabled></b-input>
+              <b-field label="Creditos">
+                <div class="input">{{ alumno.creditos }}</div>
               </b-field>
 
               <b-field label="Seleccione programa">
-                  <b-select placeholder="dependencias"  expanded v-model="programaSelected.id" @change="programaSe()">
-                     <option
+                  <b-select placeholder="programa"  expanded v-model="programaSelectedID">
+                    <option
                     v-for="programa in programas"
                     v-bind:key="programa.id"
                     :value="programa.id"
-                    @click="programaSe()"
                     >{{ programa.nombre }}</option>
 
                   </b-select>
               </b-field>
 
               <b-field label="Institucion">
-                  <b-input :value="programaSelected.institucion"  disabled></b-input>
+                <div class="input">{{ programaSelected.institucion }}</div>
               </b-field>
 
-              <b-field label="Dependencia" >
-                  <b-input :value="programaSelected.dependencia" disabled></b-input>
+              <b-field label="Dendencia">
+                <div class="input">{{ programaSelected.dependencia }}</div>
               </b-field>
 
-              <b-field label="Clave del programa" >
-                  <b-input :value="programaSelected.clave" disabled></b-input>
+              <b-field label="Clave del programa">
+                <div class="input">{{ programaSelected.clave }}</div>
               </b-field>
 
-              <b-field label="fecha de inicio">
-                  <b-datepicker
-                      ref="datepicker1"
-                      expanded
-                      placeholder="Select a date"
-                      :mobile-native="false"
-                       :min-date="minDate"
-                      v-model="dataSend.inicio">
-                  </b-datepicker>
-                  <b-button
-                      @click="$refs.datepicker1.toggle()"
-                      icon-left="calendar-today"
-                      type="is-info"
-                      />
+              <b-field label="Fecha de inicio">
+                <b-datepicker
+                  placeholder="Inicio"
+                  icon="calendar-today"
+                  v-model="dataSend.inicio[0]"
+                  :min-date="minDate1">
+                </b-datepicker>
               </b-field>
 
-              <b-field label="fecha de fin">
-                 <b-datepicker
-                      ref="datepicker2"
-                      expanded
-                      placeholder="Select a date"
-                      :mobile-native="false"
-                       :min-date="new Date(dataSend.inicio.getTime() + seisMeses)"
-                      v-model="dataSend.fin">
-                  </b-datepicker>
-                  <b-button
-                      @click="$refs.datepicker2.toggle()"
-                      icon-left="calendar-today"
-                      type="is-info"
-                       />
+              <b-field label="Fecha de fin" v-if="dataSend.inicio">
+                <b-datepicker
+                  placeholder="Fin"
+                  v-model="dataSend.fin[0]"
+                  :min-date="minDate2"
+                  icon="calendar-today">
+                </b-datepicker>
               </b-field>
 
               <b-field label="Correo">
@@ -122,84 +117,52 @@
 
               <h3 class="title is-4 mt-6">Carta de aceptación (en formato .PDF. No se aceptan fotos).</h3>
 
-              <!-- <b-field class=" file is-link" :class="{'has-name': !!file}">
-                  <b-upload v-model="dataSend.file" class="file-label">
-                      <span class="file-cta ">
-                          <b-icon class="file-icon" icon="upload"></b-icon>
-                          <span class="file-label">Click to upload</span>
-                      </span>
-                      <span class="file-name" v-if="file">
-                          {{ file.name }}
-                      </span>
+              <b-field>
+                  <b-upload v-model="dataSend.file" drag-drop expanded accept="application/pdf">
+                    <section class="section">
+                      <div class="content has-text-centered">
+                        <p>
+                          <b-icon icon="upload" size="is-large"></b-icon>
+                        </p>
+                        <p>{{ dataSend.file.name || "Arrastra aquí tu archivo o da click para buscar"}}</p>
+                      </div>
+                    </section>
                   </b-upload>
-              </b-field> -->
+              </b-field>
 
-              <!-- <b-field class="file is-primary" :class="{'has-name': !!file}">
-        <b-upload v-model="file" class="file-label">
-            <span class="file-cta">
-                <b-icon class="file-icon" icon="upload"></b-icon>
-                <span class="file-label">Click to upload</span>
-            </span>
-            <span class="file-name" v-if="file">
-                {{ file.name }}
-            </span>
-        </b-upload>
-              </b-field >-->
-
-              <section class="container is-full">
-                  <b-field>
-                      <b-upload v-model="dropFiles"
-                          multiple
-                          drag-drop>
-                          <section class="section">
-                              <div class="content has-text-centered">
-                                  <p>
-                                      <b-icon
-                                          icon="upload"
-                                          size="is-large">
-                                      </b-icon>
-                                  </p>
-                                  <p>Drop your files here or click to upload</p>
-                              </div>
-                          </section>
-                      </b-upload>
-                  </b-field>
-
-                  <div class="tags is-fullwidth">
-                      <span v-for="(file, index) in dropFiles"
-                          :key="index"
-                          class="tag is-primary is-fullwidth" >
-                          {{file.name}}
-                          <button class="delete is-small is-fullwidth"
-                              type="button"
-                              @click="deleteDropFile(index)">
-                          </button>
-                      </span>
-                  </div>
-              </section>
+            </form>
+            <div class="my-6">
+              <b-button tag="router-link"
+                  to="/responsable"
+                  type="is-info is-light "
+                  icon-left="arrow-left-box"
+                  class="border-info"
+                   style="float: left;"
+                  size="is-medium"
+                  >
+                  regresar
+              </b-button>
 
               <b-field class="derecha">
-                <button class="button is-success is-medium" @click="open" style="float: right; margin:2rem 0;">
+                <button :disabled='dataSend.file == "" || noCuenta == "" || dataSend.correo == "" ||  dataSend.inicio == "" || dataSend.fin == ""'
+                class="button is-success is-medium"
+                @click="open"
+                style="float: right;">
                     Enviar
                 </button>
               </b-field>
             </div>
+            </div>
           </div>
-        </form>
-       <!--  <div>
-            <b-field>
-                <button class="button is-primary is-medium" @click="open">
-                    Enviar
-                </button>
-            </b-field>
-        </div> -->
+
       </section>
 
-     <!--  <pre>
+      <!-- <pre>
         {{$data}}
       </pre> -->
     </div>
   </div>
+  </div>
 </template>
 
 <script>
@@ -215,12 +178,14 @@ export default {
       dropFiles: [],
       minDate: new Date('January 01, 2020 03:24:00'), // "2020-01-01T06:00:00.000Z",
       seisMeses: 1000 * 60 * 60 * 24 * 7 * 4 * 6,
+      minDate1: new Date('2020-01-01'),
+      programaSelectedID: '',
       programaSelected: {
-        id: '',
-        nombre: 'acatlan',
-        institucion: 'acatlan',
-        dependencia: 'atlan',
-        clave: '215'
+
+        nombre: '',
+        institucion: '',
+        dependencia: '',
+        clave: ''
       },
       isLoading: false,
       isFullPage: true,
@@ -254,9 +219,9 @@ export default {
         }
       ],
       dataSend: {
-        file: '',
-        inicio: new Date(),
-        fin: new Date(),
+        file: [],
+        inicio: [],
+        fin: [],
         correo: ''
       }
 
@@ -264,11 +229,14 @@ export default {
   },
   methods:
   {
-    openLoading () {
+  /*   openLoading () {
       this.isLoading = true
       setTimeout(() => {
         this.isLoading = false
       }, 10 * 1000)
+    }, */
+    simple () {
+      this.$buefy.notification.open('Something happened')
     },
     open () {
       const loadingComponent = this.$buefy.loading.open({
@@ -279,42 +247,6 @@ export default {
     deleteDropFile (index) {
       this.dropFiles.splice(index, 1)
     },
-    ClavePrograma () {
-      if (this.programa) {
-        for (let i = 0; i < this.programas.length; i++) {
-          if (this.programas[i].id === this.programaSelected) { return this.programas[i].clave }
-        }
-      }
-    },
-    Dependencia () {
-      if (this.programa) {
-        for (let i = 0; i < this.programas.length; i++) {
-          console.log(this.programaSelected + '   ' + this.programas[i].id)
-          if (this.programas[i].id === this.programaSelected) { return alert(this.programas[i].dependencia) }
-        }
-      }
-    },
-    Institucion () {
-      if (this.programa) {
-        for (let i = 0; i < this.programas.length; i++) {
-          if (this.programas[i].id === this.programaSelected) { return this.programas[i].institucion }
-        }
-      }
-    },
-    ProgramaSe () {
-      console.log('cambiar variables')
-      if (this.programaSelected.id) {
-        for (let i = 0; i < this.programas.length; i++) {
-          if (this.programas[i].id === this.programaSelected.id) {
-            this.programaSelected.nombre == this.programas[i].nombre
-            this.programaSelected.institucion == this.programas[i].institucion
-            this.programaSelected.dependencia == this.programas[i].dependencia
-            this.programaSelected.clave == this.programas[i].clave
-          }
-        }
-        return ''
-      }
-    },
     esNumero (numero) {
       const ultimaLetra = numero.length - 1
 
@@ -332,20 +264,33 @@ export default {
       this.noCuenta = Number(this.noCuenta) < 0 ? '' : this.noCuenta
       this.noCuenta = this.esNumero(this.noCuenta)
       this.noCuenta = this.maxLength(this.noCuenta, 9)
+    },
+    programaSelectedID () {
+      if (this.programaSelectedID) {
+        for (let i = 0; i < this.programas.length; i++) {
+          if (this.programas[i].id === this.programaSelectedID) {
+            this.programaSelected.nombre = this.programas[i].nombre
+            this.programaSelected.institucion = this.programas[i].institucion
+            this.programaSelected.dependencia = this.programas[i].dependencia
+            this.programaSelected.clave = this.programas[i].clave
+          }
+        }
+      }
+    }
+
+  },
+  computed: {
+    minDate2 () {
+      const min = new Date(this.dataSend.inicio)
+      return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate())
     }
   }
-  /*  created () {
-    this.dataSend.inicio = null
-    this.dataSend.fin = null
-
-} */
-
 }
 </script>
 
 <style scoped>
-.mensaje,pre{
-  margin: 4rem 0;
+.titleAnadir,pre{
+  margin: 4rem 0 0rem 0;
 }
 .enviar{
   display: flex;
@@ -354,5 +299,15 @@ export default {
 .file-cta{
   background-color: #167df0 !important;
 }
+.disabled {
+  cursor: help !important;
+  pointer-events: all !important;
+}
+.columns{
+  margin: 0;
+}
+.border-info{
+  border: 1px solid #167df0 ;
+}
 
 </style>