org component, org vault listing updates

src/app/vault/ciphers.component.html

@@ -52,7 +52,7 @@
         <i class="fa fa-spinner fa-spin text-muted" *ngIf="!loaded"></i>
         <ng-container *ngIf="loaded">
             <p>{{'noItemsInList' | i18n}}</p>
-            <button (click)="addCipher()" class="btn btn-outline-primary">
+            <button (click)="addCipher()" class="btn btn-outline-primary" *ngIf="showAddNew">
                 <i class="fa fa-plus fa-fw"></i>{{'addItem' | i18n}}</button>
         </ng-container>
     </div>

src/app/vault/ciphers.component.ts

@@ -1,6 +1,7 @@
 import {
     Component,
     EventEmitter,
+    Input,
     Output,
 } from '@angular/core';
 
@@ -24,6 +25,7 @@ const MaxCheckedCount = 500;
     templateUrl: 'ciphers.component.html',
 })
 export class CiphersComponent extends BaseCiphersComponent {
+    @Input() showAddNew = true;
     @Output() onAttachmentsClicked = new EventEmitter<CipherView>();
     @Output() onShareClicked = new EventEmitter<CipherView>();
     @Output() onCollectionsClicked = new EventEmitter<CipherView>();

src/app/vault/organizations.component.html

@@ -1,17 +0,0 @@
-<p *ngIf="!loaded" class="text-muted">
-    <i class="fa fa-spinner fa-spin"></i>
-</p>
-<ng-container *ngIf="loaded">
-    <ul class="fa-ul card-ul carets" *ngIf="organizations && organizations.length">
-        <li *ngFor="let o of organizations">
-            <a [routerLink]="['/organizations', o.id]" class="text-body">
-                <i class="fa-li fa fa-caret-right"></i> {{o.name}}
-            </a>
-        </li>
-    </ul>
-    <p *ngIf="!organizations || !organizations.length">{{'noOrganizationsList' | i18n}}</p>
-</ng-container>
-<a href="#" routerLink="/settings/create-organization" class="btn btn-block btn-outline-primary">
-    <i class="fa fa-plus fa-fw"></i>
-    {{'newOrganization' | i18n}}
-</a>

src/app/vault/organizations.component.ts

@@ -1,28 +0,0 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
-
-import { UserService } from 'jslib/abstractions/user.service';
-
-import { Organization } from 'jslib/models/domain/organization';
-
-@Component({
-    selector: 'app-vault-organizations',
-    templateUrl: 'organizations.component.html',
-})
-export class OrganizationsComponent implements OnInit {
-    organizations: Organization[];
-    loaded: boolean = false;
-
-    constructor(private userService: UserService) { }
-
-    async ngOnInit() {
-        await this.load();
-    }
-
-    async load() {
-        this.organizations = await this.userService.getAllOrganizations();
-        this.loaded = true;
-    }
-}

src/app/vault/vault.component.html

@@ -39,7 +39,7 @@
                             </a>
                         </div>
                     </div>
-                    <button type="button" class="btn btn-primary btn-sm" (click)="addCipher()" appBlurClick>
+                    <button type="button" class="btn btn-outline-primary btn-sm" (click)="addCipher()" appBlurClick>
                         <i class="fa fa-plus fa-fw"></i>{{'addItem' | i18n}}
                     </button>
                 </div>
@@ -56,10 +56,10 @@
             </div>
             <div class="card mt-3">
                 <div class="card-header">
-                    Organizations
+                    {{'organizations' | i18n}}
                 </div>
                 <div class="card-body">
-                    <app-vault-organizations></app-vault-organizations>
+                    <app-organizations [vault]="true"></app-organizations>
                 </div>
             </div>
         </div>

src/app/vault/vault.component.ts

@@ -91,6 +91,7 @@ export class VaultComponent implements OnInit {
     }
 
     async clearGroupingFilters() {
+        this.ciphersComponent.showAddNew = true;
         this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchVault');
         await this.ciphersComponent.load();
         this.clearFilters();
@@ -98,6 +99,7 @@ export class VaultComponent implements OnInit {
     }
 
     async filterFavorites() {
+        this.ciphersComponent.showAddNew = true;
         this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchFavorites');
         await this.ciphersComponent.load((c) => c.favorite);
         this.clearFilters();
@@ -106,6 +108,7 @@ export class VaultComponent implements OnInit {
     }
 
     async filterCipherType(type: CipherType) {
+        this.ciphersComponent.showAddNew = true;
         this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchType');
         await this.ciphersComponent.load((c) => c.type === type);
         this.clearFilters();
@@ -114,6 +117,7 @@ export class VaultComponent implements OnInit {
     }
 
     async filterFolder(folderId: string) {
+        this.ciphersComponent.showAddNew = true;
         folderId = folderId === 'none' ? null : folderId;
         this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchFolder');
         await this.ciphersComponent.load((c) => c.folderId === folderId);
@@ -123,6 +127,7 @@ export class VaultComponent implements OnInit {
     }
 
     async filterCollection(collectionId: string) {
+        this.ciphersComponent.showAddNew = false;
         this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchCollection');
         await this.ciphersComponent.load((c) => c.collectionIds.indexOf(collectionId) > -1);
         this.clearFilters();