mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
apply form components to existing publish form
This commit is contained in:
parent
02aaf42f4a
commit
424ecc350f
GPG Key ID:
606EEEF3C479A91F
@ -23,6 +23,7 @@ interface InputProps {
|
|||||||
additionalComponent?: void
|
additionalComponent?: void
|
||||||
value?: string
|
value?: string
|
||||||
onChange?: any
|
onChange?: any
|
||||||
|
rows?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
interface InputState {
|
interface InputState {
|
||||||
|
|||||||
114
src/data/form-publish.json
Normal file
114
src/data/form-publish.json
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
{
|
||||||
|
"title": "Publish a new data asset",
|
||||||
|
"description": "A cool form description",
|
||||||
|
"fields": {
|
||||||
|
"name": {
|
||||||
|
"label": "Title",
|
||||||
|
"placeholder": "i.e. My cool data set",
|
||||||
|
"type": "text",
|
||||||
|
"required": true,
|
||||||
|
"help": "Help me"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"label": "Description",
|
||||||
|
"placeholder": "i.e. My cool data set",
|
||||||
|
"type": "textarea",
|
||||||
|
"required": true,
|
||||||
|
"rows": 5
|
||||||
|
},
|
||||||
|
"price": {
|
||||||
|
"label": "Price",
|
||||||
|
"placeholder": "i.e. 1000",
|
||||||
|
"type": "number",
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
"author": {
|
||||||
|
"label": "Author",
|
||||||
|
"placeholder": "i.e. Jelly McJellyfish",
|
||||||
|
"type": "text",
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
"files": {
|
||||||
|
"label": "Files",
|
||||||
|
"placeholder": "i.e. https://file.com/file.json",
|
||||||
|
"type": "text",
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
"type": {
|
||||||
|
"label": "Type",
|
||||||
|
"type": "select",
|
||||||
|
"required": true,
|
||||||
|
"options": [
|
||||||
|
{
|
||||||
|
"value": "",
|
||||||
|
"label": "---"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "dataset",
|
||||||
|
"label": "Data set"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "algorithm",
|
||||||
|
"label": "Algorithm"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "container",
|
||||||
|
"label": "Container"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "workflow",
|
||||||
|
"label": "Workflow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "other",
|
||||||
|
"label": "Other"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"license": {
|
||||||
|
"label": "License",
|
||||||
|
"type": "select",
|
||||||
|
"required": true,
|
||||||
|
"options": [
|
||||||
|
{
|
||||||
|
"value": "none",
|
||||||
|
"label": "No License Specified"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "public-domain",
|
||||||
|
"label": "Public Domain"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "cc-by",
|
||||||
|
"label": "CC BY: Attribution"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "cc-by-sa",
|
||||||
|
"label": "CC BY-SA: Attribution ShareAlike"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "cc-by-nd",
|
||||||
|
"label": "CC BY-ND: Attribution-NoDerivs"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "cc-by-nc",
|
||||||
|
"label": "CC BY-NC: Attribution-NonCommercial"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "cc-by-nc-sa",
|
||||||
|
"label": "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "cc-by-nc-nd",
|
||||||
|
"label": "CC BY-NC-ND: Attribution-NonCommercial-NoDerivs"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"copyrightHolder": {
|
||||||
|
"label": "Copyright Holder",
|
||||||
|
"placeholder": "i.e. fwhfiw",
|
||||||
|
"type": "text",
|
||||||
|
"required": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,8 +1,12 @@
|
|||||||
import React, { ChangeEvent, Component, FormEvent } from 'react'
|
import React, { ChangeEvent, Component, FormEvent } from 'react'
|
||||||
import Button from '../components/atoms/Button'
|
import Button from '../components/atoms/Button'
|
||||||
|
import Form from '../components/atoms/Form/Form'
|
||||||
|
import Input from '../components/atoms/Form/Input'
|
||||||
import { User } from '../context/User'
|
import { User } from '../context/User'
|
||||||
import AssetModel from '../models/AssetModel'
|
import AssetModel from '../models/AssetModel'
|
||||||
|
|
||||||
|
import form from '../data/form-publish.json'
|
||||||
|
|
||||||
type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
|
type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
|
||||||
|
|
||||||
interface PublishState {
|
interface PublishState {
|
||||||
@ -33,98 +37,94 @@ class Publish extends Component<{}, PublishState> {
|
|||||||
categories: ['']
|
categories: ['']
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public formFields = (entries: any[]) =>
|
||||||
|
entries.map(([key, value]) => {
|
||||||
|
let onChange = this.inputChange
|
||||||
|
|
||||||
|
if (key === 'files' || key === 'categories') {
|
||||||
|
onChange = this.inputToArrayChange
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
key={key}
|
||||||
|
name={key}
|
||||||
|
label={value.label}
|
||||||
|
placeholder={value.placeholder}
|
||||||
|
required={value.required}
|
||||||
|
type={value.type}
|
||||||
|
help={value.help}
|
||||||
|
options={value.options}
|
||||||
|
onChange={onChange}
|
||||||
|
rows={value.rows}
|
||||||
|
// value={this.state[key]}
|
||||||
|
// value={this.state.files[0]}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
private inputChange = (
|
||||||
|
event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
|
||||||
|
) => {
|
||||||
|
this.setState({
|
||||||
|
[event.target.name]: event.target.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private inputToArrayChange = (
|
||||||
|
event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
|
||||||
|
) => {
|
||||||
|
this.setState({
|
||||||
|
[event.target.name]: [event.target.value]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
|
||||||
|
event.preventDefault()
|
||||||
|
const account = await this.context.ocean.getAccounts()
|
||||||
|
const newAsset = {
|
||||||
|
// OEP-08 Attributes
|
||||||
|
// https://github.com/oceanprotocol/OEPs/tree/master/8
|
||||||
|
base: Object.assign(AssetModel.base, {
|
||||||
|
name: this.state.name,
|
||||||
|
description: this.state.description,
|
||||||
|
dateCreated: new Date().toString(),
|
||||||
|
author: this.state.author,
|
||||||
|
license: this.state.license,
|
||||||
|
copyrightHolder: this.state.copyrightHolder,
|
||||||
|
contentUrls: [this.state.files],
|
||||||
|
price: this.state.price,
|
||||||
|
type: this.state.type,
|
||||||
|
size: '',
|
||||||
|
encoding: '',
|
||||||
|
compression: undefined,
|
||||||
|
contentType: '',
|
||||||
|
workExample: undefined,
|
||||||
|
inLanguage: undefined,
|
||||||
|
tags: ''
|
||||||
|
}),
|
||||||
|
curation: Object.assign(AssetModel.curation),
|
||||||
|
additionalInformation: Object.assign(
|
||||||
|
AssetModel.additionalInformation
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.context.ocean.registerAsset(newAsset, account[0])
|
||||||
|
}
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
|
const entries = Object.entries(form.fields)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h1>Publish</h1>
|
<h1>Publish</h1>
|
||||||
<form onSubmit={this.registerAsset}>
|
<Form
|
||||||
<div>
|
title={form.title}
|
||||||
Name:
|
description={form.description}
|
||||||
<input
|
onSubmit={this.registerAsset}
|
||||||
type="text"
|
|
||||||
name="name"
|
|
||||||
value={this.state.name}
|
|
||||||
onChange={this.inputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Description:
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="description"
|
|
||||||
value={this.state.description}
|
|
||||||
onChange={this.inputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Price:
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
name="price"
|
|
||||||
value={this.state.price}
|
|
||||||
onChange={this.inputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Author:
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="author"
|
|
||||||
value={this.state.author}
|
|
||||||
onChange={this.inputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Files:
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="files"
|
|
||||||
value={this.state.files[0]}
|
|
||||||
onChange={this.inputToArrayChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Type:
|
|
||||||
<select
|
|
||||||
name="type"
|
|
||||||
value={this.state.type}
|
|
||||||
onChange={this.inputChange}
|
|
||||||
>
|
>
|
||||||
<option value="dataset">Data set</option>
|
{this.formFields(entries)}
|
||||||
<option value="algorithm">Algorithm</option>
|
|
||||||
<option value="container">Container</option>
|
|
||||||
<option value="workflow">Workflow</option>
|
|
||||||
<option value="other">Other</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
License:
|
|
||||||
<select
|
|
||||||
name="license"
|
|
||||||
value={this.state.license}
|
|
||||||
onChange={this.inputChange}
|
|
||||||
>
|
|
||||||
<option value="none">No License Specified</option>
|
|
||||||
<option value="Public Domain">Public Domain</option>
|
|
||||||
<option value="CC BY">CC BY: Attribution</option>
|
|
||||||
<option value="CC BY-SA">
|
|
||||||
CC BY-SA: Attribution ShareAlike
|
|
||||||
</option>
|
|
||||||
<option value="CC BY-ND">
|
|
||||||
CC BY-ND: Attribution-NoDerivs
|
|
||||||
</option>
|
|
||||||
<option value="CC BY-NC">
|
|
||||||
CC BY-NC: Attribution-NonCommercial
|
|
||||||
</option>
|
|
||||||
<option value="CC BY-NC-SA">
|
|
||||||
CC BY-NC-SA:
|
|
||||||
Attribution-NonCommercial-ShareAlike
|
|
||||||
</option>
|
|
||||||
<option value="CC BY-NC-ND">
|
|
||||||
CC BY-NC-ND: Attribution-NonCommercial-NoDerivs
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
Category:
|
Category:
|
||||||
<select
|
<select
|
||||||
@ -203,87 +203,26 @@ class Publish extends Component<{}, PublishState> {
|
|||||||
<option value="Other">Other</option>
|
<option value="Other">Other</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
CopyrightHolder:
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="copyrightHolder"
|
|
||||||
value={this.state.copyrightHolder}
|
|
||||||
onChange={this.inputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<User.Consumer>
|
<User.Consumer>
|
||||||
{states => (
|
{states => (
|
||||||
<div>
|
<div>
|
||||||
{states.isLogged ? (
|
{states.isLogged ? (
|
||||||
<div>
|
<Button primary>
|
||||||
<Button>
|
|
||||||
Register asset (we are logged)
|
Register asset (we are logged)
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
<div>
|
<Button primary onClick={states.startLogin}>
|
||||||
<button onClick={states.startLogin}>
|
|
||||||
Register asset (login first)
|
Register asset (login first)
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</User.Consumer>
|
</User.Consumer>
|
||||||
</form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
private inputChange = (
|
|
||||||
event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
|
|
||||||
) => {
|
|
||||||
this.setState({
|
|
||||||
[event.target.name]: event.target.value
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private inputToArrayChange = (
|
|
||||||
event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
|
|
||||||
) => {
|
|
||||||
this.setState({
|
|
||||||
[event.target.name]: [event.target.value]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
|
|
||||||
event.preventDefault()
|
|
||||||
const account = await this.context.ocean.getAccounts()
|
|
||||||
const newAsset = {
|
|
||||||
// OEP-08 Attributes
|
|
||||||
// https://github.com/oceanprotocol/OEPs/tree/master/8
|
|
||||||
base: Object.assign(AssetModel.base, {
|
|
||||||
name: this.state.name,
|
|
||||||
description: this.state.description,
|
|
||||||
dateCreated: new Date().toString(),
|
|
||||||
author: this.state.author,
|
|
||||||
license: this.state.license,
|
|
||||||
copyrightHolder: this.state.copyrightHolder,
|
|
||||||
contentUrls: [this.state.files],
|
|
||||||
price: this.state.price,
|
|
||||||
type: this.state.type,
|
|
||||||
size: '',
|
|
||||||
encoding: '',
|
|
||||||
compression: undefined,
|
|
||||||
contentType: '',
|
|
||||||
workExample: undefined,
|
|
||||||
inLanguage: undefined,
|
|
||||||
tags: ''
|
|
||||||
}),
|
|
||||||
curation: Object.assign(AssetModel.curation),
|
|
||||||
additionalInformation: Object.assign(
|
|
||||||
AssetModel.additionalInformation
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
await this.context.ocean.registerAsset(newAsset, account[0])
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Publish.contextType = User
|
Publish.contextType = User
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user