tabla admin lista

components/admin/inputTableA.vue

@@ -1,153 +1,115 @@
 <template>
-  <div
-    v-if="this.idTipoUsuario == 1 && this.tipoUsuario == 'admin'"
-    class="container"
-  >
+  <section class="section">
     <div class="columns">
-      <div class="column is-3 mb-0">
-        <b-field>
-          <b-input
-            placeholder="No.Cuenta"
-            icon="school"
-            rounded
-            v-model="numeroCuenta"
-            maxlength="9"
-          ></b-input>
-        </b-field>
-      </div>
+      <b-field class="column" label="Número de Cuenta">
+        <b-input
+          type="text"
+          placeholder="No.Cuenta"
+          icon="school"
+          rounded
+          v-model="numeroCuenta"
+          maxlength="9"
+        ></b-input>
+      </b-field>
 
-      <div class="column is-3 mb-4 pb-4">
-        <b-field>
-          <b-input
-            type="name"
-            placeholder="Nombre"
-            icon="account"
-            rounded
-            v-model="nombre"
-          ></b-input>
-        </b-field>
-      </div>
+      <b-field class="column" label="Nombre">
+        <b-input
+          type="name"
+          placeholder="Nombre"
+          icon="account"
+          rounded
+          v-model="nombre"
+        ></b-input>
+      </b-field>
 
-      <div class="column is-3 mb-4 pb-4">
-        <b-field>
-          <b-select
-            placeholder="Status"
-            icon="information"
-            expanded
-            rounded
-            v-model="idStatus"
+      <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"
+            :value="s.idStatus"
+            v-show="i < 10"
           >
-            <optgroup>
-              <option value="">Status</option>
-              <option value="1">Pre-registro</option>
-              <option value="2">Pre-registro Validado</option>
-              <option value="3">Registro</option>
-              <option value="4">Pre-Término</option>
-              <option value="5">Término</option>
-              <option value="6">Liberación</option>
-              <option value="7">Carta Aceptacion Rechazada</option>
-              <option value="8">Carta Termino Rechazada</option>
-              <option value="9">Informe Global Rechazado</option>
-              <option value="10">Cancelado</option>
-            </optgroup>
-          </b-select>
-        </b-field>
-      </div>
+            {{ s.status }}
+          </option>
+        </b-select>
+      </b-field>
 
-      <div class="buttons section pt-3 pl-5">
-        <b-button type="is-info" @click="obtenerDatos(idStatus)">
-          Buscar
-        </b-button>
-      </div>
+      <b-button
+        type="is-info"
+        class="column is-align-self-center"
+        expanded
+        @click="obtenerServicios()"
+      >
+        Buscar
+      </b-button>
     </div>
 
-    <div class="columns">
-      <section class="column is-12">
-        <b-table
-          :data="data"
-          :loading="isLoading"
-          paginated
-          backend-pagination
-          :total="total"
-          :per-page="perPage"
-          @page-change="onPageChange"
-          hoverable
-          striped
-        >
-          <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
-            <span @click="servicios(props.row.idServicio)">{{
-              props.row.nombre
-            }}</span>
-          </b-table-column>
+    <b-table
+      :data="data"
+      :total="total"
+      :current-page="page"
+      :per-page="perPage"
+      :selected.sync="servicioSeleccionado"
+      :loading="isLoading"
+      @page-change="onPageChange"
+      hoverable
+      striped
+      paginated
+      backend-pagination
+    >
+      <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
+        <span>{{ props.row.Usuario.nombre }}</span>
+      </b-table-column>
 
-          <b-table-column
-            field="numeroCuenta"
-            label="Número de Cuenta"
-            v-slot="props"
-            centered
-            width="100"
-          >
-            <span @click="servicios(props.row.idServicio)">{{
-              props.row.numeroCuenta
-            }}</span>
-          </b-table-column>
+      <b-table-column
+        field="numeroCuenta"
+        label="Número de Cuenta"
+        v-slot="props"
+        centered
+      >
+        <span>{{ props.row.Usuario.usuario }}</span>
+      </b-table-column>
 
