From 6341ce2be5c7a90aae9cba2d98759a38ede6f023 Mon Sep 17 00:00:00 2001
From: Mattia Mancini <mancini@astron.nl>
Date: Mon, 12 Nov 2018 16:28:01 +0000
Subject: [PATCH] OSB-31: add state propagation to the multiselect component
and on reset button
---
.../src/components/MultiSelectDropdown.js | 49 ++++++++++++++-----
.../src/pages/LandingPage.js | 9 ++--
.../src/redux/reducers/mainFilters.js | 4 +-
.../src/themes/lofar-styles.css | 3 ++
.../src/themes/lofar-styles.scss | 4 ++
.../maintenancedb_view/src/themes/lofar.css | 3 ++
6 files changed, 54 insertions(+), 18 deletions(-)
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js
index 2dee653169f..ae32feaab32 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js
@@ -7,11 +7,12 @@ class SelectableOption extends Component {
selectedItem = () => {this.props.onSelectedItem(this.props.value)}
render(){
- const selectMark = this.props.isSelected ? <IsSelectIcon style={{float: "right", marginTop:".2em"}}/> : undefined
+ const selectMark = this.props.isSelected ? <IsSelectIcon style={{marginTop: '.2em', float: 'right'}}/> : undefined
const jsx = (
- <DropdownItem onClick={this.selectedItem}>
- <span>{this.props.children}</span>
+ <DropdownItem onClick={this.selectedItem} style={{float: 'left'}}>
{selectMark}
+ <span>{this.props.children}</span>
+
</DropdownItem>
)
return jsx
@@ -28,13 +29,21 @@ export class MultiSelectDropdown extends Component{
}
}
// Toggle the dropdown state
- toggle = () => this.setState({isOpen:!this.state.isOpen})
+ toggle = () => {
+
+ this.setState({isOpen:!this.state.isOpen})
+ }
itemSelected = (e) => {
- const newSelectedItems = this.state.selectedItems
- newSelectedItems[e] = !newSelectedItems[e]
- this.setState({selectedItems: newSelectedItems})
- this.props.onSelectionChange(this.getSelectedItemsList())
+ if (e === 'all'){
+ this.setState({selectedItems: {}})
+ this.props.onSelectionChange([])
+ }else{
+ const newSelectedItems = this.state.selectedItems
+ newSelectedItems[e] = !newSelectedItems[e]
+ this.setState({selectedItems: newSelectedItems})
+ this.props.onSelectionChange(this.getSelectedItemsList())
+ }
}
getSelectedItemsList () {
@@ -45,10 +54,11 @@ export class MultiSelectDropdown extends Component{
const selectedItemsList = this.getSelectedItemsList()
if(selectedItemsList.length === 0 ){
return this.props.placeHolder;
- }else if(selectedItemsList.length === 1){
- return selectedItemsList[0]
+ }else if(selectedItemsList.length <= 4){
+ return selectedItemsList.join(', ')
}else {
- return `${selectedItemsList[0]}, ...`
+ const firstFour = selectedItemsList.slice(0, 4)
+ return firstFour.join(', ') + ', ...'
}
}
@@ -58,9 +68,24 @@ export class MultiSelectDropdown extends Component{
return false
}
+ componentDidMount() {
+ const selectedItems = this.state.selectedItems
+ let update = false
+ if(this.props.selectedItems === undefined) return
+ for(let item of this.props.selectedItems){
+ if(!selectedItems.hasOwnProperty(item) || !selectedItems[item] ){
+ selectedItems[item] = true
+ update = true
+ }
+ }
+
+ if(update) this.setState({selectedItems: selectedItems})
+ }
render(){
- const options = this.props.options.map((item, key) => <SelectableOption key={key} value={item.value} isSelected={this.isItemSelected(item.value)} onSelectedItem={this.itemSelected}>{item.label}</SelectableOption>)
+ let allOptions = [{value:'all', label:'<ALL>'}].concat(this.props.options)
+ let options = allOptions.map((item, key) => <SelectableOption key={key} value={item.value} isSelected={this.isItemSelected(item.value)} onSelectedItem={this.itemSelected}>{item.label}</SelectableOption>)
+
const jsx = (
<Dropdown isOpen={this.state.isOpen} toggle={this.toggle} className={this.props.className}>
<DropdownToggle caret>
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
index 9785ecb51e8..65a8e0d0988 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
@@ -81,6 +81,7 @@ class ToolBarC extends Component {
className="form-input"
placeHolder="All"
options={errorTypes}
+ selectedItems={this.props.selectedErrorTypes}
onSelectionChange={(e)=> this.onSelectionErrorTypes(e)}/>
</Form>
</div>);
@@ -115,7 +116,7 @@ class LandingPageC extends Component {
errors_only: this.props.errorsOnly,
n_station_tests: 4,
n_rtsm: 4,
- error_types: this.props.errorTypes
+ error_types: this.props.selectedErrorTypes
});
return `${url}?${parametersString}`;
@@ -131,7 +132,7 @@ class LandingPageC extends Component {
// ---- Optional parameters
station_group: this.props.selectedStationGroup,
errors_only: this.props.errorsOnly,
- error_types: this.props.errorTypes
+ error_types: this.props.selectedErrorTypes
});
return `${url}?${parametersString}`;
@@ -147,7 +148,7 @@ class LandingPageC extends Component {
// ---- Optional parameters
parameters.station_group = this.props.selectedStationGroup
parameters.errors_only = this.props.errorsOnly
- parameters.error_types = this.props.errorTypes
+ parameters.error_types = this.props.selectedErrorTypes
const parametersString = composeQueryString(parameters)
return `${url}&${parametersString}`;
@@ -172,7 +173,7 @@ class LandingPageC extends Component {
parameters.errors_only = this.props.errorsOnly
parameters.station_group = this.props.selectedStationGroup
parameters.test_type = test_type
- parameters.error_types = this.props.errorTypes
+ parameters.error_types = this.props.selectedErrorTypes
const parametersString = composeQueryString(parameters)
return `${url}&${parametersString}`;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
index 97134b276e3..ef52320124f 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
@@ -11,7 +11,7 @@ const initialState = {
period: 7, // days
startDate: moment().subtract(7, 'days'),
endDate: moment(),
- errorTypes: []
+ selectedErrorTypes: []
};
@@ -77,7 +77,7 @@ export default function(state = initialState, action) {
return {
...state,
- errorTypes: type_list
+ selectedErrorTypes: type_list
}
}
default:
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
index 8299bf97e06..a918e9a86f1 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
@@ -110,3 +110,6 @@
background-color: white !important;
color: black !important;
border: none; }
+
+.form-input button:hover {
+ background-color: #e1e1e1 !important; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
index ca65f46782d..5674f114c5e 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
@@ -129,3 +129,7 @@ $griditem-color: $secondary-dark;
color: black !important;
border: none;
}
+
+.form-input button:hover {
+ background-color: $secondary-light !important;
+}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
index 255b22d2bc9..659512c93c4 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
@@ -6429,3 +6429,6 @@ a.text-dark:hover, a.text-dark:focus {
background-color: white !important;
color: black !important;
border: none; }
+
+.form-input button:hover {
+ background-color: #e1e1e1 !important; }
--
GitLab