organizations component in vault

src/app/app.module.ts

@@ -38,6 +38,7 @@ import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
 import { FolderAddEditComponent } from './vault/folder-add-edit.component';
 import { GroupingsComponent } from './vault/groupings.component';
+import { OrganizationsComponent } from './vault/organizations.component';
 import { VaultComponent } from './vault/vault.component';
 
 import { IconComponent } from 'jslib/angular/components/icon.component';
@@ -94,6 +95,7 @@ import { Folder } from 'jslib/models/domain';
         LoginComponent,
         ModalComponent,
         NavbarComponent,
+        OrganizationsComponent,
         OrganizationLayoutComponent,
         RegisterComponent,
         SearchCiphersPipe,

src/app/vault/groupings.component.html

@@ -5,7 +5,7 @@
     <div class="card-body">
         <input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search" class="form-control" [(ngModel)]="searchText"
             (input)="searchTextChanged()" appAutofocus>
-        <ul class="fa-ul">
+        <ul class="fa-ul card-ul">
             <li [ngClass]="{active: selectedAll}">
                 <a href="#" appStopClick appBlurClick (click)="selectAll()">
                     <i class="fa-li fa fa-fw fa-th"></i>{{'allItems' | i18n}}
@@ -18,7 +18,7 @@
             </li>
         </ul>
         <h3>{{'types' | i18n}}</h3>
-        <ul class="fa-ul">
+        <ul class="fa-ul card-ul">
             <li [ngClass]="{active: selectedType === cipherType.Login}">
                 <a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
                     <i class="fa-li fa fa-fw fa-globe"></i>{{'typeLogin' | i18n}}
@@ -50,7 +50,7 @@
                     <i class="fa fa-plus fa-fw"></i>
                 </a>
             </h3>
-            <ul class="fa-ul carets">
+            <ul class="fa-ul card-ul carets">
                 <li *ngFor="let f of folders" class="d-flex" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
                     <a href="#" appStopClick appBlurClick (click)="selectFolder(f)">
                         <i class="fa-li fa fa-caret-right"></i> {{f.name}}</a>
@@ -61,7 +61,7 @@
             </ul>
             <div *ngIf="collections && collections.length">
                 <h3>{{'collections' | i18n}}</h3>
-                <ul class="fa-ul carets">
+                <ul class="fa-ul card-ul carets">
                     <li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
                         <a href="#" appStopClick appBlurClick (click)="selectCollection(c)">
                             <i class="fa-li fa fa-caret-right"></i> {{c.name}}</a>

src/app/vault/organizations.component.html

@@ -0,0 +1,10 @@
+<ul class="fa-ul card-ul carets">
+    <li *ngFor="let o of organizations">
+        <a href="#" appStopClick appBlurClick (click)="selectOrganization(o)">
+            <i class="fa-li fa fa-caret-right"></i> {{o.name}}</a>
+    </li>
+</ul>
+<button (click)="newOrganization()" class="btn btn-block btn-outline-primary">
+    <i class="fa fa-plus fa-fw"></i>
+    {{'newOrganization' | i18n}}
+</button>

src/app/vault/organizations.component.ts

@@ -0,0 +1,31 @@
+import {
+    Component,
+    EventEmitter,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { UserService } from 'jslib/abstractions/user.service';
+
+@Component({
+    selector: 'app-vault-organizations',
+    templateUrl: 'organizations.component.html',
+})
+export class OrganizationsComponent {
+    @Output() onOrganizationClicked = new EventEmitter<any>();
+    organizations: any;
+
+    constructor(private userService: UserService, private analytics: Angulartics2,
+        private toasterService: ToasterService) {
+    }
+
+    async load() {
+        this.organizations = await this.userService.getAllOrganizations();
+    }
+
+    selectOrganization(o: any) {
+        this.onOrganizationClicked.emit(0);
+    }
+}

src/app/vault/vault.component.html

@@ -58,7 +58,8 @@
                     Organizations
                 </div>
                 <div class="card-body">
-                    Your organizations.
+                    <app-vault-organizations (onOrganizationClicked)="selectOrganization($event)">
+                    </app-vault-organizations>
                 </div>
             </div>
         </div>

src/app/vault/vault.component.ts

@@ -23,6 +23,7 @@ import { AttachmentsComponent } from './attachments.component';
 import { CiphersComponent } from './ciphers.component';
 import { FolderAddEditComponent } from './folder-add-edit.component';
 import { GroupingsComponent } from './groupings.component';
+import { OrganizationsComponent } from './organizations.component';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
@@ -34,6 +35,7 @@ import { SyncService } from 'jslib/abstractions/sync.service';
 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 }) cipherAddEditRef: ViewContainerRef;
@@ -53,7 +55,10 @@ export class VaultComponent implements OnInit {
     async ngOnInit() {
         this.route.queryParams.subscribe(async (params) => {
             await this.syncService.fullSync(true);
-            await this.groupingsComponent.load();
+            await Promise.all([
+                this.groupingsComponent.load(),
+                this.organizationsComponent.load(),
+            ]);
 
             if (params == null) {
                 this.groupingsComponent.selectedAll = true;

src/locales/en/messages.json

@@ -548,6 +548,9 @@
   "noItemsInList": {
     "message": "There are no items to list."
   },
+  "newOrganization": {
+    "message": "New Organization"
+  },
   "versionNumber": {
     "message": "Version $VERSION_NUMBER$",
     "placeholders": {

src/scss/styles.scss

@@ -121,6 +121,22 @@ body {
     }
 }
 
+.card ul.fa-ul.card-ul {
+    margin-left: 1.9em;
+
+    .fa-li {
+        top: 4px;
+    }
+
+    &.carets {
+        margin-left: 1.1em;
+
+        .fa-li {
+            left: -24px;
+        }
+    }
+}
+
 .modal-body {
     h3 {
         font-weight: normal;
@@ -238,22 +254,6 @@ app-vault-groupings {
             }
         }
 
-        ul.fa-ul {
-            margin-left: 1.9em;
-
-            .fa-li {
-                top: 4px;
-            }
-
-            &.carets {
-                margin-left: 1.1em;
-
-                .fa-li {
-                    left: -24px;
-                }
-            }
-        }
-
         .show-active {
             display: none;
         }