Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add option to make a data set sections collapsible #2886

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat: add option to make a data set sections collapsible #2886

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 99 additions & 0 deletions src/config/field-overrides/data-set/RenderAsTabs.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React from "react";
import log from "loglevel";
import Checkbox from "../../../forms/form-fields/check-box";
import {RadioButton, RadioButtonGroup} from "material-ui/RadioButton";

class RenderAsTabs extends React.Component {
constructor(props, context) {
super(props);
this.state = {
displayOptions: this.parseDisplayOptions(),
};
this.translate = context.d2.i18n.getTranslation.bind(
context.d2.i18n
);
}


parseDisplayOptions = () => {
try {
return this.props
&& this.props.model['displayOptions']
&& JSON.parse(this.props.model['displayOptions'])
} catch (e) {
log.error(e);
return undefined
}
}

updateDisplayOptions = (newDisplayOptions) => {
this.setState({displayOptions: newDisplayOptions});
this.props.model.displayOptions = JSON.stringify(newDisplayOptions)
}

onCollapsibleSectionsChanged = (event) => {
const newDisplayOptions = {
...this.state.displayOptions,
collapsibleSections: event.target.value
}
this.updateDisplayOptions(newDisplayOptions)
}

onTabDirectionChanged = (event) => {
const newDisplayOptions = {
...this.state.displayOptions,
tabsDirection: event.target.value
}
this.updateDisplayOptions(newDisplayOptions)
}

onRenderAsTabsChanged = (event) => {
const renderAsTabs = event.target.value
this.props.onChange({ target: { value: renderAsTabs } });
const newDisplayOptions = {
...this.state.displayOptions,
tabsDirection: renderAsTabs ? 'horizontal' : undefined
}
this.updateDisplayOptions(newDisplayOptions)
}

render() {
const state = this.state;
const props = this.props;
return <div>
<Checkbox
labelText={this.translate('render_as_tabs')}
value={props.value}
onChange={this.onRenderAsTabsChanged}
/>
{props.value &&
<RadioButtonGroup
onChange={this.onTabDirectionChanged}
name="tabsDirection"
defaultSelected={
(state.displayOptions && state.displayOptions.tabsDirection) || 'horizontal' }
>
<RadioButton
key='horizontal'
value='horizontal'
label={this.translate('horizontal')}
style={{margin: '10px'}}
/>
<RadioButton
key='vertical'
value='vertical'
label={this.translate('vertical')}
style={{margin: '10px'}}
/>
</RadioButtonGroup>}
<Checkbox
labelText={this.translate('make_sections_collapsible')}
value={ (state.displayOptions && state.displayOptions.collapsibleSections) || false }
onChange={this.onCollapsibleSectionsChanged}
/>
</div>

}
}

export default RenderAsTabs;
91 changes: 4 additions & 87 deletions src/config/field-overrides/dataSet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +1,9 @@
import React from 'react';
import OrganisationUnitTreeMultiSelect from '../../forms/form-fields/orgunit-tree-multi-select';
import DataSetElementField from './data-set/DataSetElementField.component';
import DataInputPeriods from './data-set/DataInputPeriods.component';
import PeriodTypeDropDown from '../../forms/form-fields/period-type-drop-down';
import Checkbox from '../../forms/form-fields/check-box';
import {RadioButton, RadioButtonGroup} from "material-ui/RadioButton";
import addD2Context from 'd2-ui/lib/component-helpers/addD2Context';
import log from "loglevel";

class RenderAsTabsSettings extends React.Component {
constructor(props, context) {
super(props);
this.state = {
displayOptions: this.parseDisplayOptions()
};
this.translate = context.d2.i18n.getTranslation.bind(
context.d2.i18n
);
}

parseDisplayOptions = () => {
try {
return this.props
&& this.props.model['displayOptions']
&& JSON.parse(this.props.model['displayOptions'])
} catch (e) {
log.error(e);
return undefined
}
}

updateTabsDirection = (tabsDirection) => {
const newDisplayOptions = {
...this.state.displayOptions,
tabsDirection
}
this.setState({displayOptions: newDisplayOptions});
this.props.model.displayOptions = JSON.stringify(newDisplayOptions)
}

onDisplayOptionsChanged = (event) => {
const tabsDirection = event.target.value
this.updateTabsDirection(tabsDirection)
}

onRenderAsTabsChanged = (event) => {
const renderAsTabs = event.target.value
const tabsDirection =
renderAsTabs
? 'horizontal'
: undefined

this.props.onChange({ target: { value: renderAsTabs } });
this.updateTabsDirection(tabsDirection)
}


render() {
const state = this.state;
const props = this.props;
return <div>
<Checkbox
labelText={this.translate('render_as_tabs')}
value={props.value}
onChange={this.onRenderAsTabsChanged}
/>
{props.value &&
<RadioButtonGroup
onChange={this.onDisplayOptionsChanged}
name="tabsDirection"
defaultSelected={
(state.displayOptions && state.displayOptions.tabsDirection) || 'horizontal' }
>
<RadioButton
key='horizontal'
value='horizontal'
label={this.translate('horizontal')}
style={{margin: '10px'}}
/>
<RadioButton
key='vertical'
value='vertical'
label={this.translate('vertical')}
style={{margin: '10px'}}
/>
</RadioButtonGroup>}
</div>
}
}
import RenderAsTabs from "./data-set/RenderAsTabs.component";

export default new Map([
['categoryCombo', {
Expand All @@ -111,7 +27,8 @@ export default new Map([
component: DataInputPeriods,
}],
['renderAsTabs', {
component: addD2Context(RenderAsTabsSettings),
}]
component: addD2Context(RenderAsTabs),
}
],
]);

1 change: 1 addition & 0 deletions src/i18n/i18n_module_en.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -625,6 +625,7 @@ render_options_as_radio=Render options as radio
render_as_tabs=Render sections as tabs
horizontal=Horizontal
vertical=Vertical
make_sections_collapsible=Collapse sections in form
render_horizontally=Render vertically
compulsory_fields_complete_only=Complete allowed only if compulsory fields are filled
auto_save_data_entry_forms=Auto-save data entry forms
Expand Down
Loading