diff options
Diffstat (limited to 'src/features/workspaces/components')
-rw-r--r-- | src/features/workspaces/components/EditWorkspaceForm.js | 46 | ||||
-rw-r--r-- | src/features/workspaces/components/ServiceListItem.js | 48 |
2 files changed, 90 insertions, 4 deletions
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js index 05ca65403..48090f608 100644 --- a/src/features/workspaces/components/EditWorkspaceForm.js +++ b/src/features/workspaces/components/EditWorkspaceForm.js | |||
@@ -7,8 +7,10 @@ import { Input, Button } from '@meetfranz/forms'; | |||
7 | import injectSheet from 'react-jss'; | 7 | import injectSheet from 'react-jss'; |
8 | 8 | ||
9 | import Workspace from '../models/Workspace'; | 9 | import Workspace from '../models/Workspace'; |
10 | import Service from '../../../models/Service'; | ||
10 | import Form from '../../../lib/Form'; | 11 | import Form from '../../../lib/Form'; |
11 | import { required } from '../../../helpers/validation-helpers'; | 12 | import { required } from '../../../helpers/validation-helpers'; |
13 | import ServiceListItem from './ServiceListItem'; | ||
12 | 14 | ||
13 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
14 | buttonDelete: { | 16 | buttonDelete: { |
@@ -27,12 +29,19 @@ const messages = defineMessages({ | |||
27 | id: 'settings.workspace.form.yourWorkspaces', | 29 | id: 'settings.workspace.form.yourWorkspaces', |
28 | defaultMessage: '!!!Your workspaces', | 30 | defaultMessage: '!!!Your workspaces', |
29 | }, | 31 | }, |
32 | servicesInWorkspaceHeadline: { | ||
33 | id: 'settings.workspace.form.servicesInWorkspaceHeadline', | ||
34 | defaultMessage: '!!!Services in this Workspace', | ||
35 | }, | ||
30 | }); | 36 | }); |
31 | 37 | ||
32 | const styles = () => ({ | 38 | const styles = () => ({ |
33 | nameInput: { | 39 | nameInput: { |
34 | height: 'auto', | 40 | height: 'auto', |
35 | }, | 41 | }, |
42 | serviceList: { | ||
43 | height: 'auto', | ||
44 | }, | ||
36 | }); | 45 | }); |
37 | 46 | ||
38 | @injectSheet(styles) @observer | 47 | @injectSheet(styles) @observer |
@@ -42,11 +51,13 @@ class EditWorkspaceForm extends Component { | |||
42 | }; | 51 | }; |
43 | 52 | ||
44 | static propTypes = { | 53 | static propTypes = { |
45 | workspace: PropTypes.instanceOf(Workspace).isRequired, | 54 | classes: PropTypes.object.isRequired, |
46 | onSave: PropTypes.func.isRequired, | ||
47 | onDelete: PropTypes.func.isRequired, | ||
48 | isSaving: PropTypes.bool.isRequired, | ||
49 | isDeleting: PropTypes.bool.isRequired, | 55 | isDeleting: PropTypes.bool.isRequired, |
56 | isSaving: PropTypes.bool.isRequired, | ||
57 | onDelete: PropTypes.func.isRequired, | ||
58 | onSave: PropTypes.func.isRequired, | ||
59 | services: PropTypes.arrayOf(PropTypes.instanceOf(Service)).isRequired, | ||
60 | workspace: PropTypes.instanceOf(Workspace).isRequired, | ||
50 | }; | 61 | }; |
51 | 62 | ||
52 | form = this.prepareWorkspaceForm(this.props.workspace); | 63 | form = this.prepareWorkspaceForm(this.props.workspace); |
@@ -68,6 +79,9 @@ class EditWorkspaceForm extends Component { | |||
68 | value: workspace.name, | 79 | value: workspace.name, |
69 | validators: [required], | 80 | validators: [required], |
70 | }, | 81 | }, |
82 | services: { | ||
83 | value: workspace.services.slice(), | ||
84 | }, | ||
71 | }, | 85 | }, |
72 | }); | 86 | }); |
73 | } | 87 | } |
@@ -83,6 +97,17 @@ class EditWorkspaceForm extends Component { | |||
83 | }); | 97 | }); |
84 | } | 98 | } |
85 | 99 | ||
100 | toggleService(service) { | ||
101 | const servicesField = this.form.$('services'); | ||
102 | const serviceIds = servicesField.value; | ||
103 | if (serviceIds.includes(service.id)) { | ||
104 | serviceIds.splice(serviceIds.indexOf(service.id), 1); | ||
105 | } else { | ||
106 | serviceIds.push(service.id); | ||
107 | } | ||
108 | servicesField.set(serviceIds); | ||
109 | } | ||
110 | |||
86 | render() { | 111 | render() { |
87 | const { intl } = this.context; | 112 | const { intl } = this.context; |
88 | const { | 113 | const { |
@@ -91,8 +116,10 @@ class EditWorkspaceForm extends Component { | |||
91 | isSaving, | 116 | isSaving, |
92 | onDelete, | 117 | onDelete, |
93 | workspace, | 118 | workspace, |
119 | services, | ||
94 | } = this.props; | 120 | } = this.props; |
95 | const { form } = this; | 121 | const { form } = this; |
122 | const workspaceServices = form.$('services').value; | ||
96 | return ( | 123 | return ( |
97 | <div className="settings__main"> | 124 | <div className="settings__main"> |
98 | <div className="settings__header"> | 125 | <div className="settings__header"> |
@@ -110,6 +137,17 @@ class EditWorkspaceForm extends Component { | |||
110 | <div className={classes.nameInput}> | 137 | <div className={classes.nameInput}> |
111 | <Input {...form.$('name').bind()} /> | 138 | <Input {...form.$('name').bind()} /> |
112 | </div> | 139 | </div> |
140 | <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2> | ||
141 | <div className={classes.serviceList}> | ||
142 | {services.map(s => ( | ||
143 | <ServiceListItem | ||
144 | key={s.id} | ||
145 | service={s} | ||
146 | isInWorkspace={workspaceServices.includes(s.id)} | ||
147 | onToggle={() => this.toggleService(s)} | ||
148 | /> | ||
149 | ))} | ||
150 | </div> | ||
113 | </div> | 151 | </div> |
114 | <div className="settings__controls"> | 152 | <div className="settings__controls"> |
115 | {/* ===== Delete Button ===== */} | 153 | {/* ===== Delete Button ===== */} |
diff --git a/src/features/workspaces/components/ServiceListItem.js b/src/features/workspaces/components/ServiceListItem.js new file mode 100644 index 000000000..146cc5a36 --- /dev/null +++ b/src/features/workspaces/components/ServiceListItem.js | |||
@@ -0,0 +1,48 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import { Toggle } from '@meetfranz/forms'; | ||
6 | |||
7 | import Service from '../../../models/Service'; | ||
8 | |||
9 | const styles = () => ({ | ||
10 | service: { | ||
11 | height: 'auto', | ||
12 | display: 'flex', | ||
13 | }, | ||
14 | name: { | ||
15 | marginTop: '4px', | ||
16 | }, | ||
17 | }); | ||
18 | |||
19 | @injectSheet(styles) @observer | ||
20 | class ServiceListItem extends Component { | ||
21 | static propTypes = { | ||
22 | classes: PropTypes.object.isRequired, | ||
23 | isInWorkspace: PropTypes.bool.isRequired, | ||
24 | onToggle: PropTypes.func.isRequired, | ||
25 | service: PropTypes.instanceOf(Service).isRequired, | ||
26 | }; | ||
27 | |||
28 | render() { | ||
29 | const { | ||
30 | classes, | ||
31 | isInWorkspace, | ||
32 | onToggle, | ||
33 | service, | ||
34 | } = this.props; | ||
35 | |||
36 | return ( | ||
37 | <div className={classes.service}> | ||
38 | <Toggle | ||
39 | checked={isInWorkspace} | ||
40 | onChange={onToggle} | ||
41 | label={service.name} | ||
42 | /> | ||
43 | </div> | ||
44 | ); | ||
45 | } | ||
46 | } | ||
47 | |||
48 | export default ServiceListItem; | ||