antes de cambiar uploads

components/admin/EditarCasoEspecial.vue

@@ -12,8 +12,9 @@
 
     <b-field label="Teléfono">
       <b-input
-        type="number"
+        type="tel"
         maxlength="10"
+        :has-counter="false"
         :placeholder="viejo.telefono"
         v-model="nuevo.telefono"
       />

components/admin/EditarServicio.vue

@@ -1,159 +1,170 @@
 <template>
-  <div class="container" :class="{ pad: padding }">
-    <BotonRegresar path="/admin/servicio" />
+  <div>
+    <h3 class="title">Editar información del alumno</h3>
 
-    <p class="is-size-2">Editar información del alumno</p>
-
-    <div class="formulario">
-      <b-field label="Correo eletrónico alumno">
+    <div>
+      <b-field label="Correo eletrónico del alumno">
         <b-input
           type="email"
+          :placeholder="servicio.correo"
           v-model="nuevo.correo"
-          :placeholder="viejo.correo"
         />
       </b-field>
 
-      <div v-if="status6()">
-        <b-field label="Fecha de inicio">
+      <b-field label="Fecha de inicio">
+        <b-datepicker
+          icon="calendar-today"
+          :placeholder="fecha(servicio.fechaInicio)"
+          :min-date="minDate1"
+          v-model="fechaInicio[0]"
+        />
+      </b-field>
+
+      <transition name="fade">
+        <b-field label="Fecha de fin" v-if="fechaInicio[0]">
           <b-datepicker
-            :placeholder="fecha(viejo.fechaInicio)"
             icon="calendar-today"
-            v-model="fechaInicio[0]"
-            :min-date="minDate1"
+            :placeholder="fecha(servicio.fechaInicio)"
+            :min-date="minDate2"
+            v-model="fechaFin[0]"
           />
         </b-field>
+      </transition>
 
-        <transition name="fade">
-          <b-field label="Fecha de fin" v-if="fechaInicio[0]">
-            <b-datepicker
-              :placeholder="fecha(viejo.fechaInicio)"
-              v-model="fechaFin[0]"
-              :min-date="minDate2"
-              icon="calendar-today"
-            />
-          </b-field>
-        </transition>
+      <b-field label="Dirección" v-if="servicio.direccion">
+        <b-input
+          type="text"
+          :placeholder="servicio.direccion"
+          v-model="nuevo.direccion"
+        />
+      </b-field>
 
-        <b-field label="Dirección">
-          <b-input
-            type="text"
-            v-model="nuevo.direccion"
-            :placeholder="viejo.direccion"
-          />
-        </b-field>
+      <b-field label="Teléfono" v-if="servicio.telefono">
+        <b-input
+          type="tel"
+          maxlength="10"
+          :has-counter="false"
+          :placeholder="servicio.telefono"
+          v-model="nuevo.telefono"
+        />
+      </b-field>
 
-        <b-field label="Teléfono">
-          <b-input
-            type="number"
-            :placeholder="viejo.telefono"
-            v-model="nuevo.telefono"
-            maxlength="10"
-          />
-        </b-field>
+      <b-field label="Fecha de nacimiento" v-if="servicio.fechaNacimiento">
+        <b-datepicker
+          icon="calendar-today"
+          :placeholder="fecha(servicio.fechaNacimiento)"
+          v-model="fechaNacimiento[0]"
+        />
+      </b-field>
 
-        <b-field label="Fecha de nacimiento">
-          <b-datepicker
-            :placeholder="fecha(viejo.fechaNacimiento)"
-            v-model="fechaNacimiento[0]"
-            icon="calendar-today"
-          />
-        </b-field>
+      <p class="is-size-5">Carta de aceptación</p>
 
-        <p class="is-size-5" v-if="viejo.cartaAceptacion">
-          Carta de aceptación
-        </p>
+      <b-field>
+        <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>
+                <b-icon icon="upload" size="is-large"></b-icon>
+              </p>
+              <p>
+                {{
+                  nuevo.cartaAceptacion.name ||
+                  'Arrastra aquí tu archivo o da click para buscar'
+                }}
+                {{ nuevo.cartaAceptacion }}
+              </p>
+            </div>
+          </section>
+        </b-upload>
+      </b-field>
 
