breaking changes in FormData submit

so far, FormData submit did not support multiple values per key. We need this for studydocuments.
Therefore, submit now simple takes a FormData or Object as input and patches it to the resource.

src/auth.js

@@ -289,26 +289,24 @@ export class ResourceHandler {
     });
   }
 
-  patch(item, formData = false) {
+  patch(item) {
+    const isFormData = item instanceof FormData;
+    let patchInfo = {};
+    if (isFormData) patchInfo = { id: item.get('_id'), etag: item.get('_etag') };
+    else patchInfo = { id: item._id, etag: item._etag };
+
     return new Promise((resolve, reject) => {
       getSession().then((api) => {
+        let submitData = item;
+        if (!isFormData) submitData = Object.assign({}, item);
         // not all fields in the item can be patched. We filter out the fields
         // we are allowed to send
-        let submitData;
-        if (formData) {
-          submitData = new FormData();
-          Object.keys(item).forEach((key) => {
-            if (!this.noPatchKeys.includes(key)) {
-              submitData.append(key, item[key]);
-            }
+        this.noPatchKeys.forEach((key) => {
+          if (isFormData) submitData.delete(key);
+          else delete submitData[key];
         });
-        } else {
-          submitData = Object.assign({}, item);
-          this.noPatchKeys.forEach((key) => { delete submitData[key]; });
-        }
-
-        api.patch(`${this.resource}/${item._id}`, submitData, {
-          headers: { 'If-Match': item._etag },
+        api.patch(`${this.resource}/${patchInfo.id}`, submitData, {
+          headers: { 'If-Match': patchInfo.etag },
         }).then((response) => {
           if (response.status === 422) {
             this.error422(response.data);

src/events/editEvent.js

@@ -63,9 +63,7 @@ export default class newEvent extends EditView {
         images[`img_${key}`] = this.form.data[`new_${key}`];
         delete this.form.data[`new_${key}`];
       }
-      if (this.form.data[`img_${key}`]) {
-        delete this.form.data[`img_${key}`];
-      }
+      if (this.form.data[`img_${key}`]) delete this.form.data[`img_${key}`];
     });
 
     // Merge Options for additional fields
@@ -106,7 +104,6 @@ export default class newEvent extends EditView {
       this.form.data.additional_fields = null;
     }
 
-
     // if spots is not set, also remove 'allow_email_signup'
     if (!('spots' in this.form.data) && 'allow_email_signup' in this.form.data
         && !this.form.data.allow_email_signup) {
@@ -117,16 +114,15 @@ export default class newEvent extends EditView {
     if (this.rightSubmit) {
       // Submition tool
       if (Object.keys(images).length > 0) {
-        images._id = this.form.data._id;
-        images._etag = this.form.data._etag;
+        const imageForm = new FormData();
+        Object.keys(images).forEach(key => imageForm.append(key, images[key]));
+        imageForm.append('_id', this.form.data._id);
+        imageForm.append('_etag', this.form.data._etag);
         // first upload the images as formData, then the rest as JSON
-        this.controller.handler.patch(images, true).then(({ _etag }) => {
-          this.form.data._etag = _etag;
-          this.submit();
+        this.controller.handler.patch(imageForm).then(({ _etag }) => {
+          this.submit({ ...this.form.data, _etag });
         });
-      } else {
-        this.submit();
-      }
+      } else this.submit(this.form.data);
     } else {
       // Propose tool
       Dialog.show({

src/groups/editGroup.js

@@ -84,10 +84,9 @@ export default class NewGroup extends EditView {
   }
 
   beforeSubmit() {
+    const data = this.form.data;
     // exchange moderator object with string of id
-    const { moderator } = this.form.data;
-    if (moderator) { this.form.data.moderator = `${moderator._id}`; }
-    this.submit();
+    this.submit({ ...data, moderator: data.moderator ? data.moderator._id : undefined });
   }
 
   view() {

src/resourceConfig.json

@@ -125,6 +125,7 @@
             "professor",
             "author",
             "uploader"
-        ]
+        ],
+        "notPatchableKeys": ["uploader"]
     }
 }

src/studydocs/editDoc.js

 import m from 'mithril';
 import { FileInput } from 'amiv-web-ui-components';
-import { RadioGroup, Button, List, ListTile } from 'polythene-mithril';
+import { RadioGroup, Button, List, ListTile, Snackbar } from 'polythene-mithril';
+// eslint-disable-next-line import/extensions
+import { apiUrl } from 'networkConfig';
 import EditView from '../views/editView';
 
 
@@ -13,6 +15,40 @@ export default class editDoc extends EditView {
     }
   }
 
+  oninit() {
+    // load schema
+    m.request(`${apiUrl}/docs/api-docs`).then((schema) => {
+      // remove the files list as it is impossible to validate
+      const docSchema = schema.definitions.Studydocument;
+      delete docSchema.properties.files;
+      this.form.setSchema(docSchema);
+    }).catch((error) => { console.log(error); });
+  }
+
+  beforeSubmit() {
+    // check if there are files uploaded
+    const files = [];
+    Object.keys(this.form.data).forEach((key) => {
+      if (key.startsWith('new_file_') && this.form.data[key]) {
+        files.push(this.form.data[key]);
+        delete this.form.data[key];
+      }
+    });
+    // in case that there are no files, eject an error
+    if (this.controller.modus === 'new' && files.length === 0) {
+      Snackbar.show({ title: 'You need to upload at least one file.' });
+      this.form.valid = false;
+      return;
+    }
+    // now post all together as FormData
+    const submitData = new FormData();
+    Object.keys(this.form.data).forEach((key) => {
+      if (key !== 'files') submitData.append(key, this.form.data[key]);
+    });
+    files.forEach((file) => { submitData.append('files', file); });
+    this.submit(submitData);
+  }
+
   view() {
     return this.layout([
       m('h3', 'Add a New Studydocument'),
@@ -62,17 +98,16 @@ export default class editDoc extends EditView {
       // file upload: unfinished
       m('div', [
         m(List, {
-          tiles: this.form.data.files.map(file => m(ListTile, {
+          tiles: [...this.form.data.files.entries()].map(numAndFile => m(ListTile, {
             content: [
               m(FileInput, this.form.bind({
-                name: 'new_file',
-                label: `${file.name}`,
+                name: `new_file_${numAndFile[0]}`,
+                label: numAndFile[1].name,
               })),
             ],
           })),
         }),
 
-
         // additional file
         m(Button, {
           label: 'Additional File',

src/views/editView.js

@@ -14,6 +14,7 @@ const objectNameForResource = {
   groups: 'Group',
   eventsignups: 'Eventsignup',
   events: 'Event',
+  studydocuments: 'Studydocument',
 };
 
 export default class EditView extends ItemView {
@@ -51,14 +52,13 @@ export default class EditView extends ItemView {
    *                   JSON. Necessary in cases where files are included in the
    *                   changes.
    */
-  submit(formData = false) {
-    if (Object.keys(this.form.data).length > 0) {
+  submit(data) {
     let request;
     if (this.controller.modus === 'edit') {
       // if id is known, this is a patch to an existing item
-        request = this.controller.patch(this.form.data, formData);
+      request = this.controller.patch(data);
     } else {
-        request = this.controller.post(this.form.data);
+      request = this.controller.post(data);
     }
     request.catch((error) => {
       console.log(error);
@@ -75,13 +75,14 @@ export default class EditView extends ItemView {
         console.log(error);
       }
     });
-    } else {
-      this.controller.changeModus('view');
-    }
   }
 
   beforeSubmit() {
-    this.submit();
+    if (Object.keys(this.form.data).length > 0) {
+      this.submit(this.form.data);
+    } else {
+      this.controller.changeModus('view');
+    }
   }
 
   layout(children, buttonLabel = 'submit', wrapInContainer = true) {