simplify errors, and loading

Author: xsalonx

lib/public/components/common/dataExport/exportTriggerAndModal.js

@@ -12,6 +12,7 @@
  */
 
 import { DATA_EXPORT_TYPES } from '../../../domain/enums/ExportTypes.js';
+import errorAlert from '../errorAlert.js';
 import spinner from '../spinner.js';
 import { h } from '/js/src/index.js';
 
@@ -73,15 +74,13 @@ const exportForm = (exportModel, modalHandler) => {
         ]);
     }));
 
-    const dataAvailable = exportModel.items.match({ Success: () => true, Other: () => false });
-
     const exportBtn = h('button.shadow-level1.btn.btn-success.mt2#send', {
-        disabled: !(fieldsSelected && dataAvailable),
+        disabled: !fieldsSelected,
         onclick: async () => {
             await exportModel.createExport();
             modalHandler.dismiss();
         },
-    }, dataAvailable ? 'Export' : 'Loading data...');
+    }, 'Export');
 
     const dataLength = exportModel.items.match({ Success: ({ length } = {}) => length, Other: () => null });
     const { totalExistingItemsCount } = exportModel;
@@ -103,8 +102,6 @@ const exportForm = (exportModel, modalHandler) => {
     ];
 };
 
-const errorDisplay = () => h('.danger', 'Data fetching failed');
-
 /**
  * A function to construct the exports data screen
  *
@@ -114,16 +111,13 @@ const errorDisplay = () => h('.danger', 'Data fetching failed');
  */
 const exportModal = (exportModel, modalHandler) => {
     exportModel.callForData();
-    const dataLoading = exportModel.items.match({ Loading: () => true, Other: () => false });
 
     return h('div#export-data-modal', [
-        h('.flex-row', [
-            h('h2.w-50', 'Export data'),
-            dataLoading ? h('.w-50', spinner({ size: 2, absolute: false })) : null,
-        ]),
+        h('h2.w-50', 'Export data'),
         exportModel.items.match({
-            NotAsked: () => errorDisplay(),
-            Failure: () => errorDisplay(),
+            NotAsked: () => errorAlert(),
+            Failure: (errors) => errorAlert(errors),
+            Loading: () => spinner({ size: 2, absolute: false }),
             Other: () => exportForm(exportModel, modalHandler),
         }),
     ]);

lib/public/models/DataExportModel.js

@@ -173,8 +173,7 @@ export class DataExportModel extends Observable {
      * @return {void}
      */
     setSelectedFields(selectedOptions) {
-        this._selectedFields = [];
-        [...selectedOptions].forEach(({ value }) => this._selectedFields.push(value));
+        this._selectedFields = Array.from(selectedOptions).map(({ value }) => value);
         this.notify();
         this._visualChange$.notify();
     }