diff --git a/src/userTool.js b/src/userTool.js index f88584f61190e3da70127ba07dd59c512a06e9c2..0e0f5dc411d1386e9c749b3bccfbdf58dd111aa5 100644 --- a/src/userTool.js +++ b/src/userTool.js @@ -1,5 +1,5 @@ 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', + }), ]); } } diff --git a/src/views/editView.js b/src/views/editView.js index 727a5f4b8ebabd24ae5f0beccdcf62e52777213f..182659eb7229f88e6470f1da52276e852d3997d8 100644 --- a/src/views/editView.js +++ b/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); + } +}