add/edit components setup

src/app/app.module.ts

@@ -7,8 +7,10 @@ import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { ServicesModule } from './services/services.module';
 
+import { AddComponent } from './vault/add.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';
@@ -27,8 +29,10 @@ import { ViewComponent } from './vault/view.component';
         ServicesModule,
     ],
     declarations: [
+        AddComponent,
         AppComponent,
         CiphersComponent,
+        EditComponent,
         FallbackSrcDirective,
         GroupingsComponent,
         I18nPipe,

src/app/vault/add.component.html

@@ -0,0 +1,35 @@
+<div class="content">
+    <div class="inner-content">
+        <div class="box">
+            <div class="box-header">
+                {{'itemInformation' | i18n}}
+            </div>
+            <div class="box-content" *ngIf="cipher">
+                <div class="box-content-row">
+                    <span class="row-label">{{'name' | i18n}}</span>
+                    {{cipher.name}}
+                </div>
+                <div *ngIf="cipher.login">
+                    <div class="box-content-row">
+                        <span class="row-label">{{'uri' | i18n}}</span>
+                        {{cipher.login.uri}}
+                    </div>
+                    <div class="box-content-row">
+                        <span class="row-label">{{'username' | i18n}}</span>
+                        {{cipher.login.username}}
+                    </div>
+                    <div class="box-content-row">
+                        <span class="row-label">{{'password' | i18n}}</span>
+                        {{cipher.login.password}}
+                    </div>
+                </div>
+            </div>
+            <div class="box-footer">
+                Some footer information for add.
+            </div>
+        </div>
+    </div>
+</div>
+<div class="footer">
+    {{'editItem' | i18n}}
+</div>

src/app/vault/add.component.ts

@@ -0,0 +1,27 @@
+import * as template from './add.component.html';
+
+import {
+    Component,
+    Input,
+    OnChanges,
+} from '@angular/core';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+@Component({
+    selector: 'app-vault-add',
+    template: template,
+})
+export class AddComponent implements OnChanges {
+    @Input() folderId: string;
+    cipher: CipherView;
+
+    constructor(private cipherService: CipherService) {
+    }
+
+    async ngOnChanges() {
+        this.cipher = new CipherView();
+    }
+}

src/app/vault/ciphers.component.html

@@ -4,7 +4,9 @@
         <i class="fa fa-search"></i>
     </div>
     <div class="right">
-        <a href="" title="{{'addItem' | i18n}}"><i class="fa fa-plus fa-lg"></i></a>
+        <a href="" title="{{'addItem' | i18n}}" appStopClick (click)="addCipher()">
+            <i class="fa fa-plus fa-lg"></i>
+        </a>
     </div>
 </div>
 <div class="content">
@@ -26,5 +28,5 @@
     </div>
 </div>
 <div class="footer">
-    {{'addItem' | i18n}}
+    <button (click)="addCipher()">{{'addItem' | i18n}}</button>
 </div>

src/app/vault/ciphers.component.ts

@@ -15,9 +15,14 @@ import { CipherView } from 'jslib/models/view/cipherView';
 })
 export class CiphersComponent {
     @Input() ciphers: CipherView[];
-    @Output() onCipherClicked = new EventEmitter<CipherView>();
+    @Output() onCipherClicked = new EventEmitter<string>();
+    @Output() onAddCipher = new EventEmitter();
 
     cipherClicked(cipher: CipherView) {
-        this.onCipherClicked.emit(cipher);
+        this.onCipherClicked.emit(cipher.id);
+    }
+
+    addCipher() {
+        this.onAddCipher.emit();
     }
 }

src/app/vault/edit.component.html

