feat/checkbox-check-uncheck-all-nodes

src/components/nodes/adm/AdmNodesTable.vue

@@ -1,6 +1,6 @@
 <template>
   <NodesTableContainer>
-    <NodesTableHead />
+    <NodesTableHead v-model="isAllChecked" />
 
     <tbody>
       <AdmNodesTableItem v-for="node in admNodes" :key="node.url" blockchain="adm" :node="node" />
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { ref, computed, watch, defineComponent } from 'vue'
 import { useStore } from 'vuex'
 import NodesTableContainer from '@/components/nodes/components/NodesTableContainer.vue'
 import NodesTableHead from '@/components/nodes/components/NodesTableHead.vue'
@@ -29,23 +29,33 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
+
     const admNodes = computed(() => {
       const arr = store.getters['nodes/adm']
 
       return [...arr].sort(sortNodesFn)
     })
 
+    const isAllChecked = ref(false)
+
+    const isAllNodesEnabled = !admNodes.value.some(node => node.active === false)
+    if (isAllNodesEnabled) isAllChecked.value = true
+
+    watch(isAllChecked, (value) => {
+      admNodes.value.forEach((admNode) => {
+        if (admNode && admNode.active !== value) {
+          store.dispatch('nodes/toggle', {...admNode, active: value})
+        }
+      })
+    })
+
     return {
       admNodes,
-      classes
+      classes,
+      isAllChecked
     }
   }
 })
 </script>
 
-<style lang="scss">
-@import 'vuetify/settings';
-
-.adm-nodes-table {
-}
-</style>
+<style lang="scss"></style>

src/components/nodes/coins/CoinNodesTable.vue

@@ -1,6 +1,6 @@
 <template>
   <NodesTableContainer>
-    <NodesTableHead hide-socket :label="t('nodes.coin')" />
+    <NodesTableHead v-model="isAllChecked" hide-socket :label="t('nodes.coin')" />
 
     <tbody>
       <CoinNodesTableItem v-for="node in nodes" :key="node.url" :label="node.label" :node="node" />
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { ref, computed, watch, defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 import NodesTableContainer from '@/components/nodes/components/NodesTableContainer.vue'
@@ -39,10 +39,24 @@ export default defineComponent({
       return [...arr].sort(sortCoinNodesFn)
     })
 
+    const isAllChecked = ref(false)
+
+    const isAllNodesEnabled = !nodes.value.some(node => node.active === false)
+    if (isAllNodesEnabled) isAllChecked.value = true
+
+    watch(isAllChecked, (value) => {
+      nodes.value.forEach((node) => {
+        if (node && node.active !== value) {
+          store.dispatch('nodes/toggle', {...node, active: value})
+        }
+      })
+    })    
+
     return {
       t,
       nodes,
-      classes
+      classes,
+      isAllChecked
     }
   }
 })

src/components/nodes/components/NodesTableHead.vue

@@ -1,7 +1,9 @@
 <template>
   <thead :class="classes.root">
     <tr>
-      <th :class="classes.checkbox" v-if="!hideCheckbox" />
+      <th :class="classes.checkbox" v-if="!hideCheckbox">
+        <NodeStatusCheckbox v-model="isAllEnabled" />
+      </th>
       <th :class="classes.label" class="pl-0 pr-2" v-if="label">
         {{ label }}
       </th>
@@ -19,10 +21,18 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import NodeStatusCheckbox from './NodeStatusCheckbox.vue'
 import { useI18n } from 'vue-i18n'
 
 export default {
+  components: {
+    NodeStatusCheckbox
+  },
   props: {
+    modelValue: {
+      type: Boolean,
+    },
     hideCheckbox: {
       type: Boolean
     },
@@ -39,20 +49,30 @@ export default {
       type: String
     }
   },
-  setup() {
+  setup(props, { emit }) {
     const { t } = useI18n()
-
+    
     const className = 'nodes-table-head'
     const classes = {
       root: className,
       th: `${className}__th`,
       checkbox: `${className}__checkbox`,
       label: `${className}__label`
     }
-
+
+    const isAllEnabled = computed({
+      get() {
+        return props.modelValue
+      },
+      set(value) {
+        emit('update:modelValue', value)
+      }
+    })
+
     return {
       classes,
-      t
+      t,
+      isAllEnabled
     }
   }
 }

src/components/nodes/services/ServiceNodesTable.vue

@@ -1,6 +1,6 @@
 <template>
   <NodesTableContainer>
-    <NodesTableHead hide-socket :label="t('nodes.service')" />
+    <NodesTableHead v-model="isAllChecked" hide-socket :label="t('nodes.service')" />
 
     <tbody>
       <ServiceNodesTableItem
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { ref, computed, watch, defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 import NodesTableContainer from '@/components/nodes/components/NodesTableContainer.vue'
@@ -44,10 +44,25 @@ export default defineComponent({
       return [...arr].sort(sortCoinNodesFn)
     })
 
+    const isAllChecked = ref(false)
+
+    const isAllNodesEnabled = !nodes.value.some(node => node.active === false)
+    if (isAllNodesEnabled) isAllChecked.value = true
+
+    watch(isAllChecked, (value) => {
+      nodes.value.forEach((node) => {
+        if (node && node.active !== value) {
+          const { label, url } = node
+          store.dispatch('services/toggle', {type: label, url, active: value})
+        }
+      })
+    })      
+
     return {
       t,
       nodes,
-      classes
+      classes,
+      isAllChecked
     }
   }
 })