inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5190] document name text alignement and long name trim issue (#10715)

Browse Source 
* [ACS-5190] Fixed trimming issue

* [ACS-5190] Unit tests

* [ACS-5190] Prevent issues when filename is not defined
This commit is contained in:
AleksanderSklorz 2025-03-19 08:24:10 +01:00 committed by GitHub
parent 015ce8a99e
commit 083755b41a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 53 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
lib/core/src/lib/viewer/components/viewer.component.html
View File

@ -46,8 +46,12 @@
[alt]="'ADF_VIEWER.ARIA.MIME_TYPE_ICON' | translate"
[src]="mimeTypeIconUrl"
data-automation-id="adf-file-thumbnail">
<span class="adf-viewer__display-name"
id="adf-viewer-display-name">{{ fileName }}</span>
<div class="adf-viewer__display-name"
id="adf-viewer-display-name"
[title]="fileName">
<span class="adf-viewer__display-name-without-extension">{{ fileNameWithoutExtension }}</span>
<span class="adf-viewer__display-name-extension">{{ fileExtension }}</span>
</div>
<button *ngIf="allowNavigate && canNavigateNext"
data-automation-id="adf-toolbar-next-file"
mat-icon-button

13
lib/core/src/lib/viewer/components/viewer.component.scss
View File

@ -61,12 +61,17 @@
font-weight: normal;
font-style: normal;
font-stretch: normal;
max-width: 400px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
vertical-align: middle;
color: var(--adf-theme-foreground-text-color);
&-without-extension {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
white-space: nowrap;
vertical-align: bottom;
}
}
&-container {

16
lib/core/src/lib/viewer/components/viewer.component.spec.ts
View File

@ -51,6 +51,8 @@ describe('ViewerComponent', () => {
let thumbnailService: ThumbnailService;
let testingUtils: UnitTestingUtils;
const getFileName = (): string => testingUtils.getByCSS('#adf-viewer-display-name').nativeElement.textContent;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
@ -122,6 +124,10 @@ describe('ViewerComponent', () => {
});
describe('File Name Test', () => {
const getFileNameWithoutExtension = (): string =>
testingUtils.getByCSS('.adf-viewer__display-name-without-extension').nativeElement.textContent;
const getExtension = (): string => testingUtils.getByCSS('.adf-viewer__display-name-extension').nativeElement.textContent;
it('should fileName be set by urlFile input if the fileName is not provided as Input', () => {
component.fileName = '';
spyOn(viewUtilService, 'getFilenameFromUrl').and.returnValue('fakeFileName.jpeg');
@ -130,7 +136,9 @@ describe('ViewerComponent', () => {
component.ngOnChanges(mockSimpleChanges);
fixture.detectChanges();
expect(testingUtils.getByCSS('#adf-viewer-display-name').nativeElement.textContent).toEqual('fakeFileName.jpeg');
expect(getFileName()).toEqual('fakeFileName.jpeg');
expect(getFileNameWithoutExtension()).toBe('fakeFileName.');
expect(getExtension()).toBe('jpeg');
});
it('should set fileName providing fileName input', () => {
@ -142,7 +150,9 @@ describe('ViewerComponent', () => {
fixture.detectChanges();
fixture.detectChanges();
expect(testingUtils.getByCSS('#adf-viewer-display-name').nativeElement.textContent).toEqual('testFileName.jpg');
expect(getFileName()).toEqual('testFileName.jpg');
expect(getFileNameWithoutExtension()).toBe('testFileName.');
expect(getExtension()).toBe('jpg');
});
});
@ -403,7 +413,7 @@ describe('ViewerComponent', () => {
component.ngOnChanges(mockSimpleChanges);
fixture.detectChanges();
await fixture.whenStable();
expect(testingUtils.getByCSS('#adf-viewer-display-name').nativeElement.textContent).toEqual('fake-test-file.pdf');
expect(getFileName()).toEqual('fake-test-file.pdf');
});
it('should Close button be present if overlay mode', async () => {

30
lib/core/src/lib/viewer/components/viewer.component.ts
View File

@ -125,10 +125,6 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
@Input()
blobFile: Blob;
/** Override Content filename. */
@Input()
fileName: string;
/** Hide or show the viewer */
@Input()
showViewer = true;
@ -292,13 +288,37 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
private closeViewer = true;
private keyDown$ = fromEvent<KeyboardEvent>(document, 'keydown');
private isDialogVisible: boolean = false;
private isDialogVisible = false;
private _fileName: string;
private _fileNameWithoutExtension: string;
private _fileExtension: string;
public downloadPromptTimer: number;
public downloadPromptReminderTimer: number;
public mimeTypeIconUrl: string;
private readonly destroyRef = inject(DestroyRef);
/** Override Content filename. */
@Input()
set fileName(fileName: string) {
this._fileName = fileName;
this._fileExtension = this.viewUtilsService.getFileExtension(this.fileName);
this._fileNameWithoutExtension = this.fileName?.replace(new RegExp(`${this.fileExtension}$`), '') || '';
}
get fileName(): string {
return this._fileName;
}
get fileExtension(): string {
return this._fileExtension;
}
get fileNameWithoutExtension(): string {
return this._fileNameWithoutExtension;
}
constructor(
private el: ElementRef,
public dialog: MatDialog,