[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-cloud/src/lib/form/components/cloud-form-rendering.service.ts
+++ b/lib/process-services-cloud/src/lib/form/components/cloud-form-rendering.service.ts
@@ -16,7 +16,7 @@
 */

 import { Injectable } from '@angular/core';
-import { FormRenderingService } from '@alfresco/adf-core';
+import { FormFieldTypes, FormRenderingService } from '@alfresco/adf-core';
 import { AttachFileCloudWidgetComponent } from './widgets/attach-file/attach-file-cloud-widget.component';
 import { DropdownCloudWidgetComponent } from './widgets/dropdown/dropdown-cloud.widget';
 import { DateCloudWidgetComponent } from './widgets/date/date-cloud.widget';
@@ -24,6 +24,7 @@ import { PeopleCloudWidgetComponent } from './widgets/people/people-cloud.widget
 import { GroupCloudWidgetComponent } from './widgets/group/group-cloud.widget';
 import { PropertiesViewerWidgetComponent } from './widgets/properties-viewer/properties-viewer.widget';
 import { RadioButtonsCloudWidgetComponent } from './widgets/radio-buttons/radio-buttons-cloud.widget';
+import { FileViewerWidgetComponent } from './widgets/file-viewer/file-viewer.widget';

@Injectable({
    providedIn: 'root'
@@ -33,13 +34,14 @@ export class CloudFormRenderingService extends FormRenderingService {
        super();

        this.register({
-            upload: () => AttachFileCloudWidgetComponent,
-            dropdown: () => DropdownCloudWidgetComponent,
-            date: () => DateCloudWidgetComponent,
-            people: () => PeopleCloudWidgetComponent,
-            'functional-group': () => GroupCloudWidgetComponent,
-            'properties-viewer': () => PropertiesViewerWidgetComponent,
-            'radio-buttons': () => RadioButtonsCloudWidgetComponent
+            [FormFieldTypes.UPLOAD]: () => AttachFileCloudWidgetComponent,
+            [FormFieldTypes.DROPDOWN]: () => DropdownCloudWidgetComponent,
+            [FormFieldTypes.DATE]: () => DateCloudWidgetComponent,
+            [FormFieldTypes.PEOPLE]: () => PeopleCloudWidgetComponent,
+            [FormFieldTypes.FUNCTIONAL_GROUP]: () => GroupCloudWidgetComponent,
+            [FormFieldTypes.PROPERTIES_VIEWER]: () => PropertiesViewerWidgetComponent,
+            [FormFieldTypes.RADIO_BUTTONS]: () => RadioButtonsCloudWidgetComponent,
+            [FormFieldTypes.ALFRESCO_FILE_VIEWER]: () => FileViewerWidgetComponent
        }, true);
    }
 }
--- a/lib/process-services-cloud/src/lib/form/components/widgets/file-viewer/file-viewer.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/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 [overlayMode]="false" [nodeId]="field.value" [showViewer]="field.value" [allowGoBack]="false"></adf-alfresco-viewer>
+    <error-widget [error]="field.validationSummary"></error-widget>
+</div>
--- a/lib/process-services-cloud/src/lib/form/components/widgets/file-viewer/file-viewer.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/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-cloud/src/lib/form/components/widgets/file-viewer/file-viewer.widget.spec.ts
+++ b/lib/process-services-cloud/src/lib/form/components/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 { TranslateModule } from '@ngx-translate/core';
+import { FileViewerWidgetComponent } from './file-viewer.widget';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormModel, FormService, FormFieldModel } from '@alfresco/adf-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-cloud/src/lib/form/components/widgets/file-viewer/file-viewer.widget.ts
+++ b/lib/process-services-cloud/src/lib/form/components/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 { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { WidgetComponent, FormService } from '@alfresco/adf-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-cloud/src/lib/form/form-cloud.module.ts
+++ b/lib/process-services-cloud/src/lib/form/form-cloud.module.ts
@@ -24,7 +24,7 @@ import { MaterialModule } from '../material.module';
 import { FormCloudComponent } from './components/form-cloud.component';
 import { FormDefinitionSelectorCloudComponent } from './components/form-definition-selector-cloud.component';
 import { FormCustomOutcomesComponent } from './components/form-cloud-custom-outcomes.component';
-import { ContentMetadataModule, ContentNodeSelectorModule, UploadModule } from '@alfresco/adf-content-services';
+import { ContentMetadataModule, ContentModule, ContentNodeSelectorModule, UploadModule } from '@alfresco/adf-content-services';

 import { DateCloudWidgetComponent } from './components/widgets/date/date-cloud.widget';
 import { DropdownCloudWidgetComponent } from './components/widgets/dropdown/dropdown-cloud.widget';
@@ -39,6 +39,7 @@ import { PropertiesViewerWidgetComponent } from './components/widgets/properties
 import { PropertiesViewerWrapperComponent } from './components/widgets/properties-viewer/properties-viewer-wrapper/properties-viewer-wrapper.component';
 import { RadioButtonsCloudWidgetComponent } from './components/widgets/radio-buttons/radio-buttons-cloud.widget';
 import { FilePropertiesTableCloudComponent } from './components/widgets/attach-file/file-properties-table-cloud.component';
+import { FileViewerWidgetComponent } from './components/widgets/file-viewer/file-viewer.widget';

@NgModule({
    imports: [
@@ -52,7 +53,8 @@ import { FilePropertiesTableCloudComponent } from './components/widgets/attach-f
        PeopleCloudModule,
        GroupCloudModule,
        ContentMetadataModule,
-        UploadModule
+        UploadModule,
+        ContentModule
    ],
    declarations: [
        FormCloudComponent,
@@ -67,7 +69,8 @@ import { FilePropertiesTableCloudComponent } from './components/widgets/attach-f
        GroupCloudWidgetComponent,
        PropertiesViewerWrapperComponent,
        PropertiesViewerWidgetComponent,
-        FilePropertiesTableCloudComponent
+        FilePropertiesTableCloudComponent,
+        FileViewerWidgetComponent
    ],
    exports: [
        FormCloudComponent,
@@ -80,7 +83,9 @@ import { FilePropertiesTableCloudComponent } from './components/widgets/attach-f
        DateCloudWidgetComponent,
        PeopleCloudWidgetComponent,
        GroupCloudWidgetComponent,
-        PropertiesViewerWidgetComponent
+        PropertiesViewerWidgetComponent,
+        ContentModule,
+        FileViewerWidgetComponent
    ]
 })
 export class FormCloudModule {
--- a/lib/process-services-cloud/src/lib/form/public-api.ts
+++ b/lib/process-services-cloud/src/lib/form/public-api.ts
@@ -30,6 +30,7 @@ export * from './components/widgets/group/group-cloud.widget';
 export * from './components/widgets/people/people-cloud.widget';
 export * from './components/widgets/properties-viewer/properties-viewer.widget';
 export * from './components/widgets/radio-buttons/radio-buttons-cloud.widget';
+export * from './components/widgets/file-viewer/file-viewer.widget';

 export * from './services/content-cloud-node-selector.service';
 export * from './services/form-cloud.service';