routing for vault

src/app/vault/vault.component.ts

@@ -5,6 +5,13 @@ import {
     OnInit,
 } from '@angular/core';
 
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { Location } from '@angular/common';
+
 import { CipherService } from 'jslib/abstractions/cipher.service';
 
 import { CipherView } from 'jslib/models/view/cipherView';
@@ -16,26 +23,47 @@ import { CipherView } from 'jslib/models/view/cipherView';
 export class VaultComponent implements OnInit {
     ciphers: CipherView[];
     cipherId: string;
-    details: string;
+    action: string;
 
-    constructor(private cipherService: CipherService) {
+    constructor(private cipherService: CipherService, 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']) {
+                if (params['action'] === 'edit') {
+                    this.editCipher(params['cipherId']);
+                } else {
+                    this.viewCipher(params['cipherId']);
+                }
+            } else if (params['action'] === 'add') {
+                this.addCipher();
+            }
+        });
     }
 
     viewCipher(id: string) {
         this.cipherId = id;
-        this.details = 'view';
+        this.action = 'view';
+        this.go({ action: this.action, cipherId: id });
     }
 
     editCipher(id: string) {
         this.cipherId = id;
-        this.details = 'edit';
+        this.action = 'edit';
+        this.go({ action: this.action, cipherId: id });
     }
 
     addCipher() {
-        this.details = 'add';
+        this.action = 'add';
+        this.go({ action: this.action });
+    }
+
+    private go(queryParams: any) {
+        const url = this.router.createUrlTree(['vault'], { queryParams: queryParams }).toString();
+        this.location.go(url);
     }
 }