diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2020-09-26 14:56:02 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2020-09-26 14:56:02 +0200 |
| commit | a17b76ac75f506f5da6fe8adf9c36632b60d4226 (patch) | |
| tree | abb0af0c4409b830dea2ef808c146223ee973933 /frontend/views/graph/components/page.form.js | |
| parent | 2231a6e1c05b07bb7ec5906716aedec93d02429c (diff) | |
refactor to use app-rooted js imports
Diffstat (limited to 'frontend/views/graph/components/page.form.js')
| -rw-r--r-- | frontend/views/graph/components/page.form.js | 185 |
1 files changed, 0 insertions, 185 deletions
diff --git a/frontend/views/graph/components/page.form.js b/frontend/views/graph/components/page.form.js deleted file mode 100644 index 38fee18..0000000 --- a/frontend/views/graph/components/page.form.js +++ /dev/null @@ -1,185 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' - -import { session } from '../../../session' - -import { TextInput, ColorInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common' - -const newPage = (data) => ({ - path: '', - title: '', - username: session('username'), - description: '', - settings: { - x: 0.05, - y: 0.05, - background_color: '#000000', - }, - ...data, -}) - -export default class PageForm extends Component { - state = { - title: "", - submitTitle: "", - data: { ...newPage() }, - errorFields: new Set([]), - } - - componentDidMount() { - const { graph, data, isNew } = this.props - const title = isNew ? 'new page' : 'editing ' + data.title - const submitTitle = isNew ? "Create Page" : "Save Changes" - this.setState({ - title, - submitTitle, - errorFields: new Set([]), - data: { - ...newPage({ graph_id: graph.id }), - ...data, - }, - }) - } - - handleChange(e) { - const { errorFields } = this.state - const { name, value } = e.target - if (errorFields.has(name)) { - errorFields.delete(name) - } - let sanitizedValue = value - if (name === 'path') { - sanitizedValue = sanitizedValue.toLowerCase().replace(/ /, '-').replace(/[!@#$%^&*()[\]{}]/, '-').replace(/-+/, '-') - } - this.setState({ - errorFields, - data: { - ...this.state.data, - [name]: sanitizedValue, - } - }) - } - - handleSelect(name, value) { - const { errorFields } = this.state - if (errorFields.has(name)) { - errorFields.delete(name) - } - this.setState({ - errorFields, - data: { - ...this.state.data, - [name]: value, - } - }) - } - - handleSettingsChange(e) { - const { name, value } = e.target - this.setState({ - data: { - ...this.state.data, - settings: { - ...this.state.data.settings, - [name]: value, - } - } - }) - } - - handleSubmit(e) { - e.preventDefault() - const { isNew, onSubmit } = this.props - const { data } = this.state - const requiredKeys = "path title".split(" ") - const validKeys = "graph_id path title username description settings".split(" ") - const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {}) - const errorFields = requiredKeys.filter(key => !validData[key]) - if (errorFields.length) { - console.log('error', errorFields, validData) - this.setState({ errorFields: new Set(errorFields) }) - } else { - if (isNew) { - // side effect: set username if we're creating a new page - // session.set('username', data.username) - } else { - validData.id = data.id - } - console.log('submit', validData) - onSubmit(validData) - } - } - - handleDelete() { - const { data } = this.state - console.log(data) - if (confirm('Really delete this page?')) { - actions.page.delete(page_id) - } - } - - render() { - const { graph, isNew } = this.props - const { title, submitTitle, errorFields, data } = this.state - return ( - <div className='box'> - <h1>{title}</h1> - <form onSubmit={this.handleSubmit.bind(this)}> - <TextInput - title="Path" - name="path" - required - data={data} - error={errorFields.has('path')} - onChange={this.handleChange.bind(this)} - autoComplete="off" - /> - <LabelDescription> - {'Page URL: /' + graph.path + '/'}<b>{data.path}</b> - </LabelDescription> - <TextInput - title="Title" - name="title" - required - data={data} - error={errorFields.has('title')} - onChange={this.handleChange.bind(this)} - autoComplete="off" - /> - <ColorInput - title='BG' - name='background_color' - data={data.settings} - onChange={this.handleSettingsChange.bind(this)} - autoComplete="off" - /> - <TextArea - title="Description" - name="description" - data={data} - onChange={this.handleChange.bind(this)} - /> - <div className='row buttons'> - <SubmitButton - title={submitTitle} - onClick={this.handleSubmit.bind(this)} - /> - {!isNew && - <SubmitButton - title={'Delete'} - className='destroy' - onClick={this.handleDelete.bind(this)} - /> - } - </div> - {!!errorFields.size && - <label> - <span></span> - <span>Please complete the required fields =)</span> - </label> - } - </form> - </div> - ) - } -} |
