Skip to content

Commit

Permalink
Merge pull request #2961 from dhis2/DHIS2-18129/add-custom-text-to-da…
Browse files Browse the repository at this point in the history 
…ta-sets

feat: add custom text to data sets
  • Loading branch information
@flaminic
flaminic authored Oct 23, 2024
2 parents f9acc4a + 99806d0 commit 8932daa
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 33 deletions.
166 changes: 134 additions & 32 deletions src/config/field-overrides/dataSet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@ 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";
import TextField from "material-ui/TextField/TextField";

class RenderAsTabsSettings extends React.Component {
constructor(props, context) {
super(props);
this.state = {
displayOptions: this.parseDisplayOptions()
displayOptions: this.parseDisplayOptions(),
};
this.translate = context.d2.i18n.getTranslation.bind(
context.d2.i18n
Expand All @@ -30,20 +31,21 @@ class RenderAsTabsSettings extends React.Component {
}
}

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

onDisplayOptionsChanged = (event) => {
const tabsDirection = event.target.value
this.updateTabsDirection(tabsDirection)
const newDisplayOptions = {
...this.state.displayOptions,
tabsDirection
}
this.updateDisplayOption(newDisplayOptions)
}


onRenderAsTabsChanged = (event) => {
const renderAsTabs = event.target.value
const tabsDirection =
Expand All @@ -52,39 +54,139 @@ class RenderAsTabsSettings extends React.Component {
: undefined

this.props.onChange({ target: { value: renderAsTabs } });
this.updateTabsDirection(tabsDirection)
const newDisplayOptions = {
...this.state.displayOptions,
tabsDirection
}
this.updateDisplayOption(newDisplayOptions)
}

onAddCustomTextChanged = (event) => {
const addCustomText = event.target.value
const customText =
addCustomText
? {header: undefined, subheader: undefined, align: 'center'}
: undefined

const newDisplayOptions = {
...this.state.displayOptions,
customText
}
this.updateDisplayOption(newDisplayOptions)
}

onCustomTextChanged = (event, field) => {
const customText =
{...this.state.displayOptions.customText, [field]: event.target.value}

const newDisplayOptions = {
...this.state.displayOptions,
customText
}
this.updateDisplayOption(newDisplayOptions)
}

onCustomTextAlignmentChanged = (event) => {
this.onCustomTextChanged(event, 'align')
}


onCustomTextHeaderChanged = (event) => {
this.onCustomTextChanged(event, 'header')
}

onCustomTextSubheaderChanged = (event) => {
this.onCustomTextChanged(event, 'subheader')
}

render() {
const state = this.state;
const props = this.props;
const customTextCssStyles = {
display: 'flex',
flexDirection: 'column',
marginLeft: '16px'
};
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'}}
<div>
<Checkbox
labelText={this.translate('render_as_tabs')}
value={props.value}
onChange={this.onRenderAsTabsChanged}
/>
</RadioButtonGroup>}
{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>
<div>
<Checkbox
labelText={this.translate('add_custom_text')}
value={state.displayOptions && state.displayOptions.customText !== undefined}
onChange={this.onAddCustomTextChanged}
/>

{state.displayOptions && state.displayOptions.customText &&
<RadioButtonGroup
onChange={this.onCustomTextAlignmentChanged}
name="customTextAlignment"
defaultSelected={
(state.displayOptions && state.displayOptions.customText && state.displayOptions.customText.align) || 'center'}
>
<RadioButton
key='line-start'
value='line-start'
label={this.translate('line_start')}
style={{margin: '10px'}}
/>
<RadioButton
key='center'
value='center'
label={this.translate('center')}
style={{margin: '10px'}}
/>
<RadioButton
key='line-end'
value='line-end'
label={this.translate('line_end')}
style={{margin: '10px'}}
/>
</RadioButtonGroup>}

{state.displayOptions && state.displayOptions.customText &&
<div style={customTextCssStyles}>
<TextField
value={(state.displayOptions && state.displayOptions.customText &&
state.displayOptions.customText.header) || ""}
fullWidth={false}
onChange={this.onCustomTextHeaderChanged}
floatingLabelText={this.translate('data_set_title')}
/>
<TextField
value={(state.displayOptions && state.displayOptions.customText &&
state.displayOptions.customText.subheader) || ""}
fullWidth={false}
onChange={this.onCustomTextSubheaderChanged}
floatingLabelText={this.translate('data_set_subtitle')}
/>
</div>}
</div>
</div>
}
}
Expand Down
6 changes: 6 additions & 0 deletions src/i18n/i18n_module_en.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -626,6 +626,9 @@ render_options_as_radio=Render options as radio
render_as_tabs=Render sections as tabs
horizontal=Horizontal
vertical=Vertical
add_custom_text=Add custom title/subtitle
data_set_title=Title
data_set_subtitle=Subtitle
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 Expand Up @@ -708,6 +711,9 @@ edit_right_side= Edit right side
select_operator= Select operator
left= Left
right= Right
center= Center
line_start= Line start
line_end= Line end
textual_expression_description= Textual expression description
edit_validation_rule= Edit validation rule
validation_rule= Validation rule
Expand Down
2 changes: 1 addition & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const webpackConfig = {
{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, 'src/'),
path.resolve(__dirname, 'src/'),
path.resolve(__dirname, 'node_modules/dompurify')
],
loader: 'babel-loader',
Expand Down

0 comments on commit 8932daa

Please sign in to comment.