get zip-download correctly working

app/components/template-exporter.gjs

@@ -3,41 +3,102 @@ import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
 import { task } from 'ember-concurrency';
 import { service } from '@ember/service';
 import { on } from '@ember/modifier';
+import { download } from '../utils/file';
+import t from 'ember-intl/helpers/t';
 
+/**
+ * @typedef TemplateExporterArgs
+ * @property {Array<string>|Set<string>} [templateUris]
+ * @property {Array<string>|Set<string>} [snippetListUris]
+ */
+
+/**
+ * @extends {Component<TemplateExporterArgs>}
+ */
 export default class TemplateExporter extends Component {
   @service toaster;
   @service intl;
+  /** @type {import('../services/mu-task').default} */
   @service muTask;
 
   get disabled() {
-    return this.args.templateUris.size === 0;
+    return this.templateUris.length === 0 && this.snippetListUris.length === 0;
+  }
+
+  get templateUris() {
+    return [...(this.args.templateUris ?? [])];
+  }
+
+  get snippetListUris() {
+    return [...(this.args.snippetListUris ?? [])];
+  }
+
+  createLoadingToast() {
+    return this.toaster.loading(
+      this.intl.t('template-export.toast.loading.message'),
+      this.intl.t('template-export.toast.loading.title'),
+      {
+        closable: false,
+      },
+    );
+  }
+
+  createSuccessToast() {
+    return this.toaster.success(
+      this.intl.t('template-export.toast.success.message'),
+      this.intl.t('template-export.toast.success.title'),
+      {
+        timeOut: 2000,
+        closable: true,
+      },
+    );
+  }
+
+  createErrorToast() {
+    return this.toaster.error(
+      this.intl.t('template-export.toast.error.message'),
+      this.intl.t('template-export.toast.error.title'),
+      {
+        closable: true,
+      },
+    );
+  }
+
+  closeToast(toast) {
+    this.toaster.close(toast);
   }
 
   download = task(async () => {
+    const loadingToast = this.createLoadingToast();
     try {
       const taskId = await this.muTask.fetchTaskifiedEndpoint(
         '/export-templates',
         {
           method: 'POST',
           body: JSON.stringify({
-            documentContainerUris: [...this.args.templateUris.values()],
-            snippetListUris: this.args.snippetListUris
-              ? [...this.args.snippetListUris.values()]
-              : [],
+            documentContainerUris: this.templateUris,
+            snippetListUris: this.snippetListUris,
           }),
           headers: {
             'Content-Type': 'application/json',
           },
         },
       );
-      // TODO add extra params so that we can `include` result and file
-      const task = await this.muTask.waitForMuTaskTask.perform(taskId, 400);
+      // For some reason we cannot 'include' the 'result.file' relationship here (probably related to polymorphism)
+      const task = await this.muTask.waitForMuTaskTask.perform(
+        taskId,
+        { include: 'result' },
+        400,
+      );
       const result = await task.result;
       const file = await result.file;
-      console.log('Successfully exported', task, file.downloadLink);
+      await download(file);
+      this.closeToast(loadingToast);
+      this.createSuccessToast();
     } catch (err) {
-      console.warn('failed export!', err);
-      this.toaster.error('Error exporting templates', { timeOut: 1000 });
+      console.error(err);
+      this.closeToast(loadingToast);
+      this.createErrorToast();
     }
   });
 
@@ -48,7 +109,7 @@ export default class TemplateExporter extends Component {
       @disabled={{this.disabled}}
       @loading={{this.download.isRunning}}
     >
-      Export
+      {{t 'template-export.button'}}
     </AuButton>
   </template>
 }

app/services/mu-task.js

@@ -2,30 +2,39 @@ import Service, { service } from '@ember/service';
 import { task, timeout } from 'ember-concurrency';
 import { JOB_STATUSES } from '../utils/constants';
 
+/**
+ * @typedef {object} QueryOptions
+ */
+
 export default class MuTaskService extends Service {
   /** @type {import('./store').default} */
   @service store;
 
-  fetchMuTask(taskId) {
+  /**
+   * @param {string} taskId
+   * @param {QueryOptions} options
+   */
+  fetchMuTask(taskId, options) {
     try {
-      return this.store.findRecord('task', taskId);
+      return this.store.findRecord('task', taskId, options);
     } catch (e) {
       throw new Error(`An error occured while fetching task ${taskId}`);
     }
   }
 
   /**
    * @param {string} taskId
+   * @param {QueryOptions} options
    * @param {number} [pollDelayMs] time to wait between each status poll
    * @param {number} [timeoutMs] maximum time to wait before throwing
    * */
   waitForMuTaskTask = task(
-    async (taskId, pollDelayMs = 1000, timeoutMs = 300000) => {
+    async (taskId, options = {}, pollDelayMs = 1000, timeoutMs = 300000) => {
       const startTime = Date.now();
       let task;
       do {
         await timeout(pollDelayMs);
-        task = await this.fetchMuTask(taskId);
+        task = await this.fetchMuTask(taskId, options);
       } while (
         (task.status === JOB_STATUSES.busy ||
           task.status === JOB_STATUSES.scheduled) &&

translations/en-us.yaml

@@ -225,3 +225,16 @@ search-form:
 regenerate-variable-uris:
   modal-title: Regenerate variable URIs
   button: Regenerate
+
+template-export:
+  button: Export
+  toast:
+    loading:
+      title: Exporting templates
+      message: Preparing export-archive
+    success:
+      title: Templates successfully exported
+      message: Downloading export-archive
+    error:
+      title: Template-export failed
+      message: An error occured while exporting the selected templates

translations/nl-BE.yaml

@@ -219,3 +219,16 @@ search-form:
 regenerate-variable-uris:
   modal-title: Variabele URI's opnieuw genereren
   button: Regenereer
+
+template-export:
+  button: Exporteren
+  toast:
+    loading:
+      title: Sjablonen exporteren
+      message: Exportbestand aan het voorbereiden
+    success:
+      title: Sjablonen succesvol geëxporteerd
+      message: Exportbestand aan het downloaden
+    error:
+      title: Exporteren mislukt
+      message: Er is een probleem opgetreden bij het exporteren van de geselecteerde sjablonen