tabla responsables lista

components/admin/inputTableA.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-6">
+  <div>
     <h3 class="title">Servicios Sociales</h3>
 
     <div class="columns">

components/admin/responsables/tablaResponsables.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="section">
-    <h3 class="title">Lista de responsables</h3>
+  <div>
+    <h3 class="title">Tabla de responsables</h3>
 
     <div class="columns">
       <b-field class="column" label="Correo Electrónico">
@@ -8,9 +8,9 @@
           type="text"
           placeholder="Correo"
           icon="mail"
-          rounded
-          v-model="correo"
+          v-model="busqueda.correo"
           @keyup.enter.native="obtenerResponsables()"
+          rounded
         ></b-input>
       </b-field>
 
@@ -19,20 +19,22 @@
           type="name"
           placeholder="Nombre"
           icon="account"
-          rounded
-          v-model="nombre"
+          v-model="busqueda.nombre"
           @keyup.enter.native="obtenerResponsables()"
+          rounded
         ></b-input>
       </b-field>
 
-      <b-button
-        type="is-info"
-        class="column is-align-self-center"
-        expanded
-        @click="obtenerResponsables()"
-      >
-        Buscar
-      </b-button>
+      <div class="column is-align-self-center">
+        <b-button
+          type="is-info"
+          @click="obtenerResponsables()"
+          expanded
+          rounded
+        >
+          Buscar
+        </b-button>
+      </div>
     </div>
 
     <b-table
@@ -58,10 +60,16 @@
       </b-table-column>
 
       <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
-        <span>{{ props.row.nombre }}</span>
+        <span>{{ props.row.nombre }} </span>
+      </b-table-column>
+
+      <b-table-column field="estado" label="Estado" v-slot="props" centered>
+        <span :class="style(props.row.activo)"
+          >{{ props.row.activo ? 'Activo' : 'Desactivado' }}
+        </span>
       </b-table-column>
     </b-table>
-  </section>
+  </div>
 </template>
 
 <script>
@@ -77,15 +85,19 @@ export default {
       total: 0,
       isLoading: false,
       busqueda: {},
-      correo: '',
-      correoAnterior: '',
-      nombre: '',
-      nombreAnterior: '',
+      busquedaAnterior: {},
       token: {},
       responsableSeleccionado: {},
     }
   },
   methods: {
+    style(activo) {
+      let style = 'tag'
+
+      if (activo) style += ' is-success'
+      else style += ' is-danger'
+      return style
+    },
     onPageChange(page) {
       this.page = page
       this.obtenerResponsables()
@@ -105,15 +117,15 @@ export default {
 
       this.isLoading = true
       if (
-        this.correo != this.correoAnterior ||
-        this.nombre != this.nombreAnterior
+        this.busqueda.correo != this.busquedaAnterior.correo ||
+        this.busqueda.nombre != this.busquedaAnterior.nombre
       ) {
         this.page = 1
-        this.correoAnterior = this.correo
-        this.nombreAnterior = this.nombre
+        this.busquedaAnterior.correo = this.busqueda.correo
+        this.busquedaAnterior.nombre = this.busqueda.nombre
       }
-      if (this.nombre) data += `&nombre=${this.nombre}`
-      if (this.correo) data = `&correo=${this.correo}`
+      if (this.busqueda.nombre) data += `&nombre=${this.busqueda.nombre}`
+      if (this.busqueda.correo) data = `&correo=${this.busqueda.correo}`
       axios
         .get(
           `${process.env.api}/usuario/responsables?&pagina=${this.page}${data}`,

pages/admin/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="container px-2">
+  <section class="container px-2 pb-6">
     <div class="pb-5 pt-6">
       <b-button type="is-info" tag="router-link" to="/admin/responsables">
         Ver responsables

pages/admin/registros/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="container px-2 mb-6">
+  <section class="container px-2 pb-6">
     <BotonRegresar path="/admin" />
 
     <h3 class="title">Reportes</h3>

pages/admin/responsables/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <section class="container px-2 pb-6">
     <BotonRegresar path="/admin" />
 
     <CargaMasiva />
@@ -7,14 +7,15 @@
     <a :href="link">
       <b-button class="my-4 is-info">Descargar plantilla</b-button>
     </a>
+
     <TablaResponsables />
-  </div>
+  </section>
 </template>
 
 <script>
-import TablaResponsables from '../../../components/admin/responsables/tablaResponsables'
-import CargaMasiva from '../../../components/admin/responsables/cargaMasiva'
-import BotonRegresar from '../../../components/botonRegresar'
+import TablaResponsables from '@/components/admin/responsables/tablaResponsables'
+import CargaMasiva from '@/components/admin/responsables/cargaMasiva'
+import BotonRegresar from '@/components/botonRegresar'
 
 export default {
   components: {