From d59135ec7eb0cdb53236b38bd6fdaeffd5f6da02 Mon Sep 17 00:00:00 2001 From: Flaminia Cavallo Date: Tue, 2 Jul 2024 14:41:31 +0200 Subject: [PATCH 1/3] feat: add option to pick render as tabs direction for data sets --- src/config/field-overrides/dataSet.js | 95 +++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) diff --git a/src/config/field-overrides/dataSet.js b/src/config/field-overrides/dataSet.js index e07a79c5d..269ac6414 100644 --- a/src/config/field-overrides/dataSet.js +++ b/src/config/field-overrides/dataSet.js @@ -1,7 +1,98 @@ +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 log from "loglevel"; + +class CustomTestComponent extends React.Component { + constructor(props) { + super(props); + this.state = { + renderAsTabs: props.value, + displayOptions: this.parseDisplayOptions() + }; + + } + + 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((prevState, _) => ({ + ...prevState, + displayOptions: newDisplayOptions + })); + this.props.model.displayOptions = JSON.stringify(newDisplayOptions) + } + + onDisplayOptionsChanged = (event) => { + const tabsDirection = event.target.value + this.updateTabsDirection(tabsDirection) + + } + + onDisplayAsTabsChanged = (event) => { + const renderAsTabs = event.target.value + const tabsDirection = + renderAsTabs + ? 'horizontal' + : undefined + + this.setState((prevState) => ({ + ...prevState, + renderAsTabs + })); + this.props.model.renderAsTabs = renderAsTabs + this.updateTabsDirection(tabsDirection) + } + + + render() { + const state = this.state; + return
+ + {state.renderAsTabs && + + + + } +
+ } +} export default new Map([ ['categoryCombo', { @@ -24,4 +115,8 @@ export default new Map([ ['dataInputPeriods', { component: DataInputPeriods, }], + ['renderAsTabs', { + component: CustomTestComponent, + }] ]); + From d04efc6639d73e3c70c21a6554529ac366b31634 Mon Sep 17 00:00:00 2001 From: Flaminia Cavallo Date: Thu, 4 Jul 2024 12:48:28 +0200 Subject: [PATCH 2/3] fix: rename render as tabs settings component and change model using the on change prop --- src/config/field-overrides/dataSet.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/config/field-overrides/dataSet.js b/src/config/field-overrides/dataSet.js index 269ac6414..0a091e77e 100644 --- a/src/config/field-overrides/dataSet.js +++ b/src/config/field-overrides/dataSet.js @@ -7,14 +7,13 @@ import Checkbox from '../../forms/form-fields/check-box'; import {RadioButton, RadioButtonGroup} from "material-ui/RadioButton"; import log from "loglevel"; -class CustomTestComponent extends React.Component { +class RenderAsTabsSettings extends React.Component { constructor(props) { super(props); this.state = { renderAsTabs: props.value, displayOptions: this.parseDisplayOptions() }; - } parseDisplayOptions = () => { @@ -43,7 +42,6 @@ class CustomTestComponent extends React.Component { onDisplayOptionsChanged = (event) => { const tabsDirection = event.target.value this.updateTabsDirection(tabsDirection) - } onDisplayAsTabsChanged = (event) => { @@ -57,7 +55,7 @@ class CustomTestComponent extends React.Component { ...prevState, renderAsTabs })); - this.props.model.renderAsTabs = renderAsTabs + this.props.onChange({ target: { value: renderAsTabs } }); this.updateTabsDirection(tabsDirection) } @@ -116,7 +114,7 @@ export default new Map([ component: DataInputPeriods, }], ['renderAsTabs', { - component: CustomTestComponent, + component: RenderAsTabsSettings, }] ]); From 7114ca8dfba1116566349911fc036c12253436da Mon Sep 17 00:00:00 2001 From: Flaminia Cavallo Date: Thu, 4 Jul 2024 14:22:17 +0200 Subject: [PATCH 3/3] fix: add translations and remove render as tabs from the state --- src/config/field-overrides/dataSet.js | 33 ++++++++++++--------------- src/i18n/i18n_module_en.properties | 2 ++ 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/config/field-overrides/dataSet.js b/src/config/field-overrides/dataSet.js index 0a091e77e..b43624c25 100644 --- a/src/config/field-overrides/dataSet.js +++ b/src/config/field-overrides/dataSet.js @@ -5,15 +5,18 @@ 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) { + constructor(props, context) { super(props); this.state = { - renderAsTabs: props.value, displayOptions: this.parseDisplayOptions() }; + this.translate = context.d2.i18n.getTranslation.bind( + context.d2.i18n + ); } parseDisplayOptions = () => { @@ -32,10 +35,7 @@ class RenderAsTabsSettings extends React.Component { ...this.state.displayOptions, tabsDirection } - this.setState((prevState, _) => ({ - ...prevState, - displayOptions: newDisplayOptions - })); + this.setState({displayOptions: newDisplayOptions}); this.props.model.displayOptions = JSON.stringify(newDisplayOptions) } @@ -44,17 +44,13 @@ class RenderAsTabsSettings extends React.Component { this.updateTabsDirection(tabsDirection) } - onDisplayAsTabsChanged = (event) => { + onRenderAsTabsChanged = (event) => { const renderAsTabs = event.target.value const tabsDirection = renderAsTabs ? 'horizontal' : undefined - this.setState((prevState) => ({ - ...prevState, - renderAsTabs - })); this.props.onChange({ target: { value: renderAsTabs } }); this.updateTabsDirection(tabsDirection) } @@ -62,13 +58,14 @@ class RenderAsTabsSettings extends React.Component { render() { const state = this.state; + const props = this.props; return
- {state.renderAsTabs && + {props.value && } @@ -114,7 +111,7 @@ export default new Map([ component: DataInputPeriods, }], ['renderAsTabs', { - component: RenderAsTabsSettings, + component: addD2Context(RenderAsTabsSettings), }] ]); diff --git a/src/i18n/i18n_module_en.properties b/src/i18n/i18n_module_en.properties index 18c3d86c8..3647b4efc 100644 --- a/src/i18n/i18n_module_en.properties +++ b/src/i18n/i18n_module_en.properties @@ -623,6 +623,8 @@ no_value_requires_comment=Missing value requires comment on complete skip_offline=Skip offline render_options_as_radio=Render options as radio render_as_tabs=Render sections as tabs +horizontal=Horizontal +vertical=Vertical 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