boton global para desactivar y activar

components/operador/BotonDesactivar.vue

@@ -0,0 +1,51 @@
+<template>
+  <b-field>
+    <b-button
+      type="is-success"
+      @click="
+        imprimirWarning(
+          'Estas a punto de desactivar este módulo. ¿Estas segur@ de querer hacerlo?',
+          llamarCambiarStatus
+        )
+      "
+      v-if="data.activo"
+    >
+      Activo
+    </b-button>
+
+    <b-button
+      type="is-danger"
+      @click="
+        imprimirWarning(
+          'Estas a punto de activar este módulo. ¿Estas segur@ de querer hacerlo?',
+          llamarCambiarStatus
+        )
+      "
+      v-else
+    >
+      Inactivo
+    </b-button>
+  </b-field>
+</template>
+
+<script>
+export default {
+  props: {
+    admin: { type: Object, required: true },
+    data: { type: Object, required: true },
+    cambiarStatus: { type: Function, required: true },
+    imprimirMensaje: { type: Function, required: true },
+    imprimirWarning: { type: Function, required: true },
+    imprimirError: { type: Function, required: true },
+  },
+  deta() {
+    return {}
+  },
+  methods: {
+    llamarCambiarStatus() {
+      if (this.data.activo) this.cambiarStatus(this.data, false)
+      else this.cambiarStatus(this.data, true)
+    },
+  },
+}
+</script>

components/operador/TablaModulTodos.vue

@@ -11,19 +11,30 @@
     </b-table-column>
 
     <b-table-column field="activo" label="Activo" v-slot="props" centered>
-      <span>{{ props.row.activo }}</span>
+      <BotonDesactivar
+        :admin="admin"
+        :data="props.row"
+        :cambiarStatus="cambiarStatus"
+        :imprimirError="imprimirError"
+        :imprimirMensaje="imprimirMensaje"
+        :imprimirWarning="imprimirWarning"
+      />
     </b-table-column>
   </b-table>
 </template>
 
 <script>
 import axios from 'axios'
+import BotonDesactivar from '@/components/operador/BotonDesactivar'
 export default {
+  components: {
+    BotonDesactivar,
+  },
   props: {
-    admin: {
-      typeof: Object,
-      require: true,
-    },
+    admin: { typeof: Object, require: true },
+    imprimirMensaje: { type: Function, required: true },
+    imprimirWarning: { type: Function, required: true },
+    imprimirError: { type: Function, required: true },
     updateActualizarTabla: { type: Function, required: true },
     actualizarTabla: { type: Boolean, required: true },
   },
@@ -34,6 +45,19 @@ export default {
     }
   },
   methods: {
+    cambiarStatus(dataSelect, status) {
+      const data = { id_modulo: dataSelect.id_modulo, activo: status }
+
+      axios
+        .put(`${process.env.api}/modulo`, data)
+        .then((res) => {
+          this.obtenerModulos()
+          this.imprimirMensaje(res.data.message)
+        })
+        .catch((err) => {
+          this.imprimirError(err.response.data)
+        })
+    },
     obtenerModulos() {
       axios
         .get(
@@ -41,6 +65,7 @@ export default {
         )
         .then((res) => {
           this.data = res.data
+          console.log(this.data)
         })
         .catch((err) => {
           this.imprimirError(err)

pages/admin/modulos/todos_modulos/index.vue

@@ -15,6 +15,9 @@
     <p class="subtitle is-4">Todos los Módulos</p>
     <TablaModulTodos
       :admin="admin"
+      :imprimirError="imprimirError"
+      :imprimirWarning="imprimirWarning"
+      :imprimirMensaje="imprimirMensaje"
       :updateActualizarTabla="updateActualizarTabla"
       :actualizarTabla="actualizarTabla"
     />