components/common/Browsers/items/ItemsIterator.vue

@@ -4,15 +4,10 @@
       <v-col cols="12">
         <v-row>
           <v-col cols="6">
-            Selection allItemsSelected:
-            {{ datasetState.selection.allItemsSelected }}, someItemsSelected:
-            {{ datasetState.selection.someItemsSelected }}
-            exceptions
-            {{ exceptionsItems }}, numItemsSelected:
-            {{ datasetState.selection.numItemsSelected }}
-            selectionMode:
-            {{ datasetState.selection.selectionMode }} selectedInPage:
-            {{ datasetState.selection.selectedInPage }}
+            <ItemsSelection
+              :dataset-state="datasetState"
+              :store-module-name="storeModuleName"
+            />
           </v-col>
           <v-col cols="6">
             <div class="d-flex justify-end">
@@ -36,10 +31,13 @@
 <script>
 import QuickTextSearch from '~/web-components-submodule/components/common/Browsers/items/QuickTextSearch.vue'
 import ChEMBLDataTable from '~/web-components-submodule/components/common/dataSets/data_table/ChEMBLDataTable.vue'
+import ItemsSelection from '~/web-components-submodule/components/common/Browsers/items/ItemsSelection.vue'
+
 export default {
   components: {
     QuickTextSearch,
     ChEMBLDataTable,
+    ItemsSelection,
   },
   props: {
     datasetState: {

components/common/Browsers/items/ItemsSelection.vue

+<template>
+  <v-template>
+    <v-skeleton-loader
+      v-if="!datasetState.initialLoad"
+      type="list-item-two-line"
+    ></v-skeleton-loader>
+    <v-row v-else dense>
+      <v-col cols="8">
+        <div class="d-flex justify-center">
+          <v-subheader>
+            Selected {{ datasetState.selection.numItemsSelected }} out of
+            {{ datasetState.totalItems }} items</v-subheader
+          >
+        </div>
+        <v-progress-linear :value="percentageSelected"></v-progress-linear>
+      </v-col>
+      <v-col cols="4">
+        <div class="d-flex align-end clear-button-container">
+          <v-btn
+            v-if="!noItemsSelected"
+            depressed
+            color="primary"
+            small
+            outlined
+            :disabled="disableClear"
+            @click="clearAllSelections"
+          >
+            Clear
+          </v-btn>
+        </div>
+      </v-col>
+    </v-row>
+  </v-template>
+</template>
+
+<script>
+export default {
+  props: {
+    datasetState: {
+      type: Object,
+      default: () => {},
+    },
+    storeModuleName: {
+      type: String,
+      default: () => '',
+    },
+  },
+  computed: {
+    percentageSelected() {
+      if (this.datasetState.totalItems === 0) {
+        return 0
+      }
+      return (
+        (this.datasetState.selection.numItemsSelected /
+          this.datasetState.totalItems) *
+        100
+      )
+    },
+    disableClear() {
+      return (
+        this.datasetState.selection.numItemsSelected === 0 ||
+        this.datasetState.pageLoading
+      )
+    },
+  },
+  methods: {
+    clearAllSelections() {
+      const setAllSelectedAction = `${this.storeModuleName}/clearAllselections`
+      this.$store.dispatch(setAllSelectedAction)
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.clear-button-container {
+  height: 100%;
+}
+</style>

store/datasets/BaseStore/FiltersActions.js

@@ -429,24 +429,28 @@ const actions = {
     commit('TOGGLE_FILTER_TERM', { filterKey, term })
     commit('SET_PAGE', 1)
     dispatch('loadCurrentPage')
+    dispatch('clearAllselections')
     dispatch('reloadAllFilters')
   },
   selectRange({ commit, state, dispatch }, { filterKey, range }) {
     commit('TOGGLE_FILTER_RANGE', { filterKey, range })
     commit('SET_PAGE', 1)
     dispatch('loadCurrentPage')
+    dispatch('clearAllselections')
     dispatch('reloadAllFilters')
   },
   selectSpecificTerms({ commit, state, dispatch }, { filterKey, terms }) {
     commit('SELECT_SPECIFIC_TERMS', { filterKey, terms })
     commit('SET_PAGE', 1)
     dispatch('loadCurrentPage')
+    dispatch('clearAllselections')
     dispatch('reloadAllFilters')
   },
   clearFiltersSelection({ commit, state, dispatch }, filterKey) {
     commit('CLEAR_FILTERS_SELECTION', filterKey)
     commit('SET_PAGE', 1)
     dispatch('loadCurrentPage')
+    dispatch('clearAllselections')
     dispatch('reloadAllFilters')
   },
   reloadAllFilters({ commit, state, dispatch }) {

store/datasets/BaseStore/SelectionActions.js

@@ -58,6 +58,12 @@ const actions = {
     }
     commit('SET_SELECTED_IN_PAGE', selectedInPage)
   },
+  clearAllselections({ commit, state, dispatch }) {
+    commit('SET_SELECTION_MODE', SelectionModes.noItemsExcept)
+    commit('RESET_SELECTION_EXCEPTIONS')
+    dispatch('calculateNumSelected')
+    dispatch('calculateSelectedInPage')
+  },
 }
 
 export default actions