Exui 673 expand all folders

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/case-file-view-field.component.html

@@ -1,7 +1,6 @@
 <ng-container *ngIf="errorMessages?.length">
-  <div
-    id="case-file-view-field-errors"
-    class="govuk-error-summary govuk-!-margin-bottom-4" data-module="govuk-error-summary">
+  <div id="case-file-view-field-errors" class="govuk-error-summary govuk-!-margin-bottom-4"
+    data-module="govuk-error-summary">
     <div role="alert">
       <h2 class="govuk-error-summary__title">
         There is a problem
@@ -26,30 +25,22 @@ <h2 class="govuk-heading-l">Case file</h2>
   <div class="govuk-form-group" id="case-file-view">
     <!-- Document tree -->
     <div class="document-tree-container">
-      <ccd-case-file-view-folder
-        class="document-tree-container__tree"
+      <ccd-case-file-view-folder class="document-tree-container__tree"
         [categoriesAndDocuments]="categoriesAndDocuments$"
-        (clickedDocument)="setMediaViewerFile($event); resetErrorMessages()"
-        (moveDocument)="moveDocument($event)"
-        [allowMoving]="allowMoving"
-      ></ccd-case-file-view-folder>
+        (clickedDocument)="setMediaViewerFile($event); resetErrorMessages()" (moveDocument)="moveDocument($event)"
+        [allowMoving]="allowMoving"></ccd-case-file-view-folder>
     </div>
     <!-- Slider -->
     <div class="slider"></div>
     <!-- Media viewer -->
     <div class="media-viewer-container">
       <ng-container *ngIf="currentDocument">
         <mv-media-viewer [url]="currentDocument.document_binary_url"
-                         [downloadFileName]="currentDocument.document_filename"
-                         [showToolbar]="true"
-                         [contentType]="currentDocument.content_type"
-                         [enableAnnotations]="true"
-                         [enableRedactions]="true"
-                         [height]="'94.5vh'"
-                         [caseId]="caseId"
-                         [enableICP]="isIcpEnabled()">
+          [downloadFileName]="currentDocument.document_filename" [showToolbar]="true"
+          [contentType]="currentDocument.content_type" [enableAnnotations]="true" [enableRedactions]="true"
+          [height]="'94.5vh'" [caseId]="caseId" [enableICP]="isIcpEnabled()">
         </mv-media-viewer>
       </ng-container>
     </div>
   </div>
-</div>
+</div>

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder-sort/case-file-view-folder-sort.component.scss

@@ -1,5 +1,4 @@
 .sort-button-icon {
-  display: block;
   height: 20px;
   margin-right: -2px;
 }

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder-toggle/case-file-view-folder-toggle.component.html

@@ -0,0 +1,5 @@
+<ccd-case-file-view-overlay-menu [title]="'Toggle list'" [menuItems]="overlayMenuItems" [(isOpen)]="isOpen">
+  <ng-container trigger>
+    <img class="toggle-button-icon" src="/assets/images/folder-open.png" alt="Toggle list" />
+  </ng-container>
+</ccd-case-file-view-overlay-menu>

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder-toggle/case-file-view-folder-toggle.component.scss

@@ -0,0 +1,4 @@
+.toggle-button-icon {
+  margin-right: 2px;
+  height: 20px;
+}

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder-toggle/case-file-view-folder-toggle.component.spec.ts

