From eee5f6ff32e39d86704a6aff4c88baf0a5d4cdd0 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Fri, 26 Jan 2018 14:56:54 -0500 Subject: [PATCH] combine edit into add/edit component --- src/app/app.module.ts | 6 +-- ...component.html => add-edit.component.html} | 8 ++- ...add.component.ts => add-edit.component.ts} | 51 ++++++++++++++----- src/app/vault/ciphers.component.ts | 4 +- src/app/vault/edit.component.html | 32 ------------ src/app/vault/edit.component.ts | 35 ------------- src/app/vault/vault.component.html | 16 +++--- src/app/vault/vault.component.ts | 45 ++++++++++++---- src/app/vault/view.component.ts | 4 +- src/scss/box.scss | 2 +- src/scss/styles.scss | 1 + 11 files changed, 94 insertions(+), 110 deletions(-) rename src/app/vault/{add.component.html => add-edit.component.html} (97%) rename src/app/vault/{add.component.ts => add-edit.component.ts} (78%) delete mode 100644 src/app/vault/edit.component.html delete mode 100644 src/app/vault/edit.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7d8bee83..10b15b01 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,10 +10,9 @@ import { NgModule } from '@angular/core'; import { ServicesModule } from './services/services.module'; import { ToasterModule } from 'angular2-toaster'; -import { AddComponent } from './vault/add.component'; +import { AddEditComponent } from './vault/add-edit.component'; import { AppComponent } from './app.component'; import { CiphersComponent } from './vault/ciphers.component'; -import { EditComponent } from './vault/edit.component'; import { FallbackSrcDirective } from './directives/fallback-src.directive'; import { GroupingsComponent } from './vault/groupings.component'; import { I18nPipe } from './pipes/i18n.pipe'; @@ -38,10 +37,9 @@ import { ViewComponent } from './vault/view.component'; ToasterModule, ], declarations: [ - AddComponent, + AddEditComponent, AppComponent, CiphersComponent, - EditComponent, FallbackSrcDirective, GroupingsComponent, I18nPipe, diff --git a/src/app/vault/add.component.html b/src/app/vault/add-edit.component.html similarity index 97% rename from src/app/vault/add.component.html rename to src/app/vault/add-edit.component.html index 67ff15c7..731fafe5 100644 --- a/src/app/vault/add.component.html +++ b/src/app/vault/add-edit.component.html @@ -5,7 +5,7 @@ {{'itemInformation' | i18n}}
-
+
+ + {{'attachments' | i18n}} + +
@@ -233,7 +237,7 @@ -
diff --git a/src/app/vault/add.component.ts b/src/app/vault/add-edit.component.ts similarity index 78% rename from src/app/vault/add.component.ts rename to src/app/vault/add-edit.component.ts index 8ca54e1f..dde997a9 100644 --- a/src/app/vault/add.component.ts +++ b/src/app/vault/add-edit.component.ts @@ -1,9 +1,11 @@ -import * as template from './add.component.html'; +import * as template from './add-edit.component.html'; import { Component, + EventEmitter, Input, OnChanges, + Output, } from '@angular/core'; import { Angulartics2 } from 'angulartics2'; @@ -27,11 +29,17 @@ import { LoginView } from 'jslib/models/view/loginView'; import { SecureNoteView } from 'jslib/models/view/secureNoteView'; @Component({ - selector: 'app-vault-add', + selector: 'app-vault-add-edit', template: template, }) -export class AddComponent implements OnChanges { +export class AddEditComponent implements OnChanges { @Input() folderId: string; + @Input() cipherId: string; + @Output() onSavedCipher = new EventEmitter(); + @Output() onCancelled = new EventEmitter(); + @Output() onEditAttachments = new EventEmitter(); + + editMode: boolean = false; cipher: CipherView; folders: FolderView[]; cipherType = CipherType; @@ -94,14 +102,22 @@ export class AddComponent implements OnChanges { } async ngOnChanges() { - this.cipher = new CipherView(); - this.cipher.folderId = null; // TODO - this.cipher.type = CipherType.Login; - this.cipher.login = new LoginView(); - this.cipher.card = new CardView(); - this.cipher.identity = new IdentityView(); - this.cipher.secureNote = new SecureNoteView(); - this.cipher.secureNote.type = SecureNoteType.Generic; + this.editMode = this.cipherId != null; + + if (this.editMode) { + this.editMode = true; + const cipher = await this.cipherService.get(this.cipherId); + this.cipher = await cipher.decrypt(); + } else { + this.cipher = new CipherView(); + this.cipher.folderId = null; // TODO + this.cipher.type = CipherType.Login; + this.cipher.login = new LoginView(); + this.cipher.card = new CardView(); + this.cipher.identity = new IdentityView(); + this.cipher.secureNote = new SecureNoteView(); + this.cipher.secureNote.type = SecureNoteType.Generic; + } this.folders = await this.folderService.getAllDecrypted(); } @@ -115,8 +131,9 @@ export class AddComponent implements OnChanges { const cipher = await this.cipherService.encrypt(this.cipher); await this.cipherService.saveWithServer(cipher); - this.analytics.eventTrack.next({ action: 'Added Cipher' }); - this.toasterService.popAsync('success', null, this.i18nService.t('addedItem')); + 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() { @@ -135,4 +152,12 @@ export class AddComponent implements OnChanges { this.cipher.fields.splice(i, 1); } }; + + cancel() { + this.onCancelled.emit(this.cipher); + }; + + attachments() { + this.onEditAttachments.emit(this.cipher); + }; } diff --git a/src/app/vault/ciphers.component.ts b/src/app/vault/ciphers.component.ts index 7159dce9..1d4efd91 100644 --- a/src/app/vault/ciphers.component.ts +++ b/src/app/vault/ciphers.component.ts @@ -15,11 +15,11 @@ import { CipherView } from 'jslib/models/view/cipherView'; }) export class CiphersComponent { @Input() ciphers: CipherView[]; - @Output() onCipherClicked = new EventEmitter(); + @Output() onCipherClicked = new EventEmitter(); @Output() onAddCipher = new EventEmitter(); cipherClicked(cipher: CipherView) { - this.onCipherClicked.emit(cipher.id); + this.onCipherClicked.emit(cipher); } addCipher() { diff --git a/src/app/vault/edit.component.html b/src/app/vault/edit.component.html deleted file mode 100644 index 4d0a59fe..00000000 --- a/src/app/vault/edit.component.html +++ /dev/null @@ -1,32 +0,0 @@ -
-
-
-
- {{'itemInformation' | i18n}} -
-
-
- {{'name' | i18n}} - {{cipher.name}} -
-
-
- {{'uri' | i18n}} - {{cipher.login.uri}} -
-
- {{'username' | i18n}} - {{cipher.login.username}} -
-
- {{'password' | i18n}} - {{cipher.login.password}} -
-
-
-
-
-
-
- {{'editItem' | i18n}} -
diff --git a/src/app/vault/edit.component.ts b/src/app/vault/edit.component.ts deleted file mode 100644 index 760c162b..00000000 --- a/src/app/vault/edit.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -import * as template from './edit.component.html'; - -import { - Component, - EventEmitter, - Input, - OnChanges, - Output, -} from '@angular/core'; - -import { CipherService } from 'jslib/abstractions/cipher.service'; - -import { CipherView } from 'jslib/models/view/cipherView'; - -@Component({ - selector: 'app-vault-edit', - template: template, -}) -export class EditComponent implements OnChanges { - @Input() cipherId: string; - @Output() onEditCipherClicked = new EventEmitter(); - cipher: CipherView; - - constructor(private cipherService: CipherService) { - } - - async ngOnChanges() { - const cipher = await this.cipherService.get(this.cipherId); - this.cipher = await cipher.decrypt(); - } - - editCipherClicked(id: string) { - this.onEditCipherClicked.emit(id); - } -} diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html index 255afdf0..2751612a 100644 --- a/src/app/vault/vault.component.html +++ b/src/app/vault/vault.component.html @@ -11,12 +11,12 @@ [cipherId]="cipherId" (onEditCipher)="editCipher($event)"> - - - - + + diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts index 0c95efa0..a37eb1d5 100644 --- a/src/app/vault/vault.component.ts +++ b/src/app/vault/vault.component.ts @@ -34,10 +34,12 @@ export class VaultComponent implements OnInit { this.route.queryParams.subscribe((params) => { if (params['cipherId']) { + const cipherView = new CipherView(); + cipherView.id = params['cipherId']; if (params['action'] === 'edit') { - this.editCipher(params['cipherId']); + this.editCipher(cipherView); } else { - this.viewCipher(params['cipherId']); + this.viewCipher(cipherView); } } else if (params['action'] === 'add') { this.addCipher(); @@ -45,24 +47,24 @@ export class VaultComponent implements OnInit { }); } - viewCipher(id: string) { - if (this.action === 'view' && this.cipherId === id) { + viewCipher(cipher: CipherView) { + if (this.action === 'view' && this.cipherId === cipher.id) { return; } - this.cipherId = id; + this.cipherId = cipher.id; this.action = 'view'; - this.go({ action: this.action, cipherId: id }); + this.go({ action: this.action, cipherId: this.cipherId }); } - editCipher(id: string) { - if (this.action === 'edit' && this.cipherId === id) { + editCipher(cipher: CipherView) { + if (this.action === 'edit' && this.cipherId === cipher.id) { return; } - this.cipherId = id; + this.cipherId = cipher.id; this.action = 'edit'; - this.go({ action: this.action, cipherId: id }); + this.go({ action: this.action, cipherId: this.cipherId }); } addCipher() { @@ -71,7 +73,28 @@ export class VaultComponent implements OnInit { } this.action = 'add'; - this.go({ action: this.action }); + this.cipherId = null; + this.go({ action: this.action, cipherId: this.cipherId }); + } + + savedCipher(cipher: CipherView) { + this.cipherId = cipher.id; + this.action = 'view'; + this.go({ action: this.action, cipherId: this.cipherId }); + } + + deletedCipher(cipher: CipherView) { + + } + + editCipherAttachments(cipher: CipherView) { + + } + + cancelledAddEdit(cipher: CipherView) { + this.cipherId = cipher.id; + this.action = this.cipherId != null ? 'view' : null; + this.go({ action: this.action, cipherId: this.cipherId }); } private go(queryParams: any) { diff --git a/src/app/vault/view.component.ts b/src/app/vault/view.component.ts index 51938a36..f453b537 100644 --- a/src/app/vault/view.component.ts +++ b/src/app/vault/view.component.ts @@ -32,7 +32,7 @@ import { FieldView } from 'jslib/models/view/fieldView'; }) export class ViewComponent implements OnChanges, OnDestroy { @Input() cipherId: string; - @Output() onEditCipher = new EventEmitter(); + @Output() onEditCipher = new EventEmitter(); cipher: CipherView; showPassword: boolean; isPremium: boolean; @@ -75,7 +75,7 @@ export class ViewComponent implements OnChanges, OnDestroy { } edit() { - this.onEditCipher.emit(this.cipher.id); + this.onEditCipher.emit(this.cipher); } togglePassword() { diff --git a/src/scss/box.scss b/src/scss/box.scss index ef6bc6b7..548ef5d2 100644 --- a/src/scss/box.scss +++ b/src/scss/box.scss @@ -47,7 +47,7 @@ border-radius: $border-radius; } - &:last-child { + &:last-child:not(.box-content-row-cf) { &:before { border: none; height: 0; diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 143c57d8..e452c8d4 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -73,6 +73,7 @@ a { input, select, textarea, button { font-size: $font-size-base; + font-family: $font-family-sans-serif; } textarea {