mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
split up form in multiple steps, one component for all steps
This commit is contained in:
parent
cfad4a655d
commit
e91de4a64d
GPG Key ID:
606EEEF3C479A91F
@ -1,90 +1,111 @@
|
||||
{
|
||||
"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 Obiwan"
|
||||
"steps": [
|
||||
{
|
||||
"title": "Essentials",
|
||||
"fields": {
|
||||
"name": {
|
||||
"label": "Title",
|
||||
"placeholder": "i.e. My cool data set",
|
||||
"type": "text",
|
||||
"required": true,
|
||||
"help": "Help me Obiwan"
|
||||
},
|
||||
"files": {
|
||||
"label": "Files",
|
||||
"placeholder": "i.e. https://file.com/file.json",
|
||||
"type": "text",
|
||||
"required": true,
|
||||
"help": "Provide one or multiple links to your data files."
|
||||
}
|
||||
}
|
||||
},
|
||||
"files": {
|
||||
"label": "Files",
|
||||
"placeholder": "i.e. https://file.com/file.json",
|
||||
"type": "text",
|
||||
"required": true,
|
||||
"help": "Provide one or multiple links to your data files."
|
||||
{
|
||||
"title": "Information",
|
||||
"fields": {
|
||||
"description": {
|
||||
"label": "Description",
|
||||
"placeholder": "i.e. My cool data set",
|
||||
"type": "textarea",
|
||||
"required": true,
|
||||
"rows": 5
|
||||
},
|
||||
"categories": {
|
||||
"label": "Categories",
|
||||
"type": "select",
|
||||
"options": [
|
||||
"Image Recognition",
|
||||
"Dataset Of Datasets",
|
||||
"Language",
|
||||
"Performing Arts",
|
||||
"Visual Arts & Design",
|
||||
"Philosophy",
|
||||
"History",
|
||||
"Theology",
|
||||
"Anthropology & Archeology",
|
||||
"Sociology",
|
||||
"Psychology",
|
||||
"Politics",
|
||||
"Interdisciplinary",
|
||||
"Economics & Finance",
|
||||
"Demography",
|
||||
"Biology",
|
||||
"Chemistry",
|
||||
"Physics & Energy",
|
||||
"Earth & Climate",
|
||||
"Space & Astronomy",
|
||||
"Mathematics",
|
||||
"Computer Technology",
|
||||
"Engineering",
|
||||
"Agriculture & Bio Engineering",
|
||||
"Transportation",
|
||||
"Urban Planning",
|
||||
"Medicine",
|
||||
"Business & Management",
|
||||
"Sports & Recreation",
|
||||
"Communication & Journalism",
|
||||
"Other"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"description": {
|
||||
"label": "Description",
|
||||
"placeholder": "i.e. My cool data set",
|
||||
"type": "textarea",
|
||||
"required": true,
|
||||
"rows": 5
|
||||
{
|
||||
"title": "Credentials",
|
||||
"fields": {
|
||||
"author": {
|
||||
"label": "Author",
|
||||
"placeholder": "i.e. Jelly McJellyfish",
|
||||
"type": "text",
|
||||
"required": true
|
||||
},
|
||||
"copyrightHolder": {
|
||||
"label": "Copyright Holder",
|
||||
"placeholder": "i.e. fwhfiw",
|
||||
"type": "text",
|
||||
"required": true
|
||||
},
|
||||
"license": {
|
||||
"label": "License",
|
||||
"type": "select",
|
||||
"required": true,
|
||||
"options": [
|
||||
"Public Domain",
|
||||
"CC BY: Attribution",
|
||||
"CC BY-SA: Attribution ShareAlike",
|
||||
"CC BY-ND: Attribution-NoDerivs",
|
||||
"CC BY-NC: Attribution-NonCommercial",
|
||||
"CC BY-NC-SA: Attribution-NonCommercial-ShareAlike",
|
||||
"CC BY-NC-ND: Attribution-NonCommercial-NoDerivs"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"categories": {
|
||||
"label": "Categories",
|
||||
"type": "select",
|
||||
"options": [
|
||||
"Image Recognition",
|
||||
"Dataset Of Datasets",
|
||||
"Language",
|
||||
"Performing Arts",
|
||||
"Visual Arts & Design",
|
||||
"Philosophy",
|
||||
"History",
|
||||
"Theology",
|
||||
"Anthropology & Archeology",
|
||||
"Sociology",
|
||||
"Psychology",
|
||||
"Politics",
|
||||
"Interdisciplinary",
|
||||
"Economics & Finance",
|
||||
"Demography",
|
||||
"Biology",
|
||||
"Chemistry",
|
||||
"Physics & Energy",
|
||||
"Earth & Climate",
|
||||
"Space & Astronomy",
|
||||
"Mathematics",
|
||||
"Computer Technology",
|
||||
"Engineering",
|
||||
"Agriculture & Bio Engineering",
|
||||
"Transportation",
|
||||
"Urban Planning",
|
||||
"Medicine",
|
||||
"Business & Management",
|
||||
"Sports & Recreation",
|
||||
"Communication & Journalism",
|
||||
"Other"
|
||||
]
|
||||
{
|
||||
"title": "Wallet"
|
||||
},
|
||||
"copyrightHolder": {
|
||||
"label": "Copyright Holder",
|
||||
"placeholder": "i.e. fwhfiw",
|
||||
"type": "text",
|
||||
"required": true
|
||||
},
|
||||
"author": {
|
||||
"label": "Author",
|
||||
"placeholder": "i.e. Jelly McJellyfish",
|
||||
"type": "text",
|
||||
"required": true
|
||||
},
|
||||
"license": {
|
||||
"label": "License",
|
||||
"type": "select",
|
||||
"required": true,
|
||||
"options": [
|
||||
"Public Domain",
|
||||
"CC BY: Attribution",
|
||||
"CC BY-SA: Attribution ShareAlike",
|
||||
"CC BY-ND: Attribution-NoDerivs",
|
||||
"CC BY-NC: Attribution-NonCommercial",
|
||||
"CC BY-NC-SA: Attribution-NonCommercial-ShareAlike",
|
||||
"CC BY-NC-ND: Attribution-NonCommercial-NoDerivs"
|
||||
]
|
||||
{
|
||||
"title": "Complete"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
5
src/routes/Publish/Step.module.scss
Normal file
5
src/routes/Publish/Step.module.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import '../../styles/variables';
|
||||
|
||||
.title {
|
||||
font-size: $font-size-h2;
|
||||
}
|
||||
121
src/routes/Publish/Step.tsx
Normal file
121
src/routes/Publish/Step.tsx
Normal file
@ -0,0 +1,121 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import Input from '../../components/atoms/Form/Input'
|
||||
import Label from '../../components/atoms/Form/Label'
|
||||
import Row from '../../components/atoms/Form/Row'
|
||||
import Button from '../../components/atoms/Button'
|
||||
import { User } from '../../context/User'
|
||||
import Files from './Files/'
|
||||
import styles from './Step.module.scss'
|
||||
|
||||
interface StepProps {
|
||||
currentStep: number
|
||||
index: number
|
||||
inputChange: any
|
||||
inputToArrayChange: any
|
||||
fields?: any[]
|
||||
files?: any
|
||||
state: any
|
||||
title: string
|
||||
next: any
|
||||
prev: any
|
||||
}
|
||||
|
||||
export default class Step extends PureComponent<StepProps, {}> {
|
||||
public previousButton() {
|
||||
let { currentStep, prev } = this.props
|
||||
|
||||
if (currentStep !== 1) {
|
||||
return <Button onClick={prev}>Previous</Button>
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
public nextButton() {
|
||||
let { currentStep, next } = this.props
|
||||
if (currentStep < 3) {
|
||||
return <Button onClick={next}>Next</Button>
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {
|
||||
currentStep,
|
||||
index,
|
||||
title,
|
||||
fields,
|
||||
inputChange,
|
||||
inputToArrayChange,
|
||||
files,
|
||||
state
|
||||
} = this.props
|
||||
|
||||
if (currentStep !== index + 1) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h3 className={styles.title}>{title}</h3>
|
||||
{fields &&
|
||||
Object.entries(fields).map(([key, value]) => {
|
||||
let onChange = inputChange
|
||||
|
||||
if (key === 'files' || key === 'categories') {
|
||||
onChange = inputToArrayChange
|
||||
}
|
||||
|
||||
if (key === 'files') {
|
||||
return (
|
||||
<Row key={key}>
|
||||
<Label htmlFor={key} required>
|
||||
{value.label}
|
||||
</Label>
|
||||
<Files
|
||||
placeholder={value.placeholder}
|
||||
name={value.name}
|
||||
help={value.help}
|
||||
files={files}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
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={(state as any)[key]}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
{this.previousButton()}
|
||||
{this.nextButton()}
|
||||
|
||||
<User.Consumer>
|
||||
{states =>
|
||||
states.isLogged ? (
|
||||
<Button primary>Register asset</Button>
|
||||
) : (
|
||||
<Button onClick={states.startLogin}>
|
||||
Register asset (login first)
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
</User.Consumer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Step.contextType = User
|
||||
@ -1,15 +1,10 @@
|
||||
import React, { ChangeEvent, Component, FormEvent } from 'react'
|
||||
import { Logger } from '@oceanprotocol/squid'
|
||||
import Route from '../../components/templates/Route'
|
||||
import Button from '../../components/atoms/Button'
|
||||
import Form from '../../components/atoms/Form/Form'
|
||||
import Input from '../../components/atoms/Form/Input'
|
||||
import Label from '../../components/atoms/Form/Label'
|
||||
import Row from '../../components/atoms/Form/Row'
|
||||
import { User } from '../../context/User'
|
||||
import AssetModel from '../../models/AssetModel'
|
||||
import Web3message from '../../components/Web3message'
|
||||
import Files from './Files/'
|
||||
import Step from './Step'
|
||||
|
||||
import form from '../../data/form-publish.json'
|
||||
|
||||
@ -19,7 +14,7 @@ interface PublishState {
|
||||
name?: string
|
||||
dateCreated?: Date
|
||||
description?: string
|
||||
files?: any[]
|
||||
files?: string[]
|
||||
price?: number
|
||||
author?: string
|
||||
type?: AssetType
|
||||
@ -31,10 +26,12 @@ interface PublishState {
|
||||
isPublished?: boolean
|
||||
publishedDid?: string
|
||||
publishingError?: string
|
||||
currentStep?: number
|
||||
}
|
||||
|
||||
class Publish extends Component<{}, PublishState> {
|
||||
public state = {
|
||||
currentStep: 1,
|
||||
name: '',
|
||||
dateCreated: new Date(),
|
||||
description: '',
|
||||
@ -51,48 +48,6 @@ class Publish extends Component<{}, PublishState> {
|
||||
publishingError: ''
|
||||
}
|
||||
|
||||
public formFields = (entries: any[]) =>
|
||||
entries.map(([key, value]) => {
|
||||
let onChange = this.inputChange
|
||||
|
||||
if (key === 'files' || key === 'categories') {
|
||||
onChange = this.inputToArrayChange
|
||||
}
|
||||
|
||||
if (key === 'files') {
|
||||
return (
|
||||
<Row key={key}>
|
||||
<Label htmlFor={key} required>
|
||||
{value.label}
|
||||
</Label>
|
||||
<Files
|
||||
placeholder={value.placeholder}
|
||||
name={value.name}
|
||||
help={value.help}
|
||||
files={this.state.files}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
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 as any)[key]}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
private inputChange = (
|
||||
event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
|
||||
) => {
|
||||
@ -113,6 +68,22 @@ class Publish extends Component<{}, PublishState> {
|
||||
this.setState({ publishingError: '' })
|
||||
}
|
||||
|
||||
private next = () => {
|
||||
let { currentStep } = this.state
|
||||
currentStep = currentStep >= 2 ? 3 : currentStep + 1
|
||||
this.setState({
|
||||
currentStep: currentStep
|
||||
})
|
||||
}
|
||||
|
||||
private prev = () => {
|
||||
let { currentStep } = this.state
|
||||
currentStep = currentStep <= 1 ? 1 : currentStep - 1
|
||||
this.setState({
|
||||
currentStep: currentStep
|
||||
})
|
||||
}
|
||||
|
||||
private toStart = () => {
|
||||
this.setState({
|
||||
name: '',
|
||||
@ -187,8 +158,6 @@ class Publish extends Component<{}, PublishState> {
|
||||
}
|
||||
|
||||
public render() {
|
||||
const entries = Object.entries(form.fields)
|
||||
|
||||
return (
|
||||
<Route title="Publish">
|
||||
<Web3message />
|
||||
@ -200,25 +169,27 @@ class Publish extends Component<{}, PublishState> {
|
||||
) : this.state.isPublished ? (
|
||||
this.publishedState()
|
||||
) : (
|
||||
<Form
|
||||
title={form.title}
|
||||
description={form.description}
|
||||
onSubmit={this.registerAsset}
|
||||
>
|
||||
{this.formFields(entries)}
|
||||
<>
|
||||
<p>Step {this.state.currentStep} </p>
|
||||
|
||||
<User.Consumer>
|
||||
{states =>
|
||||
states.isLogged ? (
|
||||
<Button primary>Register asset</Button>
|
||||
) : (
|
||||
<Button onClick={states.startLogin}>
|
||||
Register asset (login first)
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
</User.Consumer>
|
||||
</Form>
|
||||
<Form onSubmit={this.registerAsset}>
|
||||
{form.steps.map((step: any, index: number) => (
|
||||
<Step
|
||||
key={index}
|
||||
index={index}
|
||||
title={step.title}
|
||||
currentStep={this.state.currentStep}
|
||||
fields={step.fields}
|
||||
inputChange={this.inputChange}
|
||||
inputToArrayChange={this.inputToArrayChange}
|
||||
files={this.state.files}
|
||||
state={this.state}
|
||||
next={this.next}
|
||||
prev={this.prev}
|
||||
/>
|
||||
))}
|
||||
</Form>
|
||||
</>
|
||||
)}
|
||||
</Route>
|
||||
)
|
||||
@ -249,5 +220,4 @@ class Publish extends Component<{}, PublishState> {
|
||||
}
|
||||
}
|
||||
|
||||
Publish.contextType = User
|
||||
export default Publish
|
||||
|
||||
Loading…
Reference in New Issue
Block a user