working changes

src/auth.js

@@ -86,9 +86,20 @@ export function getSession() {
 }
 
 export class ResourceHandler {
-  constructor(resource, searchKeys = false) {
+  /* Handler to get and manipulate resource items
+   *
+   * resource: String of the resource to accessm e,g, 'events'
+   * searchKeys: keys in the resource item on which to perform search, i.e.
+   *   when search is set, any of these keys may match the search pattern
+   *   E.g. for an event, this may be ['title_de', 'title_en', 'location']
+   * updateCallback: method with argument of newData
+   *   is called additionally to the promise resolve at any time that data of an item is
+   *   changed
+   */
+  constructor(resource, searchKeys = false, updateCallback = () => {}) {
     this.resource = resource;
     this.searchKeys = searchKeys || config[resource].searchKeys;
+    this.updateCallback = updateCallback;
     this.noPatchKeys = [
       '_etag', '_id', '_created', '_links', '_updated',
       ...(config[resource].notPatchableKeys || [])];
@@ -188,6 +199,7 @@ export class ResourceHandler {
             resetSession();
             reject();
           } else {
+            this.updateCallback(response.data);
             resolve(response.data);
           }
         }).catch((e) => {
@@ -225,6 +237,7 @@ export class ResourceHandler {
             resetSession();
             reject();
           } else {
+            this.updateCallback(response.data);
             resolve(response.data);
           }
         }).catch((e) => {

src/events/newEvent.js

@@ -2,7 +2,7 @@ import m from 'mithril';
 import { RaisedButton, RadioGroup, Slider } from 'polythene-mithril';
 import { styler } from 'polythene-core-css';
 import { apiUrl } from 'networkConfig';
-import EditView from '../views/editView';
+import { EditView } from '../views/editView';
 import { fileInput } from '../views/elements';
 
 const style = [

src/groups/groupTool.js

 import m from 'mithril';
 import viewGroup from './viewGroup';
 import newGroup from './newGroup';
+import ItemTool from '../views/itemTool';
 
-export default class GroupView {
+export default class GroupTool extends ItemTool {
   constructor() {
-    this.edit = false;
+    super('groups', { moderator: 1 });
   }
 
-  view() {
-    if (this.edit) {
-      return m(newGroup, { onfinish: () => { this.edit = false; m.redraw(); } });
-    }
-    return m(viewGroup, { onEdit: () => { this.edit = true; } });
+  detailView() {
+    return m(viewGroup, { handler: this.handler, data: this.data });
+  }
+
+  editView() {
+    return m(newGroup, { onCancel: () => { this.modus = 'view'; } });
   }
 }

src/groups/newGroup.js

 import m from 'mithril';
-import { RaisedButton, TextField } from 'polythene-mithril';
+import { TextField } from 'polythene-mithril';
 import SelectList from '../views/selectList';
 import DatalistController from '../listcontroller';
-import EditView from '../views/editView';
+import { EditView, EditLayout } from '../views/editView';
 
 
 export default class NewGroup extends EditView {
@@ -14,23 +14,18 @@ export default class NewGroup extends EditView {
     );
   }
 
-  view() {
+  view({ attrs: { onCancel = () => {} }}) {
     if (!this.data) return '';
-
-    const submitButton = m(RaisedButton, {
-      disabled: !this.valid,
-      label: 'Submit',
-      events: {
-        onclick: () => {
-          // excahgne moderator object with string of id
-          const { moderator } = this.data;
-          if (moderator) { this.data.moderator = `${moderator._id}`; }
-          this.submit();
-        },
+    return m(EditLayout, {
+      title: 'Edit Group',
+      onSubmit: () => {
+        // excahgne moderator object with string of id
+        const { moderator } = this.data;
+        if (moderator) { this.data.moderator = `${moderator._id}`; }
+        this.submit();
       },
-    });
-
-    return m('div.mywrapper', [
+      onCancel,
+    }, m('div.mywrapper', [
       m('h3', 'Add a New Group'),
       ...this.renderPage({
         name: { type: 'text', label: 'Group Name' },
@@ -55,8 +50,6 @@ export default class NewGroup extends EditView {
           },
         })),
       ]),
-      m('br'),
-      submitButton,
-    ]);
+    ]));
   }
 }

src/groups/viewGroup.js

@@ -163,68 +163,46 @@ class EmailTable {
   }
 }
 
-export default class viewGroup extends ItemView {
-  constructor() {
-    super('groups', { moderator: 1 });
-  }
-
-  oninit() {
-    this.handler.getItem(this.id, this.embedded).then((item) => {
-      this.data = item;
-      m.redraw();
-    });
-  }
-
-  view({ attrs: { onEdit } }) {
-    if (!this.data) return '';
-
-    return m('div.maincontainer', {
-      style: { height: '100%', 'overflow-y': 'scroll' },
-    }, [
-      // Button to edit the Group
-      m(RaisedButton, {
-        element: 'div',
-        label: 'Edit Group',
-        border: true,
-        events: { onclick: onEdit },
-      }),
+export default class viewGroup {
+  view({ attrs: { handler, data } }) {
+    return m('div.maincontainer', [
       // this div is the title line
       m('div.maincontainer', [
-        m('h1', { style: { 'margin-top': '0px', 'margin-bottom': '0px' } }, this.data.name),
-        this.data.moderator ? m(Property, {
+        m('h1', { style: { 'margin-top': '0px', 'margin-bottom': '0px' } }, data.name),
+        data.moderator ? m(Property, {
           title: 'Moderator',
-          onclick: () => { m.route.set(`/users/${this.data.moderator._id}`); },
-        }, `${this.data.moderator.firstname} ${this.data.moderator.lastname}`) : '',
+          onclick: () => { m.route.set(`/users/${data.moderator._id}`); },
+        }, `${data.moderator.firstname} ${data.moderator.lastname}`) : '',
       ]),
       m('div.viewcontainer', [
         // now-column layout: This first column are the members
         m('div.viewcontainercolumn', [
           m('h4', 'Members'),
-          m(MembersTable, { group: this.id }),
+          m(MembersTable, { group: data._id }),
         ]),
         // the second column contains receive_from and forward_to emails
         m('div.viewcontainercolumn', [
           m(EmailTable, {
-            list: this.data.receive_from || [],
+            list: data.receive_from || [],
             onSubmit: (newItem) => {
-              const oldList = this.data.receive_from || [];
-              this.handler.patch({
-                _id: this.data._id,
-                _etag: this.data._etag,
+              const oldList = data.receive_from || [];
+              handler.patch({
+                _id: data._id,
+                _etag: data._etag,
                 receive_from: [...oldList, newItem],
-              }).then((newData) => { this.data = newData; });
+              });
             },
             onRemove: (item) => {
-              const oldList = this.data.receive_from;
+              const oldList = data.receive_from;
               // remove the first occurence of the given item-string
               const index = oldList.indexOf(item);
               if (index !== -1) {
                 oldList.splice(index, 1);
-                this.handler.patch({
-                  _id: this.data._id,
-                  _etag: this.data._etag,
+                handler.patch({
+                  _id: data._id,
+                  _etag: data._etag,
                   receive_from: oldList,
-                }).then((newData) => { this.data = newData; });
+                }).then(() => m.redraw());
               }
             },
           }),

src/jobs/newJob.js

 import m from 'mithril';
 import { RaisedButton } from 'polythene-mithril';
-import EditView from '../views/editView';
+import { EditView } from '../views/editView';
 
 
 export default class newJob extends EditView {

src/layout.js

 import m from 'mithril';
 import '@material/drawer';
-import { List, ListTile, Icon, Toolbar, ToolbarTitle } from 'polythene-mithril';
+import { List, ListTile, Icon, Toolbar, ToolbarTitle, Dialog } from 'polythene-mithril';
 import { styler } from 'polythene-core-css';
 import { icons } from './views/elements';
 import { resetSession } from './auth';
@@ -106,6 +106,8 @@ export default class Layout {
         ),
         m('div.wrapper-content', children),
       ]),
+      // dialog element will show when Dialog.show() is called, this is only a placeholder
+      m(Dialog),
     ]);
   }
 }

src/users/editUser.js

 import m from 'mithril';
 import { RaisedButton, RadioGroup } from 'polythene-mithril';
-import EditView from '../views/editView';
+import { EditView } from '../views/editView';
 
 
 export default class UserEdit extends EditView {

src/views/editView.js

 import Ajv from 'ajv';
-import { Checkbox } from 'polythene-mithril';
+import { Checkbox, IconButton, Toolbar, ToolbarTitle, Button } from 'polythene-mithril';
 import { apiUrl } from 'networkConfig';
 import ItemView from './itemView';
-import { textInput, datetimeInput, numInput } from './elements';
+import { textInput, datetimeInput, numInput, icons } from './elements';
 
 const m = require('mithril');
 
@@ -15,7 +15,23 @@ const objectNameForResource = {
   events: 'Event',
 };
 
-export default class EditView extends ItemView {
+export class EditLayout {
+  view({ attrs: { title, onSubmit = () => {}, onCancel = () => {} }, children }) {
+    return m('div', { style: { 'background-color': 'white' } }, [
+      m(Toolbar, [
+        m(IconButton, {
+          icon: { svg: { content: m.trust(icons.clear) } },
+          events: { onclick: onCancel },
+        }),
+        m(ToolbarTitle, title),
+        m(Button, { label: 'submit', events: { onclick: onSubmit } }),
+      ]),
+      children,
+    ]);
+  }
+}
+
+export class EditView extends ItemView {
   /* Extension of ItemView to edit a data item
    *
    * Requires:

src/views/itemTool.js

+import m from 'mithril';
+import {
+  RaisedButton,
+  Dialog,
+  Button,
+  Toolbar,
+  IconButton,
+  ToolbarTitle,
+} from 'polythene-mithril';
+import { ResourceHandler } from '../auth';
+import { icons } from './elements';
+
+
+export default class ItemTool {
+  constructor(resource, embedded) {
+    this.id = m.route.param('id');
+    if (this.id) {
+      this.modus = 'view';
+    } else {
+      this.modus = 'new';
+    }
+    this.handler = new ResourceHandler(resource, false, (newData) => { this.data = newData; });
+    this.embedded = embedded || {};
+    // by default, we go to the resource list after deletion of an item
+    // this may be overwritten with other behaviour
+    this.onDelete = () => { console.log('on delete'); m.route.set(`/${resource}`); };
+  }
+
+  oninit() {
+    if (this.id) {
+      this.handler.getItem(this.id, this.embedded).then((item) => {
+        this.data = item;
+        m.redraw();
+      });
+    }
+  }
+
+  creationView() {
+    console.log(`creation for ${this.resource} not found`);
+    return null;
+  }
+
+  /*
+   * Should display this.data
+   */
+  detailView() {
+    console.log(`detail view for ${this.resource} not found`);
+    return null;
+  }
+
+  /*
+   * To edit an existing item. Has to implement this.onSubmit, which is called
+   */
+  editView() {
+    console.log(`edit view for ${this.resource} not found`);
+    return null;
+  }
+
+  delete() {
+    Dialog.show({
+      body: 'Are you sure you want to delete this item?',
+      backdrop: true,
+      footerButtons: [
+        m(Button, {
+          label: 'Cancel',
+          events: { onclick: () => Dialog.hide() },
+        }),
+        m(Button, {
+          label: 'Delete',
+          events: {
+            onclick: () => {
+              Dialog.hide();
+              this.handler.delete(this.data).then(this.onDelete);
+            },
+          },
+        })],
+    });
+  }
+
+  view() {
+    if (this.modus === 'new') {
+      return this.creationView();
+    } else if (this.modus === 'edit') {
+      return this.editView();
+    }
+    if (!this.data) return '';
+    return m('div', { style: { height: '100%', 'overflow-y': 'scroll' } }, [
+      m('div', { style: { display: 'flex' } }, [
+        m(RaisedButton, {
+          element: 'div',
+          label: 'Edit',
+          border: true,
+          events: { onclick: () => { this.modus = 'edit'; } },
+        }),
+        m(RaisedButton, {
+          className: 'red-row-button',
+          label: 'Delete',
+          border: true,
+          events: { onclick: () => this.delete() },
+        }),
+      ]),
+      this.detailView(),
+    ]);
+  }
+}

src/views/itemView.js

+import m from 'mithril';
 import { ResourceHandler } from '../auth';
-
-const m = require('mithril');
+import { Dialog, Button } from 'polythene-mithril';
 
 export default class ItemView {
-  /* Basic class show a data item
+  /* Basic class to show a data item
    *
    *  Required:
    *  - call constructor with 'resource'