listo nuevo caso especial

components/casoEspecial/formularioEspecial.vue

@@ -1,145 +1,143 @@
 <template>
-  <div>
-    <p class="is-size-3 mb-5"><b>Agregar un servicio social</b></p>
+  <section>
+    <h4 class="is-size-3 mb-5"><b>Agregar un servicio social</b></h4>
+
     <form>
       <b-field label="Número de cuenta" class="column p-0 my-5 is-full">
         <input
-          class="input column"
-          v-model="noCuenta"
-          message="Solo numeros"
-          required="required"
-          maxlength="9"
           type="number"
+          class="input"
           placeholder="Número de cuenta"
+          message="Solo numeros"
+          v-model="noCuenta"
+          maxlength="9"
           min="0"
         />
 
-        <p class="control">
-          <b-button class="button is-info" @click="buscarAlumno()"
-            >Buscar</b-button
-          >
-        </p>
+        <div class="control">
+          <b-button type="is-info" @click="buscarAlumno()">Buscar</b-button>
+        </div>
       </b-field>
 
       <b-field label="Nombre">
-        <div class="input" placeholder="Nombre">{{ alumno.nombre }}</div>
+        <p class="input" placeholder="Nombre">{{ alumno.nombre }}</p>
       </b-field>
 
       <b-field label="Carrera">
-        <div class="input" placeholder="Carrera">{{ alumno.carrera }}</div>
+        <p class="input" placeholder="Carrera">{{ alumno.carrera }}</p>
       </b-field>
 
       <b-field label="Créditos">
-        <div class="input" placeholder="Créditos">
-          {{ `${alumno.creditos}%` }}
-        </div>
+        <p class="input" placeholder="Créditos">
+          <span v-if="!alumno.creditos"></span>
+          <span v-else> {{ Number(alumno.creditos) }}% </span>
+        </p>
       </b-field>
 
       <b-field label="Dirección">
         <b-input
+          type="text"
           class="my-4"
           placeholder="Dirección"
-          v-model="alumno.direccion"
+          v-model="direccion"
         ></b-input>
       </b-field>
 
       <b-field label="Fecha de inicio">
         <b-datepicker
-          placeholder="Fecha Inicio"
           icon="calendar-today"
-          v-model="alumno.fechaInicio"
-          :min-date="minDate1"
+          placeholder="Fecha Inicio"
+          v-model="fechaInicio"
+          :min-date="fechaMaxima"
         >
         </b-datepicker>
       </b-field>
 
-      <b-field label="Fecha de fin">
+      <b-field label="Fecha de fin" v-if="validarFecha(fechaInicio)">
         <b-datepicker
-          placeholder="Fecha fin"
-          v-model="alumno.fechaFin"
-          :min-date="minDate2"
           icon="calendar-today"
+          placeholder="Fecha fin"
+          v-model="fechaFin"
+          :min-date="fechaMinima"
         >
         </b-datepicker>
       </b-field>
 
       <b-field label="Fecha de nacimiento">
         <b-datepicker
-          placeholder="Nacimiento"
           icon="calendar-today"
-          v-model="alumno.fechaNacimiento"
+          placeholder="Nacimiento"
+          v-model="fechaNacimiento"
         >
         </b-datepicker>
       </b-field>
 
       <b-field label="Teléfono">
         <b-input
+          type="tel"
           class="my-4"
           placeholder="Teléfono"
-          maxlength="10"
-          v-model="alumno.telefono"
+          v-model="telefono"
         ></b-input>
       </b-field>
 
       <b-field label="Correo electrónico">
         <b-input
+          type="email"
           class="my-4"
           placeholder="Correo electrónico"
-          v-model="alumno.correoElectronico"
+          v-model="email"
         ></b-input>
       </b-field>
-    </form>
 
-    <b-field label="Artículo">
-      <b-select
-        placeholder="Seleccione el articulo correspondiente"
-        expanded
-        v-model="alumno.articulo"
-      >
-        <option value="11">Artículo 52</option>
-        <option value="12">Artículo 91</option>
-      </b-select>
-    </b-field>
-
-    <b-field label="Motivo" v-if="alumno.articulo === '11'">
-      <b-select
-        class="my-4"
-        expanded
-        placeholder="Motivo"
-        v-model="alumno.motivo"
-      >
-        <option value="1">Tercera edad</option>
-        <option value="2">Capacidades diferentes</option>
-      </b-select>
-    </b-field>
-
-    <div v-if="alumno.articulo === '12'">
-      <b-field label="Institución">
-        <b-input
+      <b-field label="Artículo">
+        <b-select
           class="my-4"
