From 2db55c3d261ddee52019bbd06dc5f6545db39c16 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Jun 2020 16:09:59 +0200 Subject: form for making a new graph. add username field to db --- frontend/app.js | 20 ++-- frontend/common/app.css | 37 ++++-- frontend/common/form.component.js | 8 ++ frontend/common/form.css | 61 ++++++---- frontend/common/header.component.js | 14 +-- frontend/common/index.js | 1 + frontend/index.js | 1 + frontend/views/index.js | 3 +- frontend/views/index/components/graph.form.js | 149 +++++++++++++++++++++++++ frontend/views/index/containers/graph.edit.js | 53 +++++++++ frontend/views/index/containers/graph.index.js | 28 +++++ frontend/views/index/containers/graph.new.js | 44 ++++++++ frontend/views/index/index.container.js | 33 ++++++ frontend/views/index/index.css | 18 +++ frontend/views/upload/index.js | 3 - frontend/views/upload/upload.container.js | 2 + 16 files changed, 422 insertions(+), 53 deletions(-) create mode 100644 frontend/views/index/components/graph.form.js create mode 100644 frontend/views/index/containers/graph.edit.js create mode 100644 frontend/views/index/containers/graph.index.js create mode 100644 frontend/views/index/containers/graph.new.js create mode 100644 frontend/views/index/index.container.js create mode 100644 frontend/views/index/index.css delete mode 100644 frontend/views/upload/index.js (limited to 'frontend') diff --git a/frontend/app.js b/frontend/app.js index 38a50c6..da8dccb 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -4,7 +4,7 @@ import { Route } from 'react-router' import { Header } from './common' -import actions from './actions' +// import actions from './actions' import * as views from './views' @@ -22,17 +22,15 @@ export default class App extends Component { render() { return ( -
+
-
-
- {viewList} - { - // redirect to search!! - setTimeout(() => this.props.history.push('/search/'), 10) - return null - }} /> -
+
+ {viewList} + { + // redirect to index!! + setTimeout(() => this.props.history.push('/index'), 10) + return null + }} />
diff --git a/frontend/common/app.css b/frontend/common/app.css index a235507..41aa54e 100644 --- a/frontend/common/app.css +++ b/frontend/common/app.css @@ -2,15 +2,17 @@ html, body { margin: 0; padding: 0; - min-width: 100%; - min-height: 100%; + width: 100%; + height: 100%; } body { - background: #fff; - color: #000; + background: #000; + color: #ddd; overflow-y: scroll; font-family: 'Roboto', sans-serif; font-size: 0.875rem; + height: 100%; + width: 100%; } .gray { color: #888; @@ -18,6 +20,21 @@ body { /* layout */ +.container { + height: 100%; + width: 100%; +} +.app { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} +.app .body { + display: flex; + flex-grow: 1; +} + .row { display: flex; flex-direction: row; @@ -30,9 +47,7 @@ body { .row > div:last-child { margin-right: 0; } -.body section > div:last-child { - flex-grow: 1; -} + .row.menubar { justify-content: flex-end; @@ -59,7 +74,7 @@ header { flex-direction: row; justify-content: space-between; align-items: center; - background: #11f; + background: rgba(64,64,64,0.5); color: white; } header b { @@ -151,8 +166,12 @@ p { /* links */ +b { + color: #fff; +} a { - color: #11f; + text-decoration: underline; + color: #8df; } /* menu button */ diff --git a/frontend/common/form.component.js b/frontend/common/form.component.js index fb8acbe..36369b5 100644 --- a/frontend/common/form.component.js +++ b/frontend/common/form.component.js @@ -10,10 +10,18 @@ export const TextInput = props => ( onChange={props.onChange} name={props.name} value={props.data[props.name]} + autoComplete={props.autoComplete} /> ) +export const LabelDescription = props => ( + +) + export const NumberInput = props => (
- Collections - Dashboard changeUsername()}> {' → '}{props.username} @@ -34,9 +32,9 @@ const mapStateToProps = (state) => ({ auth: state.auth, username: session.get('username'), isAuthenticated: state.auth.isAuthenticated, -}); +}) const mapDispatchToProps = (dispatch) => ({ -}); +}) -export default connect(mapStateToProps, mapDispatchToProps)(Header); +export default connect(mapStateToProps, mapDispatchToProps)(Header) diff --git a/frontend/common/index.js b/frontend/common/index.js index 9e81c99..9a11eba 100644 --- a/frontend/common/index.js +++ b/frontend/common/index.js @@ -5,6 +5,7 @@ export { export { Select, Checkbox, FileInput, FileInputField, TextInput, NumberInput, TextArea, SubmitButton, + LabelDescription, } from './form.component' export { Loader, Swatch, Dot, Columns, Statistic, Detections, Progress diff --git a/frontend/index.js b/frontend/index.js index 94cac35..6f1a0a5 100644 --- a/frontend/index.js +++ b/frontend/index.js @@ -7,6 +7,7 @@ import App from './app' import { store, history } from './store' const container = document.createElement('div') +container.classList.add('container') document.body.appendChild(container) ReactDOM.render( diff --git a/frontend/views/index.js b/frontend/views/index.js index 5f88c96..69bb70e 100644 --- a/frontend/views/index.js +++ b/frontend/views/index.js @@ -1 +1,2 @@ -export { Container as upload } from './upload' +export { default as index } from './index/index.container' +export { default as upload } from './upload/upload.container' diff --git a/frontend/views/index/components/graph.form.js b/frontend/views/index/components/graph.form.js new file mode 100644 index 0000000..ef546ec --- /dev/null +++ b/frontend/views/index/components/graph.form.js @@ -0,0 +1,149 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { session } from '../../../session' + +import { TextInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common' + +const newGraph = () => ({ + path: '', + title: '', + username: session('username'), + description: '', +}) + +export default class GraphForm extends Component { + state = { + title: "", + submitTitle: "", + data: { ...newGraph() }, + errorFields: new Set([]), + } + + componentDidMount() { + const { data, isNew } = this.props + const title = isNew ? 'new graph' : 'editing ' + data.title + const submitTitle = isNew ? "Create Graph" : "Save Changes" + this.setState({ + title, + submitTitle, + errorFields: new Set([]), + data: { + ...newGraph(), + ...data + }, + }) + } + + handleChange(e) { + const { errorFields } = this.state + const { name, value } = e.target + if (errorFields.has(name)) { + errorFields.delete(name) + } + this.setState({ + errorFields, + data: { + ...this.state.data, + [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, + } + }) + } + + handleSubmit(e) { + e.preventDefault() + const { isNew, onSubmit } = this.props + const { data } = this.state + const requiredKeys = "title username".split(" ") + const validKeys = "title username notes archived".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 graph + session.set('username', data.username) + } else { + validData.id = data.id + } + console.log('submit', validData) + onSubmit(validData) + } + } + + render() { + const { isNew } = this.props + const { title, submitTitle, errorFields, data } = this.state + return ( +
+

{title}

+
+ + + {data.path + ? 'Project URLs will be: /' + data.path + '/example' + : 'Enter the base path for this project.'} + + + +