finish basic workspace settings

9 files changed, 132 insertions, 6 deletions

diff --git a/src/features/workspaces/actions.js b/src/features/workspaces/actions.js
index 83d3447c3..84de2b011 100644
--- a/src/features/workspaces/actions.js
+++ b/src/features/workspaces/actions.js
@@ -11,4 +11,7 @@ export default {
   delete: {
     workspace: PropTypes.instanceOf(Workspace).isRequired,
   },
+  update: {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+  },
 };
diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.js
index fabc12455..733cb5593 100644
--- a/src/features/workspaces/api.js
+++ b/src/features/workspaces/api.js
@@ -1,3 +1,4 @@
+import { pick } from 'lodash';
 import { sendAuthRequest } from '../../api/utils/auth';
 import { API, API_VERSION } from '../../environment';
 
@@ -25,4 +26,14 @@ export default {
     if (!request.ok) throw request;
     return request.json();
   },
+
+  updateWorkspace: async (workspace) => {
+    const url = `${API}/${API_VERSION}/workspace/${workspace.id}`;
+    const request = await sendAuthRequest(url, {
+      method: 'PUT',
+      body: JSON.stringify(pick(workspace, ['name', 'services'])),
+    });
+    if (!request.ok) throw request;
+    return request.json();
+  },
 };
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';
 import injectSheet from 'react-jss';
 
 import Workspace from '../models/Workspace';
+import Service from '../../../models/Service';
 import Form from '../../../lib/Form';
 import { required } from '../../../helpers/validation-helpers';
+import ServiceListItem from './ServiceListItem';
 
 const messages = defineMessages({
   buttonDelete: {
@@ -27,12 +29,19 @@ const messages = defineMessages({
     id: 'settings.workspace.form.yourWorkspaces',
     defaultMessage: '!!!Your workspaces',
   },
+  servicesInWorkspaceHeadline: {
+    id: 'settings.workspace.form.servicesInWorkspaceHeadline',
+    defaultMessage: '!!!Services in this Workspace',
+  },
 });
 
 const styles = () => ({
   nameInput: {
     height: 'auto',
   },
+  serviceList: {
+    height: 'auto',
+  },
 });
 
 @injectSheet(styles) @observer
@@ -42,11 +51,13 @@ class EditWorkspaceForm extends Component {
   };
 
   static propTypes = {
-    workspace: PropTypes.instanceOf(Workspace).isRequired,
-    onSave: PropTypes.func.isRequired,
-    onDelete: PropTypes.func.isRequired,
-    isSaving: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
     isDeleting: PropTypes.bool.isRequired,
+    isSaving: PropTypes.bool.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+    services: PropTypes.arrayOf(PropTypes.instanceOf(Service)).isRequired,
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
   };
 
   form = this.prepareWorkspaceForm(this.props.workspace);
@@ -68,6 +79,9 @@ class EditWorkspaceForm extends Component {
           value: workspace.name,
           validators: [required],
         },
+        services: {
+          value: workspace.services.slice(),
+        },
       },
     });
   }
@@ -83,6 +97,17 @@ class EditWorkspaceForm extends Component {
     });
   }
 
