inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +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

59
lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts
View File

@@ -31,7 +31,9 @@ import {
TRANSLATION_PROVIDER,
WidgetVisibilityService,
VersionCompatibilityService,
FormService
FormService,
UploadWidgetContentLinkModel,
ContentLinkModel
} from '@alfresco/adf-core';
import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
import { FormCloudService } from '../services/form-cloud.service';
@@ -49,6 +51,7 @@ import { FormCloudModule } from '../form-cloud.module';
import { TranslateService, TranslateModule } from '@ngx-translate/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { CloudFormRenderingService } from './cloud-form-rendering.service';
import { Node } from '@alfresco/js-api';
describe('FormCloudComponent', () => {
let formCloudService: FormCloudService;
@@ -1123,6 +1126,18 @@ describe('retrieve metadata on submit', () => {
let fixture: ComponentFixture<FormCloudComponent>;
let formService: FormService;
const fakeNodeWithProperties: Node = <Node> {
id: 'fake-properties',
name: 'fake-properties-name',
content: {
mimeType: 'application/pdf'
},
properties: {
'pfx:property_one': 'testValue',
'pfx:property_two': true
}
};
beforeEach(async(() => {
const appConfigService = TestBed.inject(AppConfigService);
spyOn(appConfigService, 'get').and.returnValue([]);
@@ -1140,7 +1155,7 @@ describe('retrieve metadata on submit', () => {
formComponent.form.values['pfx_property_five'] = 'green';
const addValuesNotPresent = spyOn<any>(formComponent.form, 'addValuesNotPresent').and.callThrough();
const refreshFormSpy = spyOn<any>(formComponent, 'refreshFormData').and.stub();
const formDataRefreshed = spyOn<any>(formComponent.formDataRefreshed, 'emit').and.callThrough();
const values = {
pfx_property_one: 'testValue',
@@ -1154,11 +1169,39 @@ describe('retrieve metadata on submit', () => {
formService.updateFormValuesRequested.next(values);
expect(addValuesNotPresent).toHaveBeenCalledWith(values);
expect(refreshFormSpy).toHaveBeenCalled();
expect(formComponent.data).toContain({ name: 'pfx_property_one', value: 'testValue' });
expect(formComponent.data).toContain({ name: 'pfx_property_two', value: true });
expect(formComponent.data).toContain({ name: 'pfx_property_three', value: 'opt_1' });
expect(formComponent.data).toContain({ name: 'pfx_property_four', value: 'option_2' });
expect(formComponent.data).toContain({ name: 'pfx_property_five', value: 'green' });
expect(formComponent.form.values['pfx_property_one']).toBe('testValue');
expect(formComponent.form.values['pfx_property_two']).toBe(true);
expect(formComponent.form.values['pfx_property_three']).toEqual({ id: 'opt_1', name: 'Option 1'});
expect(formComponent.form.values['pfx_property_four']).toEqual({ id: 'option_2', name: 'Option: 2'});
expect(formComponent.form.values['pfx_property_five']).toEqual('green');
expect(formDataRefreshed).toHaveBeenCalled();
});
it('should call setNodeIdValueForViewersLinkedToUploadWidget when content is UploadWidgetContentLinkModel', async () => {
const uploadWidgetContentLinkModel = new UploadWidgetContentLinkModel(fakeNodeWithProperties, 'attach-file-alfresco');
const setNodeIdValueForViewersLinkedToUploadWidget = spyOn<any>(formComponent.form, 'setNodeIdValueForViewersLinkedToUploadWidget').and.callThrough();
const formDataRefreshed = spyOn<any>(formComponent.formDataRefreshed, 'emit').and.callThrough();
const formContentClicked = spyOn<any>(formComponent.formContentClicked, 'emit').and.callThrough();
formService.formContentClicked.next(uploadWidgetContentLinkModel);
expect(setNodeIdValueForViewersLinkedToUploadWidget).toHaveBeenCalledWith(uploadWidgetContentLinkModel);
expect(formDataRefreshed).toHaveBeenCalled();
expect(formContentClicked).not.toHaveBeenCalled();
});
it('should not call setNodeIdValueForViewersLinkedToUploadWidget when content is not UploadWidgetContentLinkModel', async () => {
const contentLinkModel = new ContentLinkModel(fakeNodeWithProperties);
const setNodeIdValueForViewersLinkedToUploadWidget = spyOn<any>(formComponent.form, 'setNodeIdValueForViewersLinkedToUploadWidget').and.callThrough();
const formDataRefreshed = spyOn<any>(formComponent.formDataRefreshed, 'emit').and.callThrough();
const formContentClicked = spyOn<any>(formComponent.formContentClicked, 'emit').and.callThrough();
formService.formContentClicked.next(contentLinkModel);
expect(setNodeIdValueForViewersLinkedToUploadWidget).not.toHaveBeenCalled();
expect(formDataRefreshed).not.toHaveBeenCalled();
expect(formContentClicked).toHaveBeenCalledWith(contentLinkModel);
});
});

16
lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts
View File

@@ -32,7 +32,8 @@ import {
FormFieldValidator,
FormValues,
FormModel,
ContentLinkModel
ContentLinkModel,
UploadWidgetContentLinkModel
} from '@alfresco/adf-core';
import { FormCloudService } from '../services/form-cloud.service';
import { TaskVariableCloud } from '../models/task-variable-cloud.model';
@@ -110,14 +111,19 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
this.formService.formContentClicked
.pipe(takeUntil(this.onDestroy$))
.subscribe((content) => {
this.formContentClicked.emit(content);
if (content instanceof UploadWidgetContentLinkModel) {
this.form.setNodeIdValueForViewersLinkedToUploadWidget(content);
this.onFormDataRefreshed(this.form);
} else {
this.formContentClicked.emit(content);
}
});
this.formService.updateFormValuesRequested
.pipe(takeUntil(this.onDestroy$))
.subscribe((valuesToSetIfNotPresent) => {
this.data = this.form.addValuesNotPresent(valuesToSetIfNotPresent);
this.refreshFormData();
this.form.addValuesNotPresent(valuesToSetIfNotPresent);
this.onFormDataRefreshed(this.form);
});
}
@@ -219,7 +225,7 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
.getForm(appName, formId, appVersion)
.pipe(
map((form: any) => {
const flattenForm = {...form.formRepresentation, ...form.formRepresentation.formDefinition};
const flattenForm = { ...form.formRepresentation, ...form.formRepresentation.formDefinition };
delete flattenForm.formDefinition;
return flattenForm;
}),

17
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
View File

@@ -16,11 +16,16 @@
<div id="adf-attach-widget-readonly-list">
<mat-list *ngIf="hasFile">
<mat-list-item class="adf-attach-files-row" *ngFor="let file of uploadedFiles">
<img mat-list-icon class="adf-attach-widget__icon" [id]="'file-'+file?.id+'-icon'"
[src]="file.content ? getIcon(file.content.mimeType) : getIcon(file.mimeType)" [alt]="mimeTypeIcon"
role="button" tabindex="0" />
<span matLine id="{{'file-'+file?.id}}" role="button" tabindex="0" class="adf-file">{{file.name}}</span>
<mat-list-item
[ngClass]="{'adf-attach-files-row': true, 'adf-attach-selected-file-row': displayMenuOption('retrieveMetadata') && selectedNode && file.id === selectedNode.id}"
*ngFor="let file of uploadedFiles">
<mat-icon mat-list-icon class="adf-datatable-selected" *ngIf="selectedNode && file.id === selectedNode.id" (click)="onRowClicked(file)">
check_circle
</mat-icon>
<img mat-list-icon class="adf-attach-widget__icon" *ngIf="!selectedNode || file.id !== selectedNode.id" [id]="'file-'+file?.id+'-icon'" (click)="onRowClicked(file)"
[src]="file.content ? getIcon(file.content.mimeType) : getIcon(file.mimeType)" [alt]="mimeTypeIcon"
role="button" tabindex="0" />
<span matLine id="{{'file-'+file?.id}}" role="button" tabindex="0" class="adf-file" (click)="onRowClicked(file)">{{file.name}}</span>
<button id="{{'file-'+file?.id+'-option-menu'}}" mat-icon-button [matMenuTriggerFor]="fileActionMenu">
<mat-icon>more_vert</mat-icon>
</button>
@@ -36,7 +41,7 @@
<span>{{ 'FORM.FIELD.DOWNLOAD_FILE' | translate }}</span>
</button>
<button *ngIf="displayMenuOption('retrieveMetadata')" id="{{'file-'+file?.id+'-retrieve-file-metadata'}}"
mat-menu-item (click)="onRetrieveFileMetadata(file);">
mat-menu-item (click)="contentModelFormFileHandler(file)">
<mat-icon class="mat-24">low_priority</mat-icon>
<span>{{ 'ADF_CLOUD_FORM_COMPONENT.RETRIEVE_METADATA' | translate }}</span>
</button>

19
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
View File

@@ -1,5 +1,7 @@
.adf {
@mixin adf-cloud-attach-file-cloud-widget($theme) {
$primary: map-get($theme, primary);
.adf {
&-attach-widget-container {
margin-bottom: 15px;
display: flex;
@@ -65,9 +67,24 @@
}
&-attach-files-row {
div.mat-list-item-content {
cursor: pointer;
}
.mat-line {
margin-bottom: 0;
}
}
&-attach-selected-file-row {
div.mat-list-item-content {
.adf-datatable-selected {
color: mat-color($primary);
padding-right: 6px;
}
}
}
}
}

228
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts
View File

@@ -28,7 +28,9 @@ import {
FormFieldMetadata,
FormService,
DownloadService,
AppConfigService
AppConfigService,
AlfrescoApiService,
UploadWidgetContentLinkModel
} from '@alfresco/adf-core';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -48,6 +50,11 @@ describe('AttachFileCloudWidgetComponent', () => {
let processCloudContentService: ProcessCloudContentService;
let formService: FormService;
let downloadService: DownloadService;
let alfrescoApiService: AlfrescoApiService;
let apiServiceSpy: jasmine.Spy;
let contentModelFormFileHandlerSpy: jasmine.Spy;
let updateFormSpy: jasmine.Spy;
let contentClickedSpy: jasmine.Spy;
const fakePngAnswer = {
id: 1155,
@@ -66,7 +73,11 @@ describe('AttachFileCloudWidgetComponent', () => {
mimeType: 'image/png',
simpleType: 'image',
previewStatus: 'queued',
thumbnailStatus: 'queued'
thumbnailStatus: 'queued',
properties: {
'pfx:property_one': 'testValue',
'pfx:property_two': true
}
};
const onlyLocalParams = {
@@ -76,6 +87,13 @@ describe('AttachFileCloudWidgetComponent', () => {
};
const contentSourceParam = {
fileSource: {
name: 'mock-alf-content',
serviceId: 'alfresco-content'
}
};
const menuTestSourceParam = {
fileSource: {
name: 'mock-alf-content',
serviceId: 'alfresco-content'
@@ -123,6 +141,14 @@ describe('AttachFileCloudWidgetComponent', () => {
const fakeMinimalNode: Node = <Node> {
id: 'fake',
name: 'fake-name',
content: {
mimeType: 'application/pdf'
}
};
const fakeNodeWithProperties: Node = <Node> {
id: 'fake-properties',
name: 'fake-properties-name',
content: {
mimeType: 'application/pdf'
},
@@ -132,6 +158,8 @@ describe('AttachFileCloudWidgetComponent', () => {
}
};
const expectedValues = { pfx_property_one: 'testValue', pfx_property_two: true };
const mockNodeId = new Promise(function (resolve) {
resolve('mock-node-id');
});
@@ -179,6 +207,7 @@ describe('AttachFileCloudWidgetComponent', () => {
AppConfigService
);
formService = TestBed.inject(FormService);
alfrescoApiService = TestBed.inject(AlfrescoApiService);
}));
afterEach(() => {
@@ -523,16 +552,17 @@ describe('AttachFileCloudWidgetComponent', () => {
describe('when a file is uploaded', () => {
beforeEach(async () => {
apiServiceSpy = spyOn(alfrescoApiService.getInstance().node, 'getNode').and.returnValue(new Promise(resolve => resolve({entry: fakeNodeWithProperties})));
spyOn(
contentCloudNodeSelectorService,
'openUploadFileDialog'
).and.returnValue(of([fakeMinimalNode]));
).and.returnValue(of([fakeNodeWithProperties]));
widget.field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.UPLOAD,
value: []
});
widget.field.id = 'attach-file-alfresco';
widget.field.params = <FormFieldMetadata> contentSourceParam;
widget.field.params = <FormFieldMetadata> menuTestSourceParam;
fixture.detectChanges();
await fixture.whenStable();
const attachButton: HTMLButtonElement = element.querySelector('#attach-file-alfresco');
@@ -547,19 +577,19 @@ describe('AttachFileCloudWidgetComponent', () => {
it('should remove file when remove is clicked', (done) => {
fixture.detectChanges();
const menuButton: HTMLButtonElement = <HTMLButtonElement> (
fixture.debugElement.query(By.css('#file-fake-option-menu'))
fixture.debugElement.query(By.css('#file-fake-properties-option-menu'))
.nativeElement
);
menuButton.click();
fixture.detectChanges();
const removeOption: HTMLButtonElement = <HTMLButtonElement> (
fixture.debugElement.query(By.css('#file-fake-remove'))
fixture.debugElement.query(By.css('#file-fake-properties-remove'))
.nativeElement
);
removeOption.click();
fixture.detectChanges();
fixture.whenRenderingDone().then(() => {
expect(element.querySelector('#file-fake-icon')).toBeNull();
expect(element.querySelector('#file-fake-properties-icon')).toBeNull();
done();
});
});
@@ -572,7 +602,7 @@ describe('AttachFileCloudWidgetComponent', () => {
fixture.detectChanges();
const menuButton: HTMLButtonElement = <HTMLButtonElement> (
fixture.debugElement.query(By.css('#file-fake-option-menu'))
fixture.debugElement.query(By.css('#file-fake-properties-option-menu'))
.nativeElement
);
@@ -580,7 +610,7 @@ describe('AttachFileCloudWidgetComponent', () => {
fixture.detectChanges();
const downloadOption: HTMLButtonElement = <HTMLButtonElement> (
fixture.debugElement.query(By.css('#file-fake-download-file'))
fixture.debugElement.query(By.css('#file-fake-properties-download-file'))
.nativeElement
);
@@ -597,7 +627,7 @@ describe('AttachFileCloudWidgetComponent', () => {
spyOn(processCloudContentService, 'getRawContentNode').and.returnValue(of(new Blob()));
formService.formContentClicked.subscribe(
(fileClicked: any) => {
expect(fileClicked.nodeId).toBe('fake');
expect(fileClicked.nodeId).toBe('fake-properties');
done();
}
);
@@ -605,25 +635,24 @@ describe('AttachFileCloudWidgetComponent', () => {
fixture.detectChanges();
const menuButton: HTMLButtonElement = <HTMLButtonElement> (
fixture.debugElement.query(
By.css('#file-fake-option-menu')
By.css('#file-fake-properties-option-menu')
).nativeElement
);
menuButton.click();
fixture.detectChanges();
const showOption: HTMLButtonElement = <HTMLButtonElement> (
fixture.debugElement.query(
By.css('#file-fake-show-file')
By.css('#file-fake-properties-show-file')
).nativeElement
);
showOption.click();
});
it('should request form to be updated with metadata when retrieve is clicked', (done) => {
const updateFormSpy = spyOn(formService.updateFormValuesRequested, 'next');
const expectedValues = { pfx_property_one: 'testValue', pfx_property_two: true };
updateFormSpy = spyOn(formService.updateFormValuesRequested, 'next');
const menuButton: HTMLButtonElement = <HTMLButtonElement> (
fixture.debugElement.query(By.css('#file-fake-option-menu'))
fixture.debugElement.query(By.css('#file-fake-properties-option-menu'))
.nativeElement
);
@@ -631,11 +660,12 @@ describe('AttachFileCloudWidgetComponent', () => {
fixture.detectChanges();
const retrieveMetadataOption: HTMLButtonElement = <HTMLButtonElement> (
fixture.debugElement.query(By.css('#file-fake-retrieve-file-metadata'))
fixture.debugElement.query(By.css('#file-fake-properties-retrieve-file-metadata'))
.nativeElement
);
retrieveMetadataOption.click();
expect(apiServiceSpy).toHaveBeenCalledWith(fakeNodeWithProperties.id);
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -687,4 +717,170 @@ describe('AttachFileCloudWidgetComponent', () => {
});
});
});
describe('contentModelFormFileHandler', () => {
beforeEach(async () => {
apiServiceSpy = spyOn(alfrescoApiService.getInstance().node, 'getNode').and.returnValue(new Promise(resolve => resolve({ entry: fakeNodeWithProperties })));
contentModelFormFileHandlerSpy = spyOn(widget, 'contentModelFormFileHandler').and.callThrough();
updateFormSpy = spyOn(formService.updateFormValuesRequested, 'next');
contentClickedSpy = spyOn(formService.formContentClicked, 'next');
spyOn(
contentCloudNodeSelectorService,
'openUploadFileDialog'
).and.returnValue(of([fakeNodeWithProperties]));
widget.field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.UPLOAD,
value: []
});
widget.field.id = 'attach-file-alfresco';
widget.field.params = <FormFieldMetadata> menuTestSourceParam;
fixture.detectChanges();
await fixture.whenStable();
});
it('should not be called onInit when widget has no value', (done) => {
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(contentModelFormFileHandlerSpy).not.toHaveBeenCalled();
done();
});
});
it('should have been called onInit when widget only one file', (done) => {
widget.field.value = [fakeNodeWithProperties];
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(contentModelFormFileHandlerSpy).toHaveBeenCalledWith(fakeNodeWithProperties);
expect(updateFormSpy).toHaveBeenCalledWith(expectedValues);
expect(contentClickedSpy).toHaveBeenCalledWith(new UploadWidgetContentLinkModel(fakeNodeWithProperties, widget.field.id));
done();
});
});
it('should not be called onInit when widget has more than one file', (done) => {
widget.field.value = [fakeNodeWithProperties, fakeMinimalNode];
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(contentModelFormFileHandlerSpy).not.toHaveBeenCalled();
done();
});
});
it('should not be called on remove node if node removed is not the selected one', (done) => {
widget.field.value = [fakeNodeWithProperties, fakeMinimalNode];
widget.selectedNode = fakeNodeWithProperties;
widget.ngOnInit();
fixture.detectChanges();
widget.onRemoveAttachFile(fakeMinimalNode);
fixture.whenStable().then(() => {
expect(contentModelFormFileHandlerSpy).not.toHaveBeenCalled();
done();
});
});
it('should have been called on remove node if node removed is the selected one', (done) => {
widget.field.value = [fakeNodeWithProperties, fakeMinimalNode];
widget.selectedNode = fakeNodeWithProperties;
widget.ngOnInit();
fixture.detectChanges();
widget.onRemoveAttachFile(fakeNodeWithProperties);
fixture.whenStable().then(() => {
expect(contentModelFormFileHandlerSpy).toHaveBeenCalled();
expect(updateFormSpy).not.toHaveBeenCalled();
expect(contentClickedSpy).toHaveBeenCalledWith(new UploadWidgetContentLinkModel(undefined, widget.field.id));
done();
});
});
it('should have been called on attach file when value was empty', async () => {
const attachButton: HTMLButtonElement = element.querySelector('#attach-file-alfresco');
expect(attachButton).not.toBeNull();
attachButton.click();
await fixture.whenStable();
fixture.detectChanges();
expect(contentModelFormFileHandlerSpy).toHaveBeenCalledWith(fakeNodeWithProperties);
expect(updateFormSpy).toHaveBeenCalledWith(expectedValues);
expect(contentClickedSpy).toHaveBeenCalledWith(new UploadWidgetContentLinkModel(fakeNodeWithProperties, widget.field.id));
});
it('should not be called on attach file when has a file previously', async () => {
widget.field.value = [fakeNodeWithProperties, fakeMinimalNode];
widget.field.params['multiple'] = true;
widget.ngOnInit();
await fixture.whenStable();
fixture.detectChanges();
const attachButton: HTMLButtonElement = element.querySelector('#attach-file-alfresco');
expect(attachButton).not.toBeNull();
attachButton.click();
await fixture.whenStable();
fixture.detectChanges();
expect(contentModelFormFileHandlerSpy).not.toHaveBeenCalled();
});
it('should be called when selecting a row if no previous row was selected', async () => {
widget.field.value = [fakeNodeWithProperties, fakeMinimalNode];
widget.selectedNode = null;
widget.ngOnInit();
await fixture.whenStable();
fixture.detectChanges();
widget.onRowClicked(fakeNodeWithProperties);
await fixture.whenStable();
expect(widget.selectedNode).toEqual(fakeNodeWithProperties);
expect(contentModelFormFileHandlerSpy).toHaveBeenCalledWith(fakeNodeWithProperties);
expect(updateFormSpy).toHaveBeenCalledWith(expectedValues);
expect(contentClickedSpy).toHaveBeenCalledWith(new UploadWidgetContentLinkModel(fakeNodeWithProperties, widget.field.id));
});
it('should be called when selecting a row and previous row was selected', async () => {
widget.field.value = [fakeNodeWithProperties, fakeMinimalNode];
widget.selectedNode = fakeMinimalNode;
widget.ngOnInit();
await fixture.whenStable();
fixture.detectChanges();
widget.onRowClicked(fakeNodeWithProperties);
await fixture.whenStable();
expect(widget.selectedNode).toEqual(fakeNodeWithProperties);
expect(contentModelFormFileHandlerSpy).toHaveBeenCalledWith(fakeNodeWithProperties);
expect(updateFormSpy).toHaveBeenCalledWith(expectedValues);
expect(contentClickedSpy).toHaveBeenCalledWith(new UploadWidgetContentLinkModel(fakeNodeWithProperties, widget.field.id));
});
it('should be called when deselecting a row', async () => {
widget.field.value = [fakeNodeWithProperties, fakeMinimalNode];
widget.selectedNode = fakeNodeWithProperties;
widget.ngOnInit();
await fixture.whenStable();
fixture.detectChanges();
widget.onRowClicked(fakeNodeWithProperties);
await fixture.whenStable();
expect(widget.selectedNode).toBeNull();
expect(contentModelFormFileHandlerSpy).toHaveBeenCalled();
expect(updateFormSpy).not.toHaveBeenCalled();
expect(contentClickedSpy).toHaveBeenCalledWith(new UploadWidgetContentLinkModel(null, widget.field.id));
});
});
});

76
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts
View File

@@ -19,13 +19,15 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {
FormService,
LogService,
ThumbnailService,
NotificationService,
FormValues,
ContentLinkModel,
AppConfigService
FormService,
LogService,
ThumbnailService,
NotificationService,
FormValues,
ContentLinkModel,
AppConfigService,
AlfrescoApiService,
UploadWidgetContentLinkModel
} from '@alfresco/adf-core';
import { Node, RelatedContentRepresentation } from '@alfresco/js-api';
import { ContentCloudNodeSelectorService } from '../../../services/content-cloud-node-selector.service';
@@ -55,9 +57,11 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent i
static ALIAS_USER_FOLDER = '-my-';
static APP_NAME = '-appname-';
static VALID_ALIAS = ['-root-', AttachFileCloudWidgetComponent.ALIAS_USER_FOLDER, '-shared-'];
static RETRIEVE_METADATA_OPTION = 'retrieveMetadata';
typeId = 'AttachFileCloudWidgetComponent';
rootNodeId = AttachFileCloudWidgetComponent.ALIAS_USER_FOLDER;
selectedNode: Node;
constructor(
formService: FormService,
@@ -66,11 +70,20 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent i
processCloudContentService: ProcessCloudContentService,
notificationService: NotificationService,
private contentNodeSelectorService: ContentCloudNodeSelectorService,
private appConfigService: AppConfigService
private appConfigService: AppConfigService,
private apiService: AlfrescoApiService
) {
super(formService, thumbnails, processCloudContentService, notificationService, logger);
}
ngOnInit() {
super.ngOnInit();
if (this.hasFile && this.field.value.length === 1) {
const files = this.field.value || this.field.form.values[this.field.id];
this.contentModelFormFileHandler(files[0]);
}
}
isAlfrescoAndLocal(): boolean {
return (
this.field.params &&
@@ -85,6 +98,10 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent i
onRemoveAttachFile(file: File | RelatedContentRepresentation | Node) {
this.removeFile(file);
if (file['id'] === this.selectedNode?.id) {
this.selectedNode = null;
this.contentModelFormFileHandler();
}
}
fetchAppNameFromAppConfig(): string {
@@ -115,6 +132,9 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent i
selections.forEach(node => (node['isExternal'] = true));
const selectionWithoutDuplication = this.removeExistingSelection(selections);
this.fixIncompatibilityFromPreviousAndNewForm(selectionWithoutDuplication);
if (this.field.value.length === 1) {
this.contentModelFormFileHandler(selections && selections.length > 0 ? selections[0] : null);
}
});
}
@@ -152,20 +172,38 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent i
}
displayMenuOption(option: string): boolean {
return this.field.params.menuOptions ? this.field.params.menuOptions[option] : option !== 'retrieveMetadata';
return this.field?.params?.menuOptions ? this.field.params.menuOptions[option] : option !== AttachFileCloudWidgetComponent.RETRIEVE_METADATA_OPTION;
}
onRetrieveFileMetadata(file: Node) {
const values: FormValues = {};
const metadata = file?.properties;
if (metadata) {
const keys = Object.keys(metadata);
keys.forEach(key => {
const sanitizedKey = key.replace(':', '_');
values[sanitizedKey] = metadata[key];
});
this.formService.updateFormValuesRequested.next(values);
onRowClicked(file?: Node) {
if (this.selectedNode?.id === file?.id) {
this.selectedNode = null;
} else {
this.selectedNode = file;
}
this.contentModelFormFileHandler(this.selectedNode);
}
contentModelFormFileHandler(file?: Node) {
if (file?.id && this.isRetrieveMetadataOptionEnabled()) {
const values: FormValues = {};
this.apiService.getInstance().node.getNode(file.id).then(acsNode => {
const metadata = acsNode?.entry?.properties;
if (metadata) {
const keys = Object.keys(metadata);
keys.forEach(key => {
const sanitizedKey = key.replace(':', '_');
values[sanitizedKey] = metadata[key];
});
this.formService.updateFormValuesRequested.next(values);
}
});
}
this.fileClicked(new UploadWidgetContentLinkModel(file, this.field.id));
}
isRetrieveMetadataOptionEnabled(): boolean {
return this.field?.params?.menuOptions && this.field.params.menuOptions[AttachFileCloudWidgetComponent.RETRIEVE_METADATA_OPTION];
}
isValidAlias(alias: string): boolean {

169
lib/process-services-cloud/src/lib/form/mocks/cloud-form.mock.ts
View File

@@ -1150,6 +1150,175 @@ export let fakeMetadataForm = {
'restIdProperty': null,
'restLabelProperty': null
}
],
'7': [
{
'id': 'cmfb85b2a7295ba41209750bca176ccaf9a',
'name': 'File viewer',
'type': 'file-viewer',
'readOnly': false,
'required': false,
'colspan': 1,
'visibilityCondition': null,
'params': {
'existingColspan': 1,
'maxColspan': 2,
'uploadWidget': 'content_form_nodes'
}
}
],
'8': [
{
'type': 'text',
'id': 'pfx_property_six',
'name': 'pfx_property_six',
'colspan': 1,
'params': {
'existingColspan': 1,
'maxColspan': 2
},
'visibilityCondition': null,
'placeholder': null,
'value': null,
'required': false,
'minLength': 0,
'maxLength': 0,
'regexPattern': null
}
],
'9': [
{
'type': 'text',
'id': 'pfx_property_seven',
'name': 'pfx_property_seven',
'colspan': 1,
'params': {
'existingColspan': 1,
'maxColspan': 2
},
'visibilityCondition': null,
'placeholder': null,
'value': null,
'required': false,
'minLength': 0,
'maxLength': 0,
'regexPattern': null
}
],
'10': [
{
'type': 'text',
'id': 'pfx_property_eight',
'name': 'pfx_property_eight',
'colspan': 1,
'params': {
'existingColspan': 1,
'maxColspan': 2
},
'visibilityCondition': null,
'placeholder': null,
'value': null,
'required': false,
'minLength': 0,
'maxLength': 0,
'regexPattern': null
}
]
},
'numberOfColumns': 2
}
],
'outcomes': [],
'metadata': {},
'variables': []
}
};
export let fakeViewerForm = {
'id': 'form-de8895be-d0d7-4434-beef-559b15305d72',
'name': 'StartEventForm',
'description': '',
'version': 0,
'formDefinition': {
'tabs': [],
'fields': [
{
'type': 'container',
'id': '5a6b24c1-db2b-45e9-9aff-142395433d23',
'name': 'Label',
'tab': null,
'fields': {
'1': [
{
'id': 'content_form_nodes',
'name': 'Nodes',
'type': 'upload',
'readOnly': false,
'required': true,
'colspan': 1,
'visibilityCondition': null,
'params': {
'existingColspan': 1,
'maxColspan': 2,
'fileSource': {
'serviceId': 'alfresco-content',
'name': 'Alfresco Content',
'metadataAllowed': true
},
'multiple': true,
'menuOptions': {
'show': true,
'download': true,
'retrieveMetadata': true,
'remove': true
},
'link': false
}
}
],
'2': [
{
'id': 'upload_widget',
'name': 'Nodes',
'type': 'upload',
'readOnly': false,
'required': true,
'colspan': 1,
'visibilityCondition': null,
'params': {
'existingColspan': 1,
'maxColspan': 2,
'fileSource': {
'serviceId': 'alfresco-content',
'name': 'Alfresco Content',
'metadataAllowed': true
},
'multiple': true,
'menuOptions': {
'show': true,
'download': true,
'retrieveMetadata': true,
'remove': true
},
'link': false
}
}
],
'3': [
{
'id': 'cmfb85b2a7295ba41209750bca176ccaf9a',
'name': 'File viewer',
'type': 'file-viewer',
'readOnly': false,
'required': false,
'colspan': 1,
'visibilityCondition': null,
'params': {
'existingColspan': 1,
'maxColspan': 2,
'uploadWidget': 'content_form_nodes'
}
}
]
},
'numberOfColumns': 2

5
lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts
View File

@@ -61,7 +61,7 @@ export interface Container {
}
export type FormFieldRepresentation = (DateField | DateTimeField | TextField | AttachFileField | DropDownField |
RadioField | TypeaheadField | PeopleField | AmountField | NumberField | CheckboxField | HyperlinkField | NumberField);
RadioField | TypeaheadField | PeopleField | AmountField | NumberField | CheckboxField | HyperlinkField );
export interface AttachFileField extends FormField {
required: boolean;
@@ -229,5 +229,6 @@ export enum FormFieldType {
uploadFile = 'upload',
uploadFolder = 'uploadFolder',
displayValue = 'readonly',
displayText = 'readonly-text'
displayText = 'readonly-text',
fileViewer = 'file-viewer'
}

2
lib/process-services-cloud/src/lib/styles/_index.scss
View File

@@ -9,6 +9,7 @@
@import './../task/task-filters/components/edit-task-filter-cloud.component.scss';
@import './../task/task-filters/components/task-filters-cloud.component.scss';
@import './../process/start-process/components/start-process-cloud.component';
@import './../form/components/widgets/attach-file/attach-file-cloud-widget.component.scss';
@mixin adf-process-services-cloud-theme($theme) {
@@ -23,4 +24,5 @@
@include adf-cloud-group-theme($theme);
@include adf-cloud-task-form-theme($theme);
@include adf-cloud-start-service-theme($theme);
@include adf-cloud-attach-file-cloud-widget($theme);
}