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

[AAE-3514] Create file viewer widget (#6142)

Browse Source 
* AAE-3514 Create File viewer widget

* AAE-3514 Fix complex fields behaviour

* AAE-3514 Modify attach widget selection indicator

* AAE-3514 Add unit tests to attach-file-cloud widget

* AAE-3514 Add unit tests

* AAE-3514 Increase coverage

* AAE-3514 Fix review comments

* AAE-3514 Fix review comments
This commit is contained in:
Pablo Martinez Garcia
2020-09-22 18:01:03 +02:00
committed by GitHub
parent 46383602f1
commit 3a464a7bed
20 changed files with 715 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/core/form/components/widgets/core/form-field-types.ts
View File

@@ -39,6 +39,7 @@ export class FormFieldTypes {
static DOCUMENT: string = 'document';
static DATETIME: string = 'datetime';
static ATTACH_FOLDER: string = 'select-folder';
static FILE_VIEWER: string = 'file-viewer';
static READONLY_TYPES: string[] = [
FormFieldTypes.HYPERLINK,

58
lib/core/form/components/widgets/core/form.model.spec.ts
View File

@@ -24,7 +24,9 @@ import { FormFieldModel } from './form-field.model';
import { FormOutcomeModel } from './form-outcome.model';
import { FormModel } from './form.model';
import { TabModel } from './tab.model';
import { fakeMetadataForm } from 'process-services-cloud/src/lib/form/mocks/cloud-form.mock';
import { fakeMetadataForm, fakeViewerForm } from 'process-services-cloud/src/lib/form/mocks/cloud-form.mock';
import { Node } from '@alfresco/js-api';
import { UploadWidgetContentLinkModel } from './upload-widget-content-link.model';
describe('FormModel', () => {
let formService: FormService;
@@ -568,25 +570,65 @@ describe('FormModel', () => {
form.values['pfx_property_three'] = {};
form.values['pfx_property_four'] = 'empty';
form.values['pfx_property_five'] = 'green';
form.values['pfx_property_six'] = 'text-value';
form.values['pfx_property_seven'] = null;
});
it('should not find a process variable', () => {
it('should add values to form that are not already present', () => {
const values = {
pfx_property_one: 'testValue',
pfx_property_two: true,
pfx_property_three: 'opt_1',
pfx_property_four: 'option_2',
pfx_property_five: 'orange',
pfx_property_six: 'other-value',
pfx_property_none: 'no_form_field'
};
const data = form.addValuesNotPresent(values);
form.addValuesNotPresent(values);
expect(data).toContain({ name: 'pfx_property_one', value: 'testValue' });
expect(data).toContain({ name: 'pfx_property_two', value: true });
expect(data).toContain({ name: 'pfx_property_three', value: 'opt_1' });
expect(data).toContain({ name: 'pfx_property_four', value: 'option_2' });
expect(data).toContain({ name: 'pfx_property_five', value: 'green' });
expect(form.values['pfx_property_one']).toBe('testValue');
expect(form.values['pfx_property_two']).toBe(true);
expect(form.values['pfx_property_three']).toEqual({ id: 'opt_1', name: 'Option 1'});
expect(form.values['pfx_property_four']).toEqual({ id: 'option_2', name: 'Option: 2'});
expect(form.values['pfx_property_five']).toEqual('green');
expect(form.values['pfx_property_six']).toEqual('text-value');
expect(form.values['pfx_property_seven']).toBeNull();
expect(form.values['pfx_property_eight']).toBeNull();
});
});
describe('setNodeIdValueForViewersLinkedToUploadWidget', () => {
const fakeNodeWithProperties: Node = <Node> {
id: 'fake-properties',
name: 'fake-properties-name',
content: {
mimeType: 'application/pdf'
},
properties: {
'pfx:property_one': 'testValue',
'pfx:property_two': true
}
};
let form: FormModel;
it('should set the node id to the viewers linked to the upload widget in the event', () => {
form = new FormModel(fakeMetadataForm);
const uploadWidgetContentLinkModel = new UploadWidgetContentLinkModel(fakeNodeWithProperties, 'content_form_nodes');
form.setNodeIdValueForViewersLinkedToUploadWidget(uploadWidgetContentLinkModel);
expect(form.values['cmfb85b2a7295ba41209750bca176ccaf9a']).toBe(fakeNodeWithProperties.id);
});
it('should not set the node id to the viewers when they are not linked', () => {
form = new FormModel(fakeViewerForm);
const uploadWidgetContentLinkModel = new UploadWidgetContentLinkModel(fakeNodeWithProperties, 'upload_widget');
form.setNodeIdValueForViewersLinkedToUploadWidget(uploadWidgetContentLinkModel);
expect(form.values['cmfb85b2a7295ba41209750bca176ccaf9a']).toBeNull();
});
});
});

28
lib/core/form/components/widgets/core/form.model.ts
View File

@@ -31,6 +31,7 @@ import { ProcessVariableModel } from './process-variable.model';
import { FormOutcomeModel } from './form-outcome.model';
import { FormFieldValidator, FORM_FIELD_VALIDATORS } from './form-field-validator';
import { FormFieldTemplates } from './form-field-templates';
import { UploadWidgetContentLinkModel } from './upload-widget-content-link.model';
export interface FormRepresentationModel {
[key: string]: any;
@@ -376,17 +377,14 @@ export class FormModel {
}
}
addValuesNotPresent(valuesToSetIfNotPresent: FormValues): { name: string; value: any }[] {
const keys = Object.keys(valuesToSetIfNotPresent);
keys.forEach(key => {
if (!this.values[key] || this.isEmptyDropdownOption(key)) {
this.values[key] = valuesToSetIfNotPresent[key];
addValuesNotPresent(valuesToSetIfNotPresent: FormValues) {
this.getFormFields().forEach(field => {
if (valuesToSetIfNotPresent[field.id] && (!this.values[field.id] || this.isEmptyDropdownOption(field.id))) {
this.values[field.id] = valuesToSetIfNotPresent[field.id];
field.json.value = this.values[field.id];
field.value = field.parseValue(field.json);
}
});
const data = [];
const fields = Object.keys(this.values);
fields.forEach(field => data.push({ name: field, value: this.values[field] }));
return data;
}
private isEmptyDropdownOption(key: string): boolean {
@@ -395,4 +393,16 @@ export class FormModel {
}
return false;
}
setNodeIdValueForViewersLinkedToUploadWidget(linkedUploadWidgetContentSelected: UploadWidgetContentLinkModel) {
const subscribedViewers = this.getFormFields().filter(field =>
field.type === FormFieldTypes.FILE_VIEWER && linkedUploadWidgetContentSelected.uploadWidgetId === field.params['uploadWidget']
);
subscribedViewers.forEach(viewer => {
this.values[viewer.id] = linkedUploadWidgetContentSelected.id;
viewer.json.value = this.values[viewer.id];
viewer.value = viewer.parseValue(viewer.json);
});
}
}

1
lib/core/form/components/widgets/core/index.ts
View File

@@ -38,3 +38,4 @@ export * from './external-content-link';
export * from './group.model';
export * from './form-variable.model';
export * from './process-variable.model';
export * from './upload-widget-content-link.model';

27
lib/core/form/components/widgets/core/upload-widget-content-link.model.ts Normal file
View File

@@ -0,0 +1,27 @@
/*!
* @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 { ContentLinkModel } from './content-link.model';
export class UploadWidgetContentLinkModel extends ContentLinkModel {
uploadWidgetId: string;
constructor(obj?: any, uploadWidgetId?: string) {
super(obj);
this.uploadWidgetId = uploadWidgetId;
}
}

7
lib/core/form/components/widgets/file-viewer/file-viewer.widget.html Normal file
View File

@@ -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
*ngIf="isRequired()">*</span></label>
<adf-viewer [overlayMode]="false" [nodeId]="field.value" [showViewer]="field.value" [allowGoBack]="false"></adf-viewer>
<error-widget [error]="field.validationSummary"></error-widget>
</div>

21
lib/core/form/components/widgets/file-viewer/file-viewer.widget.scss Normal file
View File

@@ -0,0 +1,21 @@
@import '../form';
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;
}
}
}
}
}

46
lib/core/form/components/widgets/file-viewer/file-viewer.widget.ts Normal file
View File

@@ -0,0 +1,46 @@
/*!
* @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, ViewEncapsulation } from '@angular/core';
import { FormService } from '../../../services/form.service';
import { WidgetComponent } from './../widget.component';
/* tslint:disable: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 {
constructor(formService: FormService) {
super(formService);
}
}

5
lib/core/form/components/widgets/index.ts
View File

@@ -47,6 +47,7 @@ import { UploadWidgetComponent } from './upload/upload.widget';
import { DateTimeWidgetComponent } from './date-time/date-time.widget';
import { JsonWidgetComponent } from './json/json.widget';
import { UploadFolderWidgetComponent } from './upload-folder/upload-folder.widget';
import { FileViewerWidgetComponent } from './file-viewer/file-viewer.widget';
// core
export * from './widget.component';
@@ -78,6 +79,7 @@ export * from './document/document.widget';
export * from './date-time/date-time.widget';
export * from './json/json.widget';
export * from './upload-folder/upload-folder.widget';
export * from './file-viewer/file-viewer.widget';
// editors (dynamic table)
export * from './dynamic-table/dynamic-table.widget.model';
@@ -120,7 +122,8 @@ export const WIDGET_DIRECTIVES: any[] = [
DateTimeEditorComponent,
JsonWidgetComponent,
AmountEditorComponent,
UploadFolderWidgetComponent
UploadFolderWidgetComponent,
FileViewerWidgetComponent
];
export const MASK_DIRECTIVE: any[] = [