delete item

src/app/vault/add-edit.component.ts

@@ -36,6 +36,7 @@ export class AddEditComponent implements OnChanges {
     @Input() folderId: string;
     @Input() cipherId: string;
     @Output() onSavedCipher = new EventEmitter<CipherView>();
+    @Output() onDeletedCipher = new EventEmitter<CipherView>();
     @Output() onCancelled = new EventEmitter<CipherView>();
     @Output() onEditAttachments = new EventEmitter<CipherView>();
 
@@ -134,7 +135,7 @@ export class AddEditComponent implements OnChanges {
         this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Cipher' : 'Added Cipher' });
         this.toasterService.popAsync('success', null, this.i18nService.t(this.editMode ? 'editedItem' : 'addedItem'));
         this.onSavedCipher.emit(this.cipher);
-    };
+    }
 
     addField() {
         if (this.cipher.fields == null) {
@@ -144,7 +145,7 @@ export class AddEditComponent implements OnChanges {
         const f = new FieldView();
         f.type = this.addFieldType;
         this.cipher.fields.push(f);
-    };
+    }
 
     removeField(field: FieldView) {
         const i = this.cipher.fields.indexOf(field);
@@ -155,9 +156,20 @@ export class AddEditComponent implements OnChanges {
 
     cancel() {
         this.onCancelled.emit(this.cipher);
-    };
+    }
 
     attachments() {
         this.onEditAttachments.emit(this.cipher);
-    };
+    }
+
+    async delete() {
+        if (!confirm(this.i18nService.t('deleteItemConfirmation'))) {
+            return;
+        }
+
+        await this.cipherService.deleteWithServer(this.cipher.id);
+        this.analytics.eventTrack.next({ action: 'Deleted Cipher' });
+        this.toasterService.popAsync('success', null, this.i18nService.t('deletedItem'));
+        this.onDeletedCipher.emit(this.cipher);
+    }
 }

src/app/vault/ciphers.component.ts

@@ -4,20 +4,49 @@ import {
     Component,
     EventEmitter,
     Input,
+    OnInit,
     Output,
 } from '@angular/core';
 
 import { CipherView } from 'jslib/models/view/cipherView';
 
+import { CipherService } from 'jslib/abstractions/cipher.service';
+
 @Component({
     selector: 'app-vault-ciphers',
     template: template,
 })
-export class CiphersComponent {
-    @Input() ciphers: CipherView[];
+export class CiphersComponent implements OnInit {
     @Output() onCipherClicked = new EventEmitter<CipherView>();
     @Output() onAddCipher = new EventEmitter();
 
+    ciphers: CipherView[] = [];
+
+    constructor(private cipherService: CipherService) {
+    }
+
+    async ngOnInit() {
+        await this.loadCiphers();
+    }
+
+    async refresh() {
+        await this.loadCiphers();
+    }
+
+    updateCipher(cipher: CipherView) {
+        const i = this.ciphers.findIndex((c) => c.id === cipher.id);
+        if (i > -1) {
+            this.ciphers[i] = cipher;
+        }
+    }
+
+    removeCipher(cipherId: string) {
+        const i = this.ciphers.findIndex((c) => c.id === cipherId);
+        if (i > -1) {
+            this.ciphers.splice(i, 1);
+        }
+    }
+
     cipherClicked(cipher: CipherView) {
         this.onCipherClicked.emit(cipher);
     }
@@ -25,4 +54,8 @@ export class CiphersComponent {
     addCipher() {
         this.onAddCipher.emit();
     }
+
+    private async loadCiphers() {
+        this.ciphers = await this.cipherService.getAllDecrypted();
+    }
 }

src/app/vault/vault.component.html

@@ -2,7 +2,6 @@
     <app-vault-groupings id="groupings">
     </app-vault-groupings>
     <app-vault-ciphers id="items"
-                       [ciphers]="ciphers"
                        (onCipherClicked)="viewCipher($event)"
                        (onAddCipher)="addCipher($event)">
     </app-vault-ciphers>
@@ -16,6 +15,7 @@
                         [folderId]="null"
                         [cipherId]="action === 'edit' ? cipherId : null"
                         (onSavedCipher)="savedCipher($event)"
+                        (onDeletedCipher)="deletedCipher($event)"
                         (onEditAttachments)="editCipherAttachments($event)"
                         (onCancelled)="cancelledAddEdit($event)">
     </app-vault-add-edit>

src/app/vault/vault.component.ts

@@ -3,6 +3,7 @@ import * as template from './vault.component.html';
 import {
     Component,
     OnInit,
+    ViewChild,
 } from '@angular/core';
 
 import {
@@ -12,7 +13,7 @@ import {
 
 import { Location } from '@angular/common';
 
-import { CipherService } from 'jslib/abstractions/cipher.service';
+import { CiphersComponent } from './ciphers.component';
 
 import { CipherView } from 'jslib/models/view/cipherView';
 
@@ -21,17 +22,15 @@ import { CipherView } from 'jslib/models/view/cipherView';
     template: template,
 })
 export class VaultComponent implements OnInit {
-    ciphers: CipherView[];
+    @ViewChild(CiphersComponent) ciphersComponent: CiphersComponent;
+
     cipherId: string;
     action: string;
 
-    constructor(private cipherService: CipherService, private route: ActivatedRoute, private router: Router,
-        private location: Location) {
+    constructor(private route: ActivatedRoute, private router: Router, private location: Location) {
     }
 
     async ngOnInit() {
-        this.ciphers = await this.cipherService.getAllDecrypted();
-
         this.route.queryParams.subscribe((params) => {
             if (params['cipherId']) {
                 const cipherView = new CipherView();
@@ -81,10 +80,14 @@ export class VaultComponent implements OnInit {
         this.cipherId = cipher.id;
         this.action = 'view';
         this.go({ action: this.action, cipherId: this.cipherId });
+        this.ciphersComponent.updateCipher(cipher);
     }
 
     deletedCipher(cipher: CipherView) {
-        
+        this.cipherId = null;
+        this.action = null;
+        this.go({ action: this.action, cipherId: this.cipherId });
+        this.ciphersComponent.removeCipher(cipher.id);
     }
 
     editCipherAttachments(cipher: CipherView) {