breaking changes: seperate controller for viewing data items

this comes together with a more unified layout of edit views
the new structure simplifies data handling and needs less api communication, making it more responsive

src/groups/newGroup.js → src/groups/editGroup.js

@@ -2,31 +2,28 @@ import m from 'mithril';
 import { TextField } from 'polythene-mithril';
 import SelectList from '../views/selectList';
 import DatalistController from '../listcontroller';
-import { EditView, EditLayout } from '../views/editView';
+import EditView from '../views/editView';
 
 
 export default class NewGroup extends EditView {
   constructor(vnode) {
-    super(vnode, 'groups', { moderator: 1 });
+    super(vnode);
     this.userController = new DatalistController(
       'users', {},
       ['firstname', 'lastname', 'email', 'nethz'],
     );
+    console.log(this.data);
   }
 
-  view({ attrs: { onCancel = () => {} }}) {
-    if (!this.data) return '';
-    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();
-      },
-      onCancel,
-    }, m('div.mywrapper', [
-      m('h3', 'Add a New Group'),
+  beforeSubmit() {
+    // exchange moderator object with string of id
+    const { moderator } = this.data;
+    if (moderator) { this.data.moderator = `${moderator._id}`; }
+    this.submit();
+  }
+
+  view() {
+    return this.layout([
       ...this.renderPage({
         name: { type: 'text', label: 'Group Name' },
         allow_self_enrollment: {
@@ -50,6 +47,6 @@ export default class NewGroup extends EditView {
           },
         })),
       ]),
-    ]));
+    ]);
   }
 }

src/groups/groupTool.js

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

src/groups/item.js

+import m from 'mithril';
+import viewGroup from './viewGroup';
+import editGroup from './editGroup';
+import ItemController from '../itemcontroller';
+
+export default class GroupItem {
+  constructor() {
+    this.controller = new ItemController('groups', { moderator: 1 });
+  }
+
+  view() {
+    if (!this.controller || !this.controller.data) return '';
+    if (this.controller.modus !== 'view') return m(editGroup, { controller: this.controller });
+    return m(viewGroup, { controller: this.controller });
+  }
+}

src/groups/overview.js → src/groups/list.js

@@ -3,7 +3,7 @@ import { Card } from 'polythene-mithril';
 import DatalistController from '../listcontroller';
 
 
