diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-02-19 15:02:11 +0100 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-02-19 15:02:11 +0100 |
commit | a421ba151f40695f54a4890219c5ec8af0a24a45 (patch) | |
tree | f6ef23bae9c8f1fc5c055e67d4a1a9e52fd18a8e /src/features/workspaces | |
parent | consolidate workspace feature for further development (diff) | |
download | ferdium-app-a421ba151f40695f54a4890219c5ec8af0a24a45.tar.gz ferdium-app-a421ba151f40695f54a4890219c5ec8af0a24a45.tar.zst ferdium-app-a421ba151f40695f54a4890219c5ec8af0a24a45.zip |
prepare basic workspace edit form
Diffstat (limited to 'src/features/workspaces')
-rw-r--r-- | src/features/workspaces/components/EditWorkspaceForm.js | 142 | ||||
-rw-r--r-- | src/features/workspaces/containers/EditWorkspaceScreen.js | 67 |
2 files changed, 158 insertions, 51 deletions
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js new file mode 100644 index 000000000..9e87b56dd --- /dev/null +++ b/src/features/workspaces/components/EditWorkspaceForm.js | |||
@@ -0,0 +1,142 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import { Link } from 'react-router'; | ||
6 | import { Input, Button } from '@meetfranz/forms'; | ||
7 | |||
8 | import Form from '../../../lib/Form'; | ||
9 | import Workspace from '../models/Workspace'; | ||
10 | |||
11 | const messages = defineMessages({ | ||
12 | buttonDelete: { | ||
13 | id: 'settings.workspace.form.buttonDelete', | ||
14 | defaultMessage: '!!!Delete workspace', | ||
15 | }, | ||
16 | buttonSave: { | ||
17 | id: 'settings.workspace.form.buttonSave', | ||
18 | defaultMessage: '!!!Save workspace', | ||
19 | }, | ||
20 | name: { | ||
21 | id: 'settings.workspace.form.name', | ||
22 | defaultMessage: '!!!Name', | ||
23 | }, | ||
24 | yourWorkspaces: { | ||
25 | id: 'settings.workspace.form.yourWorkspaces', | ||
26 | defaultMessage: '!!!Your workspaces', | ||
27 | }, | ||
28 | }); | ||
29 | |||
30 | @observer | ||
31 | class EditWorkspaceForm extends Component { | ||
32 | static contextTypes = { | ||
33 | intl: intlShape, | ||
34 | }; | ||
35 | |||
36 | static propTypes = { | ||
37 | workspace: PropTypes.instanceOf(Workspace).isRequired, | ||
38 | onSave: PropTypes.func.isRequired, | ||
39 | onDelete: PropTypes.func.isRequired, | ||
40 | isSaving: PropTypes.bool.isRequired, | ||
41 | isDeleting: PropTypes.bool.isRequired, | ||
42 | }; | ||
43 | |||
44 | prepareForm(workspace) { | ||
45 | const { intl } = this.context; | ||
46 | const config = { | ||
47 | fields: { | ||
48 | name: { | ||
49 | label: intl.formatMessage(messages.name), | ||
50 | placeholder: intl.formatMessage(messages.name), | ||
51 | value: workspace.name, | ||
52 | }, | ||
53 | }, | ||
54 | }; | ||
55 | return new Form(config); | ||
56 | } | ||
57 | |||
58 | submitForm(submitEvent, form) { | ||
59 | submitEvent.preventDefault(); | ||
60 | form.submit({ | ||
61 | onSuccess: async (f) => { | ||
62 | const { onSave } = this.props; | ||
63 | const values = f.values(); | ||
64 | onSave(values); | ||
65 | }, | ||
66 | onError: async () => {}, | ||
67 | }); | ||
68 | } | ||
69 | |||
70 | render() { | ||
71 | const { intl } = this.context; | ||
72 | const { | ||
73 | workspace, | ||
74 | isDeleting, | ||
75 | isSaving, | ||
76 | onDelete, | ||
77 | } = this.props; | ||
78 | if (!workspace) return null; | ||
79 | |||
80 | const form = this.prepareForm(workspace); | ||
81 | |||
82 | return ( | ||
83 | <div className="settings__main"> | ||
84 | <div className="settings__header"> | ||
85 | <span className="settings__header-item"> | ||
86 | <Link to="/settings/workspaces"> | ||
87 | {intl.formatMessage(messages.yourWorkspaces)} | ||
88 | </Link> | ||
89 | </span> | ||
90 | <span className="separator" /> | ||
91 | <span className="settings__header-item"> | ||
92 | {workspace.name} | ||
93 | </span> | ||
94 | </div> | ||
95 | <div className="settings__body"> | ||
96 | <form onSubmit={e => this.submitForm(e, form)} id="form"> | ||
97 | <div className="workspace-name"> | ||
98 | <Input {...form.$('name').bind()} /> | ||
99 | </div> | ||
100 | </form> | ||
101 | </div> | ||
102 | <div className="settings__controls"> | ||
103 | {/* ===== Delete Button ===== */} | ||
104 | {isDeleting ? ( | ||
105 | <Button | ||
106 | label={intl.formatMessage(messages.buttonDelete)} | ||
107 | loaded={false} | ||
108 | buttonType="secondary" | ||
109 | className="settings__delete-button" | ||
110 | disabled | ||
111 | /> | ||
112 | ) : ( | ||
113 | <Button | ||
114 | buttonType="danger" | ||
115 | label={intl.formatMessage(messages.buttonDelete)} | ||
116 | className="settings__delete-button" | ||
117 | onClick={onDelete} | ||
118 | /> | ||
119 | )} | ||
120 | {/* ===== Save Button ===== */} | ||
121 | {isSaving ? ( | ||
122 | <Button | ||
123 | type="submit" | ||
124 | label={intl.formatMessage(messages.buttonSave)} | ||
125 | loaded={!isSaving} | ||
126 | buttonType="secondary" | ||
127 | disabled | ||
128 | /> | ||
129 | ) : ( | ||
130 | <Button | ||
131 | type="submit" | ||
132 | label={intl.formatMessage(messages.buttonSave)} | ||
133 | htmlForm="form" | ||
134 | /> | ||
135 | )} | ||
136 | </div> | ||
137 | </div> | ||
138 | ); | ||
139 | } | ||
140 | } | ||
141 | |||
142 | export default EditWorkspaceForm; | ||
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js index d8c52f586..ed54b194e 100644 --- a/src/features/workspaces/containers/EditWorkspaceScreen.js +++ b/src/features/workspaces/containers/EditWorkspaceScreen.js | |||
@@ -1,72 +1,37 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import { inject, observer } from 'mobx-react'; | 2 | import { inject, observer } from 'mobx-react'; |
3 | import { defineMessages, intlShape } from 'react-intl'; | 3 | |
4 | import { Link } from 'react-router'; | ||
5 | import Form from '../../../lib/Form'; | ||
6 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; | 4 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; |
7 | import { gaPage } from '../../../lib/analytics'; | 5 | import { gaPage } from '../../../lib/analytics'; |
8 | import { state } from '../state'; | 6 | import { state } from '../state'; |
9 | 7 | import EditWorkspaceForm from '../components/EditWorkspaceForm'; | |
10 | const messages = defineMessages({ | ||
11 | name: { | ||
12 | id: 'settings.workspace.form.name', | ||
13 | defaultMessage: '!!!Name', | ||
14 | }, | ||
15 | yourWorkspaces: { | ||
16 | id: 'settings.workspace.form.yourWorkspaces', | ||
17 | defaultMessage: '!!!Your workspaces', | ||
18 | }, | ||
19 | }); | ||
20 | 8 | ||
21 | @inject('stores', 'actions') @observer | 9 | @inject('stores', 'actions') @observer |
22 | class EditWorkspaceScreen extends Component { | 10 | class EditWorkspaceScreen extends Component { |
23 | static contextTypes = { | ||
24 | intl: intlShape, | ||
25 | }; | ||
26 | |||
27 | componentDidMount() { | 11 | componentDidMount() { |
28 | gaPage('Settings/Workspace/Edit'); | 12 | gaPage('Settings/Workspace/Edit'); |
29 | } | 13 | } |
30 | 14 | ||
31 | prepareForm(workspace) { | 15 | onDelete = () => { |
32 | const { intl } = this.context; | 16 | console.log('delete workspace'); |
33 | const config = { | 17 | }; |
34 | fields: { | 18 | |
35 | name: { | 19 | onSave = (values) => { |
36 | label: intl.formatMessage(messages.name), | 20 | console.log('save workspace', values); |
37 | placeholder: intl.formatMessage(messages.name), | 21 | }; |
38 | value: workspace.name, | ||
39 | }, | ||
40 | }, | ||
41 | }; | ||
42 | return new Form(config); | ||
43 | } | ||
44 | 22 | ||
45 | render() { | 23 | render() { |
46 | const { intl } = this.context; | ||
47 | const { workspaceBeingEdited } = state; | 24 | const { workspaceBeingEdited } = state; |
48 | if (!workspaceBeingEdited) return null; | 25 | if (!workspaceBeingEdited) return null; |
49 | |||
50 | // const form = this.prepareForm(workspaceBeingEdited); | ||
51 | |||
52 | return ( | 26 | return ( |
53 | <ErrorBoundary> | 27 | <ErrorBoundary> |
54 | <div className="settings__main"> | 28 | <EditWorkspaceForm |
55 | <div className="settings__header"> | 29 | workspace={workspaceBeingEdited} |
56 | <span className="settings__header-item"> | 30 | onDelete={this.onDelete} |
57 | <Link to="/settings/workspaces"> | 31 | onSave={this.onSave} |
58 | {intl.formatMessage(messages.yourWorkspaces)} | 32 | isDeleting={false} |
59 | </Link> | 33 | isSaving={false} |
60 | </span> | 34 | /> |
61 | <span className="separator" /> | ||
62 | <span className="settings__header-item"> | ||
63 | {workspaceBeingEdited.name} | ||
64 | </span> | ||
65 | </div> | ||
66 | <div className="settings__body"> | ||
67 | test | ||
68 | </div> | ||
69 | </div> | ||
70 | </ErrorBoundary> | 35 | </ErrorBoundary> |
71 | ); | 36 | ); |
72 | } | 37 | } |