Commit 3e6d5821 authored by Matija Obreza's avatar Matija Obreza Committed by Pavlov Viacheslav

KPI UI: grouping.link added

updated ItemEditor style
parent be343b73
......@@ -1279,6 +1279,7 @@
"SUM": "Sum"
},
"group": {
"link": "Left join",
"field": "Field",
"op": "Operation",
"alias": "Name"
......@@ -1286,7 +1287,7 @@
},
"executionCard": {
"dimensionField": "Field",
"dimensionLink": "Link",
"dimensionLink": "Inner join",
"dimensionsInfo": "Dimensions",
"mainInformation": "General info",
"parameterCondition": "Condition",
......@@ -1300,11 +1301,14 @@
"dimensionList": {
"selectDimension": "Select dimension"
},
"groupListField": {
"header": "Group by clauses"
},
"dimensions": "Dimensions",
"group": "Group by",
"type": "Type",
"field": "Field",
"link": "Link",
"link": "Inner join",
"alias": "Alias",
"parameter": "Parameter",
"parameterSelector": {
......
......@@ -15,6 +15,7 @@
"SUM": "Sum"
},
"group": {
"link": "Left join",
"field": "Field",
"op": "Operation",
"alias": "Name"
......@@ -22,7 +23,7 @@
},
"executionCard": {
"dimensionField": "Field",
"dimensionLink": "Link",
"dimensionLink": "Inner join",
"dimensionsInfo": "Dimensions",
"mainInformation": "General info",
"parameterCondition": "Condition",
......@@ -36,11 +37,14 @@
"dimensionList": {
"selectDimension": "Select dimension"
},
"groupListField": {
"header": "Group by clauses"
},
"dimensions": "Dimensions",
"group": "Group by",
"type": "Type",
"field": "Field",
"link": "Link",
"link": "Inner join",
"alias": "Alias",
"parameter": "Parameter",
"parameterSelector": {
......
......@@ -10,7 +10,16 @@ import ItemsEditor from 'ui/common/ItemsEditor';
const execGroupField = (member, index, fields, itemLabel) => (
<Grid key={ `executionGroups-${index}` } container spacing={ 8 } style={ {display: 'flex', alignItems: 'baseline'} }>
<Grid item xs={ 6 }>
<Grid item xs={ 4 }>
<Field
name={ `${member}.link` }
required
component={ TextField }
type="text"
label={ `kpi.admin.c.execution.group.link` }
/>
</Grid>
<Grid item xs={ 4 }>
<Field
name={ `${member}.field` }
required
......@@ -28,7 +37,7 @@ const execGroupField = (member, index, fields, itemLabel) => (
label={ `kpi.admin.c.execution.group.op` }
/>
</Grid>
<Grid item xs={ 4 }>
<Grid item xs={ 2 }>
<Field
name={ `${member}.alias` }
required
......@@ -58,9 +67,9 @@ class ExecutionGroupsField extends React.Component<IExecutionGroupsFieldProps> {
}
public render() {
const { label } = this.props;
const { label, t } = this.props;
return(
<ItemsEditor name="groups" itemLabel={ label } addItem={ this.onAddGroup } removeItem={ this.onDeleteGroup } component={ execGroupField } />
<ItemsEditor name="groups" header={ t('kpi.admin.c.executionForm.groupListField.header') } itemLabel={ label } addItem={ this.onAddGroup } removeItem={ this.onDeleteGroup } component={ execGroupField } />
);
}
}
......
......@@ -3,9 +3,10 @@ import {translate} from 'react-i18next';
import { FieldArray } from 'redux-form';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import AddIcon from '@material-ui/icons/Add';
import {log} from 'utilities/debug';
const renderMembers = ({ fields, itemLabel, itemEditor, addItem, removeItem, t }) => {
const renderMembers = ({ fields, itemLabel, itemEditor, addItem, removeItem, header, t }) => {
const onAddMember = (e) => {
const item = addItem();
......@@ -28,7 +29,8 @@ const renderMembers = ({ fields, itemLabel, itemEditor, addItem, removeItem, t }
}
return (
<div>
<div className="pt-10 pb-10">
{ header && <div className="mb-10"><b>{ header }</b></div> }
{ fields && fields.map((member, index, fields) => (
<div key={ index } className="items-editor-item">
<Grid container justify="space-between" alignItems="center">
......@@ -43,16 +45,18 @@ const renderMembers = ({ fields, itemLabel, itemEditor, addItem, removeItem, t }
)) }
<Grid container className="items-editor-additem">
<Grid item xs={ 12 }>
<Button variant="contained" type="button" onClick={ onAddMember }>{ t('common:action.add', {what: itemLabel }) }</Button>
<Button type="button" onClick={ onAddMember }>
<AddIcon/> { t('common:action.add', {what: itemLabel }) }
</Button>
</Grid>
</Grid>
</div>
);
};
const ItemsEditor = ({ name, itemLabel, addItem, removeItem, component, t }) => {
const ItemsEditor = ({ name, itemLabel, addItem, removeItem, component, t, header }) => {
return (
<FieldArray name={ name } itemLabel={ t(itemLabel) } addItem={ addItem } removeItem={ removeItem } itemEditor={ component } component={ renderMembers } t={ t }/>
<FieldArray name={ name } header={ header } itemLabel={ t(itemLabel) } addItem={ addItem } removeItem={ removeItem } itemEditor={ component } component={ renderMembers } t={ t }/>
);
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment