inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

HXCS 3856 File rotation in ADF Viewer (#9873)

Browse Source
This commit is contained in:
Chandan Chatterjee
2024-07-02 23:24:34 +05:30
committed by GitHub
parent f3a94bdfa4
commit e457dd3a78
10 changed files with 71 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.html
View File

@@ -33,14 +33,14 @@
<mat-icon>zoom_in</mat-icon>
</button>
<button *ngIf="!readOnly" id="viewer-rotate-button"
<button *ngIf="!readOnly && allowedEditActions.rotate" id="viewer-rotate-button"
title="{{ 'ADF_VIEWER.ARIA.ROTATE' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.ROTATE' | translate }}"
mat-icon-button
(click)="rotateImage()">
<mat-icon>rotate_left</mat-icon>
</button>
<button *ngIf="!readOnly" id="viewer-crop-button"
<button *ngIf="!readOnly && allowedEditActions.crop" id="viewer-crop-button"
title="{{ 'ADF_VIEWER.ARIA.CROP' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.CROP' | translate }}"
mat-icon-button
@@ -58,7 +58,7 @@
</adf-toolbar>
<adf-toolbar class="adf-secondary-toolbar" *ngIf="!readOnly && isEditing">
<adf-toolbar class="adf-secondary-toolbar" *ngIf="isEditing && !readOnly">
<button id="viewer-cancel-button"
title="{{ 'ADF_VIEWER.ARIA.CANCEL' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.CANCEL' | translate }}"

32
lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.spec.ts
View File

@@ -370,4 +370,36 @@ describe('Test Img viewer component ', () => {
expect(component.reset).toHaveBeenCalled();
});
});
describe('allowedEditActions', () => {
beforeEach(() => {
fixture = TestBed.createComponent(ImgViewerComponent);
element = fixture.nativeElement;
component = fixture.componentInstance;
});
it('should conditionally display rotate and crop buttons based on allowedEditActions', () => {
component.readOnly = false;
component.allowedEditActions = { rotate: true, crop: true };
fixture.detectChanges();
let rotateButton = element.querySelector('#viewer-rotate-button');
let cropButton = element.querySelector('#viewer-crop-button');
// Check both buttons are visible when allowed
expect(rotateButton).not.toBeNull('Rotate button should be visible when allowed');
expect(cropButton).not.toBeNull('Crop button should be visible when allowed');
// Change allowedEditActions to disallow both actions
component.allowedEditActions = { rotate: false, crop: false };
fixture.detectChanges();
rotateButton = element.querySelector('#viewer-rotate-button');
cropButton = element.querySelector('#viewer-crop-button');
// Check both buttons are not visible when not allowed
expect(rotateButton).toBeNull('Rotate button should not be visible when disallowed');
expect(cropButton).toBeNull('Crop button should not be visible when disallowed');
});
});
});

6
lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.ts
View File

@@ -54,6 +54,12 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
@Input()
readOnly = true;
@Input()
allowedEditActions: { [key: string]: boolean } = {
rotate: true,
crop: true
};
@Input()
urlFile: string;

1
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html
View File

@@ -44,6 +44,7 @@
<adf-img-viewer [urlFile]="urlFile"
[readOnly]="readOnly"
[fileName]="internalFileName"
[allowedEditActions]="allowedEditActions"
[blobFile]="blobFile"
(error)="onUnsupportedFile()"
(submit)="onSubmitFile($event)"

11
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts
View File

@@ -95,6 +95,17 @@ export class ViewerRenderComponent implements OnChanges, OnInit, OnDestroy {
@Input()
readOnly = true;
/**
* Controls which actions are enabled in the viewer.
* Example:
* { rotate: true, crop: false } will enable rotation but disable cropping.
*/
@Input()
allowedEditActions: { [key: string]: boolean } = {
rotate: true,
crop: true
};
/** media subtitles for the media player*/
@Input()
tracks: Track[] = [];

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

@@ -167,6 +167,7 @@
[blobFile]="blobFile"
[readOnly]="readOnly"
(submitFile)="onSubmitFile($event)"
[allowedEditActions]="allowedEditActions"
[urlFile]="urlFile"
(isSaving)="allowNavigate = !$event"
[tracks]="tracks"

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

@@ -189,6 +189,17 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
@Input()
readOnly = true;
/**
* Controls which actions are enabled in the viewer.
* Example:
* { rotate: true, crop: false } will enable rotation but disable cropping.
*/
@Input()
allowedEditActions: { [key: string]: boolean } = {
rotate: true,
crop: true
};
/** media subtitles for the media player*/
@Input()
tracks: Track[] = [];