Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Open sidebar
ChEMBL
C
ChEMBL
Main Web Interface
Web Components Submodule
Compare Revisions
a37ced244e4267853b952737abd95263bc3eeaef...4e825d9d1571d283a14ef600f758642e06bc87d9
Commits (1)
Datasets: Implement visualisation of selected items
· 4e825d9d
David Mendez
authored
Jun 04, 2021
4e825d9d
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
96 additions
and
9 deletions
+96
-9
components/common/Browsers/items/ItemsIterator.vue
components/common/Browsers/items/ItemsIterator.vue
+7
-9
components/common/Browsers/items/ItemsSelection.vue
components/common/Browsers/items/ItemsSelection.vue
+79
-0
store/datasets/BaseStore/FiltersActions.js
store/datasets/BaseStore/FiltersActions.js
+4
-0
store/datasets/BaseStore/SelectionActions.js
store/datasets/BaseStore/SelectionActions.js
+6
-0
No files found.
components/common/Browsers/items/ItemsIterator.vue
View file @
4e825d9d
...
...
@@ -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
0 → 100644
View file @
4e825d9d
<
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
View file @
4e825d9d
...
...
@@ -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
View file @
4e825d9d
...
...
@@ -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