Commits (1)
......@@ -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: {
......
<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>
......@@ -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 }) {
......
......@@ -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