Skip to content

Commit 115f734

Browse files
Flaminia CavalloFlaminia Cavallo
authored andcommitted
feat: add option to make a data set sections collapsible
1 parent a1312fc commit 115f734

File tree

3 files changed

+104
-87
lines changed

3 files changed

+104
-87
lines changed
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React from "react";
2+
import log from "loglevel";
3+
import Checkbox from "../../../forms/form-fields/check-box";
4+
import {RadioButton, RadioButtonGroup} from "material-ui/RadioButton";
5+
6+
class RenderAsTabs extends React.Component {
7+
constructor(props, context) {
8+
super(props);
9+
this.state = {
10+
displayOptions: this.parseDisplayOptions(),
11+
};
12+
this.translate = context.d2.i18n.getTranslation.bind(
13+
context.d2.i18n
14+
);
15+
}
16+
17+
18+
parseDisplayOptions = () => {
19+
try {
20+
return this.props
21+
&& this.props.model['displayOptions']
22+
&& JSON.parse(this.props.model['displayOptions'])
23+
} catch (e) {
24+
log.error(e);
25+
return undefined
26+
}
27+
}
28+
29+
updateDisplayOptions = (newDisplayOptions) => {
30+
this.setState({displayOptions: newDisplayOptions});
31+
this.props.model.displayOptions = JSON.stringify(newDisplayOptions)
32+
}
33+
34+
onCollapsibleSectionsChanged = (event) => {
35+
const newDisplayOptions = {
36+
...this.state.displayOptions,
37+
collapsibleSections: event.target.value
38+
}
39+
this.updateDisplayOptions(newDisplayOptions)
40+
}
41+
42+
onTabDirectionChanged = (event) => {
43+
const newDisplayOptions = {
44+
...this.state.displayOptions,
45+
tabsDirection: event.target.value
46+
}
47+
this.updateDisplayOptions(newDisplayOptions)
48+
}
49+
50+
onRenderAsTabsChanged = (event) => {
51+
const renderAsTabs = event.target.value
52+
this.props.onChange({ target: { value: renderAsTabs } });
53+
const newDisplayOptions = {
54+
...this.state.displayOptions,
55+
tabsDirection: renderAsTabs ? 'horizontal' : undefined
56+
}
57+
this.updateDisplayOptions(newDisplayOptions)
58+
}
59+
60+
render() {
61+
const state = this.state;
62+
const props = this.props;
63+
return <div>
64+
<Checkbox
65+
labelText={this.translate('render_as_tabs')}
66+
value={props.value}
67+
onChange={this.onRenderAsTabsChanged}
68+
/>
69+
{props.value &&
70+
<RadioButtonGroup
71+
onChange={this.onTabDirectionChanged}
72+
name="tabsDirection"
73+
defaultSelected={
74+
(state.displayOptions && state.displayOptions.tabsDirection) || 'horizontal' }
75+
>
76+
<RadioButton
77+
key='horizontal'
78+
value='horizontal'
79+
label={this.translate('horizontal')}
80+
style={{margin: '10px'}}
81+
/>
82+
<RadioButton
83+
key='vertical'
84+
value='vertical'
85+
label={this.translate('vertical')}
86+
style={{margin: '10px'}}
87+
/>
88+
</RadioButtonGroup>}
89+
<Checkbox
90+
labelText={this.translate('make_sections_collapsible')}
91+
value={ (state.displayOptions && state.displayOptions.collapsibleSections) || false }
92+
onChange={this.onCollapsibleSectionsChanged}
93+
/>
94+
</div>
95+
96+
}
97+
}
98+
99+
export default RenderAsTabs;
Lines changed: 4 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,9 @@
1-
import React from 'react';
21
import OrganisationUnitTreeMultiSelect from '../../forms/form-fields/orgunit-tree-multi-select';
32
import DataSetElementField from './data-set/DataSetElementField.component';
43
import DataInputPeriods from './data-set/DataInputPeriods.component';
54
import PeriodTypeDropDown from '../../forms/form-fields/period-type-drop-down';
6-
import Checkbox from '../../forms/form-fields/check-box';
7-
import {RadioButton, RadioButtonGroup} from "material-ui/RadioButton";
85
import addD2Context from 'd2-ui/lib/component-helpers/addD2Context';
9-
import log from "loglevel";
10-
11-
class RenderAsTabsSettings extends React.Component {
12-
constructor(props, context) {
13-
super(props);
14-
this.state = {
15-
displayOptions: this.parseDisplayOptions()
16-
};
17-
this.translate = context.d2.i18n.getTranslation.bind(
18-
context.d2.i18n
19-
);
20-
}
21-
22-
parseDisplayOptions = () => {
23-
try {
24-
return this.props
25-
&& this.props.model['displayOptions']
26-
&& JSON.parse(this.props.model['displayOptions'])
27-
} catch (e) {
28-
log.error(e);
29-
return undefined
30-
}
31-
}
32-
33-
updateTabsDirection = (tabsDirection) => {
34-
const newDisplayOptions = {
35-
...this.state.displayOptions,
36-
tabsDirection
37-
}
38-
this.setState({displayOptions: newDisplayOptions});
39-
this.props.model.displayOptions = JSON.stringify(newDisplayOptions)
40-
}
41-
42-
onDisplayOptionsChanged = (event) => {
43-
const tabsDirection = event.target.value
44-
this.updateTabsDirection(tabsDirection)
45-
}
46-
47-
onRenderAsTabsChanged = (event) => {
48-
const renderAsTabs = event.target.value
49-
const tabsDirection =
50-
renderAsTabs
51-
? 'horizontal'
52-
: undefined
53-
54-
this.props.onChange({ target: { value: renderAsTabs } });
55-
this.updateTabsDirection(tabsDirection)
56-
}
57-
58-
59-
render() {
60-
const state = this.state;
61-
const props = this.props;
62-
return <div>
63-
<Checkbox
64-
labelText={this.translate('render_as_tabs')}
65-
value={props.value}
66-
onChange={this.onRenderAsTabsChanged}
67-
/>
68-
{props.value &&
69-
<RadioButtonGroup
70-
onChange={this.onDisplayOptionsChanged}
71-
name="tabsDirection"
72-
defaultSelected={
73-
(state.displayOptions && state.displayOptions.tabsDirection) || 'horizontal' }
74-
>
75-
<RadioButton
76-
key='horizontal'
77-
value='horizontal'
78-
label={this.translate('horizontal')}
79-
style={{margin: '10px'}}
80-
/>
81-
<RadioButton
82-
key='vertical'
83-
value='vertical'
84-
label={this.translate('vertical')}
85-
style={{margin: '10px'}}
86-
/>
87-
</RadioButtonGroup>}
88-
</div>
89-
}
90-
}
6+
import RenderAsTabs from "./data-set/RenderAsTabs.component";
917

928
export default new Map([
939
['categoryCombo', {
@@ -111,7 +27,8 @@ export default new Map([
11127
component: DataInputPeriods,
11228
}],
11329
['renderAsTabs', {
114-
component: addD2Context(RenderAsTabsSettings),
115-
}]
30+
component: addD2Context(RenderAsTabs),
31+
}
32+
],
11633
]);
11734

src/i18n/i18n_module_en.properties

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -625,6 +625,7 @@ render_options_as_radio=Render options as radio
625625
render_as_tabs=Render sections as tabs
626626
horizontal=Horizontal
627627
vertical=Vertical
628+
make_sections_collapsible=Make sections collapsible
628629
render_horizontally=Render vertically
629630
compulsory_fields_complete_only=Complete allowed only if compulsory fields are filled
630631
auto_save_data_entry_forms=Auto-save data entry forms

0 commit comments

Comments
 (0)