-        <b-field v-if="viejo.cartaAceptacion">
-          <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>
-                  <b-icon icon="upload" size="is-large"></b-icon>
-                </p>
-                <p>
-                  {{
-                    nuevo.cartaAceptacion.name ||
-                    'Arrastra aquí tu archivo o da click para buscar'
-                  }}
-                </p>
-              </div>
-            </section>
-          </b-upload>
-        </b-field>
+      <p class="is-size-5" v-if="servicio.cartaTermino">Carta de término</p>
 
-        <p class="is-size-5" v-if="viejo.cartaTermino">Carta de término</p>
+      <b-field v-if="servicio.cartaTermino">
+        <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>
+                <b-icon icon="upload" size="is-large"></b-icon>
+              </p>
+              <p>
+                {{
+                  nuevo.cartaTermino.name ||
+                  'Arrastra aquí tu archivo o da click para buscar'
+                }}
+              </p>
+            </div>
+          </section>
+        </b-upload>
+      </b-field>
 
-        <b-field v-if="viejo.cartaTermino">
-          <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>
-                  <b-icon icon="upload" size="is-large"></b-icon>
-                </p>
-                <p>
-                  {{
-                    nuevo.cartaTermino.name ||
-                    'Arrastra aquí tu archivo o da click para buscar'
-                  }}
-                </p>
-              </div>
-            </section>
-          </b-upload>
-        </b-field>
+      <p class="is-size-5" v-if="servicio.informeGlobal">Informe global</p>
 
-        <p class="is-size-5" v-if="viejo.informeGlobal">Informe global</p>
+      <b-field v-if="servicio.informeGlobal">
+        <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>
+                <b-icon icon="upload" size="is-large"></b-icon>
+              </p>
+              <p>
+                {{
+                  nuevo.informeGlobal.name ||
+                  'Arrastra aquí tu archivo o da click para buscar'
+                }}
+              </p>
+            </div>
+          </section>
+        </b-upload>
+      </b-field>
+    </div>
 
-        <b-field v-if="viejo.informeGlobal">
-          <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>
-                  <b-icon icon="upload" size="is-large"></b-icon>
-                </p>
-                <p>
-                  {{
-                    nuevo.informeGlobal.name ||
-                    'Arrastra aquí tu archivo o da click para buscar'
-                  }}
-                </p>
-              </div>
-            </section>
-          </b-upload>
-        </b-field>
-      </div>
-
-      <b-button v-if="mostrar()" @click="actualizarDialog()" class="is-info">
+    <div>
+      <b-button
+        class="is-info"
+        :disabled="!mostrar()"
+        @click="
+          imprimirWarning(
+            '¿Seguro(a) que quiere actualizar estos datos?',
+            actualizar
+          )
+        "
+      >
         Actualizar Datos
       </b-button>
 
-      <b-button v-else disabled class="is-info">Actualizar Datos</b-button>
-
-      <b-button @click="passwordDialog()" class="is-info">
+      <b-button
+        class="is-info"
+        @click="
+          imprimirWarning(
+            '¿Seguro(a) que quieres cambiar la contraseña de este alumno?',
+            password
+          )
+        "
+      >
         Cambiar contraseña
       </b-button>
-
-      <b-loading :is-full-page="true" :can-cancel="false" v-model="isLoading" />
     </div>
   </div>
 </template>
@@ -162,17 +173,20 @@
 import axios from 'axios'
 import moment from 'moment'
 import validator from 'validator'
