summaryrefslogtreecommitdiff
path: root/frontend/views/graph/components/page.form.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/views/graph/components/page.form.js')
-rw-r--r--frontend/views/graph/components/page.form.js185
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>
- )
- }
-}