-          <b-table-column
-            field="carrera"
-            label="Carrera"
-            v-slot="props"
-            centered
-          >
-            <span @click="servicios(props.row.idServicio)">{{
-              props.row.carrera
-            }}</span>
-          </b-table-column>
-          <b-table-column
-            field="fechaInicio"
-            truncate="10"
-            label="Fecha Inicio"
-            v-slot="props"
-            centered
-          >
-            <span @click="servicios(props.row.idServicio)">{{
-              fecha(props.row.fechaInicio)
-            }}</span>
-          </b-table-column>
+      <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
+        <span>{{ props.row.Carrera.carrera }}</span>
+      </b-table-column>
 
-          <b-table-column
-            field="fechaFin"
-            label="Fecha Fin"
-            v-slot="props"
-            centered
-          >
-            <span @click="servicios(props.row.idServicio)">{{
-              fecha(props.row.fechaFin)
-            }}</span>
-          </b-table-column>
+      <b-table-column
+        field="fechaInicio"
+        label="Fecha Inicio"
+        v-slot="props"
+        centered
+      >
+        <span>{{ fecha(props.row.fechaInicio) }}</span>
+      </b-table-column>
 
-          <b-table-column field="status" label="Status" v-slot="props" centered>
-            <span
-              @click="servicios(props.row.idServicio)"
-              class="tag"
-              :class="types(props.row.idStatus)"
-              >{{ props.row.status }}</span
-            >
-          </b-table-column>
+      <b-table-column
+        field="fechaFin"
+        label="Fecha Fin"
+        v-slot="props"
+        centered
+      >
+        <span>{{ fecha(props.row.fechaFin) }}</span>
+      </b-table-column>
 
-          <b-table-column
-            field="diaCreado"
-            label="Día de creación"
-            v-slot="props"
-            centered
-          >
-            <span @click="servicios(props.row.idServicio)">{{
-              fecha(props.row.diaCreado)
-            }}</span>
-          </b-table-column>
-        </b-table>
-      </section>
-    </div>
-  </div>
+      <b-table-column
+        field="fechaCreado"
+        label="Día de Creación"
+        v-slot="props"
+        centered
+      >
+        <span>{{ fecha(props.row.createdAt) }}</span>
+      </b-table-column>
+
+      <b-table-column field="status" label="Status" v-slot="props" centered>
+        <span :class="types(props.row.Status.idStatus)">{{
+          props.row.Status.status
+        }}</span>
+      </b-table-column>
+    </b-table>
+  </section>
 </template>
 
 <script>