-          placeholder="Institución"
-          maxlength="250"
-          v-model="alumno.institucion"
-        ></b-input>
+          placeholder="Seleccione el articulo correspondiente"
+          v-model="idStatus"
+          expanded
+        >
+          <option value="11">Artículo 52</option>
+
+          <option value="12">Artículo 91</option>
+        </b-select>
       </b-field>
 
-      <b-field label="Dependencia">
-        <b-input
-          placeholder="Dependencia"
-          maxlength="250"
-          v-model="alumno.dependencia"
-        ></b-input>
+      <b-field label="Motivo" v-if="idStatus === '11'">
+        <b-select class="my-4" placeholder="Motivo" v-model="motivo" expanded>
+          <option value="1">Tercera edad</option>
+
+          <option value="2">Capacidades diferentes</option>
+        </b-select>
       </b-field>
-    </div>
+
+      <div v-if="idStatus === '12'">
+        <b-field label="Institución" class="mb-0">
+          <b-input
+            placeholder="Institución"
+            maxlength="250"
+            v-model="institucion"
+          ></b-input>
+        </b-field>
+
+        <b-field label="Dependencia">
+          <b-input
+            placeholder="Dependencia"
+            maxlength="250"
+            v-model="dependencia"
+          ></b-input>
+        </b-field>
+      </div>
+    </form>
 
     <b-field label="Añade un archivo (.zip, .rar)">
       <b-upload
-        v-model="file"
-        drag-drop
         type="is-black"
-        expanded
-        accept=".zip,.rar,.7zip"
         v-on:input="validarExt()"
+        accept=".zip,.rar,.7zip"
+        v-model="file"
+        expanded
+        drag-drop
       >
         <section>
           <div class="content has-text-centered">
@@ -155,90 +153,65 @@
         </section>
       </b-upload>
     </b-field>
-    <b-field class="centro">
+
+    <div class="has-text-centered">
       <b-button
-        :disabled="
-          alumno.articulo == '' ||
-          alumno.numeroCuenta == '' ||
-          alumno.nombre == '' ||
-          alumno.carrera == '' ||
-          alumno.direccion == '' ||
-          alumno.fechaNacimiento == '' ||
-          alumno.fechaInicio == '' ||
-          alumno.fechaFin == '' ||
-          alumno.correoElectronico == '' ||
-          file == ''
-        "
+        :disabled="botonEnviar()"
         class="border-success my-5"
         type="is-success"
         @click="enviar()"
         >Enviar</b-button
       >
-    </b-field>
+    </div>
+
     <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
-  </div>
+  </section>
 </template>
 
 <script>
-import 'buefy/dist/buefy.css'
 import axios from 'axios'
-import validator from 'validator'
 import moment from 'moment'
