[AAE-10778] Refactor Viewer (#7992)

* refactor version 1 many todo * split render from viewer move alfresco render in content pack * refactor part 2 * test fixed * fix doc * [AAE-10778] Fix lint issues * [AAE-10778] Fix lint issue: remove duplicated declaration * [AAE-10778] Fix lint issue: use flex shorthand rule * [AAE-10778] Fix FormService and WidgetComponent imports * [AAE-10778] Fix import FormModel, FormService, FormFieldModel from adf-core * [AAE-10778] Implement missing oninit, onchanges and ondestroy * [AAE-10778] Replace adf-viewer with adf-alfresco-viewer, update escape command to close the viewer * [AAE-10778] Fix unit test: fix the class name to match the 'adf-viewer-render.image-viewer-scaling' get from the appConfigService * [AAE-10778] Fix image-viewer unit tests: replace ContentService with UrlService * [AAE-10778] Fix unit test 'should if the extension change extension Change event be fired': emit file extension when the filename extension change * [AAE-10778] Fix unit test: expect for internalFileName value instead of display-name id because the display name logic has been moved to the alfresco-viewer.component * [AAE-10778] Fix unit test: remove display name it because the unknown display name value is no longer handled after refactoring * [AAE-10778] Fix e2e: [C260096] Should the Viewer able to accept a customToolbar * [AAE-10778] Update selector to fix e2e: '[C362265] Should the Viewer be able to download a previous version of a file' * [AAE-10778] Update selector to fix e2e: '[C260038] Should display first page, toolbar and pagination when opening a .pdf file' * fix aftrer rebase * fix unit test * [AAE-10778] Add adf viewer component that is node agnostic, show adf-alfresco-viewer or adf-viewer into file-view-component if blob or node are set * [AAE-10778] Update viewer export path * [AAE-10778] Update selectors since have been updated in the viewer component * [AAE-10778] Call adf-viewer from alfresco-viewer, project adf-alfresco-viewer content to adf-viewer * [AAE-10778] Remove full screen unit tests from alfresco-viewer component becase that logic is handled in the viewer.component * [AAE-10778] Export toolbar custom actions component * [AAE-10778] Pass mimeType as input to adf-viewer to update mime icon * [AAE-10778] Remove e2e because the custom name behaviour has been removed from the file-view.component (9f21b6dc69\#diff-4b438dc59784dce9eb7634cfeca6d8db61362966343bd3d6895a3edafdf4cfd5L129) * [AAE-10778] Use two-way binding for showViewer change to fix C260100 * [AAE-10778] Update prefix css selectors to adf-viewer because are related to the adf-viewer component * [AAE-10778] Update prefix css selectors to adf-viewer in the unit tests because are related to the adf-viewer component * [AAE-10778] Update the output name to showViewerChange to navigate to primary url after closing the viewer * [AAE-10778] Pass right and left sidebar template context to viewer component (fix C362242) * [AAE-10778] Add allowFullScreen input to disable/enable full screen behaviour * [AAE-10778] Handle loading visualization only inside the viewer-render component * [AAE-10778] PDF viewer: fix mat-progress-bar is not showed during the pdf loading, center progress bar * [AAE-10778] Remove isLoading from unit tests because no longer exists * [AAE-10778] Remove viewerType input from adf-viewer, viewerType will be handled by viewer-render * [AAE-10778] Remove console.log * [AAE-10778] Remove check full screen button is not displayed on the media file because is not needed anymore, we don't need to check for the fullscreen button in the viewer component * [AAE-10778] Check for node rendtion before to assign to urlFileContent and mimeType * [AAE-10778] Process Services Cloud: register file-viewer widget that uses adf-alfresco-viewer component to display content from ACS * [AAE-10778] Core: rename file-viewer widget into base-viewer, base-viewer no longer accept nodeId, but will accept urlFile and blobFile * [AAE-10778] Process Services: register file-viewer widget that uses adf-alfresco-viewer component to display content from ACS * [AAE-10778] Base viewer widget: show viewer only if there's a file input * [AAE-10778] Viewer component: check for fileName when urlFile is provided as Input * [AAE-10778] Viewer component documentation * [AAE-10778] Update upgrade guide with viewer changes * [AAE-10778] Fix double quote lint issue after rebase --------- Co-authored-by: Amedeo Lepore <amedeo.lepore@hyland.com> Co-authored-by: Amedeo Lepore <amedeo.lepore85@gmail.com>
2025-07-24 17:32:15 +00:00 · 2023-02-01 17:25:43 +01:00
parent 52520bb61e
commit 4043d55fc4
85 changed files with 4803 additions and 2729 deletions
--- a/lib/process-services/src/lib/form/form.module.ts
+++ b/lib/process-services/src/lib/form/form.module.ts
@@ -31,11 +31,14 @@ import { RadioButtonsWidgetComponent } from './widgets/radio-buttons/radio-butto
 import { TypeaheadWidgetComponent } from './widgets/typeahead/typeahead.widget';
 import { DropdownWidgetComponent } from './widgets/dropdown/dropdown.widget';
 import { DynamicTableModule } from './widgets/dynamic-table/dynamic-table.module';
+import { FileViewerWidgetComponent } from './widgets/file-viewer/file-viewer.widget';
+import { ContentModule } from '@alfresco/adf-content-services';

@NgModule({
    imports: [
        DynamicTableModule,
        CoreModule,
+        ContentModule,
        MaterialModule
    ],
    declarations: [
@@ -50,7 +53,8 @@ import { DynamicTableModule } from './widgets/dynamic-table/dynamic-table.module
        FormListComponent,
        RadioButtonsWidgetComponent,
        DropdownWidgetComponent,
-        TypeaheadWidgetComponent
+        TypeaheadWidgetComponent,
+        FileViewerWidgetComponent
    ],
    exports: [
        FormComponent,
@@ -61,7 +65,8 @@ import { DynamicTableModule } from './widgets/dynamic-table/dynamic-table.module
        RadioButtonsWidgetComponent,
        TypeaheadWidgetComponent,
        DropdownWidgetComponent,
-        FormListComponent
+        FormListComponent,
+        FileViewerWidgetComponent
    ]
 })
 export class FormModule {
--- a/lib/process-services/src/lib/form/process-form-rendering.service.spec.ts
+++ b/lib/process-services/src/lib/form/process-form-rendering.service.spec.ts
@@ -26,6 +26,7 @@ import { RadioButtonsWidgetComponent } from './widgets/radio-buttons/radio-butto
 import { TypeaheadWidgetComponent } from './widgets/typeahead/typeahead.widget';
 import { DocumentWidgetComponent } from './widgets/document/document.widget';
 import { AttachFileWidgetComponent } from './widgets/content-widget/attach-file-widget.component';
+import { FileViewerWidgetComponent } from './widgets/file-viewer/file-viewer.widget';

 describe('ProcessFormRenderingService', () => {

@@ -100,4 +101,10 @@ describe('ProcessFormRenderingService', () => {
        expect(type).toBe(DynamicTableWidgetComponent);
    });

+    it('should resolve File Viewer widget for file viewer', () => {
+        const resolver = service.getComponentTypeResolver(FormFieldTypes.ALFRESCO_FILE_VIEWER);
+        const type = resolver(null);
+        expect(type).toBe(FileViewerWidgetComponent);
+    });
+
 });
--- a/lib/process-services/src/lib/form/process-form-rendering.service.ts
+++ b/lib/process-services/src/lib/form/process-form-rendering.service.ts
@@ -29,6 +29,7 @@ import { RadioButtonsWidgetComponent } from './widgets/radio-buttons/radio-butto
 import { TypeaheadWidgetComponent } from './widgets/typeahead/typeahead.widget';
 import { DynamicTableWidgetComponent } from './widgets/dynamic-table/dynamic-table.widget';
 import { DropdownWidgetComponent } from './widgets/dropdown/dropdown.widget';
+import { FileViewerWidgetComponent } from './widgets/file-viewer/file-viewer.widget';

@Injectable({
    providedIn: 'root'
@@ -46,7 +47,8 @@ export class ProcessFormRenderingService extends FormRenderingService {
            [FormFieldTypes.DOCUMENT]: () => DocumentWidgetComponent,
            [FormFieldTypes.PEOPLE]: () =>  PeopleWidgetComponent,
            [FormFieldTypes.FUNCTIONAL_GROUP]:  () => FunctionalGroupWidgetComponent,
-            [FormFieldTypes.DYNAMIC_TABLE]:  () => DynamicTableWidgetComponent
+            [FormFieldTypes.DYNAMIC_TABLE]:  () => DynamicTableWidgetComponent,
+            [FormFieldTypes.ALFRESCO_FILE_VIEWER]:  () => FileViewerWidgetComponent
        }, true);
    }
 }
--- a/lib/process-services/src/lib/form/widgets/file-viewer/file-viewer.widget.html
+++ b/lib/process-services/src/lib/form/widgets/file-viewer/file-viewer.widget.html
@@ -0,0 +1,7 @@
+<div class="adf-file-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
+    [class.adf-readonly]="field.readOnly">
+    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
+            *ngIf="isRequired()">*</span></label>
+    <adf-alfresco-viewer [nodeId]="field.value" [showViewer]="field.value" [allowGoBack]="false"></adf-alfresco-viewer>
+    <error-widget [error]="field.validationSummary"></error-widget>
+</div>
--- a/lib/process-services/src/lib/form/widgets/file-viewer/file-viewer.widget.scss
+++ b/lib/process-services/src/lib/form/widgets/file-viewer/file-viewer.widget.scss
@@ -0,0 +1,19 @@
+file-viewer-widget {
+    height: 100%;
+    width: 100%;
+
+    .adf-file-viewer-widget {
+        height: 100%;
+        width: 100%;
+
+        adf-viewer.adf-viewer {
+            position: relative;
+
+            .adf-viewer-container {
+                .adf-viewer-content > div {
+                    height: 90vh;
+                }
+            }
+        }
+    }
+}
--- a/lib/process-services/src/lib/form/widgets/file-viewer/file-viewer.widget.spec.ts
+++ b/lib/process-services/src/lib/form/widgets/file-viewer/file-viewer.widget.spec.ts
@@ -0,0 +1,81 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FileViewerWidgetComponent } from './file-viewer.widget';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormModel, FormService, FormFieldModel } from '@alfresco/adf-core';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('FileViewerWidgetComponent', () => {
+    const fakeForm = new FormModel();
+    let widget: FileViewerWidgetComponent;
+    let formServiceStub: Partial<FormService>;
+    let fixture: ComponentFixture<FileViewerWidgetComponent>;
+
+    const fakePngAnswer: any = {
+        id: '1933',
+        link: false,
+        isExternal: false,
+        relatedContent: false,
+        contentAvailable: true,
+        name: 'a_png_file.png',
+        simpleType: 'image',
+        mimeType: 'image/png',
+        previewStatus: 'queued',
+        thumbnailStatus: 'queued',
+        created: '2022-10-14T17:17:37.099Z',
+        createdBy: { id: 1001, firstName: 'Admin', lastName: 'admin', email: 'admin@example.com' }
+    };
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                TranslateModule.forRoot()
+            ],
+            declarations: [ FileViewerWidgetComponent ],
+            providers: [ { provide: FormService, useValue: formServiceStub } ]
+          });
+
+        formServiceStub = TestBed.inject(FormService);
+        fixture = TestBed.createComponent(FileViewerWidgetComponent);
+        widget = fixture.componentInstance;
+    });
+
+    it('should set the file id corretly when the field value is an array', (done) => {
+        const fakeField = new FormFieldModel(fakeForm, { id: 'fakeField', value: [fakePngAnswer] });
+        widget.field = fakeField;
+
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            expect(widget.field.value).toBe('1933');
+            done();
+        });
+    });
+
+    it('should set the file id corretly when the field value is a string', (done) => {
+        const fakeField = new FormFieldModel(fakeForm, { id: 'fakeField', value: 'fakeValue' });
+        widget.field = fakeField;
+
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            expect(widget.field.value).toBe('fakeValue');
+            done();
+        });
+    });
+});
--- a/lib/process-services/src/lib/form/widgets/file-viewer/file-viewer.widget.ts
+++ b/lib/process-services/src/lib/form/widgets/file-viewer/file-viewer.widget.ts
@@ -0,0 +1,54 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormService, WidgetComponent } from '@alfresco/adf-core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+ /* eslint-disable @angular-eslint/component-selector */
+
+@Component({
+    selector: 'file-viewer-widget',
+    templateUrl: './file-viewer.widget.html',
+    styleUrls: ['./file-viewer.widget.scss'],
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
+    encapsulation: ViewEncapsulation.None
+})
+export class FileViewerWidgetComponent extends WidgetComponent implements OnInit {
+    constructor(formService: FormService) {
+        super(formService);
+    }
+
+    ngOnInit(): void {
+        if (this.field &&
+            this.field.value &&
+            Array.isArray(this.field.value) &&
+            this.field.value.length) {
+            const file = this.field.value[0];
+            this.field.value = file.id;
+        }
+    }
+}
--- a/lib/process-services/src/lib/form/widgets/public-api.ts
+++ b/lib/process-services/src/lib/form/widgets/public-api.ts
@@ -22,6 +22,7 @@ export * from './radio-buttons/radio-buttons.widget';
 export * from './functional-group/functional-group.widget';
 export * from './typeahead/typeahead.widget';
 export * from './dropdown/dropdown.widget';
+export * from './file-viewer/file-viewer.widget';

 export * from './dynamic-table/index';