@@ -0,0 +1,35 @@
+<div class="content">
+    <div class="inner-content">
+        <div class="box">
+            <div class="box-header">
+                {{'itemInformation' | i18n}}
+            </div>
+            <div class="box-content" *ngIf="cipher">
+                <div class="box-content-row">
+                    <span class="row-label">{{'name' | i18n}}</span>
+                    {{cipher.name}}
+                </div>
+                <div *ngIf="cipher.login">
+                    <div class="box-content-row">
+                        <span class="row-label">{{'uri' | i18n}}</span>
+                        {{cipher.login.uri}}
+                    </div>
+                    <div class="box-content-row">
+                        <span class="row-label">{{'username' | i18n}}</span>
+                        {{cipher.login.username}}
+                    </div>
+                    <div class="box-content-row">
+                        <span class="row-label">{{'password' | i18n}}</span>
+                        {{cipher.login.password}}
+                    </div>
+                </div>
+            </div>
+            <div class="box-footer">
+                Some footer information for edit.
+            </div>
+        </div>
+    </div>
+</div>
+<div class="footer">
+    {{'editItem' | i18n}}
+</div>

src/app/vault/edit.component.ts

@@ -0,0 +1,35 @@
+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<string>();
+    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);
+    }
+}

src/app/vault/vault.component.html

@@ -1,5 +1,22 @@
 <div id="vault">
-    <app-vault-groupings id="groupings"></app-vault-groupings>
-    <app-vault-ciphers id="items" [ciphers]="ciphers" (onCipherClicked)="viewCipher($event)"></app-vault-ciphers>
-    <app-vault-view id="details" *ngIf="cipher && details === 'view'" [cipherId]="cipher.id"></app-vault-view>
+    <app-vault-groupings id="groupings">
+    </app-vault-groupings>
+    <app-vault-ciphers id="items"
+                       [ciphers]="ciphers"
+                       (onCipherClicked)="viewCipher($event)"
+                       (onAddCipher)="addCipher($event)">
+    </app-vault-ciphers>
+    <app-vault-view id="details"
+                    *ngIf="cipherId && details === 'view'"
+                    [cipherId]="cipherId"
+                    (onEditCipher)="editCipher($event)">
+    </app-vault-view>
+    <app-vault-edit id="details"
+                    *ngIf="cipherId && details === 'edit'"
+                    [cipherId]="cipherId">
+    </app-vault-edit>
+    <app-vault-add id="details"
+                   *ngIf="details === 'add'"
+                   [folderId]="null">
+    </app-vault-add>
 </div>

src/app/vault/vault.component.ts

@@ -15,7 +15,7 @@ import { CipherView } from 'jslib/models/view/cipherView';
 })
 export class VaultComponent implements OnInit {
     ciphers: CipherView[];
-    cipher: CipherView;
+    cipherId: string;
     details: string;
 
     constructor(private cipherService: CipherService) {
@@ -25,8 +25,17 @@ export class VaultComponent implements OnInit {
         this.ciphers = await this.cipherService.getAllDecrypted();
     }
 
-    viewCipher(cipher: CipherView) {
-        this.cipher = cipher;
+    viewCipher(id: string) {
+        this.cipherId = id;
         this.details = 'view';
     }
+
+    editCipher(id: string) {
+        this.cipherId = id;
+        this.details = 'edit';
+    }
+
+    addCipher() {
+        this.details = 'add';
+    }
 }

src/app/vault/view.component.html

@@ -31,5 +31,5 @@
     </div>
 </div>
 <div class="footer">
-    {{'editItem' | i18n}}
+    <button (click)="edit()">{{'editItem' | i18n}}</button>
 </div>

src/app/vault/view.component.ts

@@ -2,8 +2,10 @@ import * as template from './view.component.html';
 
 import {
     Component,
+    EventEmitter,
     Input,
     OnChanges,
+    Output,
 } from '@angular/core';
 
 import { CipherService } from 'jslib/abstractions/cipher.service';
@@ -16,6 +18,7 @@ import { CipherView } from 'jslib/models/view/cipherView';
 })
 export class ViewComponent implements OnChanges {
     @Input() cipherId: string;
+    @Output() onEditCipher = new EventEmitter<string>();
     cipher: CipherView;
 
     constructor(private cipherService: CipherService) {
@@ -25,4 +28,8 @@ export class ViewComponent implements OnChanges {
         const cipher = await this.cipherService.get(this.cipherId);
         this.cipher = await cipher.decrypt();
     }
+
+    edit() {
+        this.onEditCipher.emit(this.cipher.id);
+    }
 }