prototype metadata edit mode

client/src/routes/Details/AssetDetails.module.scss

@@ -93,3 +93,21 @@
         width: 70%;
     }
 }
+
+.metadataActions {
+    text-align: right;
+
+    button {
+        font-size: $font-size-small;
+        margin-left: $spacer;
+
+        &:not(:first-child) {
+            color: $brand-grey-light;
+
+            &:hover,
+            &:focus {
+                color: $brand-pink;
+            }
+        }
+    }
+}

client/src/routes/Details/AssetDetails.tsx

@@ -1,16 +1,60 @@
-import React, { PureComponent } from 'react'
+import React, { PureComponent, ChangeEvent } from 'react'
 import { Link } from 'react-router-dom'
 import Moment from 'react-moment'
 import { DDO, MetaData, File } from '@oceanprotocol/squid'
+import Input from '../../components/atoms/Form/Input'
 import Markdown from '../../components/atoms/Markdown'
 import styles from './AssetDetails.module.scss'
 import AssetFilesDetails from './AssetFilesDetails'
+import Button from '../../components/atoms/Button'
+
+const { steps } = require('../../data/form-publish.json') // eslint-disable-line
 
 interface AssetDetailsProps {
     metadata: MetaData
     ddo: DDO
 }
 
+interface AssetDetailsState {
+    isEditMode?: boolean
+    isLoading?: boolean
+    dateCreated?: string
+    description?: string
+    copyrightHolder?: string
+    categories?: string
+}
+
+export default class AssetDetails extends PureComponent<
+    AssetDetailsProps,
+    AssetDetailsState
+> {
+    public state = {
+        isEditMode: false,
+        isLoading: false
+    }
+
+    private inputChange = (
+        event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
+    ) => {
+        this.setState({
+            [event.currentTarget.name]: event.currentTarget.value
+        })
+    }
+
+    private toggleEditMode = () => {
+        this.setState({ isEditMode: !this.state.isEditMode })
+    }
+
+    private updateAsset = () => {
+        this.setState({ isLoading: true })
+        // TODO: update asset metadata
+    }
+
+    private retireAsset = () => {
+        this.setState({ isLoading: true })
+        // TODO: retire asset
+    }
+
 export function datafilesLine(files: File[]) {
     if (files.length === 1) {
         return <span>{files.length} data file</span>
@@ -45,24 +89,69 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                             />
                         </span>
 
-                        {base.categories && (
+                        {base.categories &&
-                            // TODO: Make this link to search for respective category
+                            (this.state.isEditMode ? (
-                            <Link to={`/search?text=${base.categories[0]}`}>
+                                <Input
-                                {base.categories[0]}
+                                    name={Object.keys(steps[1].fields)[1]}
-                            </Link>
+                                    label={steps[1].fields.categories.label}
-                        )}
+                                    placeholder={
+                                        steps[1].fields.categories.placeholder
+                                    }
+                                    required={
+                                        steps[1].fields.categories.required
+                                    }
+                                    type={steps[1].fields.categories.type}
+                                    onChange={this.inputChange}
+                                    options={steps[1].fields.categories.options}
+                                    value={base.categories[0]}
+                                />
+                            ) : (
+                                // TODO: Make this link to search for respective category
+                                <Link to={`/search?text=${base.categories[0]}`}>
+                                    {base.categories[0]}
+                                </Link>
+                            ))}
 
                         {base.files && datafilesLine(base.files)}
                     </div>
                 </aside>
 
-                {base.description && (
+                {this.state.isEditMode ? (
+                    <Input
+                        name={Object.keys(steps[1].fields)[0]}
+                        label={steps[1].fields.description.label}
+                        placeholder={steps[1].fields.description.placeholder}
+                        required={steps[1].fields.description.required}
+                        type={steps[1].fields.description.type}
+                        onChange={this.inputChange}
+                        rows={10}
+                        value={base.description}
+                    />
+                ) : (
                     <Markdown
                         text={base.description}
                         className={styles.description}
                     />
                 )}
 
+                <div className={styles.metadataActions}>
+                    {this.state.isEditMode ? (
+                        <Button primary onClick={this.toggleEditMode}>
+                            Save Changes
+                        </Button>
+                    ) : (
+                        <>
+                            <Button link onClick={this.toggleEditMode}>
+                                Edit Metadata
+                            </Button>
+
+                            <Button link onClick={this.retireAsset}>
+                                Retire Asset
+                            </Button>
+                        </>
+                    )}
+                </div>
+
                 <ul className={styles.meta}>
                     <li>
                         <span className={styles.metaLabel}>
@@ -90,10 +179,6 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                     files={base.files ? base.files : []}
                     ddo={ddo}
                 />
-
-                {/* <pre>
-                    <code>{JSON.stringify(metadata, null, 2)}</code>
-                </pre> */}
             </>
         )
     }