Merge branch 'development' of https://github.com/kanselarij-vlaandere…

…n/kaleidos-frontend into DES/enhancement/#732-vlc-refactor

app/components/documents/document-card.hbs

@@ -197,7 +197,7 @@
         <WebComponents::AuLabel>{{t "name"}}</WebComponents::AuLabel>
         <WebComponents::VlFormInput
           @value={{this.newPiece.name}}/>
-        <Documents::DocumentUpload
+        <Documents::UploadedDocument
           @piece={{this.newPiece}}
           @onDelete={{perform this.deleteUploadedPiece}} />
       {{else}}

app/components/documents/document-upload.js → app/components/documents/uploaded-document.js

@@ -5,7 +5,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { alias } from '@ember/object/computed';
 
-export default class DocumentUpload extends Component {
+export default class UploadedDocument extends Component {
   @service store;
 
   @tracked documentTypes = [];
@@ -19,13 +19,11 @@ export default class DocumentUpload extends Component {
 
   @task
   *loadData() {
-    if (!this.documentTypes.length) {
-      this.documentTypes = yield this.store.query('document-type', {
-        page: {
-          size: 50,
-        },
-      });
-    }
+    this.documentTypes = yield this.store.query('document-type', {
+      page: {
+        size: 50,
+      },
+    });
 
     this.documentContainer = yield this.args.piece.documentContainer;
     this.selectedDocumentType = yield this.documentContainer.type;

app/components/publications/publication/documents/documents-upload-modal.hbs

@@ -0,0 +1,46 @@
+<WebComponents::AuModal @resized={{this.isExpanded}}>
+  <WebComponents::AuModal::Header
+    @resizeable={{true}}
+    @title={{t "documents-add"}}
+    @changeIcon={{this.isExpanded}}
+    @toggleSize={{this.toggleSize}}
+    @closeModal={{perform this.cancelUploadPieces}}
+  />
+  <WebComponents::AuModal::Body>
+    {{#if this.savePieces.isRunning}}
+      <WebComponents::VlLoader @text={{t "documents-loading-text"}} />
+    {{else}}
+      <WebComponents::AuFileUploader
+        @fullHeight={{eq this.newPieces.length 0}}
+        @multipleFiles={{true}}
+        @uploadedFileAction={{this.uploadPiece}}
+      />
+      {{! TODO vervangen met correct design (nog in flux), au css en componenten }}
+      <div class="upload-container">
+        {{#each this.newPieces as |piece|}}
+          <Documents::UploadedDocument
+            @piece={{piece}}
+            @allowDocumentContainerEdit={{true}}
+            @onDelete={{perform this.deleteUploadedPiece piece}}
+          />
+        {{/each}}
+      </div>
+    {{/if}}
+  </WebComponents::AuModal::Body>
+  <WebComponents::AuModal::Footer
+    @cancelModal={{perform this.cancelUploadPieces}}
+  >
+    {{#if this.savePieces.isRunning}}
+      <Utils::SimpleSpinner />
+    {{else}}
+      <WebComponents::AuButton
+        data-test-au-modal-footer-save
+        @skin="primary"
+        @disabled={{eq this.newPieces.length 0}}
+        {{on "click" (perform this.savePieces)}}
+      >
+        {{t "documents-add"}}
+      </WebComponents::AuButton>
+    {{/if}}
+  </WebComponents::AuModal::Footer>
+</WebComponents::AuModal>

app/components/publications/publication/documents/documents-upload-modal.js

@@ -0,0 +1,84 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency-decorators';
+import { all } from 'ember-concurrency';
+
+export default class PublicationsPublicationDocumentsDocumentsUploadModalComponent extends Component {
+  @inject store;
+
+  @tracked isExpanded = false;
+  @tracked newPieces = [];
+
+  @action
+  toggleSize() {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  @action
+  uploadPiece(file) {
+    const now = new Date();
+    const documentContainer = this.store.createRecord('document-container', {
+      created: now,
+    });
+    const piece = this.store.createRecord('piece', {
+      created: now,
+      modified: now,
+      file: file,
+      accessLevel: this.defaultAccessLevel,
+      confidential: false,
+      name: file.filenameWithoutExtension,
+      documentContainer: documentContainer,
+    });
+    this.newPieces.pushObject(piece);
+  }
+
+  @task
+  *cancelUploadPieces() {
+    const deleteTasks = this.newPieces.map((piece) => this.deleteUploadedPiece.perform(piece));
+    yield all(deleteTasks);
+    this.args.onCancel();
+  }
+
+  @task
+  *deleteUploadedPiece(piece) {
+    const file = yield piece.file;
+    yield file.destroyRecord();
+    this.newPieces.removeObject(piece);
+    const documentContainer = yield piece.documentContainer;
+    yield documentContainer.destroyRecord();
+    yield piece.destroyRecord();
+  }
+
+  @action
+  cancelDeleteExistingPiece() {
+    this.pieceToDelete = null;
+    this.isVerifyingDelete = false;
+  }
+
+  @task
+  *savePieces() {
+    const savePromises = this.newPieces.map(async(piece) => {
+      try {
+        await this.savePiece.perform(piece);
+      } catch (error) {
+        await this.deleteUploadedPiece.perform(piece);
+        throw error;
+      }
+    });
+    yield all(savePromises);
+    yield this.args.onSaveTask.perform(this.newPieces);
+    this.newPieces = [];
+  }
+
+  /**
+   * Save a new document container and the piece it wraps
+   */
+  @task
+  *savePiece(piece) {
+    const documentContainer = yield piece.documentContainer;
+    yield documentContainer.save();
+    yield piece.save();
+  }
+}

app/components/web-components/au-file-uploader.hbs

@@ -67,10 +67,10 @@
   </FileDropzone>
 </div>
 
-
+{{!-- temporary fix, waiting for new css --}}
 {{#if this.isLoading}}
   <WebComponents::AuLoadingOverlay
           @title={{t "upload-file"}}
           @message={{t "upload-file"}}
   />
-{{/if}}
+{{/if}}

app/components/web-components/au-file-uploader.js

@@ -19,8 +19,6 @@ export default class FileUploader extends Component {
 
   @tracked isLoading = null;
 
-  @tracked showLoader = false;
-
   @tracked filesInQueue = alias('fileQueue.files');
   uploadedFileAction = this.args.uploadedFileAction;
 
@@ -36,7 +34,6 @@ export default class FileUploader extends Component {
   }) *uploadFileTask(file) {
     try {
       this.isLoading = true;
-      this.showLoader = true;
       file.readAsDataURL().then(() => {
       });
       const response = yield file.upload('/files');
@@ -48,7 +45,6 @@ export default class FileUploader extends Component {
       console.warn('An exception occurred', exception);
     } finally {
       this.isLoading = false;
-      this.showLoader = false;
     }
   }
 

app/pods/agenda/agendaitems/agendaitem/documents/template.hbs

@@ -67,7 +67,7 @@
           @uploadedFileAction={{this.uploadPiece}} />
         <div class="upload-container">
           {{#each this.newPieces as |piece|}}
-            <Documents::DocumentUpload
+            <Documents::UploadedDocument
               @piece={{piece}}
               @allowDocumentContainerEdit={{true}}
               @onDelete={{perform this.deletePiece piece}} />

app/pods/agenda/documents/template.hbs

@@ -56,7 +56,7 @@
             @uploadedFileAction={{this.uploadPiece}} />
           <div class="upload-container">
             {{#each this.newPieces as |piece|}}
-              <Documents::DocumentUpload
+              <Documents::UploadedDocument
                 @piece={{piece}}
                 @allowDocumentContainerEdit={{true}}
                 @onDelete={{perform this.deletePiece piece}} />

app/pods/cases/case/subcases/subcase/documents/template.hbs

@@ -66,7 +66,7 @@
           @uploadedFileAction={{this.uploadPiece}} />
         <div class="upload-container">
           {{#each this.newPieces as |piece|}}
-            <Documents::DocumentUpload
+            <Documents::UploadedDocument
               @piece={{piece}}
               @allowDocumentContainerEdit={{true}}
               @onDelete={{perform this.deletePiece piece}} />