diff options
Diffstat (limited to 'src/features/workspaces/components/WorkspacesDashboard.js')
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.js | 58 |
1 files changed, 40 insertions, 18 deletions
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'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import injectSheet from 'react-jss'; | ||
5 | 6 | ||
6 | import Loader from '../../../components/ui/Loader'; | 7 | import Loader from '../../../components/ui/Loader'; |
7 | import WorkspaceItem from './WorkspaceItem'; | 8 | import WorkspaceItem from './WorkspaceItem'; |
9 | import CreateWorkspaceForm from './CreateWorkspaceForm'; | ||
8 | 10 | ||
9 | const messages = defineMessages({ | 11 | const messages = defineMessages({ |
10 | headline: { | 12 | headline: { |
@@ -17,12 +19,21 @@ const messages = defineMessages({ | |||
17 | }, | 19 | }, |
18 | }); | 20 | }); |
19 | 21 | ||
20 | @observer | 22 | const styles = () => ({ |
23 | createForm: { | ||
24 | height: 'auto', | ||
25 | marginBottom: '20px', | ||
26 | }, | ||
27 | }); | ||
28 | |||
29 | @observer @injectSheet(styles) | ||
21 | class WorkspacesDashboard extends Component { | 30 | class WorkspacesDashboard extends Component { |
22 | static propTypes = { | 31 | static propTypes = { |
23 | workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, | 32 | classes: PropTypes.object.isRequired, |
24 | isLoading: PropTypes.bool.isRequired, | 33 | isLoading: PropTypes.bool.isRequired, |
34 | onCreateWorkspaceSubmit: PropTypes.func.isRequired, | ||
25 | onWorkspaceClick: PropTypes.func.isRequired, | 35 | onWorkspaceClick: PropTypes.func.isRequired, |
36 | workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
26 | }; | 37 | }; |
27 | 38 | ||
28 | static contextTypes = { | 39 | static contextTypes = { |
@@ -30,7 +41,13 @@ class WorkspacesDashboard extends Component { | |||
30 | }; | 41 | }; |
31 | 42 | ||
32 | render() { | 43 | render() { |
33 | const { workspaces, isLoading, onWorkspaceClick } = this.props; | 44 | const { |
45 | workspaces, | ||
46 | isLoading, | ||
47 | onCreateWorkspaceSubmit, | ||
48 | onWorkspaceClick, | ||
49 | classes, | ||
50 | } = this.props; | ||
34 | const { intl } = this.context; | 51 | const { intl } = this.context; |
35 | 52 | ||
36 | return ( | 53 | return ( |
@@ -39,21 +56,26 @@ class WorkspacesDashboard extends Component { | |||
39 | <h1>{intl.formatMessage(messages.headline)}</h1> | 56 | <h1>{intl.formatMessage(messages.headline)}</h1> |
40 | </div> | 57 | </div> |
41 | <div className="settings__body"> | 58 | <div className="settings__body"> |
42 | {isLoading ? ( | 59 | <div className={classes.body}> |
43 | <Loader /> | 60 | <div className={classes.createForm}> |
44 | ) : ( | 61 | <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} /> |
45 | <table className="workspace-table"> | 62 | </div> |
46 | <tbody> | 63 | {isLoading ? ( |
47 | {workspaces.map(workspace => ( | 64 | <Loader /> |
48 | <WorkspaceItem | 65 | ) : ( |
49 | key={workspace.id} | 66 | <table className="workspace-table"> |
50 | workspace={workspace} | 67 | <tbody> |
51 | onItemClick={w => onWorkspaceClick(w)} | 68 | {workspaces.map(workspace => ( |
52 | /> | 69 | <WorkspaceItem |
53 | ))} | 70 | key={workspace.id} |
54 | </tbody> | 71 | workspace={workspace} |
55 | </table> | 72 | onItemClick={w => onWorkspaceClick(w)} |
56 | )} | 73 | /> |
74 | ))} | ||
75 | </tbody> | ||
76 | </table> | ||
77 | )} | ||
78 | </div> | ||
57 | </div> | 79 | </div> |
58 | </div> | 80 | </div> |
59 | ); | 81 | ); |