Methods: Edit

workspaces/ui-express/src/method/ui/MethodBrowsePage.tsx

@@ -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 }
           />