add form for creating workspaces

10 files changed, 169 insertions, 22 deletions

diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index ff84510e8..ff0f1f2f8 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -38,7 +38,7 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
 
   state = {
     countdown: config.delayDuration,
-  }
+  };
 
   countdownInterval = null;
 
diff --git a/src/features/workspaces/actions.js b/src/features/workspaces/actions.js
index 30866af96..390af0696 100644
--- a/src/features/workspaces/actions.js
+++ b/src/features/workspaces/actions.js
@@ -5,4 +5,7 @@ export default {
   edit: {
     workspace: PropTypes.instanceOf(Workspace).isRequired,
   },
+  create: {
+    name: PropTypes.string.isRequired,
+  },
 };
diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.js
index 97badbd01..65108a077 100644
--- a/src/features/workspaces/api.js
+++ b/src/features/workspaces/api.js
@@ -10,4 +10,13 @@ export default {
     if (!request.ok) throw request;
     return request.json();
   },
+  createWorkspace: async (name) => {
+    const url = `${API}/${API_VERSION}/workspace`;
+    const request = await window.fetch(url, prepareAuthRequest({
+      method: 'POST',
+      body: JSON.stringify({ name }),
+    }));
+    if (!request.ok) throw request;
+    return request.json();
+  },
 };
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
new file mode 100644
index 000000000..d440b9bae
--- /dev/null
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -0,0 +1,94 @@
+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';
+
+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: '17px',
+  },
+});
+
+@observer @injectSheet(styles)
+class CreateWorkspaceForm extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  prepareForm() {
+    const { intl } = this.context;
+    const config = {
+      fields: {
+        name: {
+          label: intl.formatMessage(messages.name),
+          placeholder: intl.formatMessage(messages.name),
+          value: '',
+        },
+      },
+    };
+    return new Form(config);
+  }
+
+  submitForm(form) {
+    form.submit({
+      onSuccess: async (f) => {
+        const { onSubmit } = this.props;
+        const values = f.values();
+        onSubmit(values);
+      },
+      onError: async () => {},
+    });
+  }
+
+  render() {
+    const { intl } = this.context;
+    const { classes } = this.props;
+    const form = this.prepareForm();
+
+    return (
+      <div className={classes.form}>
+        <Input
+          className={classes.input}
+          {...form.$('name').bind()}
+          onEnterKey={this.submitForm.bind(this, form)}
+        />
+        <Button
+          className={classes.submitButton}
+          type="button"
+          label={intl.formatMessage(messages.submitButton)}
+          onClick={this.submitForm.bind(this, form)}
+        />
+      </div>
+    );
+  }
+}
+
+export default CreateWorkspaceForm;
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 2a8b3a5ee..917807302 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -2,9 +2,11 @@ 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: {
@@ -17,12 +19,21 @@ const messages = defineMessages({
   },
 });
 
-@observer
+const styles = () => ({
+  createForm: {
+    height: 'auto',
+    marginBottom: '20px',
+  },
+});
+
+@observer @injectSheet(styles)
 class WorkspacesDashboard extends Component {
   static propTypes = {
-    workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
+    classes: PropTypes.object.isRequired,
     isLoading: PropTypes.bool.isRequired,
+    onCreateWorkspaceSubmit: PropTypes.func.isRequired,
     onWorkspaceClick: PropTypes.func.isRequired,
+    workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
   };
 
   static contextTypes = {
@@ -30,7 +41,13 @@ class WorkspacesDashboard extends Component {
   };
 
   render() {
-    const { workspaces, isLoading, onWorkspaceClick } = this.props;
+    const {
+      workspaces,
+      isLoading,
+      onCreateWorkspaceSubmit,
+      onWorkspaceClick,
+      classes,
+    } = this.props;
     const { intl } = this.context;
 
     return (
@@ -39,21 +56,26 @@ class WorkspacesDashboard extends Component {
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body">
-          {isLoading ? (
-            <Loader />
-          ) : (
-            <table className="workspace-table">
-              <tbody>
-                {workspaces.map(workspace => (
-                  <WorkspaceItem
-                    key={workspace.id}
-                    workspace={workspace}
-                    onItemClick={w => onWorkspaceClick(w)}
-                  />
-                ))}
-              </tbody>
-            </table>
-          )}
+          <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>
     );
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index f129edec5..eb3287952 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -27,6 +27,7 @@ class WorkspacesScreen extends Component {
         <WorkspacesDashboard
           workspaces={state.workspaces}
           isLoading={state.isLoading}
+          onCreateWorkspaceSubmit={data => workspace.create(data)}
           onWorkspaceClick={w => workspace.edit({ workspace: w })}
         />
       </ErrorBoundary>
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index ea61cec31..d90f9caac 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -49,6 +49,7 @@ export default class WorkspacesStore extends Store {
     );
 
     this.actions.workspace.edit.listen(this._edit);
+    this.actions.workspace.create.listen(this._create);
   }
 
   _setWorkspaces = (workspaces) => {
@@ -64,5 +65,16 @@ export default class WorkspacesStore extends Store {
 
   _edit = ({ workspace }) => {
     this.stores.router.push(`/settings/workspaces/edit/${workspace.id}`);
-  }
+  };
+
+  _create = async ({ name }) => {
+    try {
+      const result = await this.api.createWorkspace(name);
+      const workspace = new Workspace(result);
+      this.state.workspaces.push(workspace);
+      this._edit({ workspace });
+    } catch (error) {
+      throw error;
+    }
+  };
 }
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index ffad8b835..b795b90f8 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -218,10 +218,12 @@
    "settings.services.tooltip.notificationsDisabled" : "Benachrichtigungen deaktiviert",
    "settings.services.updatedInfo" : "Deine Änderungen wurden gespeichert",
    "settings.workspaces.headline": "Deine Workspaces",
+   "settings.workspace.add.form.submitButton": "Create Workspace",
+   "settings.workspace.add.form.name": "Name",
    "settings.workspace.form.yourWorkspaces": "Deine Workspaces",
    "settings.workspace.form.name": "Name",
-  "settings.workspace.form.buttonDelete": "Workspace löschen",
-  "settings.workspace.form.buttonSave": "Workspace speichern",
+   "settings.workspace.form.buttonDelete": "Workspace löschen",
+   "settings.workspace.form.buttonSave": "Workspace speichern",
    "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 899c62651..24c96cb26 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -197,6 +197,8 @@
   "settings.user.form.accountType.non-profit": "Non-Profit",
   "settings.user.form.accountType.company": "Company",
   "settings.workspaces.headline": "Your workspaces",
+  "settings.workspace.add.form.submitButton": "Create Workspace",
+  "settings.workspace.add.form.name": "Name",
   "settings.workspace.form.yourWorkspaces": "Your workspaces",
   "settings.workspace.form.name": "Name",
   "settings.workspace.form.buttonDelete": "Delete Workspace",
diff --git a/src/styles/main.scss b/src/styles/main.scss
index a941d89d0..9ba7f5827 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -30,6 +30,8 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './content-tabs.scss';
 @import './invite.scss';
 @import './title-bar.scss';
+
+// Workspaces legacy css
 @import '../features/workspaces/styles/workspaces-table';
 
 // form