+
 export default {
   data() {
     return {
+      responsable: {},
+      alumno: {},
       file: {},
-      isLoading: false,
-      searched: false,
       noCuenta: '',
-      alumno: {
-        cuenta: '',
-        nombre: '',
-        carrera: '',
-        creditos: '',
-        discapacidad: '',
-        institucion: '',
-        dependencia: '',
-        idAlumno: '',
-        idCarrera: '',
-        telefono: '',
-        fechaNacimiento: [],
-        fechaInicio: [],
-        fechaFin: [],
-        correoElectronico: '',
-      },
-      minDate1: new Date('2020-01-01'),
-      token: {
-        headers: {
-          token: localStorage.getItem('token'),
-        },
-      },
+      fechaInicio: [],
+      fechaFin: [],
+      fechaNacimiento: [],
+      direccion: '',
+      email: '',
+      telefono: '',
+      idStatus: '',
+      institucion: '',
+      dependencia: '',
+      motivo: '',
+      isLoading: false,
+      token: {},
     }
   },
   methods: {
     reset() {
-      this.alumno.cuenta = ''
-      this.alumno.nombre = ''
-      this.alumno.carrera = ''
-      this.alumno.creditos = ''
-      this.alumno.institucion = ''
-      this.alumno.dependencia = ''
-      this.alumno.motivo = ''
-      this.alumno.idAlumno = ''
-      this.alumno.articulo = ''
-      this.alumno.direccion = ''
-      this.alumno.idCarrera = ''
-      this.alumno.fechaNacimiento = []
-      this.alumno.fechaInicio = []
-      this.alumno.fechaFin = []
-      this.alumno.correoElectronico = ''
-      this.alumno.telefono = ''
-      this.noCuenta = ''
+      this.alumno = {}
+      this.fechaNacimiento = []
+      this.fechaInicio = []
+      this.fechaFin = []
+      this.direccion = ''
+      this.email = ''
+      this.telefono = ''
+      this.idStatus = ''
+      this.institucion = ''
+      this.dependencia = ''
+      this.motivo = ''
       this.file = {}
     },
     validarExt() {
       const extPermitidas1 = /(.zip)$/i
       const extPermitidas2 = /(.rar)$/i
+
       if (this.file.name) {
         if (
           (extPermitidas1.exec(this.file.name) ||
@@ -249,12 +222,47 @@ export default {
         }
       }
     },
+    botonEnviar() {
+      if (
+        !this.noCuenta ||
+        !this.alumno.idUsuario ||
+        !this.telefono ||
+        !this.direccion ||
+        !this.email ||
+        !this.validarFecha(this.fechaInicio) ||
+        !this.validarFecha(this.fechaFin) ||
+        !this.validarFecha(this.fechaNacimiento) ||
+        !this.idStatus ||
+        (this.idStatus == '11' && !this.motivo) ||
+        (this.idStatus == '12' && (!this.dependencia || !this.institucion)) ||
+        !this.file.name
+      )
+        return true
+      return false
+    },
+    validarFecha(date) {
+      const min = new Date(date)
+
+      return moment(min).isValid()
+    },
     dangerToast() {
       this.$buefy.toast.open({
         message: 'Asegurate de ingresar un archivo con la extensión correcta',
         type: 'is-danger',
       })
     },
+    getLocalhostInfo() {
+      this.responsable.idUsuario = localStorage.getItem('idUsuario')
+      this.responsable.idTipoUsuario = Number(
+        localStorage.getItem('idTipoUsuario')
+      )
+      this.responsable.tipoUsuario = localStorage.getItem('tipoUsuario')
+      this.token = {
+        headers: {
+          token: localStorage.getItem('token'),
+        },
+      }
+    },
     buscarAlumno() {
       this.isLoading = true
       axios
@@ -264,37 +272,34 @@ export default {
         )
         .then((res) => {
           this.alumno = res.data
-          this.alumno.cuenta = this.noCuenta
-          this.alumno.creditos = Number(res.data.creditos)
-          this.searched = true
-        })
-        .catch((error) => {
-          this.error(error.response.data.message)
-        })
-        .finally(() => {
           this.isLoading = false
         })
+        .catch((err) => {
+          this.noCuenta = ''
+          this.isLoading = false
+          this.imprimirError(err.response.data)
+        })
     },
     enviar() {
-      this.isLoading = true
+      const formData = new FormData()
       const data = {
         idUsuario: this.alumno.idUsuario,
-        idStatus: this.alumno.articulo,
         idCarrera: this.alumno.idCarrera,
-        numeroCuenta: this.alumno.cuenta,
-        creditos: this.alumno.creditos.toString(),
-        correo: this.alumno.correoElectronico,
-        fechaInicio: moment(this.alumno.fechaInicio),
-        fechaFin: moment(this.alumno.fechaFin),
-        fechaNacimiento: moment(this.alumno.fechaNacimiento),
-        direccion: this.alumno.direccion,
-        telefono: this.alumno.telefono,
-        institucion: this.alumno.institucion,
-        dependencia: this.alumno.dependencia,
-        motivo: this.alumno.motivo,
+        idStatus: this.idStatus,
+        numeroCuenta: this.noCuenta,
+        creditos: this.alumno.creditos,
+        correo: this.email,
+        fechaInicio: moment(this.fechaInicio),
+        fechaFin: moment(this.fechaFin),
+        fechaNacimiento: moment(this.fechaNacimiento),
+        direccion: this.direccion,
+        telefono: this.telefono,
+        institucion: this.institucion,
+        dependencia: this.dependencia,
+        motivo: this.motivo,
       }
 
-      const formData = new FormData()
+      this.isLoading = true
       formData.append('alumno', JSON.stringify(data))
       formData.append('archivos', this.file)
       axios
@@ -305,9 +310,12 @@ export default {
           },
         })
         .then((res) => {
+          this.reset()
+          this.noCuenta = ''
+          this.isLoading = false
           this.$buefy.dialog.alert({
             title: 'Success',
-            message: 'Se enviaron los datos correctamente',
+            message: res.data.message,
             type: 'is-success',
             hasIcon: true,
             icon: 'checkbox-marked-circle',
@@ -315,39 +323,16 @@ export default {
             ariaRole: 'alertdialog',
             ariaModal: true,
           })
-          this.reset()
         })
-        .catch((error) => {
-          this.error(error.response.data.message)
-        })
-        .finally(() => {
+        .catch((err) => {
           this.isLoading = false
+          this.imprimirError(err.response.data)
         })
     },
-    error(msj) {
-      let salir = false
-      switch (msj) {
-        case 'invalid signature':
-          msj = 'Tu token no es valido, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'jwt expired':
-          msj = 'Tu sesión ha expirado, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'jwt malformed':
-          msj = 'No se encontro tu token, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'No hay token':
-          msj = 'Ocurrio un error al enviar tu token, inicia sesión de nuevo.'
-          salir = true
-          break
-      }
-
+    imprimirError(err) {
       this.$buefy.dialog.alert({
         title: 'Error',
-        message: msj,
+        message: err.message,
         type: 'is-danger',
         hasIcon: true,
         icon: 'alert-circle',
@@ -355,55 +340,39 @@ export default {
         ariaRole: 'alertdialog',
         ariaModal: true,
       })
-      if (salir == true) {
+      if (err.err === 'token error') {
         localStorage.clear()
-        this.$router.push(`/`)
+        this.$router.push('/')
       }
     },
-    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.length > max) return str.substr(0, max)
-      return str
-    },
-    correoValidado() {
-      if (validator.isEmail(this.alumno.correoElectronico)) {
-        return ''
-      }
-    },
-  },
-  computed: {
-    minDate2() {
-      const min = new Date(this.alumno.fechaInicio)
-      return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate())
-    },
   },
   watch: {
     noCuenta() {
-      if (this.searched === false) {
-        this.noCuenta = Number(this.noCuenta) < 0 ? '' : this.noCuenta
-        this.noCuenta = this.esNumero(this.noCuenta)
-        this.noCuenta = this.maxLength(this.noCuenta, 9)
-      } else {
-        this.noCuenta = ''
-        this.searched = false
-        this.reset()
-      }
+      this.reset()
     },
+    idStatus() {
+      this.motivo = ''
+      this.institucion = ''
+      this.dependencia = ''
+    },
+  },
+  computed: {
+    fechaMinima() {
+      const min = new Date(this.fechaInicio)
+
+      return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate())
+    },
+    fechaMaxima() {
+      return new Date(moment().add(-20, 'd'))
+    },
+  },
+  created() {
+    this.getLocalhostInfo()
   },
 }
 </script>
 
 <style>
-.centro {
-  text-align: center;
-}
 .upload .upload-draggable {
   padding: 2.5em;
 }

components/casoEspecial/tablaServicios.vue

@@ -29,6 +29,7 @@
       <b-field class="column" label="Status">
         <b-select icon="information" expanded rounded v-model="idStatus">
           <option value="">Status</option>
+
           <option
             v-for="(s, i) in status"
             :key="i"
@@ -129,11 +130,11 @@ export default {
       if (idStatus === 11) style += ' is-link is-light'
       if (idStatus === 12) style += ' is-danger is-light'
       if (idStatus === 13 || idStatus === 14) style += ' is-success is-light'
-
       return style
     },
     fecha(date) {
-      const fecha = moment(date.substr(0, 10))
+      const fecha = moment(date)
+
       return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
     },
     onPageChange(page) {

nuxt.config.js

@@ -28,8 +28,8 @@ export default {
   //   prefix: false,
   // },
   env: {
-    // api: "http://localhost:3000",
-    api: 'https://venus.acatlan.unam.mx/ss-pruebas',
+    api: "http://localhost:3000",
+    // api: 'https://venus.acatlan.unam.mx/ss-pruebas',
     // api: "https://890af9d598a4.ngrok.io"
     // api: "https://venus.acatlan.unam.mx/serviciosocial",
   },