-class GroupItem {
+class GroupListItem {
   view({ attrs: { name, _id } }) {
     return m('div', {
       style: {
@@ -34,7 +34,7 @@ export default class GroupList {
 
     return m(
       'div', { style: { display: 'flex', 'flex-wrap': 'wrap' } },
-      this.data.map(item => m(GroupItem, item)),
+      this.data.map(item => m(GroupListItem, item)),
       m('div', {
         style: {
           padding: '20px',

src/groups/viewGroup.js

@@ -163,44 +163,44 @@ class EmailTable {
   }
 }
 
-export default class viewGroup {
-  view({ attrs: { handler, data } }) {
-    return m('div.maincontainer', [
+export default class viewGroup extends ItemView {
+  view() {
+    return this.layout([
       // this div is the title line
       m('div.maincontainer', [
-        m('h1', { style: { 'margin-top': '0px', 'margin-bottom': '0px' } }, data.name),
-        data.moderator ? m(Property, {
+        m('h1', { style: { 'margin-top': '0px', 'margin-bottom': '0px' } }, this.data.name),
+        this.data.moderator ? m(Property, {
           title: 'Moderator',
-          onclick: () => { m.route.set(`/users/${data.moderator._id}`); },
-        }, `${data.moderator.firstname} ${data.moderator.lastname}`) : '',
+          onclick: () => { m.route.set(`/users/${this.data.moderator._id}`); },
+        }, `${this.data.moderator.firstname} ${this.data.moderator.lastname}`) : '',
       ]),
       m('div.viewcontainer', [
         // now-column layout: This first column are the members
         m('div.viewcontainercolumn', [
           m('h4', 'Members'),
-          m(MembersTable, { group: data._id }),
+          m(MembersTable, { group: this.data._id }),
         ]),
         // the second column contains receive_from and forward_to emails
         m('div.viewcontainercolumn', [
           m(EmailTable, {
-            list: data.receive_from || [],
+            list: this.data.receive_from || [],
             onSubmit: (newItem) => {
-              const oldList = data.receive_from || [];
-              handler.patch({
-                _id: data._id,
-                _etag: data._etag,
+              const oldList = this.data.receive_from || [];
+              this.handler.patch({
+                _id: this.data._id,
+                _etag: this.data._etag,
                 receive_from: [...oldList, newItem],
               });
             },
             onRemove: (item) => {
-              const oldList = data.receive_from;
+              const oldList = this.data.receive_from;
               // remove the first occurence of the given item-string
               const index = oldList.indexOf(item);
               if (index !== -1) {
                 oldList.splice(index, 1);
-                handler.patch({
-                  _id: data._id,
-                  _etag: data._etag,
+                this.handler.patch({
+                  _id: this.data._id,
+                  _etag: this.data._etag,
                   receive_from: oldList,
                 }).then(() => m.redraw());
               }

src/index.js

 import m from 'mithril';
 import { OauthRedirect } from './auth';
-import GroupList from './groups/overview';
-import GroupView from './groups/groupTool';
+import GroupList from './groups/list';
+import GroupItem from './groups/item';
 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';
@@ -38,8 +37,8 @@ m.route(root, '/users', {
   '/draftevent': layoutWith(eventDraft),
   '/eventwithexport': layoutWith(eventWithExport),
   '/groups': layoutWith(GroupList),
-  '/groups/:id': layoutWith(GroupView),
-  '/newgroup': layoutWith(NewGroup),
+  '/groups/:id': layoutWith(GroupItem),
+  '/newgroup': layoutWith(GroupItem),
   '/oauthcallback': OauthRedirect,
   '/joboffers': layoutWith(jobTable),
   '/newjoboffer': layoutWith(newJob),

src/itemcontroller.js

+import m from 'mithril';
+import { ResourceHandler } from './auth';
+
+
+export default class ItemController {
+  constructor(resource, embedded) {
+    this.resource = resource;
+    this.id = m.route.param('id');
+    if (this.id) {
+      this.modus = 'view';
+    } else {
+      this.modus = 'new';
+      this.data = {};
+    }
+    this.handler = new ResourceHandler(resource, false);
+    this.embedded = embedded || {};
+    if (this.id) {
+      this.handler.getItem(this.id, this.embedded).then((item) => {
+        this.data = item;
+        m.redraw();
+      });
+    }
+  }
+
+  post(data) {
+    return new Promise((resolve, reject) => {
+      this.handler.post(data).then((response) => {
+        this.id = response._id;
+        this.changeModus('view');
+      }).catch(reject);
+    });
+  }
+
+  patch(data, formData = false) {
+    return new Promise((resolve, reject) => {
+      this.handler.patch(data, formData).then(() => { this.changeModus('view'); }).catch(reject);
+    });
+  }
+
+  cancel() {
+    if (this.modus === 'edit') this.changeModus('view');
+    if (this.modus === 'new') m.route.set(`/${this.resource}`);
+  }
+
+  changeModus(newModus) {
+    this.modus = newModus;
+    if (this.modus === 'view') {
+      // reload item to current state, patches do not return embeddinds...
+      this.handler.getItem(this.id, this.embedded).then((item) => {
+        this.data = item;
+        m.redraw();
+      });
+    }
+  }
+}

src/views/editView.js

@@ -15,23 +15,7 @@ const objectNameForResource = {
   events: 'Event',
 };
 
-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 {
+export default class EditView extends ItemView {
   /* Extension of ItemView to edit a data item
    *
    * Requires:
@@ -43,10 +27,9 @@ export class EditView extends ItemView {
    * - bind(attrs): binds a form-field against this.data
    * - submit
    */
-  constructor(vnode, resource, embedded, valid = true) {
-    super(resource, embedded);
+  constructor(vnode, valid = true) {
+    super(vnode);
     this.changed = false;
-    this.resource = resource;
 
     // state for validation
     this.valid = valid;
@@ -56,28 +39,12 @@ export class EditView extends ItemView {
       allErrors: true,
     });
     this.errors = {};
-    this.data = {};
-
-    // callback when edit is finished
-    if (vnode.attrs.onfinish) this.callback = vnode.attrs.onfinish;
-    else {
-      this.callback = (item) => {
-        console.log(item);
-        if (item) m.route.set(`/${resource}/${item._id}`);
-        else m.route.set(`/${resource}`);
-      };
-    }
+    // copy a local version of the controller data to manipulate before submission
+    // (changes will therefore not be applied if edit is cancelled)
+    this.data = Object.assign({}, this.controller.data);
   }
 
   oninit() {
-    // if this.id is set, this is an edit view of an existing event.
-    // Therefore, we load the current state of the event from the API.
-    if (this.id) {
-      this.handler.getItem(this.id, this.embedded).then((item) => {
-        this.data = item;
-        m.redraw();
-      });
-    }
     // load schema
     m.request(`${apiUrl}/docs/api-docs`).then((schema) => {
       const objectSchema = schema.definitions[
@@ -170,15 +137,13 @@ export class EditView extends ItemView {
   submit(formData = false) {
     if (Object.keys(this.data).length > 0) {
       let request;
-      if (this.id) {
+      if (this.controller.modus === 'edit') {
         // if id is known, this is a patch to an existing item
-        request = this.handler.patch(this.data, formData);
+        request = this.controller.patch(this.data, formData);
       } else {
-        request = this.handler.post(this.data);
+        request = this.controller.post(this.data);
       }
-      request.then((response) => {
-        this.callback(response);
-      }).catch((error) => {
+      request.catch((error) => {
         console.log(error);
         // Process the API error
         const { response } = error;
@@ -193,7 +158,26 @@ export class EditView extends ItemView {
         }
       });
     } else {
-      this.callback();
+      this.controller.changeModus('view');
     }
   }
+
+  beforeSubmit() {
+    this.submit();
+  }
+
+  layout(children) {
+    return m('div', { style: { 'background-color': 'white' } }, [
+      m(Toolbar, { style: { 'background-color': 'orange' } }, [
+        m(IconButton, {
+          icon: { svg: { content: m.trust(icons.clear) } },
+          events: { onclick: () => { this.controller.cancel(); } },
+        }),
+        m(ToolbarTitle, ((this.controller.modus === 'new') ? 'New' : 'Edit') +
+          ` ${this.resource.charAt(0).toUpperCase()}${this.resource.slice(1, -1)}`),
+        m(Button, { label: 'submit', events: { onclick: () => { this.beforeSubmit(); } } }),
+      ]),
+      m('div.maincontainer', children),
+    ]);
+  }
 }

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';
-import { Dialog, Button } from 'polythene-mithril';
+import { Dialog, Button, RaisedButton } from 'polythene-mithril';
 
 export default class ItemView {
   /* Basic class to show a data item
    *
    *  Required:
-   *  - call constructor with 'resource'
-   *  - either make sure m.route.params('id') exists or set this.id in
-   *    constructor
+   *  - gets attribute 'controller' when rendered
    */
-  constructor(resource, embedded) {
-    this.data = null;
-    this.id = m.route.param('id');
-    this.handler = new ResourceHandler(resource);
-    this.embedded = embedded || {};
+  constructor({ attrs: { controller, onDelete } }) {
+    this.controller = controller;
+    this.data = this.controller.data;
+    this.handler = this.controller.handler;
+    this.resource = this.controller.resource;
+    if (!onDelete) this.onDelete = () => { m.route.set(`/${controller.resource}`); };
+    else this.onDelete = onDelete;
   }
 
-  oninit() {
-    this.handler.getItem(this.id, this.embedded).then((item) => {
-      this.data = item;
-      m.redraw();
+  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.controller.handler.delete(this.data).then(this.onDelete);
+            },
+          },
+        })],
     });
   }
+
+  layout(children) {
+    if (!this.controller || !this.controller.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.controller.changeModus('edit'); } },
+        }),
+        m(RaisedButton, {
+          className: 'red-row-button',
+          label: 'Delete',
+          border: true,
+          events: { onclick: () => this.delete() },
+        }),
+      ]),
+      children,
+    ]);
+  }
 }