added collpase/expand functions to groupings

jslib

@@ -1 +1 @@
-Subproject commit 1e6b3b4aae84495d757d02583d0d69a8d18a029b
+Subproject commit 786fa02b90d64044aee23011a18f6e202856a362

src/app/organizations/vault/groupings.component.ts

@@ -4,6 +4,8 @@ import { ApiService } from 'jslib/abstractions/api.service';
 import { CollectionService } from 'jslib/abstractions/collection.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+import { UserService } from 'jslib/abstractions/user.service';
 
 import { CollectionData } from 'jslib/models/data/collectionData';
 import { Collection } from 'jslib/models/domain/collection';
@@ -21,8 +23,9 @@ export class GroupingsComponent extends BaseGroupingsComponent {
     organization: Organization;
 
     constructor(collectionService: CollectionService, folderService: FolderService,
+        storageService: StorageService, userService: UserService,
         private apiService: ApiService, private i18nService: I18nService) {
-        super(collectionService, folderService);
+        super(collectionService, folderService, storageService, userService);
     }
 
     async loadCollections() {
@@ -48,4 +51,12 @@ export class GroupingsComponent extends BaseGroupingsComponent {
         this.collections.push(unassignedCollection);
         this.nestedCollections = await this.collectionService.getAllNested(this.collections);
     }
+
+    collapse(grouping: CollectionView) {
+        super.collapse(grouping, 'org_');
+    }
+
+    isCollapsed(grouping: CollectionView) {
+        return super.isCollapsed(grouping, 'org_');
+    }
 }

src/app/vault/groupings.component.html

@@ -55,14 +55,14 @@
                     <ng-template #recursiveFolders let-folders>
                         <li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
                             <div class="d-flex">
-                                <a href="#" appStopClick (click)="selectFolder(f.node)">
+                                <i class="fa-li fa" title="{{'toggleCollapsed' | i18n}}" [ngClass]="{'fa-caret-right': isCollapsed(f.node), 'fa-caret-down': !isCollapsed(f.node)}" (click)="collapse(f.node)"></i>
-                                    <i class="fa-li fa fa-caret-right"></i> {{f.node.name}}</a>
+                                <a href="#" appStopClick (click)="selectFolder(f.node)">{{f.node.name}}</a>
                                 <a href="#" class="text-muted ml-auto show-active" appStopClick (click)="editFolder(f.node)"
                                     title="{{'editFolder' | i18n}}" *ngIf="f.node.id">
                                     <i class="fa fa-pencil fa-fw"></i>
                                 </a>
                             </div>
-                            <ul class="fa-ul card-ul carets" *ngIf="f.children.length">
+                            <ul class="fa-ul card-ul carets" *ngIf="f.children.length && !isCollapsed(f.node)">
                                 <ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }"></ng-container>
                             </ul>
                         </li>
@@ -75,9 +75,9 @@
                 <ul class="fa-ul card-ul carets">
                     <ng-template #recursiveCollections let-collections>
                         <li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
-                            <a href="#" appStopClick (click)="selectCollection(c.node)">
+                            <i class="fa-li fa" title="{{'toggleCollapsed' | i18n}}" [ngClass]="{'fa-caret-right': isCollapsed(c.node), 'fa-caret-down': !isCollapsed(c.node)}" (click)="collapse(c.node)"></i>
-                                <i class="fa-li fa fa-caret-right"></i> {{c.node.name}}</a>
+                            <a href="#" appStopClick (click)="selectCollection(c.node)">{{c.node.name}}</a>
-                            <ul class="fa-ul card-ul carets" *ngIf="c.children.length">
+                            <ul class="fa-ul card-ul carets" *ngIf="c.children.length && !isCollapsed(c.node)">
                                 <ng-container *ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }"></ng-container>
                             </ul>
                         </li>

src/app/vault/groupings.component.ts

@@ -6,6 +6,8 @@ import {
 
 import { CollectionService } from 'jslib/abstractions/collection.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+import { UserService } from 'jslib/abstractions/user.service';
 
 import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/components/groupings.component';
 
@@ -19,8 +21,9 @@ export class GroupingsComponent extends BaseGroupingsComponent {
     searchText: string = '';
     searchPlaceholder: string = null;
 
-    constructor(collectionService: CollectionService, folderService: FolderService) {
+    constructor(collectionService: CollectionService, folderService: FolderService,
-        super(collectionService, folderService);
+        storageService: StorageService, userService: UserService) {
+        super(collectionService, folderService, storageService, userService);
     }
 
     searchTextChanged() {

src/locales/en/messages.json

@@ -207,6 +207,10 @@
   "toggleVisibility": {
     "message": "Toggle Visibility"
   },
+  "toggleCollapsed": {
+    "message": "Toggle Collapsed",
+    "description": "Toggling an expand/collapse state."
+  },
   "generatePassword": {
     "message": "Generate Password"
   },

src/scss/styles.scss

@@ -424,6 +424,12 @@ app-vault-groupings, app-org-vault-groupings {
             display: none;
         }
 
+        li {
+            > .fa, > div > .fa {
+                cursor: pointer;
+            }
+        }
+
         li.active {
             > .show-active, > div .show-active {
                 display: inline;
@@ -431,10 +437,14 @@ app-vault-groupings, app-org-vault-groupings {
         }
 
         li.active {
-            > a:first-child, > div a:first-child {
+            > a:first-of-type, > div a:first-of-type {
                 font-weight: bold;
                 color: theme-color("primary");
             }
+
+            > .fa, > div > .fa {
+                color: theme-color("primary");
+            }
         }
     }
 }

src/services/htmlStorage.service.ts

@@ -6,7 +6,7 @@ export class HtmlStorageService implements StorageService {
     private localStorageKeys = new Set(['appId', 'anonymousAppId', 'rememberedEmail', 'passwordGenerationOptions',
         ConstantsService.disableFaviconKey, ConstantsService.lockOptionKey, 'rememberEmail', 'enableGravatars',
         ConstantsService.localeKey, ConstantsService.lockOptionKey]);
-    private localStorageStartsWithKeys = ['twoFactorToken_'];
+    private localStorageStartsWithKeys = ['twoFactorToken_', ConstantsService.collapsedGroupingsKey + '_'];
 
     constructor(private platformUtilsService: PlatformUtilsService) { }