diff options
Diffstat (limited to 'src/features/workspaces/components/EditWorkspaceForm.js')
-rw-r--r-- | src/features/workspaces/components/EditWorkspaceForm.js | 189 |
1 files changed, 189 insertions, 0 deletions
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js new file mode 100644 index 000000000..e4bf44248 --- /dev/null +++ b/src/features/workspaces/components/EditWorkspaceForm.js | |||
@@ -0,0 +1,189 @@ | |||
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 | import injectSheet from 'react-jss'; | ||
8 | |||
9 | import Workspace from '../models/Workspace'; | ||
10 | import Service from '../../../models/Service'; | ||
11 | import Form from '../../../lib/Form'; | ||
12 | import { required } from '../../../helpers/validation-helpers'; | ||
13 | import ServiceListItem from './ServiceListItem'; | ||
14 | import Request from '../../../stores/lib/Request'; | ||
15 | import { gaEvent } from '../../../lib/analytics'; | ||
16 | import { GA_CATEGORY_WORKSPACES } from '../index'; | ||
17 | |||
18 | const messages = defineMessages({ | ||
19 | buttonDelete: { | ||
20 | id: 'settings.workspace.form.buttonDelete', | ||
21 | defaultMessage: '!!!Delete workspace', | ||
22 | }, | ||
23 | buttonSave: { | ||
24 | id: 'settings.workspace.form.buttonSave', | ||
25 | defaultMessage: '!!!Save workspace', | ||
26 | }, | ||
27 | name: { | ||
28 | id: 'settings.workspace.form.name', | ||
29 | defaultMessage: '!!!Name', | ||
30 | }, | ||
31 | yourWorkspaces: { | ||
32 | id: 'settings.workspace.form.yourWorkspaces', | ||
33 | defaultMessage: '!!!Your workspaces', | ||
34 | }, | ||
35 | servicesInWorkspaceHeadline: { | ||
36 | id: 'settings.workspace.form.servicesInWorkspaceHeadline', | ||
37 | defaultMessage: '!!!Services in this Workspace', | ||
38 | }, | ||
39 | }); | ||
40 | |||
41 | const styles = () => ({ | ||
42 | nameInput: { | ||
43 | height: 'auto', | ||
44 | }, | ||
45 | serviceList: { | ||
46 | height: 'auto', | ||
47 | }, | ||
48 | }); | ||
49 | |||
50 | @injectSheet(styles) @observer | ||
51 | class EditWorkspaceForm extends Component { | ||
52 | static contextTypes = { | ||
53 | intl: intlShape, | ||
54 | }; | ||
55 | |||
56 | static propTypes = { | ||
57 | classes: PropTypes.object.isRequired, | ||
58 | onDelete: PropTypes.func.isRequired, | ||
59 | onSave: PropTypes.func.isRequired, | ||
60 | services: PropTypes.arrayOf(PropTypes.instanceOf(Service)).isRequired, | ||
61 | workspace: PropTypes.instanceOf(Workspace).isRequired, | ||
62 | updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, | ||
63 | deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, | ||
64 | }; | ||
65 | |||
66 | form = this.prepareWorkspaceForm(this.props.workspace); | ||
67 | |||
68 | componentWillReceiveProps(nextProps) { | ||
69 | const { workspace } = this.props; | ||
70 | if (workspace.id !== nextProps.workspace.id) { | ||
71 | this.form = this.prepareWorkspaceForm(nextProps.workspace); | ||
72 | } | ||
73 | } | ||
74 | |||
75 | prepareWorkspaceForm(workspace) { | ||
76 | const { intl } = this.context; | ||
77 | return new Form({ | ||
78 | fields: { | ||
79 | name: { | ||
80 | label: intl.formatMessage(messages.name), | ||
81 | placeholder: intl.formatMessage(messages.name), | ||
82 | value: workspace.name, | ||
83 | validators: [required], | ||
84 | }, | ||
85 | services: { | ||
86 | value: workspace.services.slice(), | ||
87 | }, | ||
88 | }, | ||
89 | }); | ||
90 | } | ||
91 | |||
92 | save(form) { | ||
93 | form.submit({ | ||
94 | onSuccess: async (f) => { | ||
95 | const { onSave } = this.props; | ||
96 | const values = f.values(); | ||
97 | onSave(values); | ||
98 | gaEvent(GA_CATEGORY_WORKSPACES, 'save'); | ||
99 | }, | ||
100 | onError: async () => {}, | ||
101 | }); | ||
102 | } | ||
103 | |||
104 | delete() { | ||
105 | const { onDelete } = this.props; | ||
106 | onDelete(); | ||
107 | gaEvent(GA_CATEGORY_WORKSPACES, 'delete'); | ||
108 | } | ||
109 | |||
110 | toggleService(service) { | ||
111 | const servicesField = this.form.$('services'); | ||
112 | const serviceIds = servicesField.value; | ||
113 | if (serviceIds.includes(service.id)) { | ||
114 | serviceIds.splice(serviceIds.indexOf(service.id), 1); | ||
115 | } else { | ||
116 | serviceIds.push(service.id); | ||
117 | } | ||
118 | servicesField.set(serviceIds); | ||
119 | } | ||
120 | |||
121 | render() { | ||
122 | const { intl } = this.context; | ||
123 | const { | ||
124 | classes, | ||
125 | workspace, | ||
126 | services, | ||
127 | deleteWorkspaceRequest, | ||
128 | updateWorkspaceRequest, | ||
129 | } = this.props; | ||
130 | const { form } = this; | ||
131 | const workspaceServices = form.$('services').value; | ||
132 | const isDeleting = deleteWorkspaceRequest.isExecuting; | ||
133 | const isSaving = updateWorkspaceRequest.isExecuting; | ||
134 | return ( | ||
135 | <div className="settings__main"> | ||
136 | <div className="settings__header"> | ||
137 | <span className="settings__header-item"> | ||
138 | <Link to="/settings/workspaces"> | ||
139 | {intl.formatMessage(messages.yourWorkspaces)} | ||
140 | </Link> | ||
141 | </span> | ||
142 | <span className="separator" /> | ||
143 | <span className="settings__header-item"> | ||
144 | {workspace.name} | ||
145 | </span> | ||
146 | </div> | ||
147 | <div className="settings__body"> | ||
148 | <div className={classes.nameInput}> | ||
149 | <Input {...form.$('name').bind()} /> | ||
150 | </div> | ||
151 | <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2> | ||
152 | <div className={classes.serviceList}> | ||
153 | {services.map(s => ( | ||
154 | <ServiceListItem | ||
155 | key={s.id} | ||
156 | service={s} | ||
157 | isInWorkspace={workspaceServices.includes(s.id)} | ||
158 | onToggle={() => this.toggleService(s)} | ||
159 | /> | ||
160 | ))} | ||
161 | </div> | ||
162 | </div> | ||
163 | <div className="settings__controls"> | ||
164 | {/* ===== Delete Button ===== */} | ||
165 | <Button | ||
166 | label={intl.formatMessage(messages.buttonDelete)} | ||
167 | loaded={false} | ||
168 | busy={isDeleting} | ||
169 | buttonType={isDeleting ? 'secondary' : 'danger'} | ||
170 | className="settings__delete-button" | ||
171 | disabled={isDeleting} | ||
172 | onClick={this.delete.bind(this)} | ||
173 | /> | ||
174 | {/* ===== Save Button ===== */} | ||
175 | <Button | ||
176 | type="submit" | ||
177 | label={intl.formatMessage(messages.buttonSave)} | ||
178 | busy={isSaving} | ||
179 | buttonType={isSaving ? 'secondary' : 'primary'} | ||
180 | onClick={this.save.bind(this, form)} | ||
181 | disabled={isSaving} | ||
182 | /> | ||
183 | </div> | ||
184 | </div> | ||
185 | ); | ||
186 | } | ||
187 | } | ||
188 | |||
189 | export default EditWorkspaceForm; | ||