@@ -157,142 +119,108 @@ import moment from 'moment'
 export default {
   data() {
     return {
-      idUsuario: '',
-      idTipoUsuario: '',
-      tipoUsuario: '',
+      admin: {},
+      status: [],
       data: [],
-      total: '',
-      isLoading: false,
       page: 1,
       perPage: 25,
+      total: 0,
+      isLoading: false,
+      busqueda: {},
       numeroCuenta: '',
+      numeroCuentaAnterior: '',
       nombre: '',
+      nombreAnterior: '',
       idStatus: '',
-      token: {
-        headers: {
-          token: window.localStorage.getItem('token'),
-        },
-      },
+      idStatusAnterior: '',
+      token: {},
+      servicioSeleccionado: {},
     }
   },
-
   methods: {
-    onPageChange(page) {
-      this.page = page
-      this.obtenerDatos()
+    ultimosCampos(idStatus) {
+      return idStatus >= 4 && idStatus != 7
     },
     types(idStatus) {
-      if (idStatus === 1) {
-        return 'is-dark'
-      } else if (idStatus === 2) {
-        return 'is-info'
-      } else if (idStatus === 3) {
-        return 'is-warning'
-      } else if (idStatus === 4) {
-        return 'is-link'
-      } else if (idStatus === 5) {
-        return 'is-success'
-      } else if (idStatus === 6) {
-        return 'is-success is-light'
-      } else if (idStatus === 7) {
-        return 'is-danger'
-      } else if (idStatus === 8) {
-        return 'is-danger'
-      } else if (idStatus === 9) {
-        return 'is-danger'
-      } else if (idStatus === 10) {
-        // admin
-        return 'is-danger'
-      }
+      let style = 'tag'
+
+      if (idStatus === 1) style += ' is-dark'
+      if (idStatus === 2) style += ' is-info'
+      if (idStatus === 3) style += ' is-warning'
+      if (idStatus === 4) style += ' is-link'
+      if (idStatus === 5) style += ' is-success'
+      if (idStatus === 6) style += ' is-success is-light'
+      if (idStatus === 7) style += ' is-danger'
+      if (idStatus === 8) style += ' is-danger'
+      if (idStatus === 9) style += ' is-danger'
+      return style
     },
     fecha(date) {
       const fecha = moment(date.substr(0, 10))
-
       return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
     },
-    obtenerDatos(idStatus) {
-      this.isLoading = true
-      this.data = []
+    onPageChange(page) {
+      this.page = page
+      this.obtenerServicios()
+    },
 
+    getLocalhostInfo() {
+      this.admin.idUsuario = localStorage.getItem('idUsuario')
+      this.admin.idTipoUsuario = localStorage.getItem('idTipoUsuario')
+      this.admin.tipoUsuario = localStorage.getItem('tipoUsuario')
+      this.token = {
+        headers: {
+          token: window.localStorage.getItem('token'),
+        },
+      }
+    },
+    obtenerServicios() {
+      let data = ''
+
+      this.isLoading = true
+      if (
+        this.numeroCuenta != this.numeroCuentaAnterior ||
+        this.nombre != this.nombreAnterior ||
+        this.idStatus != this.idStatusAnterior
+      ) {
+        this.page = 1
+        this.numeroCuentaAnterior = this.numeroCuenta
+        this.nombreAnterior = this.nombre
+        this.idStatusAnterior = this.idStatus
+      }
+      if (this.idStatus) data += `&idStatus=${this.idStatus}`
+      if (this.nombre) data += `&nombre=${this.nombre}`
+      if (this.numeroCuenta) data = `&numeroCuenta=${this.numeroCuenta}`
       axios
         .get(
-          `${process.env.api}/servicio/servicios_admin?pagina=${this.page}&idStatus=${this.idStatus}&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`,
+          `${process.env.api}/servicio/servicios_admin?&pagina=${this.page}${data}`,
           this.token
         )
         .then((res) => {
-          const servicios = res.data.servicios
-
-          if (servicios.length !== 0) {
-            for (let i = 0; i < servicios.length; i++) {
-              this.data.push({
-                nombre: servicios[i].Usuario.nombre,
-                numeroCuenta: servicios[i].Usuario.usuario,
-                carrera: servicios[i].Carrera.carrera,
-                fechaInicio: servicios[i].fechaInicio,
-                fechaFin: servicios[i].fechaFin,
-                status: servicios[i].Status.status,
-                diaCreado: servicios[i].createdAt,
-                idStatus: servicios[i].Status.idStatus,
-                idServicio: servicios[i].idServicio,
-              })
-            }
-          }
-          let currentTotal = servicios.length
-          let contador
-
-          for (let i = 0; i < res.data.registros / 25 + 1; i++) {
-            contador = i
-          }
-          currentTotal = this.perPage * contador
-          this.total = currentTotal
-        })
-
-        .catch((error) => {
-          this.error(error.response.data.message)
-        })
-
-        .finally(() => {
+          console.log(res.data)
+          this.data = res.data.serviciosAdmin
+          this.total = res.data.count
           this.isLoading = false
         })
+        .catch((err) => {
+          this.isLoading = false
+          this.imprimirError(err.response.data)
+        })
     },
-    servicios(idServicio) {
-      window.localStorage.setItem('idServicio', idServicio)
-      this.$router.push('/admin/servicio')
+    obtenerCatalogoStatus() {
+      axios
+        .get(`${process.env.api}/status`, this.token)
+        .then((res) => {
+          this.status = res.data
+        })
+        .catch((err) => {
+          this.imprimirError(err.response.data)
+        })
     },
-    getIdLocal() {
-      this.idUsuario = localStorage.getItem('idUsuario')
-      this.idTipoUsuario = localStorage.getItem('idTipoUsuario')
-      this.tipoUsuario = localStorage.getItem('tipoUsuario')
-
-      if (this.idTipoUsuario != 1 && this.tipoUsuario != 'admin') {
-        localStorage.clear()
-        this.$router.push('/')
-      }
-    },
-    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',
@@ -300,15 +228,30 @@ export default {
         ariaRole: 'alertdialog',
         ariaModal: true,
       })
-      if (salir == true) {
+      if (err.err === 'token error') {
         localStorage.clear()
-        this.$router.push(`/`)
+        this.$router.push('/')
       }
     },
+    paginaCorrecta() {
+      if (this.admin.idTipoUsuario === 2) this.$router.push('/responsable')
+      if (this.admin.idTipoUsuario === 3) this.$router.push('/alumno')
+    },
+  },
+  watch: {
+    servicioSeleccionado() {
+      window.localStorage.setItem(
+        'idServicio',
+        this.servicioSeleccionado.idServicio
+      )
+      this.$router.push(`/admin/servicio`)
+    },
   },
   created() {
-    this.getIdLocal()
-    this.obtenerDatos(0)
+    this.getLocalhostInfo()
+    this.paginaCorrecta()
+    this.obtenerCatalogoStatus()
+    this.obtenerServicios()
   },
 }
 </script>
@@ -318,18 +261,22 @@ export default {
   border: #1b3d70;
   box-shadow: 0 0 8px 0 #1b3d70;
 }
+
 .select select:focus {
   border-color: #1b3d70;
   box-shadow: 0 0 8px 0 #1b3d70;
 }
+
 .select:not(.is-multiple):not(.is-loading)::after {
   border-color: #1b3d70;
 }
+
 .pagination-link.is-current {
   background-color: #1b3d70;
   border-color: #1b3d70;
 }
-.b-table {
+
+.pinter {
   cursor: pointer;
 }
 </style>

components/admin/servicio/vistaServicio.vue

@@ -112,21 +112,21 @@
 
 <script>
 import axios from 'axios'
-import tituloServicio from './tituloServicio'
-import tituloStatus from './tituloStatus'
-import datosPrograma from './datosPrograma'
-import datosPersonales from './datosPersonales'
-import documento from './documento'
-import botonRegresar from '../../botonRegresar'
+import TituloServicio from './tituloServicio'
+import TituloStatus from './tituloStatus'
+import DatosPrograma from './datosPrograma'
+import DatosPersonales from './datosPersonales'
+import Documento from './documento'
+import BotonRegresar from '../../botonRegresar'
 
 export default {
   components: {
-    tituloServicio,
-    datosPrograma,
-    datosPersonales,
-    tituloStatus,
-    documento,
-    botonRegresar,
+    TituloServicio,
+    DatosPrograma,
+    DatosPersonales,
+    TituloStatus,
+    Documento,
+    BotonRegresar,
   },
   data() {
     return {
@@ -330,8 +330,8 @@ export default {
       }
     },
   },
-  async created() {
-    await this.obtenerRegistro()
+  created() {
+    this.obtenerRegistro()
   },
 }
 </script>

pages/admin/index.vue

@@ -1,27 +1,25 @@
 <template>
-  <div class="container">
-    <div class="section">
-      <div class="buttons section py-0 pl-0">
-        <b-button type="is-info" tag="router-link" to="/admin/programa">
-          Ver programas
-        </b-button>
-        <b-button type="is-info" tag="router-link" to="/admin/cuestionario">
-          Ver Registros
-        </b-button>
-        <b-button type="is-info" tag="router-link" to="/admin/especial">
-          Ver casos especiales
-        </b-button>
-      </div>
-      <div class="pb-0">
-        <p class="title is-three-fifths is-offset-one-fifth">
-          Servicios Sociales
-        </p>
-      </div>
-      <section class="section">
-        <InputTableA />
-      </section>
+  <section class="container">
+    <div class="section pb-0">
+      <b-button type="is-info" tag="router-link" to="/admin/programa">
+        Ver programas
+      </b-button>
+
+      <b-button type="is-info" tag="router-link" to="/admin/cuestionario">
+        Ver Registros
+      </b-button>
+
+      <b-button type="is-info" tag="router-link" to="/admin/especial">
+        Ver casos especiales
+      </b-button>
     </div>
-  </div>
+
+    <div class="section">
+      <h3 class="title">Servicios Sociales</h3>
+
+      <InputTableA />
+    </div>
+  </section>
 </template>
 
 <script>

pages/admin/servicio/index.vue

@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import vistaServicio from '../../../components/admin/servicio/vistaServicio.vue'
+import VistaServicio from '../../../components/admin/servicio/vistaServicio.vue'
 
 export default {
   components: {
-    vistaServicio,
+    VistaServicio,
   },
   beforeCreate() {
     if (!window.localStorage.getItem('idServicio')) {