From e3d889a8544509e86de3e4ec1b49db005b77f2f0 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 26 Aug 2024 11:23:12 -0400 Subject: [PATCH] ACS-8658: fix search icon for lock files (#4050) * fix search icon for lock files * clean tests * clean template --- .../thumbnail-column.component.html | 10 +- .../thumbnail-column.component.spec.ts | 112 ++++++++++++++++++ .../thumbnail-column.component.ts | 19 ++- 3 files changed, 134 insertions(+), 7 deletions(-) create mode 100644 projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.spec.ts diff --git a/projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.html b/projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.html index 441c962a8d..dd3f3ec477 100644 --- a/projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.html +++ b/projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.html @@ -1,2 +1,10 @@ - + + + {{thumbnailUrl}} + + + + + + diff --git a/projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.spec.ts b/projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.spec.ts new file mode 100644 index 0000000000..2db572d5a8 --- /dev/null +++ b/projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.spec.ts @@ -0,0 +1,112 @@ +/*! + * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved. + * + * Alfresco Example Content Application + * + * This file is part of the Alfresco Example Content Application. + * If the software was purchased under a paid Alfresco license, the terms of + * the paid license agreement will prevail. Otherwise, the software is + * provided under the following open source license terms: + * + * The Alfresco Example Content Application is free software: you can redistribute it and/or modify + * it under the terms of the GNU Lesser General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * The Alfresco Example Content Application is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * from Hyland Software. If not, see . + */ + +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ThumbnailColumnComponent } from './thumbnail-column.component'; +import { TranslationService } from '@alfresco/adf-core'; + +describe('ThumbnailColumnComponent', () => { + let component: ThumbnailColumnComponent; + let fixture: ComponentFixture; + let translationServiceMock: any; + + beforeEach(() => { + translationServiceMock = { + instant: jasmine.createSpy('instant').and.returnValue('Locked by') + }; + + TestBed.configureTestingModule({ + imports: [ThumbnailColumnComponent], + providers: [{ provide: TranslationService, useValue: translationServiceMock }] + }); + + fixture = TestBed.createComponent(ThumbnailColumnComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should update thumbnailUrl and tooltip on context change', () => { + const context = { + row: { isSelected: true, node: { entry: { properties: { 'cm:lockOwner': { displayName: 'John Doe' } } } } }, + data: { getValue: () => 'material-icons://icon_name' }, + col: {} + }; + + component.ngOnChanges({ context: { currentValue: context, previousValue: null, firstChange: true, isFirstChange: () => true } }); + + expect(component.isIcon).toBeTrue(); + expect(component.thumbnailUrl).toBe('icon_name'); + expect(component.tooltip).toBe('Locked by John Doe'); + }); + + it('should handle non-icon thumbnails', () => { + const context = { + row: { isSelected: true, node: { entry: { properties: { 'cm:lockOwner': { displayName: 'John Doe' } } } } }, + data: { getValue: () => 'https://example.com/thumbnail.jpg' }, + col: {} + }; + + component.ngOnChanges({ context: { currentValue: context, previousValue: null, firstChange: true, isFirstChange: () => true } }); + + expect(component.isIcon).toBeFalse(); + expect(component.thumbnailUrl).toBe('https://example.com/thumbnail.jpg'); + expect(component.tooltip).toBe('Locked by John Doe'); + }); + + it('should clear thumbnailUrl and tooltip if context is null', () => { + component.ngOnChanges({ context: { currentValue: null, previousValue: {}, firstChange: false, isFirstChange: () => false } }); + + expect(component.thumbnailUrl).toBeNull(); + expect(component.tooltip).toBeNull(); + }); + + it('should return correct thumbnail from getThumbnail', () => { + const context = { + data: { getValue: () => 'thumbnail_url' }, + row: {}, + col: {} + }; + + const thumbnail = component['getThumbnail'](context); + expect(thumbnail).toBe('thumbnail_url'); + }); + + it('should return correct tooltip from getToolTip', () => { + const context = { + row: { node: { entry: { properties: { 'cm:lockOwner': { displayName: 'John Doe' } } } } } + }; + + const tooltip = component.getToolTip(context); + expect(tooltip).toBe('Locked by John Doe'); + }); + + it('should return empty tooltip if lockOwner is not present', () => { + const context = { + row: { node: { entry: { properties: {} } } } + }; + + const tooltip = component.getToolTip(context); + expect(tooltip).toBe(''); + }); +}); diff --git a/projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.ts b/projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.ts index 8fee4b3750..e0c4c22809 100644 --- a/projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.ts +++ b/projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.ts @@ -26,11 +26,10 @@ import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation, inject } import { TranslationService } from '@alfresco/adf-core'; import { NgIf } from '@angular/common'; import { MatIconModule } from '@angular/material/icon'; -import { MatTooltipModule } from '@angular/material/tooltip'; @Component({ standalone: true, - imports: [NgIf, MatIconModule, MatTooltipModule], + imports: [NgIf, MatIconModule], selector: 'aca-custom-thumbnail-column', templateUrl: './thumbnail-column.component.html', encapsulation: ViewEncapsulation.None @@ -43,9 +42,10 @@ export class ThumbnailColumnComponent implements OnChanges { public thumbnailUrl?: string; public tooltip?: string; + public isIcon = false; get isSelected(): boolean { - return !!this.context.row.isSelected; + return !!this.context?.row?.isSelected; } ngOnChanges(changes: SimpleChanges): void { @@ -53,7 +53,14 @@ export class ThumbnailColumnComponent implements OnChanges { const context = changes.context.currentValue; if (context) { - this.thumbnailUrl = this.getThumbnail(context); + const icon = this.getThumbnail(context); + if (icon?.startsWith('material-icons://')) { + this.isIcon = true; + this.thumbnailUrl = icon.replace('material-icons://', ''); + } else { + this.isIcon = false; + this.thumbnailUrl = icon; + } this.tooltip = this.getToolTip(context); } else { this.thumbnailUrl = null; @@ -62,11 +69,11 @@ export class ThumbnailColumnComponent implements OnChanges { } } - private getThumbnail({ data, row, col }): string { + getThumbnail({ data, row, col }): string { return data.getValue(row, col); } - private getToolTip({ row }): string { + getToolTip({ row }): string { const displayName = row.node?.entry?.properties?.['cm:lockOwner']?.displayName; return displayName ? `${this.translation.instant('APP.LOCKED_BY')} ${displayName}` : ''; }