-import botonRegresar from '../botonRegresar'
 
 export default {
-  components: {
-    botonRegresar,
+  props: {
+    admin: { type: Object, required: true },
+    imprimirError: { type: Function, required: true },
+    imprimirMensaje: { type: Function, required: true },
+    imprimirWarning: { type: Function, required: true },
+    updateIsLoading: { type: Function, required: true },
   },
   data() {
     return {
-      idServicio: localStorage.getItem('idServicio'),
+      idServicio: null,
       idStatus: Number(localStorage.getItem('idStatus')),
-      viejo: {},
+      servicio: {},
       nuevo: {
         correo: '',
         fechaInicioFinal: '',
@@ -187,13 +201,7 @@ export default {
       fechaNacimiento: [],
       fechaInicio: [],
       fechaFin: [],
-      token: {
-        headers: {
-          token: localStorage.getItem('token'),
-        },
-      },
       minDate1: new Date('2020-01-01'),
-      isLoading: false,
       padding: false,
     }
   },
@@ -208,30 +216,6 @@ export default {
       }
       return ''
     },
-    status6() {
-      if (this.idStatus === 6) {
-        this.padding = true
-        return false
-      }
-      return true
-    },
-    obtenerRegistro() {
-      this.isLoading = true
-      return axios
-        .get(
-          `${process.env.api}/servicio/admin?idServicio=${this.idServicio}`,
-          this.token
-        )
-        .then((res) => {
-          this.viejo = res.data
-        })
-        .catch((err) => {
-          this.error(err.response.data.message)
-        })
-        .finally(() => {
-          this.isLoading = false
-        })
-    },
     dangerToast() {
       this.$buefy.toast.open({
         message: 'Asegurate de ingresar un PDF',
@@ -288,11 +272,32 @@ export default {
           break
       }
     },
+    obtenerRegistro() {
+      this.updateIsLoading(true)
+      axios
+        .get(
+          `${process.env.api}/servicio/admin?idServicio=${this.idServicio}`,
+          this.admin.token
+        )
+        .then((res) => {
+          this.servicio = res.data
+          if (
+            this.servicio.Status.idStatus === 6 ||
+            this.servicio.Status.idStatus === 10
+          )
+            this.$router.push('/admin/servicio')
+          this.updateIsLoading(false)
+        })
+        .catch((err) => {
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
+        })
+    },
     actualizar() {
       const formData = new FormData()
       const data = { idServicio: this.idServicio }
 
-      this.isLoading = true
+      this.updateIsLoading(true)
       if (this.nuevo.direccion) data.direccion = this.nuevo.direccion
       if (this.nuevo.correo) data.correo = this.nuevo.correo
       if (this.nuevo.telefono) data.telefono = this.nuevo.telefono
@@ -308,100 +313,44 @@ export default {
         formData.append('cartaTermino', this.nuevo.cartaTermino)
       if (this.nuevo.informeGlobal)
         formData.append('informeGlobal', this.nuevo.informeGlobal)
-
       axios
-        .put(`${process.env.api}/servicio/update`, formData, {
-          headers: {
-            'Content-Type': 'multipart/form-data',
-            token: this.token.headers.token,
-          },
-        })
+        .put(
+          `${process.env.api}/servicio/update`,
+          formData,
+          this.admin.tokenArchivo
+        )
         .then((res) => {
           this.toast()
+          this.updateIsLoading(false)
           this.$router.push('/admin/servicio')
         })
         .catch((err) => {
-          this.error(err.response.data.message)
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
         })
-        .finally(() => {
-          this.isLoading = false
-        })
-    },
-    actualizarDialog() {
-      this.$buefy.dialog.confirm({
-        title: 'Actualizar datos',
-        message: '¿Seguro(a) que quiere actualizar estos datos?',
-        confirmText: 'Confirmar',
-        cancelText: 'Cancelar',
-        type: 'is-success',
-        hasIcon: true,
-        onConfirm: () => this.actualizar(),
-      })
-    },
-    passwordDialog() {
-      this.$buefy.dialog.confirm({
-        title: 'Actualizar datos',
-        message: '¿Seguro(a) que quiere actualizar la contraseña?',
-        confirmText: 'Confirmar',
-        cancelText: 'Cancelar',
-        type: 'is-success',
-        hasIcon: true,
-        onConfirm: () => this.password(),
-      })
     },
     password() {
-      this.isLoading = true
       const data = { idServicio: this.idServicio }
+
+      this.updateIsLoading(true)
       axios
-        .put(`${process.env.api}/usuario/new_password_alumno`, data, this.token)
+        .put(
+          `${process.env.api}/usuario/new_password_alumno`,
+          data,
+          this.admin.token
+        )
         .then((res) => {
           this.$buefy.toast.open({
             message: 'Se ha enviado el correo con la nueva contraseña',
             type: 'is-success',
           })
+          this.updateIsLoading(false)
           this.$router.push('/admin')
         })
         .catch((err) => {
-          this.error(err.response.data.message)
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
         })
-        .finally(() => {
-          this.isLoading = false
-        })
-    },
-    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
-      }
-
-      this.$buefy.dialog.alert({
-        title: 'Error',
-        message: msj,
-        type: 'is-danger',
-        hasIcon: true,
-        icon: 'alert-circle',
-        ariaRole: 'alertdialog',
-        ariaModal: true,
-      })
-      if (salir == true) {
-        localStorage.clear()
-        this.$router.push(`/`)
-      }
     },
   },
   computed: {
@@ -423,7 +372,9 @@ export default {
     },
   },
   created() {
-    this.obtenerRegistro()
+    this.idServicio = Number(localStorage.getItem('idServicio'))
+    if (!this.idServicio) this.$router.push('/admin')
+    else this.obtenerRegistro()
   },
 }
 </script>
@@ -433,11 +384,8 @@ export default {
 .fade-leave-active {
   transition: opacity 0.5s;
 }
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }
-.pad {
-  padding-bottom: 5%;
-  padding-top: 5%;
-}
 </style>

components/alumno/CompletarDatosPersonales.vue

@@ -11,11 +11,12 @@
       />
     </b-field>
 
-    <b-field label="Telefono">
+    <b-field label="Teléfono">
       <b-input
         type="tel"
         placeholder="Telefono"
         maxlength="10"
+        :has-counter="false"
         v-model="telefono"
       />
     </b-field>

components/casoEspecial/NuevoCasoEspecial.vue

@@ -39,7 +39,13 @@
     </b-field>
 
     <b-field label="Teléfono">
-      <b-input type="tel" placeholder="Teléfono" v-model="telefono" />
+      <b-input
+        type="tel"
+        placeholder="Teléfono"
+        maxlength="10"
+        :has-counter="false"
+        v-model="telefono"
+      />
     </b-field>
 
     <b-field label="Correo electrónico">

components/responsable/NuevoServicio.vue

@@ -80,7 +80,7 @@
       />
     </b-field>
 
-    <b-field label="Correo del Alumno">
+    <b-field label="Correo electrónico del Alumno">
       <b-input type="email" placeholder="Email" v-model="correo" />
     </b-field>
 

nuxt.config.js

@@ -1,7 +1,7 @@
 export default {
   /* Server de pruebas */
-  server: { port: 3016 },
-  // server: { port: 8080 },
+  // server: { port: 3016 },
+  server: { port: 8080 },
   ssr: false,
   target: 'static',
   head: {
@@ -24,9 +24,9 @@ export default {
   axios: {},
   build: {},
   env: {
-    // api: 'http://localhost:3000',
+    api: 'http://localhost:3000',
     // api: "https://890af9d598a4.ngrok.io"
     // api: 'https://venus.acatlan.unam.mx/ss-pruebas',
-    api: "https://venus.acatlan.unam.mx/serviciosocial",
+    // api: 'https://venus.acatlan.unam.mx/serviciosocial',
   },
 }

pages/admin/servicio/editar/index.vue

@@ -1,27 +1,40 @@
 <template>
   <section class="container px-2 pb-6">
+    <BotonRegresar path="/admin/servicio" />
+
     <EditarServicio
       :admin="admin"
       :imprimirMensaje="imprimirMensaje"
       :imprimirWarning="imprimirWarning"
       :imprimirError="imprimirError"
+      :updateIsLoading="updateIsLoading"
     />
+
+    <BotonRegresar path="/admin/servicio" />
+
+    <b-loading :is-full-page="true" :can-cancel="false" v-model="isLoading" />
   </section>
 </template>
 
 <script>
 import EditarServicio from '@/components/admin/EditarServicio'
+import BotonRegresar from '@/components/botonRegresar'
 
 export default {
   components: {
+    BotonRegresar,
     EditarServicio,
   },
   data() {
     return {
+      isLoading: false,
       admin: {},
     }
   },
   methods: {
+    updateIsLoading(booleanValue) {
+      this.isLoading = booleanValue
+    },
     imprimirError(err = {}, title = '¡Hubo un error!', onConfirm = () => {}) {
       this.$buefy.dialog.alert({
         ariaRole: 'alertdialog',
@@ -85,6 +98,12 @@ export default {
           token: localStorage.getItem('token'),
         },
       }
+      this.admin.tokenArchivo = {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          token: localStorage.getItem('token'),
+        },
+      }
     },
   },
   created() {
@@ -92,7 +111,6 @@ export default {
     if (this.admin.idTipoUsuario === 2) this.$router.push('/responsable')
     if (this.admin.idTipoUsuario === 3) this.$router.push('/alumno')
     if (this.admin.idTipoUsuario === 4) this.$router.push('/casoEspecial')
-    if (!localStorage.getItem('idServicio')) this.$router.push('/admin')
   },
 }
 </script>

pages/admin/servicio/index.vue

@@ -99,7 +99,7 @@ export default {
       idServicio: null,
       admin: {},
       alumno: {
-        Programa: {},
+        Programa: { Usuario: {} },
         Usuario: {},
         Carrera: {},
         Status: {},