From e7c250203d949c1a877636daa36e4114b82cddad Mon Sep 17 00:00:00 2001 From: japickering Date: Wed, 29 Jan 2025 17:28:36 +0000 Subject: [PATCH 01/10] exui-673 - extend ccd toolkit to support toggling case file folders --- .../case-file-view-folder-sort.component.scss | 2 +- ...ase-file-view-folder-toggle.component.html | 13 + ...ase-file-view-folder-toggle.component.scss | 5 + ...-file-view-folder-toggle.component.spec.ts | 39 +++ .../case-file-view-folder-toggle.component.ts | 34 +++ .../case-file-view-folder.component.html | 72 +++-- .../case-file-view-folder.component.ts | 279 ++++++++++++------ .../case-file-view/components/index.ts | 11 +- .../components/palette/palette.module.ts | 264 ++++++++++------- 9 files changed, 497 insertions(+), 222 deletions(-) create mode 100644 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 create mode 100644 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 create mode 100644 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 create mode 100644 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 diff --git a/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 b/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 index 7ecbeba40d..42e11be993 100644 --- a/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 +++ b/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,5 @@ .sort-button-icon { - display: block; + display: inline-block; height: 20px; margin-right: -2px; } diff --git a/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 b/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 new file mode 100644 index 0000000000..8e1b6815bf --- /dev/null +++ b/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,13 @@ + + + Toggle list + + diff --git a/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 b/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 new file mode 100644 index 0000000000..e89dba7268 --- /dev/null +++ b/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,5 @@ +.toggle-button-icon { + display: inline-block; + margin-right: 2px; + height: 20px; +} diff --git a/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 b/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 new file mode 100644 index 0000000000..aa9fc7c213 --- /dev/null +++ b/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; + let mockAppConfig: any; + + beforeEach(async () => { + mockAppConfig = jasmine.createSpyObj( + "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(); + }); +}); diff --git a/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 b/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 new file mode 100644 index 0000000000..4059fce1ec --- /dev/null +++ b/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,34 @@ +/* eslint-disable comma-dangle */ +/* eslint-disable quotes */ +import { Component, EventEmitter, Output, OnInit } 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 implements OnInit { + public isOpen = false; + + @Output() public expandAll = new EventEmitter(); + @Output() public collapseAll = new EventEmitter(); + + public overlayMenuItems: CaseFileViewOverlayMenuItem[] = [ + { + actionText: "Expand All", + iconSrc: "/assets/images/folder-open.png", + actionFn: () => this.expandAll.emit(true), + }, + { + actionText: "Collapse All", + iconSrc: "/assets/images/folder-close.png", + actionFn: () => this.collapseAll.emit(true), + }, + ]; + + constructor(private readonly appConfig: AbstractAppConfig) {} + + public ngOnInit(): void {} +} diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html index 522240af93..590fad9503 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html +++ b/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,18 +1,26 @@
- + aria-label="Search by document name" + />
-
Documents ({{ documentCount }})
+
+ Documents ({{ documentCount }}) +
+ - - -
+
diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.ts index 6520bbb1c4..9b64af4521 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.ts +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.ts @@ -1,38 +1,56 @@ -import { NestedTreeControl } from '@angular/cdk/tree'; -import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; -import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; -import { Router } from '@angular/router'; -import { Observable, Subscription, of } from 'rxjs'; -import { switchMap, tap } from 'rxjs/operators'; -import { AbstractAppConfig } from '../../../../../../app.config'; +/* eslint-disable lines-between-class-members */ +/* eslint-disable comma-dangle */ +/* eslint-disable quotes */ +import { NestedTreeControl } from "@angular/cdk/tree"; +import { + Component, + EventEmitter, + Input, + OnDestroy, + OnInit, + Output, +} from "@angular/core"; +import { FormControl, FormGroup } from "@angular/forms"; +import { MatLegacyDialog as MatDialog } from "@angular/material/legacy-dialog"; +import { Router } from "@angular/router"; +import { Observable, Subscription, of } from "rxjs"; +import { switchMap, tap } from "rxjs/operators"; +import { AbstractAppConfig } from "../../../../../../app.config"; import { CaseFileViewCategory, CaseFileViewDocument, CaseFileViewSortColumns, CategoriesAndDocuments, DocumentTreeNode, - DocumentTreeNodeType -} from '../../../../../domain/case-file-view'; -import { SortOrder } from '../../../../../domain/sort-order.enum'; -import { DocumentManagementService, WindowService } from '../../../../../services'; -import { CaseFileViewFolderSelectorComponent } from '../case-file-view-folder-selector/case-file-view-folder-selector.component'; -export const MEDIA_VIEWER_LOCALSTORAGE_KEY = 'media-viewer-info'; + DocumentTreeNodeType, +} from "../../../../../domain/case-file-view"; +import { SortOrder } from "../../../../../domain/sort-order.enum"; +import { + DocumentManagementService, + WindowService, +} from "../../../../../services"; +import { CaseFileViewFolderSelectorComponent } from "../case-file-view-folder-selector/case-file-view-folder-selector.component"; +export const MEDIA_VIEWER_LOCALSTORAGE_KEY = "media-viewer-info"; @Component({ - selector: 'ccd-case-file-view-folder', - templateUrl: './case-file-view-folder.component.html', - styleUrls: ['./case-file-view-folder.component.scss'], + selector: "ccd-case-file-view-folder", + templateUrl: "./case-file-view-folder.component.html", + styleUrls: ["./case-file-view-folder.component.scss"], }) export class CaseFileViewFolderComponent implements OnInit, OnDestroy { - private static readonly UNCATEGORISED_DOCUMENTS_TITLE = 'Uncategorised documents'; - private static readonly DOCUMENT_SEARCH_FORM_CONTROL_NAME = 'documentSearchFormControl'; + private static readonly UNCATEGORISED_DOCUMENTS_TITLE = + "Uncategorised documents"; + private static readonly DOCUMENT_SEARCH_FORM_CONTROL_NAME = + "documentSearchFormControl"; private static readonly MINIMUM_SEARCH_CHARACTERS = 1; @Input() public categoriesAndDocuments: Observable; @Input() public allowMoving: boolean; @Output() public clickedDocument = new EventEmitter(); - @Output() public moveDocument = new EventEmitter<{ newCategory: string, document: DocumentTreeNode }>(); + @Output() public moveDocument = new EventEmitter<{ + newCategory: string; + document: DocumentTreeNode; + }>(); public nestedTreeControl: NestedTreeControl; public nestedDataSource: DocumentTreeNode[]; @@ -47,15 +65,23 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { public searchTermLength: number; private getChildren = (node: DocumentTreeNode) => of(node.children); - public nestedChildren = (_: number, nodeData: DocumentTreeNode) => nodeData.children; + public nestedChildren = (_: number, nodeData: DocumentTreeNode) => + nodeData.children; public get documentCount() { if (this.nestedDataSource?.length) { return this.nestedDataSource.reduce((acc, item) => { return acc + item.childDocumentCount; }, 0); - } else { - return 0; } + return 0; + } + + public expandAll(expand: boolean) { + this.nestedTreeControl.expandAll(); + } + + public collapseAll(expand: boolean) { + this.nestedTreeControl.collapseAll(); } constructor( @@ -65,71 +91,99 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { private readonly dialog: MatDialog, private readonly appConfig: AbstractAppConfig ) { - this.nestedTreeControl = new NestedTreeControl(this.getChildren); + this.nestedTreeControl = new NestedTreeControl( + this.getChildren + ); } public ngOnInit(): void { this.documentFilterFormGroup = new FormGroup({}); - this.documentSearchFormControl = new FormControl(''); - this.documentFilterFormGroup.addControl(CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME, this.documentSearchFormControl); + this.documentSearchFormControl = new FormControl(""); + this.documentFilterFormGroup.addControl( + CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME, + this.documentSearchFormControl + ); // Listen to search input and initiate filter documents if at least three characters entered - this.documentFilterSubscription = this.documentSearchFormControl.valueChanges.pipe( - tap((searchTerm: string) => this.searchTermLength = searchTerm.length), - switchMap((searchTerm: string) => this.filter(searchTerm.toLowerCase()).pipe()) - ).subscribe(documentTreeData => { - this.nestedDataSource = documentTreeData; - this.nestedTreeControl.dataNodes = documentTreeData; - this.searchTermLength >= CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS - ? this.nestedTreeControl.expandAll() - : this.nestedTreeControl.collapseAll(); - }); + this.documentFilterSubscription = + this.documentSearchFormControl.valueChanges + .pipe( + tap( + (searchTerm: string) => (this.searchTermLength = searchTerm.length) + ), + switchMap((searchTerm: string) => + this.filter(searchTerm.toLowerCase()).pipe() + ) + ) + .subscribe((documentTreeData) => { + this.nestedDataSource = documentTreeData; + this.nestedTreeControl.dataNodes = documentTreeData; + this.searchTermLength >= + CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS + ? this.nestedTreeControl.expandAll() + : this.nestedTreeControl.collapseAll(); + }); // Subscribe to the input categories and documents, and generate tree data and initialise cdk tree - this.categoriesAndDocumentsSubscription = this.categoriesAndDocuments.subscribe(categoriesAndDocuments => { - const categories = categoriesAndDocuments.categories; - this.categories = categories; - // Generate document tree data from categories - this.documentTreeData = this.generateTreeData(categories); - // Append uncategorised documents - if (categoriesAndDocuments.uncategorised_documents && categoriesAndDocuments.uncategorised_documents.length > 0) { - const uncategorisedDocuments = this.getUncategorisedDocuments(categoriesAndDocuments.uncategorised_documents); - this.documentTreeData.push(uncategorisedDocuments); - } + this.categoriesAndDocumentsSubscription = + this.categoriesAndDocuments.subscribe((categoriesAndDocuments) => { + const categories = categoriesAndDocuments.categories; + this.categories = categories; + // Generate document tree data from categories + this.documentTreeData = this.generateTreeData(categories); + // Append uncategorised documents + if ( + categoriesAndDocuments.uncategorised_documents && + categoriesAndDocuments.uncategorised_documents.length > 0 + ) { + const uncategorisedDocuments = this.getUncategorisedDocuments( + categoriesAndDocuments.uncategorised_documents + ); + this.documentTreeData.push(uncategorisedDocuments); + } - // Initialise cdk tree with generated data - this.nestedDataSource = this.documentTreeData; - this.nestedTreeControl.dataNodes = this.documentTreeData; - this.sortDataSourceDescending(CaseFileViewSortColumns.DOCUMENT_UPLOAD_TIMESTAMP); - }); + // Initialise cdk tree with generated data + this.nestedDataSource = this.documentTreeData; + this.nestedTreeControl.dataNodes = this.documentTreeData; + this.sortDataSourceDescending( + CaseFileViewSortColumns.DOCUMENT_UPLOAD_TIMESTAMP + ); + }); } - public generateTreeData(categories: CaseFileViewCategory[]): DocumentTreeNode[] { + public generateTreeData( + categories: CaseFileViewCategory[] + ): DocumentTreeNode[] { return categories.reduce((tree, node) => { const newDocumentTreeNode = new DocumentTreeNode(); newDocumentTreeNode.name = node.category_name; newDocumentTreeNode.type = DocumentTreeNodeType.FOLDER; - newDocumentTreeNode.children = [...this.generateTreeData(node.sub_categories), ...this.getDocuments(node.documents)]; + newDocumentTreeNode.children = [ + ...this.generateTreeData(node.sub_categories), + ...this.getDocuments(node.documents), + ]; newDocumentTreeNode.category_order = node.category_order; - return [ - ...tree, - newDocumentTreeNode, - ].sort((a,b) => a.category_order - b.category_order); + return [...tree, newDocumentTreeNode].sort( + (a, b) => a.category_order - b.category_order + ); }, []); } public getDocuments(documents: CaseFileViewDocument[]): DocumentTreeNode[] { const documentsToReturn: DocumentTreeNode[] = []; - documents.forEach(document => { + documents.forEach((document) => { const documentTreeNode = new DocumentTreeNode(); documentTreeNode.name = document.document_filename; documentTreeNode.type = DocumentTreeNodeType.DOCUMENT; documentTreeNode.document_filename = document.document_filename; documentTreeNode.document_binary_url = document.document_binary_url; documentTreeNode.attribute_path = document.attribute_path; - documentTreeNode.upload_timestamp = this.appConfig.getEnableCaseFileViewVersion1_1() - && document.upload_timestamp ? document.upload_timestamp.toString() : ''; + documentTreeNode.upload_timestamp = + this.appConfig.getEnableCaseFileViewVersion1_1() && + document.upload_timestamp + ? document.upload_timestamp.toString() + : ""; documentsToReturn.push(documentTreeNode); }); @@ -137,23 +191,29 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { return documentsToReturn; } - public getUncategorisedDocuments(uncategorisedDocuments: CaseFileViewDocument[]): DocumentTreeNode { + public getUncategorisedDocuments( + uncategorisedDocuments: CaseFileViewDocument[] + ): DocumentTreeNode { const documents: DocumentTreeNode[] = []; - uncategorisedDocuments.forEach(document => { + uncategorisedDocuments.forEach((document) => { const documentTreeNode = new DocumentTreeNode(); documentTreeNode.name = document.document_filename; documentTreeNode.type = DocumentTreeNodeType.DOCUMENT; documentTreeNode.document_filename = document.document_filename; documentTreeNode.document_binary_url = document.document_binary_url; documentTreeNode.attribute_path = document.attribute_path; - documentTreeNode.upload_timestamp = this.appConfig.getEnableCaseFileViewVersion1_1() - && document.upload_timestamp ? document.upload_timestamp.toString() : ''; + documentTreeNode.upload_timestamp = + this.appConfig.getEnableCaseFileViewVersion1_1() && + document.upload_timestamp + ? document.upload_timestamp.toString() + : ""; documents.push(documentTreeNode); }); const uncategorisedNode = new DocumentTreeNode(); - uncategorisedNode.name = CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE; + uncategorisedNode.name = + CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE; uncategorisedNode.type = DocumentTreeNodeType.FOLDER; uncategorisedNode.children = documents; @@ -168,47 +228,69 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { } let filteredData = this.documentTreeData; - if (searchTerm && searchTerm.length >= CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS && this.documentFilterFormGroup.controls[CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME].value.length > 0) { - filteredData = this.documentTreeData.map(copy).filter(function filterTreeData(node: DocumentTreeNode) { - if (node.name && node.name.toLowerCase().includes(searchTerm) && node.type === DocumentTreeNodeType.DOCUMENT) { - return true; - } - // Call recursively if node has children - if (node.children) { - return (node.children = node.children.map(copy).filter(filterTreeData)).length; - } - }); + if ( + searchTerm && + searchTerm.length >= + CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS && + this.documentFilterFormGroup.controls[ + CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME + ].value.length > 0 + ) { + filteredData = this.documentTreeData + .map(copy) + .filter(function filterTreeData(node: DocumentTreeNode) { + if ( + node.name && + node.name.toLowerCase().includes(searchTerm) && + node.type === DocumentTreeNodeType.DOCUMENT + ) { + return true; + } + // Call recursively if node has children + if (node.children) { + return (node.children = node.children + .map(copy) + .filter(filterTreeData)).length; + } + }); } return of(filteredData); } public triggerDocumentAction( - actionType: 'changeFolder' | 'openInANewTab' | 'download' | 'print', + actionType: "changeFolder" | "openInANewTab" | "download" | "print", documentTreeNode: DocumentTreeNode ): void { switch (actionType) { - case ('changeFolder'): + case "changeFolder": this.openMoveDialog(documentTreeNode); break; - case ('openInANewTab'): - this.windowService.setLocalStorage(MEDIA_VIEWER_LOCALSTORAGE_KEY, + case "openInANewTab": + this.windowService.setLocalStorage( + MEDIA_VIEWER_LOCALSTORAGE_KEY, this.documentManagementService.getMediaViewerInfo({ document_binary_url: documentTreeNode.document_binary_url, - document_filename: documentTreeNode.document_filename - })); + document_filename: documentTreeNode.document_filename, + }) + ); this.windowService.openOnNewTab( - this.router.createUrlTree(['/media-viewer'])?.toString() + this.router.createUrlTree(["/media-viewer"])?.toString() ); break; - case ('download'): + case "download": // Create a URL from the document_binary_url property (absolute URL) and use the path portion (relative URL). // This is necessary because the Manage Cases application will automatically apply a proxy to the request, with // the correct remote endpoint - this.downloadFile(new URL(documentTreeNode.document_binary_url).pathname, documentTreeNode.document_filename); + this.downloadFile( + new URL(documentTreeNode.document_binary_url).pathname, + documentTreeNode.document_filename + ); break; - case ('print'): - this.printDocument(new URL(documentTreeNode.document_binary_url).pathname); + case "print": + this.printDocument( + new URL(documentTreeNode.document_binary_url).pathname + ); break; default: return; @@ -216,7 +298,7 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { } public sortDataSourceAscending(column: number) { - const sortedData = this.nestedDataSource.map(item => { + const sortedData = this.nestedDataSource.map((item) => { item.sortChildrenAscending(column, SortOrder.ASCENDING); return item; }); @@ -225,7 +307,7 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { } public sortDataSourceDescending(column: number) { - const sortedData = this.nestedDataSource.map(item => { + const sortedData = this.nestedDataSource.map((item) => { item.sortChildrenDescending(column, SortOrder.DESCENDING); return item; }); @@ -237,7 +319,8 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { const prevSelected = this.nestedTreeControl.expansionModel.selected.map( (item) => { return item.name; - }); + } + ); this.nestedTreeControl.collapseAll(); this.nestedDataSource = data.map((item) => { @@ -249,13 +332,15 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { return newDocumentTreeNode; }); - const flattenedArray = this.nestedDataSource.map((item) => { - return item.flattenedAll; - }).flat(); + const flattenedArray = this.nestedDataSource + .map((item) => { + return item.flattenedAll; + }) + .flat(); const newObjects = flattenedArray.filter((item) => { return prevSelected.includes(item.name); }); - newObjects.forEach(object => this.nestedTreeControl.expand(object)); + newObjects.forEach((object) => this.nestedTreeControl.expand(object)); } public ngOnDestroy(): void { @@ -265,10 +350,10 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { private openMoveDialog(node: DocumentTreeNode): void { const dialogRef = this.dialog.open(CaseFileViewFolderSelectorComponent, { - data: { categories: this.categories, document: node } + data: { categories: this.categories, document: node }, }); - dialogRef.afterClosed().subscribe(newCatId => { + dialogRef.afterClosed().subscribe((newCatId) => { if (newCatId) { this.moveDocument.emit({ newCategory: newCatId, document: node }); } @@ -281,9 +366,9 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { } public downloadFile(url: string, downloadFileName: string): void { - const a = document.createElement('a'); + const a = document.createElement("a"); document.body.appendChild(a); - a.setAttribute('style', 'display: none'); + a.setAttribute("style", "display: none"); a.href = url; a.download = downloadFileName; a.click(); diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/index.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/index.ts index d6b10cb76a..b6fccfbfbe 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/index.ts +++ b/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"; diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/palette.module.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/palette.module.ts index 8989d76ba9..163a89f1e2 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/palette.module.ts +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/palette.module.ts @@ -1,50 +1,62 @@ -import { NgxMatDatetimePickerModule, NgxMatNativeDateModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker'; -import { OverlayModule } from '@angular/cdk/overlay'; -import { CdkTreeModule } from '@angular/cdk/tree'; -import { CommonModule } from '@angular/common'; -import { ChangeDetectorRef, NgModule, Provider, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete'; -import { MAT_LEGACY_DATE_LOCALE as MAT_DATE_LOCALE } from '@angular/material/legacy-core'; -import { MatDatepickerModule } from '@angular/material/datepicker'; -import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'; -import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'; -import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input'; -import { RouterModule } from '@angular/router'; -import { PaymentLibModule } from '@hmcts/ccpay-web-component'; -import { MediaViewerModule } from '@hmcts/media-viewer'; -import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to'; -import { MarkdownModule } from 'ngx-markdown'; -import { RpxTranslationModule } from 'rpx-xui-translation'; -import { HeadersModule, TabsModule } from '../../../components'; -import { BannersModule } from '../../../components/banners/banners.module'; -import { BodyModule } from '../../../components/body/body.module'; -import { FootersModule } from '../../../components/footer/footers.module'; -import { FormModule } from '../../../components/form/form.module'; -import { CaseEditDataModule } from '../../commons/case-edit-data'; -import { LabelSubstitutorModule } from '../../directives/substitutor'; -import { PipesModule } from '../../pipes/pipes.module'; -import { CaseFlagRefdataService } from '../../services/case-flag/case-flag-refdata.service'; -import { CommonDataService } from '../../services/common-data-service/common-data-service'; -import { FormValidatorsService } from '../../services/form/form-validators.service'; -import { JurisdictionService } from '../../services/jurisdiction/jurisdiction.service'; -import { LoadingModule } from '../../services/loading/loading.module'; -import { WindowService } from '../../services/window'; -import { CaseEventCompletionComponent, CaseEventCompletionTaskCancelledComponent, CaseEventCompletionTaskReassignedComponent } from '../case-editor/case-event-completion'; -import { WriteAddressFieldComponent } from './address/write-address-field.component'; -import { FieldReadComponent, FieldReadLabelComponent, FieldWriteComponent } from './base-field'; -import { CaseFileViewOverlayMenuComponent } from './case-file-view'; -import { CaseFileViewFieldComponent } from './case-file-view/case-file-view-field.component'; import { - CaseFileViewFolderSelectorComponent -} from './case-file-view/components/case-file-view-folder-selector/case-file-view-folder-selector.component'; + NgxMatDatetimePickerModule, + NgxMatNativeDateModule, + NgxMatTimepickerModule, +} from "@angular-material-components/datetime-picker"; +import { OverlayModule } from "@angular/cdk/overlay"; +import { CdkTreeModule } from "@angular/cdk/tree"; +import { CommonModule } from "@angular/common"; import { - CaseFileViewFolderDocumentActionsComponent -} from './case-file-view/components/case-file-view-folder/case-file-view-folder-document-actions/case-file-view-folder-document-actions.component'; + ChangeDetectorRef, + NgModule, + Provider, + CUSTOM_ELEMENTS_SCHEMA, +} from "@angular/core"; +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { MatLegacyAutocompleteModule as MatAutocompleteModule } from "@angular/material/legacy-autocomplete"; +import { MAT_LEGACY_DATE_LOCALE as MAT_DATE_LOCALE } from "@angular/material/legacy-core"; +import { MatDatepickerModule } from "@angular/material/datepicker"; +import { MatLegacyDialogModule as MatDialogModule } from "@angular/material/legacy-dialog"; +import { MatLegacyFormFieldModule as MatFormFieldModule } from "@angular/material/legacy-form-field"; +import { MatLegacyInputModule as MatInputModule } from "@angular/material/legacy-input"; +import { RouterModule } from "@angular/router"; +import { PaymentLibModule } from "@hmcts/ccpay-web-component"; +import { MediaViewerModule } from "@hmcts/media-viewer"; +import { ScrollToModule } from "@nicky-lenaers/ngx-scroll-to"; +import { MarkdownModule } from "ngx-markdown"; +import { RpxTranslationModule } from "rpx-xui-translation"; +import { HeadersModule, TabsModule } from "../../../components"; +import { BannersModule } from "../../../components/banners/banners.module"; +import { BodyModule } from "../../../components/body/body.module"; +import { FootersModule } from "../../../components/footer/footers.module"; +import { FormModule } from "../../../components/form/form.module"; +import { CaseEditDataModule } from "../../commons/case-edit-data"; +import { LabelSubstitutorModule } from "../../directives/substitutor"; +import { PipesModule } from "../../pipes/pipes.module"; +import { CaseFlagRefdataService } from "../../services/case-flag/case-flag-refdata.service"; +import { CommonDataService } from "../../services/common-data-service/common-data-service"; +import { FormValidatorsService } from "../../services/form/form-validators.service"; +import { JurisdictionService } from "../../services/jurisdiction/jurisdiction.service"; +import { LoadingModule } from "../../services/loading/loading.module"; +import { WindowService } from "../../services/window"; import { - CaseFileViewFolderSortComponent -} from './case-file-view/components/case-file-view-folder/case-file-view-folder-sort/case-file-view-folder-sort.component'; -import { CaseFileViewFolderComponent } from './case-file-view/components/case-file-view-folder/case-file-view-folder.component'; + CaseEventCompletionComponent, + CaseEventCompletionTaskCancelledComponent, + CaseEventCompletionTaskReassignedComponent, +} from "../case-editor/case-event-completion"; +import { WriteAddressFieldComponent } from "./address/write-address-field.component"; +import { + FieldReadComponent, + FieldReadLabelComponent, + FieldWriteComponent, +} from "./base-field"; +import { CaseFileViewOverlayMenuComponent } from "./case-file-view"; +import { CaseFileViewFieldComponent } from "./case-file-view/case-file-view-field.component"; +import { CaseFileViewFolderSelectorComponent } from "./case-file-view/components/case-file-view-folder-selector/case-file-view-folder-selector.component"; +import { CaseFileViewFolderDocumentActionsComponent } from "./case-file-view/components/case-file-view-folder/case-file-view-folder-document-actions/case-file-view-folder-document-actions.component"; +import { CaseFileViewFolderSortComponent } from "./case-file-view/components/case-file-view-folder/case-file-view-folder-sort/case-file-view-folder-sort.component"; +import { CaseFileViewFolderToggleComponent } from "./case-file-view/components/case-file-view-folder/case-file-view-folder-toggle/case-file-view-folder-toggle.component"; +import { CaseFileViewFolderComponent } from "./case-file-view/components/case-file-view-folder/case-file-view-folder.component"; import { AddCommentsComponent, CaseFlagSummaryListComponent, @@ -61,37 +73,66 @@ import { UpdateFlagAddTranslationFormComponent, UpdateFlagComponent, UpdateFlagTitleDisplayPipe, - WriteCaseFlagFieldComponent -} from './case-flag'; -import { ReadCaseLinkFieldComponent } from './case-link/read-case-link-field.component'; -import { WriteCaseLinkFieldComponent } from './case-link/write-case-link-field.component'; -import { ReadCollectionFieldComponent, WriteCollectionFieldComponent } from './collection'; -import { CollectionCreateCheckerService } from './collection/collection-create-checker.service'; + WriteCaseFlagFieldComponent, +} from "./case-flag"; +import { ReadCaseLinkFieldComponent } from "./case-link/read-case-link-field.component"; +import { WriteCaseLinkFieldComponent } from "./case-link/write-case-link-field.component"; +import { + ReadCollectionFieldComponent, + WriteCollectionFieldComponent, +} from "./collection"; +import { CollectionCreateCheckerService } from "./collection/collection-create-checker.service"; import { ReadComplexFieldCollectionTableComponent, ReadComplexFieldComponent, ReadComplexFieldRawComponent, ReadComplexFieldTableComponent, - WriteComplexFieldComponent -} from './complex'; -import { ReadDateFieldComponent, WriteDateContainerFieldComponent, WriteDateFieldComponent } from './date'; -import { DatetimePickerComponent } from './datetime-picker'; -import { DocumentUrlPipe } from './document'; -import { FileUploadProgressGuard } from './document/file-upload-progress.guard'; -import { FileUploadStateService } from './document/file-upload-state.service'; -import { ReadDocumentFieldComponent } from './document/read-document-field.component'; -import { WriteDocumentFieldComponent } from './document/write-document-field.component'; -import { DynamicListPipe, ReadDynamicListFieldComponent } from './dynamic-list'; -import { WriteDynamicListFieldComponent } from './dynamic-list/write-dynamic-list-field.component'; -import { ReadDynamicMultiSelectListFieldComponent, WriteDynamicMultiSelectListFieldComponent } from './dynamic-multi-select-list'; -import { DynamicRadioListPipe, ReadDynamicRadioListFieldComponent } from './dynamic-radio-list'; -import { WriteDynamicRadioListFieldComponent } from './dynamic-radio-list/write-dynamic-radio-list-field.component'; -import { ReadEmailFieldComponent, WriteEmailFieldComponent } from './email'; -import { FixedListPipe, ReadFixedListFieldComponent, WriteFixedListFieldComponent } from './fixed-list'; -import { FixedRadioListPipe, ReadFixedRadioListFieldComponent, WriteFixedRadioListFieldComponent } from './fixed-radio-list'; -import { CaseHistoryViewerFieldComponent, EventLogComponent, EventLogDetailsComponent, EventLogTableComponent } from './history'; -import { ReadJudicialUserFieldComponent, WriteJudicialUserFieldComponent } from './judicial-user'; -import { LabelFieldComponent } from './label'; + WriteComplexFieldComponent, +} from "./complex"; +import { + ReadDateFieldComponent, + WriteDateContainerFieldComponent, + WriteDateFieldComponent, +} from "./date"; +import { DatetimePickerComponent } from "./datetime-picker"; +import { DocumentUrlPipe } from "./document"; +import { FileUploadProgressGuard } from "./document/file-upload-progress.guard"; +import { FileUploadStateService } from "./document/file-upload-state.service"; +import { ReadDocumentFieldComponent } from "./document/read-document-field.component"; +import { WriteDocumentFieldComponent } from "./document/write-document-field.component"; +import { DynamicListPipe, ReadDynamicListFieldComponent } from "./dynamic-list"; +import { WriteDynamicListFieldComponent } from "./dynamic-list/write-dynamic-list-field.component"; +import { + ReadDynamicMultiSelectListFieldComponent, + WriteDynamicMultiSelectListFieldComponent, +} from "./dynamic-multi-select-list"; +import { + DynamicRadioListPipe, + ReadDynamicRadioListFieldComponent, +} from "./dynamic-radio-list"; +import { WriteDynamicRadioListFieldComponent } from "./dynamic-radio-list/write-dynamic-radio-list-field.component"; +import { ReadEmailFieldComponent, WriteEmailFieldComponent } from "./email"; +import { + FixedListPipe, + ReadFixedListFieldComponent, + WriteFixedListFieldComponent, +} from "./fixed-list"; +import { + FixedRadioListPipe, + ReadFixedRadioListFieldComponent, + WriteFixedRadioListFieldComponent, +} from "./fixed-radio-list"; +import { + CaseHistoryViewerFieldComponent, + EventLogComponent, + EventLogDetailsComponent, + EventLogTableComponent, +} from "./history"; +import { + ReadJudicialUserFieldComponent, + WriteJudicialUserFieldComponent, +} from "./judicial-user"; +import { LabelFieldComponent } from "./label"; import { BeforeYouStartComponent, CheckYourAnswersComponent, @@ -101,24 +142,38 @@ import { NoLinkedCasesComponent, ReadLinkedCasesFieldComponent, UnLinkCasesComponent, - WriteLinkedCasesFieldComponent -} from './linked-cases'; -import { LinkedCasesService } from './linked-cases/services'; -import { MarkdownComponentModule } from './markdown'; -import { MoneyGbpInputComponent, ReadMoneyGbpFieldComponent, WriteMoneyGbpFieldComponent } from './money-gbp'; -import { ReadMultiSelectListFieldComponent, WriteMultiSelectListFieldComponent } from './multi-select-list'; -import { ReadNumberFieldComponent, WriteNumberFieldComponent } from './number'; -import { ReadOrderSummaryFieldComponent, ReadOrderSummaryRowComponent, WriteOrderSummaryFieldComponent } from './order-summary'; + WriteLinkedCasesFieldComponent, +} from "./linked-cases"; +import { LinkedCasesService } from "./linked-cases/services"; +import { MarkdownComponentModule } from "./markdown"; +import { + MoneyGbpInputComponent, + ReadMoneyGbpFieldComponent, + WriteMoneyGbpFieldComponent, +} from "./money-gbp"; +import { + ReadMultiSelectListFieldComponent, + WriteMultiSelectListFieldComponent, +} from "./multi-select-list"; +import { ReadNumberFieldComponent, WriteNumberFieldComponent } from "./number"; +import { + ReadOrderSummaryFieldComponent, + ReadOrderSummaryRowComponent, + WriteOrderSummaryFieldComponent, +} from "./order-summary"; import { ReadOrganisationFieldComponent, ReadOrganisationFieldRawComponent, ReadOrganisationFieldTableComponent, WriteOrganisationComplexFieldComponent, - WriteOrganisationFieldComponent -} from './organisation'; -import { PaletteService } from './palette.service'; -import { CasePaymentHistoryViewerFieldComponent } from './payment'; -import { ReadPhoneUKFieldComponent, WritePhoneUKFieldComponent } from './phone-uk'; + WriteOrganisationFieldComponent, +} from "./organisation"; +import { PaletteService } from "./palette.service"; +import { CasePaymentHistoryViewerFieldComponent } from "./payment"; +import { + ReadPhoneUKFieldComponent, + WritePhoneUKFieldComponent, +} from "./phone-uk"; import { QualifyingQuestionDetailComponent, QualifyingQuestionOptionsComponent, @@ -132,16 +187,23 @@ import { QueryWriteDateInputComponent, QueryWriteRaiseQueryComponent, QueryWriteRespondToQueryComponent, - ReadQueryManagementFieldComponent -} from './query-management'; -import { QualifyingQuestionService } from './query-management/services'; -import { ReadTextFieldComponent, WriteTextFieldComponent } from './text'; -import { ReadTextAreaFieldComponent, WriteTextAreaFieldComponent } from './text-area'; -import { UnsupportedFieldComponent } from './unsupported-field.component'; -import { PaletteUtilsModule } from './utils'; -import { WaysToPayFieldComponent } from './waystopay'; -import { ReadYesNoFieldComponent, WriteYesNoFieldComponent, YesNoService } from './yes-no'; -import { QueryConfirmationComponent } from './query-management/components/query-confirmation/query-confirmation.component'; + ReadQueryManagementFieldComponent, +} from "./query-management"; +import { QualifyingQuestionService } from "./query-management/services"; +import { ReadTextFieldComponent, WriteTextFieldComponent } from "./text"; +import { + ReadTextAreaFieldComponent, + WriteTextAreaFieldComponent, +} from "./text-area"; +import { UnsupportedFieldComponent } from "./unsupported-field.component"; +import { PaletteUtilsModule } from "./utils"; +import { WaysToPayFieldComponent } from "./waystopay"; +import { + ReadYesNoFieldComponent, + WriteYesNoFieldComponent, + YesNoService, +} from "./yes-no"; +import { QueryConfirmationComponent } from "./query-management/components/query-confirmation/query-confirmation.component"; const PALETTE_COMPONENTS = [ UnsupportedFieldComponent, @@ -225,6 +287,7 @@ const PALETTE_COMPONENTS = [ CaseFileViewFieldComponent, CaseFileViewFolderComponent, CaseFileViewFolderSortComponent, + CaseFileViewFolderToggleComponent, CaseFileViewOverlayMenuComponent, CaseFileViewFolderDocumentActionsComponent, CaseFileViewFolderSelectorComponent, @@ -274,7 +337,7 @@ const PALETTE_COMPONENTS = [ // Case event completion CaseEventCompletionComponent, CaseEventCompletionTaskCancelledComponent, - CaseEventCompletionTaskReassignedComponent + CaseEventCompletionTaskReassignedComponent, ]; @NgModule({ @@ -311,7 +374,7 @@ const PALETTE_COMPONENTS = [ MatDialogModule, MediaViewerModule, LoadingModule, - MarkdownComponentModule + MarkdownComponentModule, ], declarations: [ FixedListPipe, @@ -323,7 +386,7 @@ const PALETTE_COMPONENTS = [ LanguageInterpreterDisplayPipe, ManageCaseFlagsLabelDisplayPipe, UpdateFlagTitleDisplayPipe, - ...PALETTE_COMPONENTS + ...PALETTE_COMPONENTS, ], exports: [ NgxMatDatetimePickerModule, @@ -333,7 +396,7 @@ const PALETTE_COMPONENTS = [ PaletteUtilsModule, PipesModule, MarkdownComponentModule, - ...PALETTE_COMPONENTS + ...PALETTE_COMPONENTS, ], providers: [ ChangeDetectorRef as Provider, @@ -349,9 +412,8 @@ const PALETTE_COMPONENTS = [ CommonDataService, LinkedCasesService, QualifyingQuestionService, - {provide: MAT_DATE_LOCALE, useValue: 'en-GB'} + { provide: MAT_DATE_LOCALE, useValue: "en-GB" }, ], - schemas: [CUSTOM_ELEMENTS_SCHEMA] + schemas: [CUSTOM_ELEMENTS_SCHEMA], }) -export class PaletteModule { -} +export class PaletteModule {} From 1d7b1bcb559271d981e2ae806e6eee9d41f515b5 Mon Sep 17 00:00:00 2001 From: japickering Date: Thu, 30 Jan 2025 14:17:31 +0000 Subject: [PATCH 02/10] exui-673 - patch expandAll logic for toggling case file folders --- .../case-file-view-folder-sort.component.scss | 1 - ...ase-file-view-folder-toggle.component.html | 2 +- ...ase-file-view-folder-toggle.component.scss | 1 - .../case-file-view-folder-toggle.component.ts | 4 ++-- .../case-file-view-folder.component.html | 2 +- .../case-file-view-folder.component.scss | 19 ++++++++++++------- .../case-file-view-folder.component.ts | 16 ++++++++-------- 7 files changed, 24 insertions(+), 21 deletions(-) diff --git a/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 b/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 index 42e11be993..3730c4fdad 100644 --- a/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 +++ b/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: inline-block; height: 20px; margin-right: -2px; } diff --git a/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 b/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 index 8e1b6815bf..bc1f88896f 100644 --- a/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 +++ b/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 @@ -5,7 +5,7 @@ > Toggle list diff --git a/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 b/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 index e89dba7268..7b3a1480f4 100644 --- a/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 +++ b/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 @@ -1,5 +1,4 @@ .toggle-button-icon { - display: inline-block; margin-right: 2px; height: 20px; } diff --git a/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 b/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 index 4059fce1ec..4fcf275388 100644 --- a/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 +++ b/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 @@ -18,12 +18,12 @@ export class CaseFileViewFolderToggleComponent implements OnInit { public overlayMenuItems: CaseFileViewOverlayMenuItem[] = [ { actionText: "Expand All", - iconSrc: "/assets/images/folder-open.png", + iconSrc: "/assets/img/accordion-plus.png", actionFn: () => this.expandAll.emit(true), }, { actionText: "Collapse All", - iconSrc: "/assets/images/folder-close.png", + iconSrc: "/assets/img/accordion-minus.png", actionFn: () => this.collapseAll.emit(true), }, ]; diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html index 590fad9503..bc90e7818d 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html @@ -16,7 +16,7 @@
Documents ({{ documentCount }})
-
+
Date: Thu, 30 Jan 2025 14:41:52 +0000 Subject: [PATCH 03/10] exui-673 - update pkg version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1191f1c692..1c49ada2b1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hmcts/ccd-case-ui-toolkit", - "version": "7.1.31", + "version": "7.1.31-expand-all-folders", "engines": { "node": ">=18.19.0" }, From 5a494d668a88d9c2bcbf90e36c13ea26bb40c40e Mon Sep 17 00:00:00 2001 From: jphcdcgi Date: Tue, 4 Feb 2025 13:32:24 +0000 Subject: [PATCH 04/10] exui-673 - undo prettier code formatting --- .../case-file-view-field.component.html | 27 +- ...ase-file-view-folder-toggle.component.html | 14 +- .../case-file-view-folder-toggle.component.ts | 2 - .../case-file-view-folder.component.html | 77 ++--- .../case-file-view-folder.component.ts | 287 +++++++----------- 5 files changed, 140 insertions(+), 267 deletions(-) diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/case-file-view-field.component.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/case-file-view-field.component.html index 4fd15efd96..064edc7168 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/case-file-view-field.component.html +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/case-file-view-field.component.html @@ -1,7 +1,6 @@ -
+

There is a problem @@ -26,13 +25,10 @@

Case file

- + (clickedDocument)="setMediaViewerFile($event); resetErrorMessages()" (moveDocument)="moveDocument($event)" + [allowMoving]="allowMoving">
@@ -40,16 +36,11 @@

Case file

+ [downloadFileName]="currentDocument.document_filename" [showToolbar]="true" + [contentType]="currentDocument.content_type" [enableAnnotations]="true" [enableRedactions]="true" + [height]="'94.5vh'" [caseId]="caseId" [enableICP]="isIcpEnabled()">
-
+
\ No newline at end of file diff --git a/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 b/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 index bc1f88896f..ba8196da90 100644 --- a/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 +++ b/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 @@ -1,13 +1,5 @@ - + - Toggle list + Toggle list - + \ No newline at end of file diff --git a/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 b/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 index 4fcf275388..d083310650 100644 --- a/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 +++ b/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 @@ -1,5 +1,3 @@ -/* eslint-disable comma-dangle */ -/* eslint-disable quotes */ import { Component, EventEmitter, Output, OnInit } from "@angular/core"; import { AbstractAppConfig } from "../../../../../../../app.config"; import { CaseFileViewOverlayMenuItem } from "../../shared/case-file-view-overlay-menu/case-file-view-overlay-menu-item.model"; diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html index bc90e7818d..ea17e4ba84 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html +++ b/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,14 +1,8 @@
- +
@@ -17,14 +11,10 @@ Documents ({{ documentCount }})
- - + +
@@ -35,72 +25,51 @@
- - - + -
+
-
+
\ No newline at end of file diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.ts index 4ad366f2e8..134b8d808b 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.ts +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.ts @@ -1,56 +1,38 @@ -/* eslint-disable lines-between-class-members */ -/* eslint-disable comma-dangle */ -/* eslint-disable quotes */ -import { NestedTreeControl } from "@angular/cdk/tree"; -import { - Component, - EventEmitter, - Input, - OnDestroy, - OnInit, - Output, -} from "@angular/core"; -import { FormControl, FormGroup } from "@angular/forms"; -import { MatLegacyDialog as MatDialog } from "@angular/material/legacy-dialog"; -import { Router } from "@angular/router"; -import { Observable, Subscription, of } from "rxjs"; -import { switchMap, tap } from "rxjs/operators"; -import { AbstractAppConfig } from "../../../../../../app.config"; +import { NestedTreeControl } from '@angular/cdk/tree'; +import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import { FormControl, FormGroup } from '@angular/forms'; +import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; +import { Router } from '@angular/router'; +import { Observable, Subscription, of } from 'rxjs'; +import { switchMap, tap } from 'rxjs/operators'; +import { AbstractAppConfig } from '../../../../../../app.config'; import { CaseFileViewCategory, CaseFileViewDocument, CaseFileViewSortColumns, CategoriesAndDocuments, DocumentTreeNode, - DocumentTreeNodeType, -} from "../../../../../domain/case-file-view"; -import { SortOrder } from "../../../../../domain/sort-order.enum"; -import { - DocumentManagementService, - WindowService, -} from "../../../../../services"; -import { CaseFileViewFolderSelectorComponent } from "../case-file-view-folder-selector/case-file-view-folder-selector.component"; -export const MEDIA_VIEWER_LOCALSTORAGE_KEY = "media-viewer-info"; + DocumentTreeNodeType +} from '../../../../../domain/case-file-view'; +import { SortOrder } from '../../../../../domain/sort-order.enum'; +import { DocumentManagementService, WindowService } from '../../../../../services'; +import { CaseFileViewFolderSelectorComponent } from '../case-file-view-folder-selector/case-file-view-folder-selector.component'; +export const MEDIA_VIEWER_LOCALSTORAGE_KEY = 'media-viewer-info'; @Component({ - selector: "ccd-case-file-view-folder", - templateUrl: "./case-file-view-folder.component.html", - styleUrls: ["./case-file-view-folder.component.scss"], + selector: 'ccd-case-file-view-folder', + templateUrl: './case-file-view-folder.component.html', + styleUrls: ['./case-file-view-folder.component.scss'], }) export class CaseFileViewFolderComponent implements OnInit, OnDestroy { - private static readonly UNCATEGORISED_DOCUMENTS_TITLE = - "Uncategorised documents"; - private static readonly DOCUMENT_SEARCH_FORM_CONTROL_NAME = - "documentSearchFormControl"; + private static readonly UNCATEGORISED_DOCUMENTS_TITLE = 'Uncategorised documents'; + private static readonly DOCUMENT_SEARCH_FORM_CONTROL_NAME = 'documentSearchFormControl'; private static readonly MINIMUM_SEARCH_CHARACTERS = 1; @Input() public categoriesAndDocuments: Observable; @Input() public allowMoving: boolean; @Output() public clickedDocument = new EventEmitter(); - @Output() public moveDocument = new EventEmitter<{ - newCategory: string; - document: DocumentTreeNode; - }>(); + @Output() public moveDocument = new EventEmitter<{ newCategory: string, document: DocumentTreeNode }>(); public nestedTreeControl: NestedTreeControl; public nestedDataSource: DocumentTreeNode[]; @@ -65,15 +47,23 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { public searchTermLength: number; private getChildren = (node: DocumentTreeNode) => of(node.children); - public nestedChildren = (_: number, nodeData: DocumentTreeNode) => - nodeData.children; + public nestedChildren = (_: number, nodeData: DocumentTreeNode) => nodeData.children; public get documentCount() { if (this.nestedDataSource?.length) { return this.nestedDataSource.reduce((acc, item) => { return acc + item.childDocumentCount; }, 0); + } else { + return 0; } - return 0; + } + + public expandAll(expand: boolean) { + this.nestedTreeControl.expandDescendants(this.nestedDataSource[0]); + } + + public collapseAll(expand: boolean) { + this.nestedTreeControl.collapseAll(); } constructor( @@ -83,107 +73,71 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { private readonly dialog: MatDialog, private readonly appConfig: AbstractAppConfig ) { - this.nestedTreeControl = new NestedTreeControl( - this.getChildren - ); - } - - public expandAll(expand: boolean) { - this.nestedTreeControl.expandDescendants(this.nestedDataSource[0]); - } - - public collapseAll(expand: boolean) { - this.nestedTreeControl.collapseAll(); + this.nestedTreeControl = new NestedTreeControl(this.getChildren); } public ngOnInit(): void { this.documentFilterFormGroup = new FormGroup({}); - this.documentSearchFormControl = new FormControl(""); - this.documentFilterFormGroup.addControl( - CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME, - this.documentSearchFormControl - ); + this.documentSearchFormControl = new FormControl(''); + this.documentFilterFormGroup.addControl(CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME, this.documentSearchFormControl); // Listen to search input and initiate filter documents if at least three characters entered - this.documentFilterSubscription = - this.documentSearchFormControl.valueChanges - .pipe( - tap( - (searchTerm: string) => (this.searchTermLength = searchTerm.length) - ), - switchMap((searchTerm: string) => - this.filter(searchTerm.toLowerCase()).pipe() - ) - ) - .subscribe((documentTreeData) => { - this.nestedDataSource = documentTreeData; - this.nestedTreeControl.dataNodes = documentTreeData; - this.searchTermLength >= - CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS - ? this.nestedTreeControl.expandAll() - : this.nestedTreeControl.collapseAll(); - }); + this.documentFilterSubscription = this.documentSearchFormControl.valueChanges.pipe( + tap((searchTerm: string) => this.searchTermLength = searchTerm.length), + switchMap((searchTerm: string) => this.filter(searchTerm.toLowerCase()).pipe()) + ).subscribe(documentTreeData => { + this.nestedDataSource = documentTreeData; + this.nestedTreeControl.dataNodes = documentTreeData; + this.searchTermLength >= CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS + ? this.nestedTreeControl.expandAll() + : this.nestedTreeControl.collapseAll(); + }); // Subscribe to the input categories and documents, and generate tree data and initialise cdk tree - this.categoriesAndDocumentsSubscription = - this.categoriesAndDocuments.subscribe((categoriesAndDocuments) => { - const categories = categoriesAndDocuments.categories; - this.categories = categories; - // Generate document tree data from categories - this.documentTreeData = this.generateTreeData(categories); - // Append uncategorised documents - if ( - categoriesAndDocuments.uncategorised_documents && - categoriesAndDocuments.uncategorised_documents.length > 0 - ) { - const uncategorisedDocuments = this.getUncategorisedDocuments( - categoriesAndDocuments.uncategorised_documents - ); - this.documentTreeData.push(uncategorisedDocuments); - } + this.categoriesAndDocumentsSubscription = this.categoriesAndDocuments.subscribe(categoriesAndDocuments => { + const categories = categoriesAndDocuments.categories; + this.categories = categories; + // Generate document tree data from categories + this.documentTreeData = this.generateTreeData(categories); + // Append uncategorised documents + if (categoriesAndDocuments.uncategorised_documents && categoriesAndDocuments.uncategorised_documents.length > 0) { + const uncategorisedDocuments = this.getUncategorisedDocuments(categoriesAndDocuments.uncategorised_documents); + this.documentTreeData.push(uncategorisedDocuments); + } - // Initialise cdk tree with generated data - this.nestedDataSource = this.documentTreeData; - this.nestedTreeControl.dataNodes = this.documentTreeData; - this.sortDataSourceDescending( - CaseFileViewSortColumns.DOCUMENT_UPLOAD_TIMESTAMP - ); - }); + // Initialise cdk tree with generated data + this.nestedDataSource = this.documentTreeData; + this.nestedTreeControl.dataNodes = this.documentTreeData; + this.sortDataSourceDescending(CaseFileViewSortColumns.DOCUMENT_UPLOAD_TIMESTAMP); + }); } - public generateTreeData( - categories: CaseFileViewCategory[] - ): DocumentTreeNode[] { + public generateTreeData(categories: CaseFileViewCategory[]): DocumentTreeNode[] { return categories.reduce((tree, node) => { const newDocumentTreeNode = new DocumentTreeNode(); newDocumentTreeNode.name = node.category_name; newDocumentTreeNode.type = DocumentTreeNodeType.FOLDER; - newDocumentTreeNode.children = [ - ...this.generateTreeData(node.sub_categories), - ...this.getDocuments(node.documents), - ]; + newDocumentTreeNode.children = [...this.generateTreeData(node.sub_categories), ...this.getDocuments(node.documents)]; newDocumentTreeNode.category_order = node.category_order; - return [...tree, newDocumentTreeNode].sort( - (a, b) => a.category_order - b.category_order - ); + return [ + ...tree, + newDocumentTreeNode, + ].sort((a,b) => a.category_order - b.category_order); }, []); } public getDocuments(documents: CaseFileViewDocument[]): DocumentTreeNode[] { const documentsToReturn: DocumentTreeNode[] = []; - documents.forEach((document) => { + documents.forEach(document => { const documentTreeNode = new DocumentTreeNode(); documentTreeNode.name = document.document_filename; documentTreeNode.type = DocumentTreeNodeType.DOCUMENT; documentTreeNode.document_filename = document.document_filename; documentTreeNode.document_binary_url = document.document_binary_url; documentTreeNode.attribute_path = document.attribute_path; - documentTreeNode.upload_timestamp = - this.appConfig.getEnableCaseFileViewVersion1_1() && - document.upload_timestamp - ? document.upload_timestamp.toString() - : ""; + documentTreeNode.upload_timestamp = this.appConfig.getEnableCaseFileViewVersion1_1() + && document.upload_timestamp ? document.upload_timestamp.toString() : ''; documentsToReturn.push(documentTreeNode); }); @@ -191,29 +145,23 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { return documentsToReturn; } - public getUncategorisedDocuments( - uncategorisedDocuments: CaseFileViewDocument[] - ): DocumentTreeNode { + public getUncategorisedDocuments(uncategorisedDocuments: CaseFileViewDocument[]): DocumentTreeNode { const documents: DocumentTreeNode[] = []; - uncategorisedDocuments.forEach((document) => { + uncategorisedDocuments.forEach(document => { const documentTreeNode = new DocumentTreeNode(); documentTreeNode.name = document.document_filename; documentTreeNode.type = DocumentTreeNodeType.DOCUMENT; documentTreeNode.document_filename = document.document_filename; documentTreeNode.document_binary_url = document.document_binary_url; documentTreeNode.attribute_path = document.attribute_path; - documentTreeNode.upload_timestamp = - this.appConfig.getEnableCaseFileViewVersion1_1() && - document.upload_timestamp - ? document.upload_timestamp.toString() - : ""; + documentTreeNode.upload_timestamp = this.appConfig.getEnableCaseFileViewVersion1_1() + && document.upload_timestamp ? document.upload_timestamp.toString() : ''; documents.push(documentTreeNode); }); const uncategorisedNode = new DocumentTreeNode(); - uncategorisedNode.name = - CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE; + uncategorisedNode.name = CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE; uncategorisedNode.type = DocumentTreeNodeType.FOLDER; uncategorisedNode.children = documents; @@ -228,69 +176,47 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { } let filteredData = this.documentTreeData; - if ( - searchTerm && - searchTerm.length >= - CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS && - this.documentFilterFormGroup.controls[ - CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME - ].value.length > 0 - ) { - filteredData = this.documentTreeData - .map(copy) - .filter(function filterTreeData(node: DocumentTreeNode) { - if ( - node.name && - node.name.toLowerCase().includes(searchTerm) && - node.type === DocumentTreeNodeType.DOCUMENT - ) { - return true; - } - // Call recursively if node has children - if (node.children) { - return (node.children = node.children - .map(copy) - .filter(filterTreeData)).length; - } - }); + if (searchTerm && searchTerm.length >= CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS && this.documentFilterFormGroup.controls[CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME].value.length > 0) { + filteredData = this.documentTreeData.map(copy).filter(function filterTreeData(node: DocumentTreeNode) { + if (node.name && node.name.toLowerCase().includes(searchTerm) && node.type === DocumentTreeNodeType.DOCUMENT) { + return true; + } + // Call recursively if node has children + if (node.children) { + return (node.children = node.children.map(copy).filter(filterTreeData)).length; + } + }); } return of(filteredData); } public triggerDocumentAction( - actionType: "changeFolder" | "openInANewTab" | "download" | "print", + actionType: 'changeFolder' | 'openInANewTab' | 'download' | 'print', documentTreeNode: DocumentTreeNode ): void { switch (actionType) { - case "changeFolder": + case ('changeFolder'): this.openMoveDialog(documentTreeNode); break; - case "openInANewTab": - this.windowService.setLocalStorage( - MEDIA_VIEWER_LOCALSTORAGE_KEY, + case ('openInANewTab'): + this.windowService.setLocalStorage(MEDIA_VIEWER_LOCALSTORAGE_KEY, this.documentManagementService.getMediaViewerInfo({ document_binary_url: documentTreeNode.document_binary_url, - document_filename: documentTreeNode.document_filename, - }) - ); + document_filename: documentTreeNode.document_filename + })); this.windowService.openOnNewTab( - this.router.createUrlTree(["/media-viewer"])?.toString() + this.router.createUrlTree(['/media-viewer'])?.toString() ); break; - case "download": + case ('download'): // Create a URL from the document_binary_url property (absolute URL) and use the path portion (relative URL). // This is necessary because the Manage Cases application will automatically apply a proxy to the request, with // the correct remote endpoint - this.downloadFile( - new URL(documentTreeNode.document_binary_url).pathname, - documentTreeNode.document_filename - ); + this.downloadFile(new URL(documentTreeNode.document_binary_url).pathname, documentTreeNode.document_filename); break; - case "print": - this.printDocument( - new URL(documentTreeNode.document_binary_url).pathname - ); + case ('print'): + this.printDocument(new URL(documentTreeNode.document_binary_url).pathname); break; default: return; @@ -298,7 +224,7 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { } public sortDataSourceAscending(column: number) { - const sortedData = this.nestedDataSource.map((item) => { + const sortedData = this.nestedDataSource.map(item => { item.sortChildrenAscending(column, SortOrder.ASCENDING); return item; }); @@ -307,7 +233,7 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { } public sortDataSourceDescending(column: number) { - const sortedData = this.nestedDataSource.map((item) => { + const sortedData = this.nestedDataSource.map(item => { item.sortChildrenDescending(column, SortOrder.DESCENDING); return item; }); @@ -319,8 +245,7 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { const prevSelected = this.nestedTreeControl.expansionModel.selected.map( (item) => { return item.name; - } - ); + }); this.nestedTreeControl.collapseAll(); this.nestedDataSource = data.map((item) => { @@ -332,15 +257,13 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { return newDocumentTreeNode; }); - const flattenedArray = this.nestedDataSource - .map((item) => { - return item.flattenedAll; - }) - .flat(); + const flattenedArray = this.nestedDataSource.map((item) => { + return item.flattenedAll; + }).flat(); const newObjects = flattenedArray.filter((item) => { return prevSelected.includes(item.name); }); - newObjects.forEach((object) => this.nestedTreeControl.expand(object)); + newObjects.forEach(object => this.nestedTreeControl.expand(object)); } public ngOnDestroy(): void { @@ -350,10 +273,10 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { private openMoveDialog(node: DocumentTreeNode): void { const dialogRef = this.dialog.open(CaseFileViewFolderSelectorComponent, { - data: { categories: this.categories, document: node }, + data: { categories: this.categories, document: node } }); - dialogRef.afterClosed().subscribe((newCatId) => { + dialogRef.afterClosed().subscribe(newCatId => { if (newCatId) { this.moveDocument.emit({ newCategory: newCatId, document: node }); } @@ -366,9 +289,9 @@ export class CaseFileViewFolderComponent implements OnInit, OnDestroy { } public downloadFile(url: string, downloadFileName: string): void { - const a = document.createElement("a"); + const a = document.createElement('a'); document.body.appendChild(a); - a.setAttribute("style", "display: none"); + a.setAttribute('style', 'display: none'); a.href = url; a.download = downloadFileName; a.click(); From cebeb13253c84e0cb917ba71d5b0b8d0cd1d183f Mon Sep 17 00:00:00 2001 From: jphcdcgi Date: Thu, 6 Feb 2025 12:04:35 +0000 Subject: [PATCH 05/10] exui-673 - remove redundant ngOnInit for this component --- .../case-file-view-folder-toggle.component.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/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 b/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 index d083310650..af681514b5 100644 --- a/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 +++ b/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 @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Output, OnInit } from "@angular/core"; +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"; @@ -7,7 +7,7 @@ import { CaseFileViewOverlayMenuItem } from "../../shared/case-file-view-overlay templateUrl: "./case-file-view-folder-toggle.component.html", styleUrls: ["./case-file-view-folder-toggle.component.scss"], }) -export class CaseFileViewFolderToggleComponent implements OnInit { +export class CaseFileViewFolderToggleComponent { public isOpen = false; @Output() public expandAll = new EventEmitter(); @@ -27,6 +27,4 @@ export class CaseFileViewFolderToggleComponent implements OnInit { ]; constructor(private readonly appConfig: AbstractAppConfig) {} - - public ngOnInit(): void {} } From 6c9a74d1540092f17f9190027d13dc018694670c Mon Sep 17 00:00:00 2001 From: jphcdcgi Date: Thu, 6 Feb 2025 13:19:45 +0000 Subject: [PATCH 06/10] exui-673 - update pkg versions --- package.json | 2 +- projects/ccd-case-ui-toolkit/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d734088ddf..51520f9bf0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hmcts/ccd-case-ui-toolkit", - "version": "7.1.34", + "version": "7.1.34-exui-673-rc1", "engines": { "node": ">=18.19.0" }, diff --git a/projects/ccd-case-ui-toolkit/package.json b/projects/ccd-case-ui-toolkit/package.json index dcc5d63f2c..b46b96e28f 100644 --- a/projects/ccd-case-ui-toolkit/package.json +++ b/projects/ccd-case-ui-toolkit/package.json @@ -1,6 +1,6 @@ { "name": "@hmcts/ccd-case-ui-toolkit", - "version": "7.1.34", + "version": "7.1.34-exui-673-rc1", "engines": { "node": ">=18.19.0" }, From aa63d14afe8dbfa89fb8a279a98eb18709ef3be1 Mon Sep 17 00:00:00 2001 From: jphcdcgi Date: Fri, 7 Feb 2025 10:27:51 +0000 Subject: [PATCH 07/10] exui-673 - Add unit tests and update pkg versions --- package.json | 2 +- projects/ccd-case-ui-toolkit/package.json | 2 +- ...-file-view-folder-toggle.component.spec.ts | 16 +++++++- .../case-file-view-folder.component.spec.ts | 41 ++++++++++++++++++- 4 files changed, 56 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 51520f9bf0..d4e29b8799 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hmcts/ccd-case-ui-toolkit", - "version": "7.1.34-exui-673-rc1", + "version": "7.1.35-exui-673-rc1", "engines": { "node": ">=18.19.0" }, diff --git a/projects/ccd-case-ui-toolkit/package.json b/projects/ccd-case-ui-toolkit/package.json index b46b96e28f..8aa6843fde 100644 --- a/projects/ccd-case-ui-toolkit/package.json +++ b/projects/ccd-case-ui-toolkit/package.json @@ -1,6 +1,6 @@ { "name": "@hmcts/ccd-case-ui-toolkit", - "version": "7.1.34-exui-673-rc1", + "version": "7.1.35-exui-673-rc1", "engines": { "node": ">=18.19.0" }, diff --git a/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 b/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 index aa9fc7c213..3768cd5da4 100644 --- a/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 +++ b/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 @@ -1,7 +1,5 @@ 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"; @@ -36,4 +34,18 @@ describe("CaseFileViewFolderToggleComponent", () => { it("should create", () => { expect(component).toBeTruthy(); }); + + it('should emit expandAll event when Expand All action is triggered', () => { + spyOn(component.expandAll, 'emit'); + const expandAllAction = component.overlayMenuItems.find(item => item.actionText === 'Expand All'); + expandAllAction.actionFn(); + expect(component.expandAll.emit).toHaveBeenCalledWith(true); + }); + + it('should emit collapseAll event when Collapse All action is triggered', () => { + spyOn(component.collapseAll, 'emit'); + const collapseAllAction = component.overlayMenuItems.find(item => item.actionText === 'Collapse All'); + collapseAllAction.actionFn(); + expect(component.collapseAll.emit).toHaveBeenCalledWith(true); + }); }); diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts index f641204ac9..e6e2eafac9 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts @@ -1,4 +1,4 @@ -import { CdkTreeModule } from '@angular/cdk/tree'; +import { CdkTreeModule, NestedTreeControl } from '@angular/cdk/tree'; import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'; @@ -23,6 +23,45 @@ import createSpyObj = jasmine.createSpyObj; import { DatePipe } from '../../../utils'; import moment from 'moment-timezone'; +describe('CaseFileViewFolderComponent', () => { + let component: CaseFileViewFolderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [CaseFileViewFolderComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CaseFileViewFolderComponent); + component = fixture.componentInstance; + component.nestedTreeControl = new NestedTreeControl(node => node.children); + component.nestedDataSource = [ + { + name: 'Root', + children: [ + { name: 'Child 1', children: [] }, + { name: 'Child 2', children: [] } + ] + } + ] as DocumentTreeNode[]; + fixture.detectChanges(); + }); + + it('should expand all folders when expandAll is called', () => { + spyOn(component.nestedTreeControl, 'expandDescendants'); + component.expandAll(true); + expect(component.nestedTreeControl.expandDescendants).toHaveBeenCalledWith(component.nestedDataSource[0]); + }); + + it('should collapse all folders when collapseAll is called', () => { + spyOn(component.nestedTreeControl, 'collapseAll'); + component.collapseAll(true); + expect(component.nestedTreeControl.collapseAll).toHaveBeenCalled(); + }); +}); + describe('CaseFileViewFolderComponent', () => { let component: CaseFileViewFolderComponent; let fixture: ComponentFixture; From 20c3df767421a3c3ca90c5489a27fea7e43b5bf6 Mon Sep 17 00:00:00 2001 From: jphcdcgi Date: Mon, 10 Feb 2025 11:50:43 +0000 Subject: [PATCH 08/10] exui-673 - adding WindowService to TestBed providers for unit tests --- .../case-file-view-folder-toggle.component.spec.ts | 3 ++- .../case-file-view-folder.component.spec.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/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 b/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 index 3768cd5da4..41e1d6fc57 100644 --- a/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 +++ b/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 @@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing"; import { AbstractAppConfig } from "../../../../../../../app.config"; import { CaseFileViewOverlayMenuComponent } from "../../shared"; import { CaseFileViewFolderToggleComponent } from "./case-file-view-folder-toggle.component"; +import { WindowService } from '../../../../../../services'; describe("CaseFileViewFolderToggleComponent", () => { let component: CaseFileViewFolderToggleComponent; @@ -20,7 +21,7 @@ describe("CaseFileViewFolderToggleComponent", () => { CaseFileViewOverlayMenuComponent, ], imports: [OverlayModule], - providers: [{ provide: AbstractAppConfig, useValue: mockAppConfig }], + providers: [WindowService, { provide: AbstractAppConfig, useValue: mockAppConfig }], }).compileComponents(); }); diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts index e6e2eafac9..886f4cff36 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts @@ -30,6 +30,7 @@ describe('CaseFileViewFolderComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [CaseFileViewFolderComponent], + providers: [WindowService] }).compileComponents(); }); From 4c97659cc8d00532f0280c7be3e9954fae332e86 Mon Sep 17 00:00:00 2001 From: jphcdcgi Date: Mon, 10 Feb 2025 12:01:25 +0000 Subject: [PATCH 09/10] exui-673 - additional TestBed providers required by Jenkins --- .../case-file-view-folder-toggle.component.spec.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/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 b/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 index 41e1d6fc57..c5db636108 100644 --- a/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 +++ b/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 @@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing"; import { AbstractAppConfig } from "../../../../../../../app.config"; import { CaseFileViewOverlayMenuComponent } from "../../shared"; import { CaseFileViewFolderToggleComponent } from "./case-file-view-folder-toggle.component"; -import { WindowService } from '../../../../../../services'; +import { DocumentManagementService, FormatTranslatorService, WindowService } from '../../../../../../services'; describe("CaseFileViewFolderToggleComponent", () => { let component: CaseFileViewFolderToggleComponent; @@ -21,7 +21,11 @@ describe("CaseFileViewFolderToggleComponent", () => { CaseFileViewOverlayMenuComponent, ], imports: [OverlayModule], - providers: [WindowService, { provide: AbstractAppConfig, useValue: mockAppConfig }], + providers: [ + DocumentManagementService, + FormatTranslatorService, + WindowService, { provide: AbstractAppConfig, useValue: mockAppConfig } + ], }).compileComponents(); }); From b62bf242e6ed8363c63bf18efa48bd3c2e647e45 Mon Sep 17 00:00:00 2001 From: jphcdcgi Date: Mon, 10 Feb 2025 15:59:16 +0000 Subject: [PATCH 10/10] exui-673 - fix and refactor tests --- ...-file-view-folder-toggle.component.spec.ts | 20 +++---- .../case-file-view-folder.component.spec.ts | 54 +++++-------------- 2 files changed, 20 insertions(+), 54 deletions(-) diff --git a/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 b/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 index c5db636108..ad80ff9db2 100644 --- a/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 +++ b/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 @@ -1,44 +1,38 @@ import { OverlayModule } from "@angular/cdk/overlay"; -import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; import { AbstractAppConfig } from "../../../../../../../app.config"; import { CaseFileViewOverlayMenuComponent } from "../../shared"; import { CaseFileViewFolderToggleComponent } from "./case-file-view-folder-toggle.component"; -import { DocumentManagementService, FormatTranslatorService, WindowService } from '../../../../../../services'; +import { WindowService } from '../../../../../../services'; describe("CaseFileViewFolderToggleComponent", () => { let component: CaseFileViewFolderToggleComponent; let fixture: ComponentFixture; let mockAppConfig: any; - beforeEach(async () => { + beforeEach(waitForAsync(() => { mockAppConfig = jasmine.createSpyObj( "AbstractAppConfig", ["getEnableCaseFileViewVersion1_1"] ); - await TestBed.configureTestingModule({ + TestBed.configureTestingModule({ declarations: [ CaseFileViewFolderToggleComponent, CaseFileViewOverlayMenuComponent, ], imports: [OverlayModule], providers: [ - DocumentManagementService, - FormatTranslatorService, WindowService, { provide: AbstractAppConfig, useValue: mockAppConfig } ], }).compileComponents(); - }); + })); - beforeEach(() => { + beforeEach(waitForAsync(() => { fixture = TestBed.createComponent(CaseFileViewFolderToggleComponent); component = fixture.componentInstance; component.isOpen = true; fixture.detectChanges(); - }); - - it("should create", () => { - expect(component).toBeTruthy(); - }); + })); it('should emit expandAll event when Expand All action is triggered', () => { spyOn(component.expandAll, 'emit'); diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts index 886f4cff36..7384812e39 100644 --- a/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts +++ b/projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts @@ -23,46 +23,6 @@ import createSpyObj = jasmine.createSpyObj; import { DatePipe } from '../../../utils'; import moment from 'moment-timezone'; -describe('CaseFileViewFolderComponent', () => { - let component: CaseFileViewFolderComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [CaseFileViewFolderComponent], - providers: [WindowService] - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(CaseFileViewFolderComponent); - component = fixture.componentInstance; - component.nestedTreeControl = new NestedTreeControl(node => node.children); - component.nestedDataSource = [ - { - name: 'Root', - children: [ - { name: 'Child 1', children: [] }, - { name: 'Child 2', children: [] } - ] - } - ] as DocumentTreeNode[]; - fixture.detectChanges(); - }); - - it('should expand all folders when expandAll is called', () => { - spyOn(component.nestedTreeControl, 'expandDescendants'); - component.expandAll(true); - expect(component.nestedTreeControl.expandDescendants).toHaveBeenCalledWith(component.nestedDataSource[0]); - }); - - it('should collapse all folders when collapseAll is called', () => { - spyOn(component.nestedTreeControl, 'collapseAll'); - component.collapseAll(true); - expect(component.nestedTreeControl.collapseAll).toHaveBeenCalled(); - }); -}); - describe('CaseFileViewFolderComponent', () => { let component: CaseFileViewFolderComponent; let fixture: ComponentFixture; @@ -481,4 +441,16 @@ describe('CaseFileViewFolderComponent', () => { uncategorisedTreeData.children.forEach((c) => c.upload_timestamp = ''); expect(component.getUncategorisedDocuments(categoriesAndDocumentsTestData.uncategorised_documents)).toEqual(uncategorisedTreeData); }); -}); + + it('should expand all folders when expandAll event fired', () => { + spyOn(component.nestedTreeControl, 'expandDescendants'); + component.expandAll(true); + expect(component.nestedTreeControl.expandDescendants).toHaveBeenCalledWith(component.nestedDataSource[0]); + }); + + it('should collapse all folders when collapseAll event fired', () => { + spyOn(component.nestedTreeControl, 'collapseAll'); + component.collapseAll(true); + expect(component.nestedTreeControl.collapseAll).toHaveBeenCalled(); + }); +}); \ No newline at end of file