tabla admins en institucion

components/admin/Institucion.vue

@@ -1,44 +1,72 @@
 <template>
-  <div class="box">
-    <div
-      class="columns is-align-items-flex-end"
-      v-if="admin.tipoUsuario.id_tipo_usuario === 2"
+  <div>
+    <div class="box">
+      <div
+        class="columns is-align-items-flex-end"
+        v-if="admin.tipoUsuario.id_tipo_usuario === 2"
+      >
+        <InstitucionSelect
+          :updateIdInstitucion="updateIdInstitucion"
+          :idInstitucion="
+            typeof idInstitucion === 'undefined' ? 0 : idInstitucion
+          "
+        />
+
+        <b-field class="column">
+          <b-button
+            type="is-success"
+            :disabled="!idInstitucion"
+            @click="buscar()"
+            rounded
+            expanded
+          >
+            Buscar
+          </b-button>
+        </b-field>
+      </div>
+
+      <div class="columns">
+        <AdminInstitucion
+          :buscar="buscar"
+          :updateIsLoading="updateIsLoading"
+          :admin="admin"
+          :institucion="institucion"
+        />
+
+        <InfoInstitucion
+          :admin="admin"
+          :institucion="institucion"
+          :updateIsLoading="updateIsLoading"
+          :buscar="buscar"
+        />
+      </div>
+    </div>
+
+    <b-table
+      :data="data"
+      :total="total"
+      :current-page="page"
+      :per-page="25"
+      :loading="isLoadingTable"
+      @page-change="onPageChange"
+      class="mb-6"
+      backend-pagination
+      hoverable
+      paginated
+      striped
     >
-      <InstitucionSelect
-        :updateIdInstitucion="updateIdInstitucion"
-        :idInstitucion="
-          typeof idInstitucion === 'undefined' ? 0 : idInstitucion
-        "
-      />
+      <b-table-column field="operador" label="Admin" v-slot="props" centered>
+        <span>{{ props.row.operador }}</span>
+      </b-table-column>
 
-      <b-field class="column">
-        <b-button
-          type="is-success"
-          :disabled="!idInstitucion"
-          @click="buscar()"
-          rounded
-          expanded
-        >
-          Buscar
-        </b-button>
-      </b-field>
-    </div>
+      <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
+        <span>{{ props.row.nombre }}</span>
+      </b-table-column>
 
-    <div class="columns">
-      <AdminInstitucion
-        :buscar="buscar"
-        :updateIsLoading="updateIsLoading"
-        :admin="admin"
-        :institucion="institucion"
-      />
-
-      <InfoInstitucion
-        :admin="admin"
-        :institucion="institucion"
-        :updateIsLoading="updateIsLoading"
-        :buscar="buscar"
-      />
-    </div>
+      <b-table-column field="correo" label="Correo" v-slot="props" centered>
+        <span>{{ props.row.correo }}</span>
+      </b-table-column>
+    </b-table>
   </div>
 </template>
 
@@ -55,12 +83,25 @@ export default {
     updateIsLoading: { type: Function, required: true },
   },
   data() {
-    return { institucion: {}, idInstitucion: 0, modulo: { institucion: {} } }
+    return {
+      institucion: {},
+      idInstitucion: 0,
+      data: [],
+      isLoadingTable: false,
+      page: 1,
+      total: 0,
+      lastSearch: {},
+      search: { idInstitucion: 0 },
+    }
   },
   methods: {
     updateIdInstitucion(idInstitucion) {
       this.idInstitucion = idInstitucion
     },
+    onPageChange(page) {
+      this.page = page
+      this.obtenerAdmins()
+    },
     buscar() {
       this.updateIsLoading(true)
       axios
@@ -75,12 +116,38 @@ export default {
             this.$router.push(
               `/admin/configuracion/instituciones/${this.idInstitucion}`
             )
+          return this.obtenerAdmins()
         })
         .catch((err) => {
           this.updateIsLoading(false)
           this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
         })
     },
+    obtenerAdmins() {
+      let data = ''
+
+      this.isLoadingTable = true
+      if (this.search.idInstitucion != this.lastSearch.idInstitucion) {
+        this.page = 1
+        this.lastSearch.idInstitucion = this.search.idInstitucion
+      }
+      if (this.search.idInstitucion)
+        data = `&id_institucion=${this.search.idInstitucion}`
+      axios
+        .get(
+          `${process.env.api}/operador/operadores?pagina=${this.page}&id_tipo_usuario=3${data}`,
+          this.$getToken.token()
+        )
+        .then((res) => {
+          this.data = res.data[0]
+          this.total = res.data[1]
+          this.isLoadingTable = false
+        })
+        .catch((err) => {
+          this.isLoadingTable = false
+          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
+        })
+    },
   },
   created() {
     if (this.$route.params.institucion)

components/admin/TablaAdmins.vue

@@ -58,7 +58,7 @@
         <span>{{ props.row.nombre }}</span>
       </b-table-column>
 
-      <b-table-column field="correo" label="correo" v-slot="props" centered>
+      <b-table-column field="correo" label="Correo" v-slot="props" centered>
         <span>{{ props.row.correo }}</span>
       </b-table-column>