option to add groups

src/groups/newGroup.js

+import m from 'mithril';
+import EditView from '../views/editView';
+import { RaisedButton } from 'polythene-mithril';
+
+
+export default class NewGroup extends EditView {
+  constructor(vnode) {
+    super(vnode, 'groups', {});
+    this.callback = () => { m.route.set('/groups'); };
+  }
+
+  view() {
+    const submitButton = m(RaisedButton, {
+      disabled: !this.valid,
+      label: 'Submit',
+      events: { onclick: () => { this.submit(); } },
+    });
+
+    return m('div.mywrapper', [
+      m('h3', 'Add a New Group'),
+      ...this.renderPage({
+        name: { type: 'text', label: 'Group Name'},
+      }),
+      submitButton,
+    ]);
+  }
+}

src/groups/overview.js

@@ -33,8 +33,15 @@ export default class GroupList {
     if (!this.data) return '';
 
     return m(
-      'div', { style: { display: 'flex' } },
+      'div', { style: { display: 'flex', 'flex-wrap': 'wrap' } },
       this.data.map(item => m(GroupItem, item)),
+      m('div', {
+        style: {
+          padding: '20px',
+          'max-width': '500px',
+        },
+        onclick: () => { m.route.set('/newgroup'); },
+      }, m(Card, { content: [{ primary: { title: '+ add' } }] })),
     );
   }
 }

src/index.js

@@ -4,6 +4,7 @@ import GroupList from './groups/overview';
 import viewGroup from './groups/viewGroup';
 import { UserModal, UserTable, NewUser } from './users/userTool';
 import { MembershipView } from './membershipTool';
+import NewGroup from './groups/newGroup';
 import EventTable from './events/table';
 import newEvent from './events/newEvent';
 import EventModal from './events/eventModal';
@@ -35,6 +36,7 @@ m.route(root, '/users', {
   '/eventwithexport': layoutWith(eventWithExport),
   '/groups': layoutWith(GroupList),
   '/groups/:id': layoutWith(viewGroup),
+  '/newgroup': layoutWith(NewGroup),
   '/oauthcallback': OauthRedirect,
   // '/announce': layoutWith(AnnounceTool),
 });