diff options
Diffstat (limited to 'animism-align/frontend/app/views/project/components/project.form.js')
| -rw-r--r-- | animism-align/frontend/app/views/project/components/project.form.js | 216 |
1 files changed, 216 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/project/components/project.form.js b/animism-align/frontend/app/views/project/components/project.form.js new file mode 100644 index 0000000..7a2ef2e --- /dev/null +++ b/animism-align/frontend/app/views/project/components/project.form.js @@ -0,0 +1,216 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { capitalize } from 'app/utils' + +import { TextInput, TextArea, NumberInput, LabelDescription, Select, Checkbox, SubmitButton, Loader } from 'app/common' + +const newProject = () => ({ + title: '', + is_live: false, + settings: { + description: "", + base_href: "", + ftp_url: "", + ftp_base_path: "", + }, +}) + +export default class ProjectForm extends Component { + state = { + title: "", + submitTitle: "", + data: { ...newProject() }, + errorFields: new Set([]), + } + + constructor(props) { + super(props) + this.handleKeyDown = this.handleKeyDown.bind(this) + this.handleSelect = this.handleSelect.bind(this) + this.handleChange = this.handleChange.bind(this) + this.handleSettingsChange = this.handleSettingsChange.bind(this) + this.handleSettingsChangeEvent = this.handleSettingsChangeEvent.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + + componentDidMount() { + const { data, isNew } = this.props + const title = isNew ? 'New project' : 'Editing ' + data.title + const submitTitle = isNew ? "Add Project" : "Save Changes" + this.setState({ + title, + submitTitle, + errorFields: new Set([]), + data: { + ...newProject(), + ...data + }, + }) + window.addEventListener('keydown', this.handleKeyDown) + } + + componentWillUnmount() { + window.removeEventListener('keydown', this.handleKeyDown) + } + + handleKeyDown(e) { + // console.log(e, e.keyCode) + if ((e.ctrlKey || e.metaKey) && e.keyCode === 83) { + if (e) { + e.preventDefault() + } + this.handleSubmit() + } + } + + handleChange(e) { + const { name, value } = e.target + this.handleSelect(name, value) + } + + handleSelect(name, value) { + const { errorFields } = this.state + if (errorFields.has(name)) { + errorFields.delete(name) + } + this.setState({ + errorFields, + data: { + ...this.state.data, + [name]: value, + } + }) + } + + handleSettingsChangeEvent(e) { + const { name, value } = e.target + this.handleSettingsChange(name, value) + } + + handleSettingsChange(name, value) { + // console.log(name, value) + if (name !== 'multiple') { + value = { [name]: value } + } + this.setState({ + data: { + ...this.state.data, + settings: { + ...this.state.data.settings, + ...value, + } + } + }) + } + + handleSubmit(e) { + if (e) { + e.preventDefault() + } + const { isNew, onSubmit } = this.props + const { data } = this.state + const requiredKeys = "title is_live".split(" ") + const validKeys = "title is_live settings".split(" ") + const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {}) + if (!data.title) { + data.title = "TBD" + } + const errorFields = requiredKeys.filter(key => !validData[key]) + if (errorFields.length) { + console.log('error', errorFields, validData) + this.setState({ errorFields: new Set(errorFields) }) + } else { + if (isNew) { + // + } else { + validData.id = data.id + } + console.log('submit', validData) + onSubmit(validData) + } + } + + render() { + const { isNew } = this.props + const { title, submitTitle, errorFields, data } = this.state + // console.log(data) + return ( + <div className='form project-form'> + <h1>{title}</h1> + <form onSubmit={this.handleSubmit}> + <SubmitButton + title={submitTitle} + onClick={this.handleSubmit} + /> + <TextInput + title="Title" + name="title" + required + data={data} + onChange={this.handleChange} + autoComplete="off" + /> + <Checkbox + label="Project is live" + name="is_live" + checked={data.is_live} + onChange={this.handleSelect} + /> + + <TextArea + title="Description" + name="description" + required + data={data.settings} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + + <h3>Deployment settings</h3> + + <TextInput + title="Base URL" + name="base_href" + required + data={data.settings} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + <TextInput + title="FTP URL" + name="ftp_url" + required + data={data.settings} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + + <TextInput + title="FTP Base Path" + name="ftp_base_path" + required + data={data.settings} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + + <SubmitButton + title={submitTitle} + onClick={this.handleSubmit} + /> + {!!errorFields.size && + <label> + <span></span> + <span>Please complete the required fields</span> + </label> + } + </form> + </div> + ) + } +} +/* + open ftp://animism:Agkp8#48@93.114.86.205; + lcd ./data_store/exports/animism; +*/
\ No newline at end of file |