diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-17 05:45:39 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-17 00:15:39 +0000 |
commit | d9502c7516bc2d4ae467c6ea8a2e4816b0885f37 (patch) | |
tree | b339c587a5529ac26d52cfc12d9972a8a00255e6 /src/features/workspaces/components/EditWorkspaceForm.js | |
parent | Transform JSX components to TSX (#755) (diff) | |
download | ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.tar.gz ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.tar.zst ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.zip |
Transfrom workspace components to ts (#775)
Diffstat (limited to 'src/features/workspaces/components/EditWorkspaceForm.js')
-rw-r--r-- | src/features/workspaces/components/EditWorkspaceForm.js | 240 |
1 files changed, 0 insertions, 240 deletions
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js deleted file mode 100644 index ff4e71260..000000000 --- a/src/features/workspaces/components/EditWorkspaceForm.js +++ /dev/null | |||
@@ -1,240 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, injectIntl } from 'react-intl'; | ||
5 | import { Link } from 'react-router-dom'; | ||
6 | import injectSheet from 'react-jss'; | ||
7 | import Infobox from '../../../components/ui/infobox/index'; | ||
8 | import Input from '../../../components/ui/input/index'; | ||
9 | import Button from '../../../components/ui/button'; | ||
10 | import Workspace from '../models/Workspace'; | ||
11 | import Service from '../../../models/Service'; | ||
12 | import Form from '../../../lib/Form'; | ||
13 | import { required } from '../../../helpers/validation-helpers'; | ||
14 | import WorkspaceServiceListItem from './WorkspaceServiceListItem'; | ||
15 | import Request from '../../../stores/lib/Request'; | ||
16 | import { KEEP_WS_LOADED_USID } from '../../../config'; | ||
17 | import Toggle from '../../../components/ui/toggle'; | ||
18 | import { H2 } from '../../../components/ui/headline'; | ||
19 | |||
20 | const messages = defineMessages({ | ||
21 | buttonDelete: { | ||
22 | id: 'settings.workspace.form.buttonDelete', | ||
23 | defaultMessage: 'Delete workspace', | ||
24 | }, | ||
25 | buttonSave: { | ||
26 | id: 'settings.workspace.form.buttonSave', | ||
27 | defaultMessage: 'Save workspace', | ||
28 | }, | ||
29 | name: { | ||
30 | id: 'settings.workspace.form.name', | ||
31 | defaultMessage: 'Name', | ||
32 | }, | ||
33 | yourWorkspaces: { | ||
34 | id: 'settings.workspace.form.yourWorkspaces', | ||
35 | defaultMessage: 'Your workspaces', | ||
36 | }, | ||
37 | keepLoaded: { | ||
38 | id: 'settings.workspace.form.keepLoaded', | ||
39 | defaultMessage: 'Keep this workspace loaded*', | ||
40 | }, | ||
41 | keepLoadedInfo: { | ||
42 | id: 'settings.workspace.form.keepLoadedInfo', | ||
43 | defaultMessage: | ||
44 | '*This option will be overwritten by the global "Keep all workspaces loaded" option.', | ||
45 | }, | ||
46 | servicesInWorkspaceHeadline: { | ||
47 | id: 'settings.workspace.form.servicesInWorkspaceHeadline', | ||
48 | defaultMessage: 'Services in this Workspace', | ||
49 | }, | ||
50 | noServicesAdded: { | ||
51 | id: 'settings.services.noServicesAdded', | ||
52 | defaultMessage: 'Start by adding a service.', | ||
53 | }, | ||
54 | discoverServices: { | ||
55 | id: 'settings.services.discoverServices', | ||
56 | defaultMessage: 'Discover services', | ||
57 | }, | ||
58 | }); | ||
59 | |||
60 | const styles = { | ||
61 | nameInput: { | ||
62 | height: 'auto', | ||
63 | }, | ||
64 | serviceList: { | ||
65 | height: 'auto', | ||
66 | }, | ||
67 | keepLoadedInfo: { | ||
68 | marginBottom: '2rem !important', | ||
69 | }, | ||
70 | }; | ||
71 | |||
72 | class EditWorkspaceForm extends Component { | ||
73 | static propTypes = { | ||
74 | classes: PropTypes.object.isRequired, | ||
75 | onDelete: PropTypes.func.isRequired, | ||
76 | onSave: PropTypes.func.isRequired, | ||
77 | services: PropTypes.arrayOf(PropTypes.instanceOf(Service)).isRequired, | ||
78 | workspace: PropTypes.instanceOf(Workspace).isRequired, | ||
79 | updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, | ||
80 | deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, | ||
81 | }; | ||
82 | |||
83 | form = this.prepareWorkspaceForm(this.props.workspace); | ||
84 | |||
85 | // eslint-disable-next-line react/no-deprecated | ||
86 | componentWillReceiveProps(nextProps) { | ||
87 | const { workspace } = this.props; | ||
88 | if (workspace.id !== nextProps.workspace.id) { | ||
89 | this.form = this.prepareWorkspaceForm(nextProps.workspace); | ||
90 | } | ||
91 | } | ||
92 | |||
93 | prepareWorkspaceForm(workspace) { | ||
94 | const { intl, updateWorkspaceRequest } = this.props; | ||
95 | updateWorkspaceRequest.reset(); | ||
96 | return new Form({ | ||
97 | fields: { | ||
98 | name: { | ||
99 | label: intl.formatMessage(messages.name), | ||
100 | placeholder: intl.formatMessage(messages.name), | ||
101 | value: workspace.name, | ||
102 | validators: [required], | ||
103 | }, | ||
104 | keepLoaded: { | ||
105 | label: intl.formatMessage(messages.keepLoaded), | ||
106 | value: workspace.services.includes(KEEP_WS_LOADED_USID), | ||
107 | default: false, | ||
108 | }, | ||
109 | services: { | ||
110 | value: [...workspace.services], | ||
111 | }, | ||
112 | }, | ||
113 | }); | ||
114 | } | ||
115 | |||
116 | save(form) { | ||
117 | this.props.updateWorkspaceRequest.reset(); | ||
118 | form.submit({ | ||
119 | onSuccess: async f => { | ||
120 | const { onSave } = this.props; | ||
121 | const values = f.values(); | ||
122 | onSave(values); | ||
123 | }, | ||
124 | onError: async () => {}, | ||
125 | }); | ||
126 | } | ||
127 | |||
128 | delete() { | ||
129 | const { onDelete } = this.props; | ||
130 | onDelete(); | ||
131 | } | ||
132 | |||
133 | toggleService(service) { | ||
134 | const servicesField = this.form.$('services'); | ||
135 | const serviceIds = servicesField.value; | ||
136 | if (serviceIds.includes(service.id)) { | ||
137 | serviceIds.splice(serviceIds.indexOf(service.id), 1); | ||
138 | } else { | ||
139 | serviceIds.push(service.id); | ||
140 | } | ||
141 | servicesField.set(serviceIds); | ||
142 | } | ||
143 | |||
144 | render() { | ||
145 | const { intl } = this.props; | ||
146 | const { | ||
147 | classes, | ||
148 | workspace, | ||
149 | services, | ||
150 | deleteWorkspaceRequest, | ||
151 | updateWorkspaceRequest, | ||
152 | } = this.props; | ||
153 | const { form } = this; | ||
154 | const workspaceServices = form.$('services').value; | ||
155 | const isDeleting = deleteWorkspaceRequest.isExecuting; | ||
156 | const isSaving = updateWorkspaceRequest.isExecuting; | ||
157 | return ( | ||
158 | <div className="settings__main"> | ||
159 | <div className="settings__header"> | ||
160 | <span className="settings__header-item"> | ||
161 | <Link to="/settings/workspaces"> | ||
162 | {intl.formatMessage(messages.yourWorkspaces)} | ||
163 | </Link> | ||
164 | </span> | ||
165 | <span className="separator" /> | ||
166 | <span className="settings__header-item">{workspace.name}</span> | ||
167 | </div> | ||
168 | <div className="settings__body"> | ||
169 | {updateWorkspaceRequest.error && ( | ||
170 | <Infobox icon="alert" type="danger"> | ||
171 | Error while saving workspace | ||
172 | </Infobox> | ||
173 | )} | ||
174 | <div className={classes.nameInput}> | ||
175 | <Input {...form.$('name').bind()} /> | ||
176 | <Toggle {...form.$('keepLoaded').bind()} /> | ||
177 | <p className={`${classes.keepLoadedInfo} franz-form__label`}> | ||
178 | {intl.formatMessage(messages.keepLoadedInfo)} | ||
179 | </p> | ||
180 | </div> | ||
181 | <H2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</H2> | ||
182 | <div className={classes.serviceList}> | ||
183 | {services.length === 0 ? ( | ||
184 | <div className="align-middle settings__empty-state"> | ||
185 | {/* ===== Empty state ===== */} | ||
186 | <p className="settings__empty-text"> | ||
187 | <span className="emoji"> | ||
188 | <img src="./assets/images/emoji/sad.png" alt="" /> | ||
189 | </span> | ||
190 | {intl.formatMessage(messages.noServicesAdded)} | ||
191 | </p> | ||
192 | <Link to="/settings/recipes" className="button"> | ||
193 | {intl.formatMessage(messages.discoverServices)} | ||
194 | </Link> | ||
195 | </div> | ||
196 | ) : ( | ||
197 | <> | ||
198 | {services.map(s => ( | ||
199 | <WorkspaceServiceListItem | ||
200 | key={s.id} | ||
201 | service={s} | ||
202 | isInWorkspace={workspaceServices.includes(s.id)} | ||
203 | onToggle={() => this.toggleService(s)} | ||
204 | /> | ||
205 | ))} | ||
206 | </> | ||
207 | )} | ||
208 | </div> | ||
209 | </div> | ||
210 | <div className="settings__controls"> | ||
211 | {/* ===== Delete Button ===== */} | ||
212 | <Button | ||
213 | label={intl.formatMessage(messages.buttonDelete)} | ||
214 | loaded={false} | ||
215 | busy={isDeleting} | ||
216 | buttonType={isDeleting ? 'secondary' : 'danger'} | ||
217 | className="settings__delete-button" | ||
218 | disabled={isDeleting} | ||
219 | onClick={this.delete.bind(this)} | ||
220 | /> | ||
221 | {/* ===== Save Button ===== */} | ||
222 | <Button | ||
223 | type="submit" | ||
224 | label={intl.formatMessage(messages.buttonSave)} | ||
225 | busy={isSaving} | ||
226 | className="franz-form__button" | ||
227 | buttonType={isSaving ? 'secondary' : 'primary'} | ||
228 | onClick={this.save.bind(this, form)} | ||
229 | // TODO: Need to disable if no services have been added to this workspace | ||
230 | disabled={isSaving} | ||
231 | /> | ||
232 | </div> | ||
233 | </div> | ||
234 | ); | ||
235 | } | ||
236 | } | ||
237 | |||
238 | export default injectIntl( | ||
239 | injectSheet(styles, { injectTheme: true })(observer(EditWorkspaceForm)), | ||
240 | ); | ||