Commit cadffb74 authored by Oleksii Savran's avatar Oleksii Savran Committed by Matija Obreza

List of CodeValues: added select by group

parent 81e45c94
......@@ -168,6 +168,11 @@
"title": "Code value list",
"item": "CodeValue"
}
},
"c": {
"groupSelect": {
"placeholder": "Select a group"
}
}
}
},
......
......@@ -5,6 +5,11 @@
"title": "Code value list",
"item": "CodeValue"
}
},
"c": {
"groupSelect": {
"placeholder": "Select a group"
}
}
}
}
......@@ -2,6 +2,8 @@ import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators, compose } from 'redux';
import { WithTranslation, withTranslation } from 'react-i18next';
// Action
import { refreshCodeValues } from 'core/action/codeValue';
// Model
import { ApiCall } from '@gringlobal/client/model/common';
import CodeValueInfo from '@gringlobal/client/model/gringlobal/CodeValueInfo';
......@@ -13,8 +15,9 @@ import ContentHeader from '@gringlobal/client/ui/common/heading/ContentHeader';
import Table from '@gringlobal/client/ui/common/table/Table';
import AddNewButton from '@gringlobal/client/ui/common/button/AddNewButton';
import { BasicTableConfiguration as TableConfiguration } from '@gringlobal/client/ui/common/table/TableConfiguration';
import Button from '@material-ui/core/Button/Button';
// import Button from '@material-ui/core/Button/Button';
import PageTitle from '@gringlobal/client/ui/common/PageTitle';
import Filters from 'codevalue/ui/admin/c/Filters';
class CodeValueFullInfo extends CodeValueInfo {
......@@ -24,6 +27,12 @@ class CodeValueFullInfo extends CodeValueInfo {
interface IBrowsePageProps extends React.ClassAttributes<any>, WithTranslation {
codeValues: ApiCall<Record<string, Record<string, CodeValueInfo>>>;
refreshCodeValues: () => void;
}
interface IBrowsePageState {
selected: CodeValueFullInfo[];
group: string;
}
export const SiteTableDefaultConfig = {
......@@ -32,31 +41,40 @@ export const SiteTableDefaultConfig = {
const SiteTableConfig = new TableConfiguration(SiteTableDefaultConfig);
class BrowsePage extends React.Component<IBrowsePageProps, { selected: CodeValueFullInfo[] }> {
class BrowsePage extends React.Component<IBrowsePageProps, IBrowsePageState> {
public constructor(props) {
super(props);
if (!props.codeValues && props.refreshCodeValues) {
props.refreshCodeValues();
}
}
private getCodeValuesList = memoize((codeValues: Record<string, Record<string, CodeValueInfo>>): CodeValueFullInfo[] => {
private getCodeValuesList = memoize((codeValues: Record<string, Record<string, CodeValueInfo>>, group: string): CodeValueFullInfo[] => {
const fullInfoList = [];
forOwn(codeValues, (num, group) => {
if (group) {
forOwn(codeValues[group], (num, code) => {
fullInfoList.push({ ...codeValues[group][code], code, group });
});
});
}
return fullInfoList;
});
private getGroups = memoize((codeValues: Record<string, Record<string, CodeValueInfo>>): string[] => {
return Object.keys(codeValues);
});
public state = {
selected: [],
group: '',
};
private remove = () => {
console.log('Will be removed: ', this.state.selected);
};
// private remove = () => {
// console.log('Will be removed: ', this.state.selected);
// };
private rowToggled = (toggledRow: number, selectedRows: number[], rowData: CodeValueFullInfo) => {
console.log(`Row ${toggledRow} was toggled. Have ${selectedRows}`);
......@@ -67,19 +85,30 @@ class BrowsePage extends React.Component<IBrowsePageProps, { selected: CodeValue
console.log(`Column ${toggledColumn} was toggled. Have ${selectedColumns}`);
};
private applyFilter = (data: any) => {
this.setState({ group: data.group });
};
public render() {
const { codeValues, t } = this.props;
const data = codeValues && codeValues.data ? this.getCodeValuesList(codeValues.data) : [];
const { group } = this.state;
const data = codeValues && codeValues.data ? this.getCodeValuesList(codeValues.data, group) : [];
const groups = codeValues && codeValues.data ? this.getGroups(codeValues.data) : [];
return (
<>
<PageTitle title={ t('codevalue.admin.p.browse.title') }/>
<ContentHeader title={ t('codevalue.admin.p.browse.title') }>
{ this.state.selected.length > 0 &&
{ /* this.state.selected.length > 0 &&
<Button onClick={ this.remove } variant="contained" disabled={ this.state.selected.length < 1 }>
{ t('common:action.remove') }
</Button>
}
*/ }
<Filters
onSubmit={ this.applyFilter }
filter={ { group: this.state.group } }
groups={ groups }
/>
</ContentHeader>
<Table
tableKey="code-value-list"
......@@ -93,7 +122,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, { selected: CodeValue
/>
<AddNewButton
title='codevalue.admin.p.browse.item'
path="code/edit/" // todo
path="codes/edit/" // todo
/>
</>
);
......@@ -106,7 +135,9 @@ const mapStateToProps = (state) => ({
codeValues: state.codeValue.codeValuesCall,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({}, dispatch);
const mapDispatchToProps = (dispatch) => bindActionCreators({
refreshCodeValues,
}, dispatch);
export default compose(
......
import * as React from 'react';
import { createStyles, withStyles, WithStyles } from '@material-ui/core';
import { withTranslation, WithTranslation } from 'react-i18next';
import TextField from '@material-ui/core/TextField/TextField';
import MenuItem from '@material-ui/core/MenuItem/MenuItem';
import { FieldInputProps, FieldMetaState, FieldRenderProps } from 'react-final-form';
const styles = (theme) => createStyles({
textField: {
'margin': '-1px 0',
'minWidth': '300px',
[theme.breakpoints.down('sm')]: {
minWidth: '120px',
},
'& input': {
backgroundColor: 'white',
opacity: 1,
border: 0,
height: '100%',
boxSizing: 'border-box',
paddingLeft: '5px',
},
},
});
interface ICodeValueGroupSelect extends React.ClassAttributes<FieldRenderProps<string, any>>, WithStyles, WithTranslation {
input: FieldInputProps<any, any>;
meta: FieldMetaState<any>;
groups: string[];
}
class CodeValueGroupSelect extends React.Component<ICodeValueGroupSelect, any> {
public constructor(props) {
super(props);
}
public render() {
const { groups, classes, input, meta, t } = this.props;
return (
<div className={ classes.fieldWrapper }>
<TextField
select
className={ classes.textField }
fullWidth
{ ...input }
error={ meta && !!meta.error }
placeholder={ t('codevalue.admin.c.groupSelect.placeholder') }
>
{ groups ? groups.map((group, i) => (
<MenuItem key={ `option-${group}-${i}` } value={ group }>
{ group }
</MenuItem>
)) : [] }
</TextField>
</div>
);
}
}
export default withTranslation()(withStyles(styles)(CodeValueGroupSelect));
import * as React from 'react';
import { Form, Field, FormProps, FormRenderProps } from 'react-final-form';
import { withTranslation, WithTranslation } from 'react-i18next';
// UI
import { withStyles, WithStyles } from '@material-ui/core/styles';
import { Grid } from '@material-ui/core';
import CodeValueGroupSelect from './CodeValueGroupSelect';
const styles = (theme) => ({
});
interface ICodeValueFilters extends React.ClassAttributes<any>, FormProps {
filter: any;
groups: string[];
}
interface ICodeValueFiltersInternal extends React.ClassAttributes<any>, FormRenderProps, WithStyles, WithTranslation {
groups: string[];
}
class CodeValueFiltersInternal extends React.Component<ICodeValueFiltersInternal, any> {
public constructor(props) {
super(props);
}
public componentDidUpdate(prevProps: ICodeValueFiltersInternal) {
if (prevProps && prevProps.values) {
const isChanged = prevProps.values.group !== this.props.values.group;
if (isChanged) {
this.props.handleSubmit();
}
}
}
public render() {
const { handleSubmit, classes, groups } = this.props;
return (
<form onSubmit={ handleSubmit }>
<Grid item>
<Field
name="group"
type="text"
component={ CodeValueGroupSelect }
className={ classes.textField }
groups={ groups }
/>
</Grid>
</form>
);
}
}
const WrappedCodeValueFiltersInternal = withTranslation()(withStyles(styles)(CodeValueFiltersInternal));
export default class CodeValueFilters extends React.Component<ICodeValueFilters, any> {
public render() {
const { onSubmit, filter, groups } = this.props;
return (
<Form
initialValues={ filter }
onSubmit={ onSubmit }
render={ (props) => <WrappedCodeValueFiltersInternal { ...props } groups={ groups }/> }
/>
);
}
}
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