From 7e40b08e2f8ab2448dcbe2ce7b4e38ca66764b9c Mon Sep 17 00:00:00 2001 From: Dominik Guzei Date: Fri, 22 Feb 2019 12:34:27 +0100 Subject: add form for creating workspaces --- src/features/workspaces/actions.js | 3 + src/features/workspaces/api.js | 9 +++ .../workspaces/components/CreateWorkspaceForm.js | 94 ++++++++++++++++++++++ .../workspaces/components/WorkspacesDashboard.js | 58 ++++++++----- .../workspaces/containers/WorkspacesScreen.js | 1 + src/features/workspaces/store.js | 14 +++- 6 files changed, 160 insertions(+), 19 deletions(-) create mode 100644 src/features/workspaces/components/CreateWorkspaceForm.js (limited to 'src/features/workspaces') 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 ( +
+ +
+ ); + } +} + +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 {

{intl.formatMessage(messages.headline)}

- {isLoading ? ( - - ) : ( - - - {workspaces.map(workspace => ( - onWorkspaceClick(w)} - /> - ))} - -
- )} +
+
+ +
+ {isLoading ? ( + + ) : ( + + + {workspaces.map(workspace => ( + onWorkspaceClick(w)} + /> + ))} + +
+ )} +
); 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 { workspace.create(data)} onWorkspaceClick={w => workspace.edit({ workspace: w })} /> 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; + } + }; } -- cgit v1.2.3-70-g09d2