+  toggleService(service) {
+    const servicesField = this.form.$('services');
+    const serviceIds = servicesField.value;
+    if (serviceIds.includes(service.id)) {
+      serviceIds.splice(serviceIds.indexOf(service.id), 1);
+    } else {
+      serviceIds.push(service.id);
+    }
+    servicesField.set(serviceIds);
+  }
+
   render() {
     const { intl } = this.context;
     const {
@@ -91,8 +116,10 @@ class EditWorkspaceForm extends Component {
       isSaving,
       onDelete,
       workspace,
+      services,
     } = this.props;
     const { form } = this;
+    const workspaceServices = form.$('services').value;
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -110,6 +137,17 @@ class EditWorkspaceForm extends Component {
           <div className={classes.nameInput}>
             <Input {...form.$('name').bind()} />
           </div>
+          <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2>
+          <div className={classes.serviceList}>
+            {services.map(s => (
+              <ServiceListItem
+                key={s.id}
+                service={s}
+                isInWorkspace={workspaceServices.includes(s.id)}
+                onToggle={() => this.toggleService(s)}
+              />
+            ))}
+          </div>
         </div>
         <div className="settings__controls">
           {/* ===== 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 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { Toggle } from '@meetfranz/forms';
+
+import Service from '../../../models/Service';
+
+const styles = () => ({
+  service: {
+    height: 'auto',
+    display: 'flex',
+  },
+  name: {
+    marginTop: '4px',
+  },
+});
+
+@injectSheet(styles) @observer
+class ServiceListItem extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isInWorkspace: PropTypes.bool.isRequired,
+    onToggle: PropTypes.func.isRequired,
+    service: PropTypes.instanceOf(Service).isRequired,
+  };
+
+  render() {
+    const {
+      classes,
+      isInWorkspace,
+      onToggle,
+      service,
+    } = this.props;
+
+    return (
+      <div className={classes.service}>
+        <Toggle
+          checked={isInWorkspace}
+          onChange={onToggle}
+          label={service.name}
+        />
+      </div>
+    );
+  }
+}
+
+export default ServiceListItem;
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js
index 17b723303..790b8a0fe 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.js
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.js
@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import EditWorkspaceForm from '../components/EditWorkspaceForm';
 import { state } from '../state';
+import ServicesStore from '../../../stores/ServicesStore';
+import Workspace from '../models/Workspace';
 
 @inject('stores', 'actions') @observer
 class EditWorkspaceScreen extends Component {
@@ -14,6 +16,9 @@ class EditWorkspaceScreen extends Component {
         delete: PropTypes.func.isRequired,
       }),
     }).isRequired,
+    stores: PropTypes.shape({
+      services: PropTypes.instanceOf(ServicesStore).isRequired,
+    }).isRequired,
   };
 
   onDelete = () => {
@@ -24,16 +29,23 @@ class EditWorkspaceScreen extends Component {
   };
 
   onSave = (values) => {
-    console.log('save workspace', values);
+    const { workspaceBeingEdited } = state;
+    const { actions } = this.props;
+    const workspace = new Workspace(
+      Object.assign({}, workspaceBeingEdited, values),
+    );
+    actions.workspace.update({ workspace });
   };
 
   render() {
     const { workspaceBeingEdited } = state;
+    const { stores } = this.props;
     if (!workspaceBeingEdited) return null;
     return (
       <ErrorBoundary>
         <EditWorkspaceForm
           workspace={workspaceBeingEdited}
+          services={stores.services.all}
           onDelete={this.onDelete}
           onSave={this.onSave}
           isDeleting={false}
diff --git a/src/features/workspaces/models/Workspace.js b/src/features/workspaces/models/Workspace.js
index ede2710dc..6c73d7095 100644
--- a/src/features/workspaces/models/Workspace.js
+++ b/src/features/workspaces/models/Workspace.js
@@ -19,7 +19,7 @@ export default class Workspace {
     this.id = data.id;
     this.name = data.name;
     this.order = data.order;
-    this.services = data.services;
+    this.services.replace(data.services);
     this.userId = data.userId;
   }
 }
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index a9b93f904..5cccb2ab7 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -51,6 +51,7 @@ export default class WorkspacesStore extends Store {
     this.actions.workspace.edit.listen(this._edit);
     this.actions.workspace.create.listen(this._create);
     this.actions.workspace.delete.listen(this._delete);
+    this.actions.workspace.update.listen(this._update);
   }
 
   _setWorkspaces = (workspaces) => {
@@ -88,4 +89,15 @@ export default class WorkspacesStore extends Store {
       throw error;
     }
   };
+
+  _update = async ({ workspace }) => {
+    try {
+      await this.api.updateWorkspace(workspace);
+      const localWorkspace = this.state.workspaces.find(ws => ws.id === workspace.id);
+      Object.assign(localWorkspace, workspace);
+      this.stores.router.push('/settings/workspaces');
+    } catch (error) {
+      throw error;
+    }
+  };
 }
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index e1a955176..4906070a3 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -224,6 +224,7 @@
    "settings.workspace.form.name": "Name",
    "settings.workspace.form.buttonDelete": "Workspace löschen",
    "settings.workspace.form.buttonSave": "Workspace speichern",
+  "settings.workspace.form.servicesInWorkspaceHeadline": "Services in diesem Workspace",
    "settings.user.form.accountType.company" : "Firma",
    "settings.user.form.accountType.individual" : "Einzelperson",
    "settings.user.form.accountType.label" : "Konto-Typ",
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index fe16e916f..cd5c417e3 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -207,6 +207,7 @@
   "settings.workspace.form.name": "Name",
   "settings.workspace.form.buttonDelete": "Delete Workspace",
   "settings.workspace.form.buttonSave": "Save Workspace",
+  "settings.workspace.form.servicesInWorkspaceHeadline": "Services in this Workspace",
   "subscription.type.free": "free",
   "subscription.type.month": "month",
   "subscription.type.year": "year",