From 77d1d272cc6f8ac8dd878b262f4ff4329257fe0a Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Wed, 31 Jan 2018 21:56:47 -0500
Subject: [PATCH] add api actions to attachments page

---
 src/app/vault/attachments.component.html | 16 +++++-----
 src/app/vault/attachments.component.ts   | 39 ++++++++++++++++--------
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/app/vault/attachments.component.html b/src/app/vault/attachments.component.html
index 9fbf3902..1cba8ec6 100644
--- a/src/app/vault/attachments.component.html
+++ b/src/app/vault/attachments.component.html
@@ -1,6 +1,6 @@
 <div class="modal fade">
     <div class="modal-dialog">
-        <div class="modal-content">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-body">
                 <div class="box" *ngIf="cipher && cipher.hasAttachments">
                     <div class="box-header">
@@ -14,8 +14,9 @@
                             <small class="row-sub-label">{{a.sizeName}}</small>
                             <div class="action-buttons no-pad">
                                 <a class="row-btn" href="#" appStopClick appBlurClick title="{{'delete' | i18n}}"
-                                   (click)="delete(a)">
-                                    <i class="fa fa-lg fa-trash-o"></i>
+                                   (click)="delete(a)" #deleteBtn [appApiAction]="deletePromises[a.id]">
+                                    <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
+                                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
                                 </a>
                             </div>
                         </div>
@@ -28,7 +29,7 @@
                     <div class="box-content no-hover">
                         <div class="box-content-row">
                             <label for="file">{{'file' | i18n}}</label>
-                            <input type="file" id="file" name="file">
+                            <input type="file" id="file" name="file" required>
                         </div>
                     </div>
                     <div class="box-footer">
@@ -37,11 +38,12 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="primary" appBlurClick (click)="save()">
-                    <i class="fa fa-lg fa-save"></i> {{'save' | i18n}}
+                <button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}" [disabled]="form.loading">
+                    <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
+                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
                 </button>
                 <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
             </div>
-        </div>
+        </form>
     </div>
 </div>
diff --git a/src/app/vault/attachments.component.ts b/src/app/vault/attachments.component.ts
index 574e77f4..7b34b96d 100644
--- a/src/app/vault/attachments.component.ts
+++ b/src/app/vault/attachments.component.ts
@@ -32,6 +32,8 @@ export class AttachmentsComponent implements OnInit {
     cipherDomain: Cipher;
     hasUpdatedKey: boolean;
     canAccessAttachments: boolean;
+    formPromise: Promise<any>;
+    deletePromises: { [id: string]: Promise<any>; } = {};
 
     constructor(private cipherService: CipherService, private analytics: Angulartics2,
         private toasterService: ToasterService, private i18nService: I18nService,
@@ -53,7 +55,7 @@ export class AttachmentsComponent implements OnInit {
         }
     }
 
-    async save() {
+    async submit() {
         if (!this.hasUpdatedKey) {
             this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
                 this.i18nService.t('updateKey'));
@@ -74,10 +76,13 @@ export class AttachmentsComponent implements OnInit {
             return;
         }
 
-        this.cipherDomain = await this.cipherService.saveAttachmentWithServer(this.cipherDomain, files[0]);
-        this.cipher = await this.cipherDomain.decrypt();
-        this.analytics.eventTrack.next({ action: 'Added Attachment' });
-        this.toasterService.popAsync('success', null, this.i18nService.t('attachmentSaved'));
+        try {
+            this.formPromise = this.cipherService.saveAttachmentWithServer(this.cipherDomain, files[0]);
+            this.cipherDomain = await this.formPromise;
+            this.cipher = await this.cipherDomain.decrypt();
+            this.analytics.eventTrack.next({ action: 'Added Attachment' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('attachmentSaved'));
+        } catch { }
 
         // reset file input
         // ref: https://stackoverflow.com/a/20552042
@@ -87,16 +92,26 @@ export class AttachmentsComponent implements OnInit {
     }
 
     async delete(attachment: AttachmentView) {
+        if (this.deletePromises[attachment.id] != null) {
+            return;
+        }
+
         if (!confirm(this.i18nService.t('deleteAttachmentConfirmation'))) {
             return;
         }
 
-        await this.cipherService.deleteAttachmentWithServer(this.cipher.id, attachment.id);
-        this.analytics.eventTrack.next({ action: 'Deleted Attachment' });
-        this.toasterService.popAsync('success', null, this.i18nService.t('deletedAttachment'));
-        const i = this.cipher.attachments.indexOf(attachment);
-        if (i > -1) {
-            this.cipher.attachments.splice(i, 1);
-        }
+        try {
+            this.deletePromises[attachment.id] = this.cipherService.deleteAttachmentWithServer(
+                this.cipher.id, attachment.id);
+            await this.deletePromises[attachment.id];
+            this.analytics.eventTrack.next({ action: 'Deleted Attachment' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('deletedAttachment'));
+            const i = this.cipher.attachments.indexOf(attachment);
+            if (i > -1) {
+                this.cipher.attachments.splice(i, 1);
+            }
+        } catch { }
+
+        this.deletePromises[attachment.id] = null;
     }
 }