Merge pull request #680 from Adamant-im/feat/checkbox-check-uncheck-a…

…ll-nodes

feat/checkbox-check-uncheck-all-nodes

src/components/nodes/adm/AdmNodesTable.vue

@@ -1,6 +1,6 @@
 <template>
   <NodesTableContainer>
-    <NodesTableHead />
+    <NodesTableHead v-model="isAllNodesChecked" :indeterminate="isPartiallyChecked" />
 
     <tbody>
       <AdmNodesTableItem v-for="node in admNodes" :key="node.url" blockchain="adm" :node="node" />
@@ -29,23 +29,34 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
+
     const admNodes = computed(() => {
       const arr = store.getters['nodes/adm']
 
       return [...arr].sort(sortNodesFn)
     })
 
+    const isAllNodesChecked = computed({
+      get() {
+        return admNodes.value.every(node => node.active)
+      },
+      set(value) {
+        store.dispatch('nodes/toggleAll', { nodesType: 'adm', active: value })
+      }
+    })
+
+    const isPartiallyChecked = computed(() => {
+      return admNodes.value.some(node => node.active) && admNodes.value.some(node => !node.active)
+    })
+
     return {
       admNodes,
-      classes
+      classes,
+      isAllNodesChecked,
+      isPartiallyChecked
     }
   }
 })
 </script>
 
-<style lang="scss">
-@import 'vuetify/settings';
-
-.adm-nodes-table {
-}
-</style>
+<style lang="scss"></style>

src/components/nodes/adm/AdmNodesTableItem.vue

@@ -9,12 +9,12 @@
       <NodeVersion v-if="node.version && active" :node="node" />
     </NodeColumn>
 
-    <NodeColumn :colspan="!showSocketColumn ? 2 : 1">
+    <NodeColumn :class="classes.columnStatus">
       <NodeStatus :node="node" />
     </NodeColumn>
 
-    <NodeColumn v-if="showSocketColumn">
-      <SocketSupport :node="node" />
+    <NodeColumn>
+      <SocketSupport v-if="showSocketColumn" :node="node" />
     </NodeColumn>
   </tr>
 </template>
@@ -34,6 +34,7 @@ const className = 'amd-nodes-table-item'
 const classes = {
   root: className,
   column: `${className}__column`,
+  columnStatus: `${className}__column--status`,
   columnCheckbox: `${className}__column--checkbox`,
   checkbox: `${className}__checkbox`
 }
@@ -118,5 +119,9 @@ export default {
 <style lang="scss">
 .amd-nodes-table-item {
   line-height: 14px;
+  
+  &__column--status {
+    max-width: 84px;
+  }
 }
 </style>

src/components/nodes/coins/CoinNodesTable.vue

@@ -1,6 +1,6 @@
 <template>
   <NodesTableContainer>
-    <NodesTableHead hide-socket :label="t('nodes.coin')" />
+    <NodesTableHead v-model="isAllNodesChecked" :indeterminate="isPartiallyChecked" hide-socket :label="t('nodes.coin')" />
 
     <tbody>
       <CoinNodesTableItem v-for="node in nodes" :key="node.url" :label="node.label" :node="node" />
@@ -39,10 +39,25 @@ export default defineComponent({
       return [...arr].sort(sortCoinNodesFn)
     })
 
+    const isAllNodesChecked = computed({
+      get() {
+        return nodes.value.every(node => node.active)
+      },
+      set(value) {
+        store.dispatch('nodes/toggleAll', { nodesType: 'coins', active: value })
+      }
+    })
+
+    const isPartiallyChecked = computed(() => {
+      return nodes.value.some(node => node.active) && nodes.value.some(node => !node.active)
+    })
+
     return {
       t,
       nodes,
-      classes
+      classes,
+      isAllNodesChecked,
+      isPartiallyChecked
     }
   }
 })

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" :indeterminate="indeterminate"/>
+      </th>
       <th :class="classes.label" class="pl-0 pr-2" v-if="label">
         {{ label }}
       </th>
@@ -19,10 +21,26 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import NodeStatusCheckbox from './NodeStatusCheckbox.vue'
 import { useI18n } from 'vue-i18n'
 
+const className = 'nodes-table-head'
+const classes = {
+  root: className,
+  th: `${className}__th`,
+  checkbox: `${className}__checkbox`,
+  label: `${className}__label`
+}
+
 export default {
+  components: {
+    NodeStatusCheckbox
+  },
   props: {
+    modelValue: {
+      type: Boolean,
+    },
     hideCheckbox: {
       type: Boolean
     },
@@ -37,22 +55,28 @@ export default {
     },
     label: {
       type: String
-    }
+    },
+    indeterminate: {
+      type: Boolean
+    },
   },
-  setup() {
+  emits: ['update:modelValue'],
+  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,7 +1,12 @@
 <template>
   <NodesTableContainer>
-    <NodesTableHead hide-socket :label="t('nodes.service')" />
-
+    <NodesTableHead 
+      v-model="isAllNodesChecked" 
+      :indeterminate="isPartiallyChecked" 
+      hide-socket 
+      :label="t('nodes.service')"
+    />
+
     <tbody>
       <ServiceNodesTableItem
         v-for="node in nodes"
@@ -44,10 +49,25 @@ export default defineComponent({
       return [...arr].sort(sortCoinNodesFn)
     })
 
+    const isAllNodesChecked = computed({
+      get() {
+        return nodes.value.every(node => node.active)
+      },
+      set(value) {
+        store.dispatch('services/toggleAll', {active: value})
+      }
+    })
+
+    const isPartiallyChecked = computed(() => {
+      return nodes.value.some(node => node.active) && nodes.value.some(node => !node.active)
+    })
+
     return {
       t,
       nodes,
-      classes
+      classes,
+      isAllNodesChecked,
+      isPartiallyChecked
     }
   }
 })

src/store/modules/nodes/nodes-actions.js

@@ -11,6 +11,15 @@ export default {
     context.commit('toggle', payload)
   },
 
+  toggleAll(context, payload) {
+    const { nodesType, active } = payload
+    const nodes = context.getters[nodesType]
+    for (const node of Object.values(nodes)) {
+      const { type, url } = node
+      context.commit('toggle', { type, url, active })
+    }
+  },
+
   setUseFastestAdmNode(context, payload) {
     context.commit('useFastestAdmNode', payload)
   },

src/store/modules/services/services-actions.ts

@@ -1,7 +1,7 @@
 import { services } from '@/lib/nodes/services'
 import { ActionTree } from 'vuex'
 import { RootState } from '@/store/types'
-import { ServicesState, TogglePayload } from '@/store/modules/services/types'
+import { ServicesState, TogglePayload, ToggleAllPayload, Node } from '@/store/modules/services/types'
 
 export const actions: ActionTree<ServicesState, RootState> = {
   updateStatus() {
@@ -14,6 +14,15 @@ export const actions: ActionTree<ServicesState, RootState> = {
     context.commit('toggle', payload)
   },
 
+  toggleAll(context, payload: ToggleAllPayload) {
+    const { active } = payload
+    const nodes = context.getters['services']
+    for (const node of Object.values(nodes)) {
+      const { label, url } = node as Node
+      context.commit('toggle', { type: label, url, active })
+    }
+  },
+
   useFastestService(context, payload: boolean) {
     context.commit('useFastestService', payload)
   }

src/store/modules/services/types.ts

@@ -21,3 +21,5 @@ export type StatusPayload = {
   status: { url: string; active: boolean }
 }
 export type TogglePayload = { type: AvailableService; url: string; active: boolean }
+export type ToggleAllPayload = { active: boolean }
+export type Node = { label: string, url: string }