org component loaded independently

src/app/layouts/organization-layout.component.html

@@ -21,6 +21,12 @@
                     {{'manage' | i18n}}
                 </a>
             </li>
+            <li class="nav-item">
+                <a class="nav-link" routerLink="tools" routerLinkActive="active">
+                    <i class="fa fa-wrench"></i>
+                    {{'tools' | i18n}}
+                </a>
+            </li>
             <li class="nav-item">
                 <a class="nav-link" routerLink="settings" routerLinkActive="active">
                     <i class="fa fa-cog"></i>

src/app/vault/organizations.component.html

@@ -11,7 +11,7 @@
     </ul>
     <p *ngIf="!organizations || !organizations.length">{{'noOrganizationsList' | i18n}}</p>
 </ng-container>
-<a routerLink="/settings/create-organization" class="btn btn-block btn-outline-primary">
+<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,7 +1,6 @@
 import {
     Component,
-    EventEmitter,
-    Output,
+    OnInit,
 } from '@angular/core';
 
 import { UserService } from 'jslib/abstractions/user.service';
@@ -12,12 +11,16 @@ import { Organization } from 'jslib/models/domain/organization';
     selector: 'app-vault-organizations',
     templateUrl: 'organizations.component.html',
 })
-export class OrganizationsComponent {
+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.ts

@@ -24,7 +24,6 @@ import { CiphersComponent } from './ciphers.component';
 import { CollectionsComponent } from './collections.component';
 import { FolderAddEditComponent } from './folder-add-edit.component';
 import { GroupingsComponent } from './groupings.component';
-import { OrganizationsComponent } from './organizations.component';
 import { ShareComponent } from './share.component';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
@@ -39,7 +38,6 @@ import { BulkShareComponent } from './bulk-share.component';
 export class VaultComponent implements OnInit {
     @ViewChild(GroupingsComponent) groupingsComponent: GroupingsComponent;
     @ViewChild(CiphersComponent) ciphersComponent: CiphersComponent;
-    @ViewChild(OrganizationsComponent) organizationsComponent: OrganizationsComponent;
     @ViewChild('attachments', { read: ViewContainerRef }) attachmentsModalRef: ViewContainerRef;
     @ViewChild('folderAddEdit', { read: ViewContainerRef }) folderAddEditModalRef: ViewContainerRef;
     @ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditModalRef: ViewContainerRef;
@@ -66,7 +64,6 @@ export class VaultComponent implements OnInit {
             await this.syncService.fullSync(false);
             await Promise.all([
                 this.groupingsComponent.load(),
-                this.organizationsComponent.load(),
             ]);
 
             if (params == null) {