define more general active/inactive submit button

src/userTool.js

 import { ItemView } from './views/itemView';
-import { EditView, inputGroup, selectGroup } from './views/editView';
+import { EditView, inputGroup, selectGroup, submitButton } from './views/editView';
 import TableView from './views/tableView';
 
 const m = require('mithril');
@@ -105,18 +105,17 @@ class UserEdit extends EditView {
     // do not render anything if there is no data yet
     if (!this.data) return m.trust('');
 
-    // UPDATE button is inactive if form is not valid
-    const buttonArgs = this.patchOnClick([
-      'lastname', 'firstname', 'email', 'membership', 'gender']);
-    const updateButton = m(
-      'div.btn.btn-warning',
-      this.valid ? buttonArgs : { disabled: 'disabled' },
-      'Update',
-    );
-
     return m('form', [
       this.getForm(),
-      updateButton,
+      m(submitButton, {
+        active: this.valid,
+        args: {
+          onclick: this.submit('PATCH', [
+            'lastname', 'firstname', 'email', 'membership', 'gender']),
+          class: 'btn-warning',
+        },
+        text: 'Update',
+      }),
     ]);
   }
 }
@@ -135,18 +134,17 @@ export class NewUser extends UserEdit {
   }
 
   view() {
-    // UPDATE button is inactive if form is not valid
-    const buttonArgs = this.createOnClick([
-      'lastname', 'firstname', 'email', 'membership', 'gender']);
-    const postButton = m(
-      'div.btn.btn-warning',
-      this.valid ? buttonArgs : { disabled: 'disabled' },
-      'Create',
-    );
-
     return m('form', [
       this.getForm(),
-      postButton,
+      m(submitButton, {
+        active: this.valid,
+        args: {
+          onclick: this.submit('POST', [
+            'lastname', 'firstname', 'email', 'membership', 'gender']),
+          class: 'btn-warning',
+        },
+        text: 'Create',
+      }),
     ]);
   }
 }

src/views/editView.js

@@ -99,46 +99,37 @@ export class EditView extends ItemView {
     return boundFormelement;
   }
 
-  patchOnClick(patchableFields) {
-    return {
-      onclick: () => {
-        if (this.changed) {
-          getSession().then((apiSession) => {
-            // fields like `_id` are not patchable and would lead to an error
+  submit(method, fields) {
+    return () => {
+      if (this.changed) {
+        getSession().then((apiSession) => {
+          // build request
+          const request = { method };
+          if (method === 'POST' || method === 'PATCH') {
+            // fields like `_id` are not post/patchable
             // We therefore only send patchable fields
-            const patchData = {};
-            patchableFields.forEach((key) => {
-              patchData[key] = this.data[key];
-            });
-
-            apiSession.patch(`${this.resource}/${this.id}`, patchData, {
-              headers: { 'If-Match': this.data._etag },
-            }).then((response) => {
-              this.callback(response);
+            const submitData = {};
+            fields.forEach((key) => {
+              submitData[key] = this.data[key];
             });
+            request.data = submitData;
+          }
+
+          // if request is PATCH or DELETE, add If-Match header and set url
+          if (method === 'PATCH' || method === 'DELETE') {
+            request.headers = { 'If-Match': this.data._etag };
+            request.url = `${this.resource}/${this.id}`;
+          } else {
+            request.url = this.resource;
+          }
+
+          apiSession(request).then((response) => {
+            this.callback(response);
           });
-        } else {
-          this.callback();
-        }
-      },
-    };
-  }
-
-  createOnClick(fields) {
-    return {
-      onclick: () => {
-        getSession().then((apiSession) => {
-          // fields like `_id` are not patchable and would lead to an error
-          // We therefore only send patchable fields
-          const postData = {};
-          fields.forEach((key) => {
-            postData[key] = this.data[key];
-          });
-
-          apiSession.post(this.resource, postData)
-            .then((response) => { this.callback(response); });
         });
-      },
+      } else {
+        this.callback();
+      }
     };
   }
 }
@@ -184,3 +175,13 @@ export class selectGroup {
     ]);
   }
 }
+
+export class submitButton {
+  view(vnode) {
+    const args = vnode.attrs.args;
+    if (!vnode.attrs.active) {
+      args.disabled = 'disabled';
+    }
+    return m('div.btn', args, vnode.attrs.text);
+  }
+}