Merge GT-1721-upload-mulitple-images into staging

CruGlobal · Jan 31, 2024 · 00b2da3 · 00b2da3
2 parents 675ec8a + 0a01ea4
commit 00b2da3
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 34 deletions.
diff --git a/src/app/components/attachments/attachments.component.html b/src/app/components/attachments/attachments.component.html
@@ -46,29 +46,22 @@ <h5>Instructions</h5>
       </ul>
       <hr />
     </div>
-    <h5>Upload new attachment</h5>
+    <h5>Upload new attachments</h5>
     <div class="input-group mb-3">
       <div class="custom-file">
         <input
           type="file"
           ng2FileSelect
           [uploader]="uploader"
+          multiple
           #uploadElement
           class="custom-file-input"
           id="newAttachment"
-          (change)="fileUploaderOnChange()"
         />
         <label
           class="custom-file-label"
           for="newAttachment"
-          *ngIf="fileName != ''"
-          >{{ fileName }}</label
-        >
-        <label
-          class="custom-file-label"
-          for="newAttachment"
-          *ngIf="fileName == ''"
-          >Choose file</label
+          >Choose files</label
         >
       </div>
       <select [(ngModel)]="selectedResource" class="custom-select">
@@ -77,23 +70,76 @@ <h5>Upload new attachment</h5>
           {{ resource.name }}
         </option>
       </select>
-      <div class="input-group-append">
-        <button (click)="uploadNewFile()" class="btn btn-success">
-          <i class="fa fa-cloud-upload"></i> Upload
+    </div>
+
+    <h5>Upload queue</h5>
+    <p>Queue length: {{ uploader?.queue?.length }}</p>
+    <table class="table">
+        <thead>
+        <tr>
+            <th width="50%">Name</th>
+            <th>Size</th>
+            <th>Progress</th>
+            <th>Status</th>
+            <th>Actions</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let item of uploader.queue">
+            <td><strong>{{ item?.file?.name }}</strong></td>
+            <td *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
+            <td *ngIf="uploader.options.isHTML5">
+                <div class="progress" style="margin-bottom: 0;">
+                    <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
+                </div>
+            </td>
+            <td class="text-center">
+                <span *ngIf="item.isSuccess" class="text-success"><i class="fa fa-check-circle"></i></span>
+                <span *ngIf="item.isCancel" class="text-warning"><i class="fa fa-ban"></i></span>
+                <span *ngIf="item.isError" class="text-danger"><i class="fa fa-exclamation-triangle"></i></span>
+            </td>
+            <td nowrap>
+                <button type="button" class="btn btn-success"
+                        (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
+                    <span class="glyphicon glyphicon-upload"></span> Upload
+                </button>
+                <button type="button" class="btn btn-warning"
+                        (click)="item.cancel()" [disabled]="!item.isUploading">
+                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel
+                </button>
+                <button type="button" class="btn btn-danger"
+                        (click)="item.remove()">
+                    <span class="glyphicon glyphicon-trash"></span> Remove
+                </button>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+    <div>
+      <ngb-alert type="info" [dismissible]="false" *ngIf="uploader.isUploading">
+        Uploading...
+      </ngb-alert>
+      <ngb-alert type="success" [dismissible]="false" *ngIf="success">
+        Success!
+      </ngb-alert>
+    </div>
+    <div class="btn-toolbar justify-content-between">
+      <button type="button" class="btn btn-danger" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
+        <i class="fa fa-trash"></i> Remove all
+      </button>
+      <div>
+        <button type="button" class="btn btn-warning" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
+          <i class="fa fa-ban"></i> Cancel all
+        </button>
+        <button type="button" class="btn btn-success ml-2" (click)="uploadNewFile()" [disabled]="!uploader.getNotUploadedItems().length">
+          <i class="fa fa-cloud-upload"></i> Upload all
         </button>
       </div>
     </div>
-
-    <ngb-alert type="info" [dismissible]="false" *ngIf="uploader.isUploading">
-      Uploading...
-    </ngb-alert>
-    <ngb-alert type="success" [dismissible]="false" *ngIf="success">
-      Success!
-    </ngb-alert>
   </div>
 </div>
-<ngb-alert type="danger" [dismissible]="false" *ngIf="errorMessage">
-  {{ errorMessage }}
+<ngb-alert type="danger" [dismissible]="false" *ngFor="let error of errorMessages">
+  {{ error }}
 </ngb-alert>
 <ngb-alert type="warning" [dismissible]="false" *ngIf="loading">
   Loading...

diff --git a/src/app/components/attachments/attachments.component.spec.ts b/src/app/components/attachments/attachments.component.spec.ts
@@ -11,7 +11,7 @@ import { FormsModule } from '@angular/forms';
 import { FileSelectDirective } from 'ng2-file-upload';
 import { NgArrayPipesModule } from 'ngx-pipes';
 
-describe('AttachmentsComponent', () => {
+fdescribe('AttachmentsComponent', () => {
   let comp: AttachmentsComponent;
   let fixture: ComponentFixture<AttachmentsComponent>;
 
@@ -73,9 +73,7 @@ describe('AttachmentsComponent', () => {
   it('includes auth header with file uploads', () => {
     spyOn(comp.uploader, 'uploadAll');
 
-    fixture.debugElement
-      .query(By.css('.btn.btn-success'))
-      .nativeElement.click();
+    comp.uploadNewFile()
 
     expect(comp.uploader.authToken).toBe(authToken);
   });

diff --git a/src/app/components/attachments/attachments.component.ts b/src/app/components/attachments/attachments.component.ts
@@ -26,7 +26,7 @@ export class AttachmentsComponent implements OnInit {
   showInstructions = false;
   loading = false;
   success = false;
-  errorMessage: string;
+  errorMessages: string[];
   fileName: String = '';
 
   constructor(
@@ -46,14 +46,12 @@ export class AttachmentsComponent implements OnInit {
     };
 
     this.uploader.onErrorItem = (item, response, status, headers) => {
-      this.errorMessage = JSON.parse(response).errors[0].detail;
+      const errorText = JSON.parse(response).errors[0].detail || 'Unknown error occured'
+      this.errorMessages = [...this.errorMessages, errorText];
       return { item, response, status, headers };
     };
   }
 
-  fileUploaderOnChange(): void {
-    this.fileName = this.uploadElement.nativeElement.files[0].name;
-  }
 
   private loadAttachments(): void {
     this.loading = true;
@@ -71,8 +69,7 @@ export class AttachmentsComponent implements OnInit {
   }
 
   uploadNewFile(): void {
-    this.errorMessage = null;
-    this.uploadElement.nativeElement.value = '';
+    this.errorMessages = [];
 
     const resourceId = this.selectedResource ? this.selectedResource.id : null;
 
@@ -111,6 +108,6 @@ export class AttachmentsComponent implements OnInit {
   }
 
   private handleError(message: string): void {
-    this.errorMessage = message;
+    this.errorMessages = [message];
   }
 }