From 1390d7eb1dc8cb1fd1f165ca8311bce783b892ac Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 25 Oct 2018 09:38:52 -0400
Subject: [PATCH] display nested folders

---
 jslib                                  |  2 +-
 src/app/vault/groupings.component.html | 27 +++++++++++++++++---------
 src/app/vault/groupings.component.ts   |  1 +
 src/scss/styles.scss                   | 10 ++++++++--
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/jslib b/jslib
index 4165a78277..6aba4550a4 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 4165a78277048d7b37319e63bd7e6473cbba5156
+Subproject commit 6aba4550a4b1e643528392d6305df00977046232
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index 049648a858..1f3cb42242 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -3,8 +3,8 @@
         {{'filters' | i18n}}
     </div>
     <div class="card-body">
-        <input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search" class="form-control" [(ngModel)]="searchText"
-            (input)="searchTextChanged()" appAutofocus>
+        <input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search" class="form-control"
+            [(ngModel)]="searchText" (input)="searchTextChanged()" appAutofocus>
         <ul class="fa-ul card-ul">
             <li [ngClass]="{active: selectedAll}">
                 <a href="#" appStopClick (click)="selectAll()">
@@ -52,13 +52,22 @@
                     </a>
                 </h3>
                 <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 (click)="selectFolder(f)">
-                            <i class="fa-li fa fa-caret-right"></i> {{f.name}}</a>
-                        <a href="#" class="text-muted ml-auto show-active" appStopClick (click)="editFolder(f)" title="{{'editFolder' | i18n}}" *ngIf="f.id">
-                            <i class="fa fa-pencil fa-fw"></i>
-                        </a>
-                    </li>
+                    <ng-template #recursiveList 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 fa-caret-right"></i> {{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">
+                                <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: f.children }"></ng-container>
+                            </ul>
+                        </li>
+                    </ng-template>
+                    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: nestedFolders }"></ng-container>
                 </ul>
             </ng-container>
             <ng-container *ngIf="showCollections && collections && collections.length">
diff --git a/src/app/vault/groupings.component.ts b/src/app/vault/groupings.component.ts
index 5d1611bb06..99cc6e019a 100644
--- a/src/app/vault/groupings.component.ts
+++ b/src/app/vault/groupings.component.ts
@@ -21,6 +21,7 @@ export class GroupingsComponent extends BaseGroupingsComponent {
 
     constructor(collectionService: CollectionService, folderService: FolderService) {
         super(collectionService, folderService);
+        this.loadNestedFolder = true;
     }
 
     searchTextChanged() {
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 0ab18f9bca..7dfff87cd1 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -207,6 +207,12 @@ input, select, textarea {
             left: -24px;
         }
     }
+
+    ul {
+        &.carets {
+            margin-left: 0.85em;
+        }
+    }
 }
 
 .modal-dialog {
@@ -419,13 +425,13 @@ app-vault-groupings, app-org-vault-groupings {
         }
 
         li.active {
-            .show-active {
+            > .show-active, > div .show-active {
                 display: inline;
             }
         }
 
         li.active {
-            a:first-child {
+            > a:first-child, > div a:first-child {
                 font-weight: bold;
                 color: theme-color("primary");
             }