@@ -0,0 +1,39 @@
+import { OverlayModule } from "@angular/cdk/overlay";
+// import { DebugElement } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+// import { By } from "@angular/platform-browser";
+import { AbstractAppConfig } from "../../../../../../../app.config";
+import { CaseFileViewOverlayMenuComponent } from "../../shared";
+import { CaseFileViewFolderToggleComponent } from "./case-file-view-folder-toggle.component";
+
+describe("CaseFileViewFolderToggleComponent", () => {
+  let component: CaseFileViewFolderToggleComponent;
+  let fixture: ComponentFixture<CaseFileViewFolderToggleComponent>;
+  let mockAppConfig: any;
+
+  beforeEach(async () => {
+    mockAppConfig = jasmine.createSpyObj<AbstractAppConfig>(
+      "AbstractAppConfig",
+      ["getEnableCaseFileViewVersion1_1"]
+    );
+    await TestBed.configureTestingModule({
+      declarations: [
+        CaseFileViewFolderToggleComponent,
+        CaseFileViewOverlayMenuComponent,
+      ],
+      imports: [OverlayModule],
+      providers: [{ provide: AbstractAppConfig, useValue: mockAppConfig }],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaseFileViewFolderToggleComponent);
+    component = fixture.componentInstance;
+    component.isOpen = true;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder-toggle/case-file-view-folder-toggle.component.ts

@@ -0,0 +1,30 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+import { AbstractAppConfig } from "../../../../../../../app.config";
+import { CaseFileViewOverlayMenuItem } from "../../shared/case-file-view-overlay-menu/case-file-view-overlay-menu-item.model";
+
+@Component({
+  selector: "ccd-case-file-view-folder-toggle",
+  templateUrl: "./case-file-view-folder-toggle.component.html",
+  styleUrls: ["./case-file-view-folder-toggle.component.scss"],
+})
+export class CaseFileViewFolderToggleComponent {
+  public isOpen = false;
+
+  @Output() public expandAll = new EventEmitter<boolean>();
+  @Output() public collapseAll = new EventEmitter<boolean>();
+
+  public overlayMenuItems: CaseFileViewOverlayMenuItem[] = [
+    {
+      actionText: "Expand All",
+      iconSrc: "/assets/img/accordion-plus.png",
+      actionFn: () => this.expandAll.emit(true),
+    },
+    {
+      actionText: "Collapse All",
+      iconSrc: "/assets/img/accordion-minus.png",
+      actionFn: () => this.collapseAll.emit(true),
+    },
+  ];
+
+  constructor(private readonly appConfig: AbstractAppConfig) {}
+}

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html

@@ -1,22 +1,20 @@
 <div class="document-filter-container">
   <div class="form-group document-filter" [formGroup]="documentFilterFormGroup">
-    <input class="form-control document-search"
-      type="search"
-      id="document-search"
-      name="documentSearchFormControl"
-      formControlName="documentSearchFormControl"
-      placeholder="Search by document name"
-      aria-label="Search by document name">
+    <input class="form-control document-search" type="search" id="document-search" name="documentSearchFormControl"
+      formControlName="documentSearchFormControl" placeholder="Search by document name"
+      aria-label="Search by document name" />
   </div>
 </div>
 
 <div class="document-folders-header">
-  <div class="document-folders-header__title">Documents ({{ documentCount }})</div>
-  <div>
-    <ccd-case-file-view-folder-sort
-      (sortAscending)="sortDataSourceAscending($event)"
-      (sortDescending)="sortDataSourceDescending($event)"
-    ></ccd-case-file-view-folder-sort>
+  <div class="document-folders-header__title">
+    Documents ({{ documentCount }})
+  </div>
+  <div class="document-folders-header__flex">
+    <ccd-case-file-view-folder-toggle (expandAll)="expandAll($event)"
+      (collapseAll)="collapseAll($event)"></ccd-case-file-view-folder-toggle>
+    <ccd-case-file-view-folder-sort (sortAscending)="sortDataSourceAscending($event)"
+      (sortDescending)="sortDataSourceDescending($event)"></ccd-case-file-view-folder-sort>
   </div>
 </div>
 
@@ -27,38 +25,45 @@
   <div>
     <cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
       <!-- document -->
-      <cdk-nested-tree-node class="document-tree-container__node document-tree-container__node--document" *cdkTreeNodeDef="let node">
+      <cdk-nested-tree-node class="
+          document-tree-container__node document-tree-container__node--document
+        " *cdkTreeNodeDef="let node">
         <button class="node" (click)="selectedNodeItem = node; clickedDocument.emit(node)"
-                [class.node--selected]="selectedNodeItem?.name === node.name">
+          [class.node--selected]="selectedNodeItem?.name === node.name">
           <div class="node__icon" disabled>
-            <img src="/assets/img/case-file-view/case-file-view-document.svg" class="node__iconImg" alt="Document icon">
+            <img src="/assets/img/case-file-view/case-file-view-document.svg" class="node__iconImg"
+              alt="Document icon" />
           </div>
           <span class="node__name node-name-document">
-            {{node.name}}
-            <br>
-            <span class="node__document-upload-timestamp">{{node.upload_timestamp | ccdDate : 'local' :'dd MMM YYYY HH:mm'}}</span>
+            {{ node.name }}
+            <br />
+            <span class="node__document-upload-timestamp">{{
+              node.upload_timestamp | ccdDate: "local":"dd MMM YYYY HH:mm"
+              }}</span>
           </span>
           <div class="node__document-options">
             <ccd-case-file-view-folder-document-actions
-              (changeFolderAction)="triggerDocumentAction('changeFolder', node)"
-              (openInANewTabAction)="triggerDocumentAction('openInANewTab', node)"
-              (downloadAction)="triggerDocumentAction('download', node)"
-              (printAction)="triggerDocumentAction('print', node)"
-              [allowMoving]="allowMoving"
-            >
+              (changeFolderAction)="triggerDocumentAction('changeFolder', node)" (openInANewTabAction)="
+                triggerDocumentAction('openInANewTab', node)
+              " (downloadAction)="triggerDocumentAction('download', node)"
+              (printAction)="triggerDocumentAction('print', node)" [allowMoving]="allowMoving">
             </ccd-case-file-view-folder-document-actions>
           </div>
         </button>
       </cdk-nested-tree-node>
       <!-- folder-->
-      <cdk-nested-tree-node class="document-tree-container__node document-tree-container__folder" *cdkTreeNodeDef="let node; when: nestedChildren">
+      <cdk-nested-tree-node class="document-tree-container__node document-tree-container__folder"
+        *cdkTreeNodeDef="let node; when: nestedChildren">
         <button class="node" cdkTreeNodeToggle>
-          <div class="node__icon" [attr.aria-label]="'toggle ' + node.name" >
-            <img class="node__iconImg"
-                 [src]="nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'" alt="Folder icon">
-            <span class="node__count">{{node.childDocumentCount}}</span>
+          <div class="node__icon" [attr.aria-label]="'toggle ' + node.name">
+            <img class="node__iconImg" [src]="
+                nestedTreeControl.isExpanded(node)
+                  ? '/assets/images/folder-open.png'
+                  : '/assets/images/folder.png'
+              " alt="Folder icon" />
+            <span class="node__count">{{ node.childDocumentCount }}</span>
           </div>
-          <span class="node__name node__name--folder">{{node.name}}</span>
+          <span class="node__name node__name--folder">{{ node.name }}</span>
         </button>
 
         <div [class.document-tree-invisible]="!nestedTreeControl.isExpanded(node)">
@@ -67,4 +72,4 @@
       </cdk-nested-tree-node>
     </cdk-tree>
   </div>
-</div>
+</div>

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.scss

@@ -9,13 +9,13 @@
 }
 
 .document-filter-container {
-  border-bottom: 2px solid #C9C9C9;
+  border-bottom: 2px solid #c9c9c9;
 
   .document-filter {
     padding: 10px;
 
     .document-search {
-      background: url(/assets/images/icon-search-black.svg) no-repeat right #FFF;
+      background: url(/assets/images/icon-search-black.svg) no-repeat right #fff;
       background-position-x: calc(100% - 4px);
       padding-right: 30px;
       width: 100%;
@@ -33,12 +33,17 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 2px solid #C9C9C9;
+  border-bottom: 2px solid #c9c9c9;
   padding: 10px;
 
   &__title {
     font-weight: 700;
   }
+
+  &__flex {
+    display: flex;
+    flex-direction: row;
+  }
 }
 
 .document-tree-container {
@@ -74,27 +79,27 @@
     border: 4px solid rgba(0, 0, 0, 0);
     background-clip: padding-box;
     border-radius: 9999px;
-    background-color: #AAAAAA;
+    background-color: #aaaaaa;
   }
 
   &::-webkit-scrollbar-button {
     display: none;
   }
 
   &::-webkit-scrollbar-track-piece {
-    background: #EEE;
+    background: #eee;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #CCC;
+    background: #ccc;
   }
 }
 
 .document-folders-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 2px solid #C9C9C9;
+  border-bottom: 2px solid #c9c9c9;
   padding: 10px;
 
   &__title {

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.ts

@@ -58,6 +58,14 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy {
     }
   }
 
+  public expandAll(expand: boolean) {
+    this.nestedTreeControl.expandDescendants(this.nestedDataSource[0]);
+  }
+
+  public collapseAll(expand: boolean) {
+    this.nestedTreeControl.collapseAll();
+  }
+
   constructor(
     private readonly windowService: WindowService,
     private readonly router: Router,

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/index.ts

@@ -1,5 +1,6 @@
-export * from './case-file-view-folder-selector/case-file-view-folder-selector.component';
-export * from './case-file-view-folder/case-file-view-folder-document-actions/case-file-view-folder-document-actions.component';
-export * from './case-file-view-folder/case-file-view-folder-sort/case-file-view-folder-sort.component';
-export * from './case-file-view-folder/case-file-view-folder.component';
-export * from './shared';
+export * from "./case-file-view-folder-selector/case-file-view-folder-selector.component";
+export * from "./case-file-view-folder/case-file-view-folder-document-actions/case-file-view-folder-document-actions.component";
+export * from "./case-file-view-folder/case-file-view-folder-sort/case-file-view-folder-sort.component";
+export * from "./case-file-view-folder/case-file-view-folder-toggle/case-file-view-folder-toggle.component";
+export * from "./case-file-view-folder/case-file-view-folder.component";
+export * from "./shared";