5 files changed, 460 insertions, 0 deletions

diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
new file mode 100644
index 000000000..83f6e07f7
--- /dev/null
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Input, Button } from '@meetfranz/forms';
+import injectSheet from 'react-jss';
+import Form from '../../../lib/Form';
+import { required } from '../../../helpers/validation-helpers';
+
+const messages = defineMessages({
+  submitButton: {
+    id: 'settings.workspace.add.form.submitButton',
+    defaultMessage: '!!!Save workspace',
+  },
+  name: {
+    id: 'settings.workspace.add.form.name',
+    defaultMessage: '!!!Name',
+  },
+});
+
+const styles = () => ({
+  form: {
+    display: 'flex',
+  },
+  input: {
+    flexGrow: 1,
+    marginRight: '10px',
+  },
+  submitButton: {
+    height: 'inherit',
+    marginTop: '3px',
+  },
+});
+
+@injectSheet(styles) @observer
+class CreateWorkspaceForm extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  form = (() => {
+    const { intl } = this.context;
+    return new Form({
+      fields: {
+        name: {
+          label: intl.formatMessage(messages.name),
+          placeholder: intl.formatMessage(messages.name),
+          value: '',
+          validators: [required],
+        },
+      },
+    });
+  })();
+
+  submitForm() {
+    const { form } = this;
+    form.submit({
+      onSuccess: async (f) => {
+        const { onSubmit } = this.props;
+        onSubmit(f.values());
+      },
+    });
+  }
+
+  render() {
+    const { intl } = this.context;
+    const { classes } = this.props;
+    const { form } = this;
+    return (
+      <div className={classes.form}>
+        <Input
+          className={classes.input}
+          {...form.$('name').bind()}
+          showLabel={false}
+          onEnterKey={this.submitForm.bind(this, form)}
+        />
+        <Button
+          className={classes.submitButton}
+          type="submit"
+          label={intl.formatMessage(messages.submitButton)}
+          onClick={this.submitForm.bind(this, form)}
+        />
+      </div>
+    );
+  }
+}
+
+export default CreateWorkspaceForm;
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
new file mode 100644
index 000000000..48090f608
--- /dev/null
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -0,0 +1,192 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
+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: {
+    id: 'settings.workspace.form.buttonDelete',
+    defaultMessage: '!!!Delete workspace',
+  },
+  buttonSave: {
+    id: 'settings.workspace.form.buttonSave',
+    defaultMessage: '!!!Save workspace',
+  },
+  name: {
+    id: 'settings.workspace.form.name',
+    defaultMessage: '!!!Name',
+  },
+  yourWorkspaces: {
+    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
+class EditWorkspaceForm extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    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);
+
+  componentWillReceiveProps(nextProps) {
+    const { workspace } = this.props;
+    if (workspace.id !== nextProps.workspace.id) {
+      this.form = this.prepareWorkspaceForm(nextProps.workspace);
+    }
+  }
+
+  prepareWorkspaceForm(workspace) {
+    const { intl } = this.context;
+    return new Form({
+      fields: {
+        name: {
+          label: intl.formatMessage(messages.name),
+          placeholder: intl.formatMessage(messages.name),
+          value: workspace.name,
+          validators: [required],
+        },
+        services: {
+          value: workspace.services.slice(),
+        },
+      },
+    });
+  }
+
+  submitForm(form) {
+    form.submit({
+      onSuccess: async (f) => {
+        const { onSave } = this.props;
+        const values = f.values();
+        onSave(values);
+      },
+      onError: async () => {},
+    });
+  }
+
+  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 {
+      classes,
+      isDeleting,
+      isSaving,
+      onDelete,
+      workspace,
+      services,
+    } = this.props;
+    const { form } = this;
+    const workspaceServices = form.$('services').value;
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            <Link to="/settings/workspaces">
+              {intl.formatMessage(messages.yourWorkspaces)}
+            </Link>
+          </span>
+          <span className="separator" />
+          <span className="settings__header-item">
+            {workspace.name}
+          </span>
+        </div>
+        <div className="settings__body">
+          <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 ===== */}
+          {isDeleting ? (
+            <Button
+              label={intl.formatMessage(messages.buttonDelete)}
+              loaded={false}
+              buttonType="secondary"
+              className="settings__delete-button"
+              disabled
+            />
+          ) : (
+            <Button
+              buttonType="danger"
+              label={intl.formatMessage(messages.buttonDelete)}
+              className="settings__delete-button"
+              onClick={onDelete}
+            />
+          )}
+          {/* ===== Save Button ===== */}
+          {isSaving ? (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.buttonSave)}
+              loaded={!isSaving}
+              buttonType="secondary"
+              disabled
+            />
+          ) : (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.buttonSave)}
+              onClick={this.submitForm.bind(this, form)}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default EditWorkspaceForm;
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/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
new file mode 100644
index 000000000..b2c2a4830
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { intlShape } from 'react-intl';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import Workspace from '../models/Workspace';
+
+// const messages = defineMessages({});
+
+@observer
+class WorkspaceItem extends Component {
+  static propTypes = {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+    onItemClick: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { workspace, onItemClick } = this.props;
+    // const { intl } = this.context;
+
+    return (
+      <tr
+        className={classnames({
+          'workspace-table__row': true,
+        })}
+      >
+        <td
+          className="workspace-table__column-name"
+          onClick={() => onItemClick(workspace)}
+        >
+          {workspace.name}
+        </td>
+      </tr>
+    );
+  }
+}
+
+export default WorkspaceItem;
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
new file mode 100644
index 000000000..917807302
--- /dev/null
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+
+import Loader from '../../../components/ui/Loader';
+import WorkspaceItem from './WorkspaceItem';
+import CreateWorkspaceForm from './CreateWorkspaceForm';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.workspaces.headline',
+    defaultMessage: '!!!Your workspaces',
+  },
+  noServicesAdded: {
+    id: 'settings.workspaces.noWorkspacesAdded',
+    defaultMessage: '!!!You haven\'t added any workspaces yet.',
+  },
+});
+
+const styles = () => ({
+  createForm: {
+    height: 'auto',
+    marginBottom: '20px',
+  },
+});
+
+@observer @injectSheet(styles)
+class WorkspacesDashboard extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    onCreateWorkspaceSubmit: PropTypes.func.isRequired,
+    onWorkspaceClick: PropTypes.func.isRequired,
+    workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      workspaces,
+      isLoading,
+      onCreateWorkspaceSubmit,
+      onWorkspaceClick,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+        </div>
+        <div className="settings__body">
+          <div className={classes.body}>
+            <div className={classes.createForm}>
+              <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
+            </div>
+            {isLoading ? (
+              <Loader />
+            ) : (
+              <table className="workspace-table">
+                <tbody>
+                  {workspaces.map(workspace => (
+                    <WorkspaceItem
+                      key={workspace.id}
+                      workspace={workspace}
+                      onItemClick={w => onWorkspaceClick(w)}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WorkspacesDashboard;