Commit 31ee69ef authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '410-methods-edit' into 'main'

Methods: Edit

Closes #410

See merge request grin-global/grin-global-ui!400
parents fede45a6 34d9e6fb
......@@ -44,6 +44,9 @@ export const MethodTableDefaultConfig = {
id: { readonly: true, align: TextAlign.right },
},
columnRenderers: {
name: ({ value, actions, row }: { value: string, actions: {[key: string]: (...args) => void}, row: Method }): JSX.Element => (
! P.allowedAccess(P.MethodData, P.write) ? <>{ value }</> : <a onClick={ () => actions.selectMethod(row.id) }>{ value }</a>
),
studyReasonCode: ({ value }: { value: string }) => <CodeValueDisplay codeGroup={ Method.CodeGroup.studyReasonCode } value={ value } />,
georeferenceDatum: ({ value }: { value: string }) => <CodeValueDisplay codeGroup={ Method.CodeGroup.georeferenceDatum } value={ value } />,
georeferenceProtocolCode: ({ value }: { value: string }) => <CodeValueDisplay codeGroup={ Method.CodeGroup.georeferenceProtocolCode } value={ value } />,
......@@ -65,6 +68,7 @@ class BrowsePage extends React.Component<PropsFromRedux & WithTranslation & With
public state = {
selected: [],
methodDialogIsOpen: false,
selectedMethodId: null,
createNew: true,
};
......@@ -87,19 +91,25 @@ class BrowsePage extends React.Component<PropsFromRedux & WithTranslation & With
this.setState({ selected: selectedIds });
}
private selectMethod = (id) => {
this.setState({ selectedMethodId: id })
this.openMethodDialog(false)
}
private openMethodDialog = (createNew = true) => {
this.setState({ methodDialogIsOpen: true, createNew });
};
private closeMethodDialog = () => {
this.setState({ methodDialogIsOpen: false, createNew: true });
this.setState({ methodDialogIsOpen: false, createNew: true, selectedMethodId: null });
};
public render() {
const { t, onSortChange, applyFilter, loadMore, data } = this.props;
const { selected, methodDialogIsOpen, createNew } = this.state;
const { selected, methodDialogIsOpen, selectedMethodId, createNew } = this.state;
const columns = MethodTableConfig.getColumns(data && data.content ? data.content[0] : null);
const selectedMethod = selectedMethodId && data.content.find((method) => method.id === selectedMethodId)
const actions = [
{
......@@ -139,6 +149,7 @@ class BrowsePage extends React.Component<PropsFromRedux & WithTranslation & With
onRowsToggled={ this.rowsToggled }
sort={ data && data.sort }
onSortChange={ onSortChange }
actions={{ selectMethod: this.selectMethod }}
/>
{ selected.length > 0 &&
<FABMenu
......@@ -151,7 +162,7 @@ class BrowsePage extends React.Component<PropsFromRedux & WithTranslation & With
<AddNewButton action={this.openMethodDialog}/>
}
<MethodDialog
selectedMethod={ ! createNew && selected.length === 1 && data.content.filter((method) => method.id === selected[0])[0] }
selectedMethod={ selectedMethod ?? (! createNew && selected.length === 1 && data.content.find((method) => method.id === selected[0])) }
isOpen={ methodDialogIsOpen }
onClose={ this.closeMethodDialog }
/>
......
Supports Markdown
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