add functionality to add and remove users from groups

src/groups/viewGroup.js

@@ -3,76 +3,84 @@ import {
   Button,
   Card,
 } from 'polythene-mithril';
-import { styler } from 'polythene-core-css';
 import ItemView from '../views/itemView';
 import TableView from '../views/tableView';
 import DatalistController from '../listcontroller';
-
-const viewLayout = [
-  {
-    '.eventViewContainer': {
-      display: 'grid',
-      'grid-template-columns': '40% 55%',
-      'grid-gap': '50px',
-    },
-    '.propertyLangIndicator': {
-      width: '30px',
-      height: '20px',
-      float: 'left',
-      'background-color': 'rgb(031,045,084)',
-      'border-radius': '10px',
-      'text-align': 'center',
-      'line-height': '20px',
-      color: 'rgb(255,255,255)',
-      'margin-right': '10px',
-      'font-size': '11px',
-    },
-    '.eventViewLeft': {
-      'grid-column': 1,
-    },
-    '.eventViewRight': {
-      'grid-column': 2,
-    },
-    '.eventViewRight h4': {
-      'margin-top': '0px',
-    },
-  },
-];
-styler.add('eventView', viewLayout);
+import SelectList from '../views/selectList';
 
 
 // Helper class to either display the signed up participants or those on the
 // waiting list.
 class MembersTable {
-  constructor({ attrs: { where } }) {
+  constructor({ attrs: { group } }) {
+    this.group_id = group;
     this.ctrl = new DatalistController('groupmemberships', {
       embedded: { user: 1 },
-      where,
-    }, ['email', 'user.firstname', 'user.lastname'], false);
+      where: { group },
+    }, ['user.email', 'user.firstname', 'user.lastname'], false);
+    // true while in the modus of adding a member
+    this.addmode = false;
+    this.userController = new DatalistController(
+      'users', {},
+      ['firstname', 'lastname', 'email', 'nethz'],
+    );
   }
 
-  getItemData(data) {
+  itemRow(data) {
     // TODO list should not have hardcoded size outside of stylesheet
     return [
-      m('div', { style: { width: '9em' } }, data.user.lastname),
-      m('div', { style: { width: '9em' } }, data.user.firstname),
+      m('div', { style: { width: '18em' } }, `${data.user.firstname} ${data.user.lastname}`),
       m('div', { style: { width: '9em' } }, data.user.email),
+      m('div', { style: { 'flex-grow': '100' } }),
+      m('div', m(Button, {
+        // Button to remove this groupmembership
+        className: 'red-row-button',
+        borders: false,
+        label: 'remove',
+        events: {
+          onclick: () => {
+            console.log('hallo');
+            console.log(`removing ${data._id}`);
+            this.ctrl.handler.delete(data).then(() => {
+              this.ctrl.refresh();
+            });
+          },
+        },
+      })),
     ];
   }
 
   view() {
     return m(Card, {
-      style: { height: '300px' },
-      content: m(TableView, {
-        controller: this.ctrl,
-        keys: ['user.lastname', 'user.firstname', 'user.email'],
-        tileContent: this.getItemData,
-        titles: [
-          { text: 'Name', width: '9em' },
-          { text: 'First Name', width: '9em' },
-          { text: 'Email', width: '9em' },
-        ],
-      }),
+      style: { height: '500px' },
+      content: m('div', [
+        this.addmode ? m(SelectList, {
+          controller: this.userController,
+          listTileAttrs: user => Object.assign({}, { title: `${user.firstname} ${user.lastname}`}),
+          onSubmit: (user) => {
+            this.addmode = false;
+            this.ctrl.handler.post({
+              user: user._id,
+              group: this.group_id,
+            }).then(() => {
+              this.ctrl.refresh();
+            });
+          },
+          onCancel: () => { this.addmode = false; m.redraw(); },
+          selectedText: user => `${user.firstname} ${user.lastname}`,
+        }) : '',
+        m(TableView, {
+          controller: this.ctrl,
+          keys: ['user.lastname', 'user.firstname', 'user.email'],
+          tileContent: data => this.itemRow(data),
+          clickOnRows: false,
+          onAdd: () => { this.addmode = true; },
+          titles: [
+            { text: 'Name', width: '18em' },
+            { text: 'Email', width: '9em' },
+          ],
+        }),
+      ]),
     });
   }
 }
@@ -95,11 +103,6 @@ export default class viewGroup extends ItemView {
     return m('div', {
       style: { height: '100%', 'overflow-y': 'scroll', padding: '10px' },
     }, [
-      m(Button, {
-        element: 'div',
-        label: 'edit group',
-        events: { onclick: onEdit },
-      }),
       // this div is the title line
       m('div', [
         // event image if existing
@@ -107,7 +110,7 @@ export default class viewGroup extends ItemView {
       ]),
       m('div', [
         m('h4', 'Members'),
-        m(MembersTable, { where: { group: this.id } }),
+        m(MembersTable, { group: this.id }),
       ]),
     ]);
   }

src/style.js

@@ -5,3 +5,11 @@ addTypography();
 ButtonCSS.addStyle('.blue-button', {
   color_light_text: 'blue',
 });
+
+ButtonCSS.addStyle('.red-row-button', {
+  color_light_text: 'white',
+  color_light_background: 'red',
+  padding_h: 0,
+  font_size: 12,
+  margin_h: 0,
+});