diff options
author | 2019-02-26 13:31:43 +0100 | |
---|---|---|
committer | 2019-02-26 13:31:43 +0100 | |
commit | ff4c9c7f527e911c37cf02a5d048f5e6652ed253 (patch) | |
tree | 8c47332ecaf852e0d86af918687ff783a3c3d8db /src | |
parent | fix bug in form input library (diff) | |
download | ferdium-app-ff4c9c7f527e911c37cf02a5d048f5e6652ed253.tar.gz ferdium-app-ff4c9c7f527e911c37cf02a5d048f5e6652ed253.tar.zst ferdium-app-ff4c9c7f527e911c37cf02a5d048f5e6652ed253.zip |
improve workspace form setup
Diffstat (limited to 'src')
3 files changed, 46 insertions, 35 deletions
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js index d440b9bae..83f6e07f7 100644 --- a/src/features/workspaces/components/CreateWorkspaceForm.js +++ b/src/features/workspaces/components/CreateWorkspaceForm.js | |||
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react'; | |||
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import { Input, Button } from '@meetfranz/forms'; | 5 | import { Input, Button } from '@meetfranz/forms'; |
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | |||
8 | import Form from '../../../lib/Form'; | 7 | import Form from '../../../lib/Form'; |
8 | import { required } from '../../../helpers/validation-helpers'; | ||
9 | 9 | ||
10 | const messages = defineMessages({ | 10 | const messages = defineMessages({ |
11 | submitButton: { | 11 | submitButton: { |
@@ -28,11 +28,11 @@ const styles = () => ({ | |||
28 | }, | 28 | }, |
29 | submitButton: { | 29 | submitButton: { |
30 | height: 'inherit', | 30 | height: 'inherit', |
31 | marginTop: '17px', | 31 | marginTop: '3px', |
32 | }, | 32 | }, |
33 | }); | 33 | }); |
34 | 34 | ||
35 | @observer @injectSheet(styles) | 35 | @injectSheet(styles) @observer |
36 | class CreateWorkspaceForm extends Component { | 36 | class CreateWorkspaceForm extends Component { |
37 | static contextTypes = { | 37 | static contextTypes = { |
38 | intl: intlShape, | 38 | intl: intlShape, |
@@ -43,46 +43,45 @@ class CreateWorkspaceForm extends Component { | |||
43 | onSubmit: PropTypes.func.isRequired, | 43 | onSubmit: PropTypes.func.isRequired, |
44 | }; | 44 | }; |
45 | 45 | ||
46 | prepareForm() { | 46 | form = (() => { |
47 | const { intl } = this.context; | 47 | const { intl } = this.context; |
48 | const config = { | 48 | return new Form({ |
49 | fields: { | 49 | fields: { |
50 | name: { | 50 | name: { |
51 | label: intl.formatMessage(messages.name), | 51 | label: intl.formatMessage(messages.name), |
52 | placeholder: intl.formatMessage(messages.name), | 52 | placeholder: intl.formatMessage(messages.name), |
53 | value: '', | 53 | value: '', |
54 | validators: [required], | ||
54 | }, | 55 | }, |
55 | }, | 56 | }, |
56 | }; | 57 | }); |
57 | return new Form(config); | 58 | })(); |
58 | } | ||
59 | 59 | ||
60 | submitForm(form) { | 60 | submitForm() { |
61 | const { form } = this; | ||
61 | form.submit({ | 62 | form.submit({ |
62 | onSuccess: async (f) => { | 63 | onSuccess: async (f) => { |
63 | const { onSubmit } = this.props; | 64 | const { onSubmit } = this.props; |
64 | const values = f.values(); | 65 | onSubmit(f.values()); |
65 | onSubmit(values); | ||
66 | }, | 66 | }, |
67 | onError: async () => {}, | ||
68 | }); | 67 | }); |
69 | } | 68 | } |
70 | 69 | ||
71 | render() { | 70 | render() { |
72 | const { intl } = this.context; | 71 | const { intl } = this.context; |
73 | const { classes } = this.props; | 72 | const { classes } = this.props; |
74 | const form = this.prepareForm(); | 73 | const { form } = this; |
75 | |||
76 | return ( | 74 | return ( |
77 | <div className={classes.form}> | 75 | <div className={classes.form}> |
78 | <Input | 76 | <Input |
79 | className={classes.input} | 77 | className={classes.input} |
80 | {...form.$('name').bind()} | 78 | {...form.$('name').bind()} |
79 | showLabel={false} | ||
81 | onEnterKey={this.submitForm.bind(this, form)} | 80 | onEnterKey={this.submitForm.bind(this, form)} |
82 | /> | 81 | /> |
83 | <Button | 82 | <Button |
84 | className={classes.submitButton} | 83 | className={classes.submitButton} |
85 | type="button" | 84 | type="submit" |
86 | label={intl.formatMessage(messages.submitButton)} | 85 | label={intl.formatMessage(messages.submitButton)} |
87 | onClick={this.submitForm.bind(this, form)} | 86 | onClick={this.submitForm.bind(this, form)} |
88 | /> | 87 | /> |
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js index 9e87b56dd..05ca65403 100644 --- a/src/features/workspaces/components/EditWorkspaceForm.js +++ b/src/features/workspaces/components/EditWorkspaceForm.js | |||
@@ -4,9 +4,11 @@ import { observer } from 'mobx-react'; | |||
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import { Link } from 'react-router'; | 5 | import { Link } from 'react-router'; |
6 | import { Input, Button } from '@meetfranz/forms'; | 6 | import { Input, Button } from '@meetfranz/forms'; |
7 | import injectSheet from 'react-jss'; | ||
7 | 8 | ||
8 | import Form from '../../../lib/Form'; | ||
9 | import Workspace from '../models/Workspace'; | 9 | import Workspace from '../models/Workspace'; |
10 | import Form from '../../../lib/Form'; | ||
11 | import { required } from '../../../helpers/validation-helpers'; | ||
10 | 12 | ||
11 | const messages = defineMessages({ | 13 | const messages = defineMessages({ |
12 | buttonDelete: { | 14 | buttonDelete: { |
@@ -27,7 +29,13 @@ const messages = defineMessages({ | |||
27 | }, | 29 | }, |
28 | }); | 30 | }); |
29 | 31 | ||
30 | @observer | 32 | const styles = () => ({ |
33 | nameInput: { | ||
34 | height: 'auto', | ||
35 | }, | ||
36 | }); | ||
37 | |||
38 | @injectSheet(styles) @observer | ||
31 | class EditWorkspaceForm extends Component { | 39 | class EditWorkspaceForm extends Component { |
32 | static contextTypes = { | 40 | static contextTypes = { |
33 | intl: intlShape, | 41 | intl: intlShape, |
@@ -41,22 +49,30 @@ class EditWorkspaceForm extends Component { | |||
41 | isDeleting: PropTypes.bool.isRequired, | 49 | isDeleting: PropTypes.bool.isRequired, |
42 | }; | 50 | }; |
43 | 51 | ||
44 | prepareForm(workspace) { | 52 | form = this.prepareWorkspaceForm(this.props.workspace); |
53 | |||
54 | componentWillReceiveProps(nextProps) { | ||
55 | const { workspace } = this.props; | ||
56 | if (workspace.id !== nextProps.workspace.id) { | ||
57 | this.form = this.prepareWorkspaceForm(nextProps.workspace); | ||
58 | } | ||
59 | } | ||
60 | |||
61 | prepareWorkspaceForm(workspace) { | ||
45 | const { intl } = this.context; | 62 | const { intl } = this.context; |
46 | const config = { | 63 | return new Form({ |
47 | fields: { | 64 | fields: { |
48 | name: { | 65 | name: { |
49 | label: intl.formatMessage(messages.name), | 66 | label: intl.formatMessage(messages.name), |
50 | placeholder: intl.formatMessage(messages.name), | 67 | placeholder: intl.formatMessage(messages.name), |
51 | value: workspace.name, | 68 | value: workspace.name, |
69 | validators: [required], | ||
52 | }, | 70 | }, |
53 | }, | 71 | }, |
54 | }; | 72 | }); |
55 | return new Form(config); | ||
56 | } | 73 | } |
57 | 74 | ||
58 | submitForm(submitEvent, form) { | 75 | submitForm(form) { |
59 | submitEvent.preventDefault(); | ||
60 | form.submit({ | 76 | form.submit({ |
61 | onSuccess: async (f) => { | 77 | onSuccess: async (f) => { |
62 | const { onSave } = this.props; | 78 | const { onSave } = this.props; |
@@ -70,15 +86,13 @@ class EditWorkspaceForm extends Component { | |||
70 | render() { | 86 | render() { |
71 | const { intl } = this.context; | 87 | const { intl } = this.context; |
72 | const { | 88 | const { |
73 | workspace, | 89 | classes, |
74 | isDeleting, | 90 | isDeleting, |
75 | isSaving, | 91 | isSaving, |
76 | onDelete, | 92 | onDelete, |
93 | workspace, | ||
77 | } = this.props; | 94 | } = this.props; |
78 | if (!workspace) return null; | 95 | const { form } = this; |
79 | |||
80 | const form = this.prepareForm(workspace); | ||
81 | |||
82 | return ( | 96 | return ( |
83 | <div className="settings__main"> | 97 | <div className="settings__main"> |
84 | <div className="settings__header"> | 98 | <div className="settings__header"> |
@@ -93,11 +107,9 @@ class EditWorkspaceForm extends Component { | |||
93 | </span> | 107 | </span> |
94 | </div> | 108 | </div> |
95 | <div className="settings__body"> | 109 | <div className="settings__body"> |
96 | <form onSubmit={e => this.submitForm(e, form)} id="form"> | 110 | <div className={classes.nameInput}> |
97 | <div className="workspace-name"> | 111 | <Input {...form.$('name').bind()} /> |
98 | <Input {...form.$('name').bind()} /> | 112 | </div> |
99 | </div> | ||
100 | </form> | ||
101 | </div> | 113 | </div> |
102 | <div className="settings__controls"> | 114 | <div className="settings__controls"> |
103 | {/* ===== Delete Button ===== */} | 115 | {/* ===== Delete Button ===== */} |
@@ -130,7 +142,7 @@ class EditWorkspaceForm extends Component { | |||
130 | <Button | 142 | <Button |
131 | type="submit" | 143 | type="submit" |
132 | label={intl.formatMessage(messages.buttonSave)} | 144 | label={intl.formatMessage(messages.buttonSave)} |
133 | htmlForm="form" | 145 | onClick={this.submitForm.bind(this, form)} |
134 | /> | 146 | /> |
135 | )} | 147 | )} |
136 | </div> | 148 | </div> |
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js index 1ddf8dfcb..17b723303 100644 --- a/src/features/workspaces/containers/EditWorkspaceScreen.js +++ b/src/features/workspaces/containers/EditWorkspaceScreen.js | |||
@@ -3,8 +3,8 @@ import { inject, observer } from 'mobx-react'; | |||
3 | import PropTypes from 'prop-types'; | 3 | import PropTypes from 'prop-types'; |
4 | 4 | ||
5 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; | 5 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; |
6 | import { state } from '../state'; | ||
7 | import EditWorkspaceForm from '../components/EditWorkspaceForm'; | 6 | import EditWorkspaceForm from '../components/EditWorkspaceForm'; |
7 | import { state } from '../state'; | ||
8 | 8 | ||
9 | @inject('stores', 'actions') @observer | 9 | @inject('stores', 'actions') @observer |
10 | class EditWorkspaceScreen extends Component { | 10 | class EditWorkspaceScreen extends Component { |