oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

prototype metadata edit mode

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-04-23 16:30:16 +02:00
parent 7e2d7ac6ad
commit eab772f26c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 115 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/routes/Details/AssetDetails.module.scss
View File

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

109
client/src/routes/Details/AssetDetails.tsx
View File

@ -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 && (
// TODO: Make this link to search for respective category
<Link to={`/search?text=${base.categories[0]}`}>
{base.categories[0]}
</Link>
)}
{base.categories &&
(this.state.isEditMode ? (
<Input
name={Object.keys(steps[1].fields)[1]}
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> */}
</>
)
}