diff --git a/lib/core/form/components/widgets/core/displayable-cm-properties.model.ts b/lib/core/form/components/widgets/core/displayable-cm-properties.model.ts new file mode 100644 index 0000000000..800b176e2b --- /dev/null +++ b/lib/core/form/components/widgets/core/displayable-cm-properties.model.ts @@ -0,0 +1,26 @@ +/*! + * @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. + */ + +/* tslint:disable:component-selector */ + +export interface DisplayableCMProperties { + name?: string; + prefixedName?: string; + title?: string; + dataType?: string; + defaultValue?: string; +} diff --git a/lib/core/form/components/widgets/core/form-field-metadata.ts b/lib/core/form/components/widgets/core/form-field-metadata.ts index 77156f4bf9..ea3296566a 100644 --- a/lib/core/form/components/widgets/core/form-field-metadata.ts +++ b/lib/core/form/components/widgets/core/form-field-metadata.ts @@ -17,6 +17,7 @@ /* tslint:disable:component-selector */ +import { DisplayableCMProperties } from './displayable-cm-properties.model'; import { FormFieldFileSource } from './form-field-file-source'; export interface FormFieldMetadata { @@ -35,4 +36,5 @@ export interface FormFieldMetadata { retrieveMetadata?: boolean, remove?: boolean }; + displayableCMProperties?: DisplayableCMProperties[]; } diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json index c474855efc..72679d0d1e 100644 --- a/lib/core/i18n/en.json +++ b/lib/core/i18n/en.json @@ -42,6 +42,7 @@ "REMOVE_FILE": "Remove", "UPLOAD": "UPLOAD", "REQUIRED": "*Required", + "FILE_NAME": "File Name", "NO_FILE_ATTACHED" : "No file attached", "VALIDATOR": { "INVALID_NUMBER": "Use a different number format", diff --git a/lib/process-services-cloud/karma.conf.js b/lib/process-services-cloud/karma.conf.js index a3c8a4475c..d8cb905717 100644 --- a/lib/process-services-cloud/karma.conf.js +++ b/lib/process-services-cloud/karma.conf.js @@ -37,7 +37,10 @@ module.exports = function (config) { '/assets/adf-core/i18n/en-GB.json': '/base/lib/core/i18n/en.json', '/assets/adf-process-services-cloud/i18n/en.json': '/base/lib/process-services-cloud/lib/i18n/en.json', '/assets/adf-process-services-cloud/i18n/en-GB.json': '/base/lib/process-services-cloud/lib/i18n/en.json', - '/app.config.json': '/base/lib/config/app.config.json' + '/app.config.json': '/base/lib/config/app.config.json', + '/base/lib/process-services-cloud/assets/images/ft_ic_raster_image.svg': '/base/lib/process-services-cloud/assets/images/ft_ic_raster_image.svg', + '/base/lib/process-services-cloud/assets/images/ft_ic_miscellaneous.svg': '/base/lib/process-services-cloud/assets/images/ft_ic_miscellaneous.svg', + '/base/lib/process-services-cloud/assets/images/ft_ic_pdf.svg': '/base/lib/process-services-cloud/assets/images/ft_ic_pdf.svg', }, plugins: [ require('karma-jasmine-ajax'), diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html index 221c659182..e307bf59ea 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html @@ -1,64 +1,40 @@ -
- -
-
- +
+
+ +
+
+ +
-
-
- - - - check_circle - - - {{file.name}} - - - - - - - - - -
- {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }} +
+ +
+ {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }} +
+
+ +
- - - diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss index e7f5bb98bd..9960c2bcf0 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss @@ -1,6 +1,5 @@ .adf { &-attach-widget-container { - margin-bottom: 15px; display: flex; align-items: center; @@ -19,6 +18,26 @@ &-attach-widget__menu-upload { display: flex; align-items: center; + margin-right: 8px; + + .mat-raised-button { + line-height: 28px; + font-size: 12px; + } + + button span { + font-size: 12px; + + mat-icon { + line-height: 12px; + height: 12px; + width: 12px; + } + + .material-icons { + font-size: 18px; + } + } } &-attach-widget__input-type { @@ -47,10 +66,22 @@ } &-attach-widget { - width: 100%; + display: flex; + justify-content: space-between; word-break: break-all; - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; + padding: 0.4375em; + border-bottom: none; + background: var(--theme-colors-mat-grey); + min-height: 27px; + + .adf-label { + width: 32px; + font-size: var(--theme-caption-font-size); + line-height: var(--theme-headline-line-height); + text-align: left; + white-space: nowrap; + margin-left: 8px; + } } &-attach-widget__icon { @@ -83,4 +114,8 @@ } } } + + &-attach-file-widget-container { + margin: 15px; + } } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts index e0b57bebbc..1e3763c8b3 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts @@ -29,7 +29,8 @@ import { FormService, DownloadService, AppConfigService, - UploadWidgetContentLinkModel + UploadWidgetContentLinkModel, + LocalizedDatePipe } from '@alfresco/adf-core'; import { allSourceParams, @@ -54,7 +55,9 @@ import { processVariables, mockAllFileSourceWithRenamedFolderVariablePathType, allSourceParamsWithRelativePath, - fakeLocalPhysicalRecordResponse + fakeLocalPhysicalRecordResponse, + displayableCMParams, + fakeLocalPngHavingCMProperties } from '../../../mocks/attach-file-cloud-widget.mock'; import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module'; import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; @@ -79,6 +82,7 @@ describe('AttachFileCloudWidgetComponent', () => { let updateFormSpy: jasmine.Spy; let contentClickedSpy: jasmine.Spy; let openUploadFileDialogSpy: jasmine.Spy; + let localizedDataPipe: LocalizedDatePipe; function createUploadWidgetField(form: FormModel, fieldId: string, value?: any, params?: any, multiple?: boolean, name?: string, readOnly?: boolean) { widget.field = new FormFieldModel(form, { @@ -122,6 +126,7 @@ describe('AttachFileCloudWidgetComponent', () => { formService = TestBed.inject(FormService); contentNodeSelectorPanelService = TestBed.inject(ContentNodeSelectorPanelService); openUploadFileDialogSpy = spyOn(contentCloudNodeSelectorService, 'openUploadFileDialog').and.returnValue(of([fakeMinimalNode])); + localizedDataPipe = new LocalizedDatePipe(); }); afterEach(() => { @@ -197,6 +202,45 @@ describe('AttachFileCloudWidgetComponent', () => { expect(contentNodeSelectorPanelService.customModels).toEqual([]); }); + describe('Upload widget with displayable ContentModel properties', () => { + + it('should display CM Properties if the file contains value', async() => { + createUploadWidgetField(new FormModel(), 'attach-file-alfresco', [fakeLocalPngHavingCMProperties], displayableCMParams); + fixture.detectChanges(); + await fixture.whenStable(); + + expect(element.querySelector('#file-1155-icon')).not.toBeNull(); + expect(element.querySelector('#fileProperty-1155-name').textContent).toBe('Alex'); + expect(element.querySelector('#fileProperty-1155-age').textContent).toBe('34'); + }); + + it('should display defaultValue if the file does not contain value for respective displayableCMProperties', async() => { + createUploadWidgetField(new FormModel(), 'attach-file-alfresco', [fakeLocalPngResponse], displayableCMParams); + fixture.detectChanges(); + await fixture.whenStable(); + + expect(element.querySelector('#fileProperty-1155-name').textContent).toBe('Bob'); + expect(element.querySelector('#fileProperty-1155-age').textContent).toBe('--'); + }); + + it('should not display CM Properties in table if the field does not contain displayableCMProperties', async() => { + createUploadWidgetField(new FormModel(), 'attach-file-alfresco', [fakeLocalPngHavingCMProperties], allSourceParams); + fixture.detectChanges(); + await fixture.whenStable(); + + expect(element.querySelector('#fileProperty-1155-name')).toBeNull(); + expect(element.querySelector('#fileProperty-1155-age')).toBeNull(); + }); + + it('should display date property in converted form based on dataType', async() => { + createUploadWidgetField(new FormModel(), 'attach-file-alfresco', [fakeLocalPngHavingCMProperties], displayableCMParams); + fixture.detectChanges(); + await fixture.whenStable(); + + expect(element.querySelector('#fileProperty-1155-dob').textContent).toBe(localizedDataPipe.transform(new Date())); + }); + }); + describe('destinationFolderPath', () => { it('should be able to fetch nodeId if destinationFolderPath is defined', async () => { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts index 4599ae390e..dcc350b79c 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts @@ -74,6 +74,7 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent i this._nodesApi = this._nodesApi ?? new NodesApi(this.apiService.getInstance()); return this._nodesApi; } + displayedColumns = ['icon', 'fileName', 'action']; constructor( formService: FormService, @@ -95,6 +96,8 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent i const files = this.field.value || this.field.form.values[this.field.id]; this.contentModelFormFileHandler(files[0]); } + this.field.params.displayableCMProperties = this.field.params.displayableCMProperties ?? []; + this.displayedColumns.splice(2, 0, ...this.field.params.displayableCMProperties?.map(property => property?.name)); } isPathStaticType(): boolean { @@ -221,10 +224,6 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent i return this.isAlfrescoAndLocal() ? 'file_upload' : 'attach_file'; } - displayMenuOption(option: string): boolean { - return this.field?.params?.menuOptions ? this.field.params.menuOptions[option] : option !== AttachFileCloudWidgetComponent.RETRIEVE_METADATA_OPTION; - } - onRowClicked(file?: Node) { if (this.selectedNode?.id === file?.id) { this.selectedNode = null; diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.html b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.html new file mode 100644 index 0000000000..7d0514ebee --- /dev/null +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.html @@ -0,0 +1,72 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + check_circle + + + {{ 'FORM.FIELD.FILE_NAME' | translate }} + {{element.name}} + {{ columnName.title ? columnName.title : columnName.name | titlecase + }} + {{ getColumnValue(row, columnName) }} + + + + + + + + +
+
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss new file mode 100644 index 0000000000..0e46fc4235 --- /dev/null +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss @@ -0,0 +1,34 @@ +.adf-file-properties-table { + table { + width: 100%; + border: 1px solid var(--theme-border-color); + box-shadow: none; + .adf-datatable-selected { + padding: 6px; + } + + tr.mat-header-row { + height: 32px; + } + + th { + font-weight: bold; + padding-right: 0 !important; + } + + td { + max-width: 50px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 0 !important; + } + + td.mat-cell:first-of-type, + td.mat-footer-cell:first-of-type, + td.mat-cell:last-of-type, + td.mat-footer-cell:last-of-type { + width: 18% !important; + } + } +} diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.ts b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.ts new file mode 100644 index 0000000000..d2956b4665 --- /dev/null +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.ts @@ -0,0 +1,114 @@ +/*! + * @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. + */ + +/* tslint:disable:component-selector */ + +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { LocalizedDatePipe, ThumbnailService } from '@alfresco/adf-core'; +import { Node } from '@alfresco/js-api'; + +@Component({ + selector: 'adf-cloud-file-properties-table', + templateUrl: './file-properties-table-cloud.component.html', + styleUrls: ['./file-properties-table-cloud.component.scss'] +}) +export class FilePropertiesTableCloudComponent { + + static RETRIEVE_METADATA_OPTION = 'retrieveMetadata'; + + @Input() + uploadedFiles; + + @Input() + hasFile: boolean; + + @Input() + selectedNode: Node; + + @Input() + field; + + @Input() + displayedColumns; + + @Input() + mimeTypeIcon; + + @Output() + rowClick: EventEmitter = new EventEmitter(); + + @Output() + attachFileClick: EventEmitter = new EventEmitter(); + + @Output() + downloadFile: EventEmitter = new EventEmitter(); + + @Output() + contentModelFileHandler: EventEmitter = new EventEmitter(); + + @Output() + removeAttachFile: EventEmitter = new EventEmitter(); + + constructor(private localizedDatePipe: LocalizedDatePipe, private thumbnailService: ThumbnailService) {} + + onRowClicked(file?: Node) { + this.rowClick.emit(file); + } + + onAttachFileClicked(nodeSelector: any) { + this.attachFileClick.emit(nodeSelector); + } + + downloadContent(file: Node) { + this.downloadFile.emit(file); + } + + contentModelFormFileHandler(file?: any) { + this.contentModelFileHandler.emit(file); + } + + onRemoveAttachFile(file: any) { + this.removeAttachFile.emit(file); + } + + getIcon(mimeType: string): string { + return this.thumbnailService.getMimeTypeIcon(mimeType); + } + + getColumnValue(file, displayableCMProperty): string { + if (!file.properties[displayableCMProperty.prefixedName]) { + const fieldProperty = this.field.params.displayableCMProperties?.find(property => property.name === displayableCMProperty.name); + return fieldProperty.defaultValue ? this.checkDateTypeAndTransform(displayableCMProperty.dataType, fieldProperty.defaultValue) : '--' ; + } + return file.properties[displayableCMProperty.prefixedName] ? + this.checkDateTypeAndTransform(displayableCMProperty.dataType, file.properties[displayableCMProperty.prefixedName]) : + '--' ; + } + + checkDateTypeAndTransform(dataType, value): string { + if (dataType === 'd:date') { + return this.localizedDatePipe.transform(value); + } else if (dataType === 'd:datetime') { + return this.localizedDatePipe.transform(value, 'medium'); + } + return value; + } + + displayMenuOption(option: string): boolean { + return this.field?.params?.menuOptions ? this.field.params.menuOptions[option] : option !== FilePropertiesTableCloudComponent.RETRIEVE_METADATA_OPTION; + } +} diff --git a/lib/process-services-cloud/src/lib/form/form-cloud.module.ts b/lib/process-services-cloud/src/lib/form/form-cloud.module.ts index 6cd2ee5543..6dfc1bed6f 100644 --- a/lib/process-services-cloud/src/lib/form/form-cloud.module.ts +++ b/lib/process-services-cloud/src/lib/form/form-cloud.module.ts @@ -38,6 +38,7 @@ import { GroupCloudModule } from '../group/group-cloud.module'; import { PropertiesViewerWidgetComponent } from './components/widgets/properties-viewer/properties-viewer.widget'; 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'; @NgModule({ imports: [ @@ -64,7 +65,8 @@ import { RadioButtonsCloudWidgetComponent } from './components/widgets/radio-but PeopleCloudWidgetComponent, GroupCloudWidgetComponent, PropertiesViewerWrapperComponent, - PropertiesViewerWidgetComponent + PropertiesViewerWidgetComponent, + FilePropertiesTableCloudComponent ], exports: [ FormCloudComponent, diff --git a/lib/process-services-cloud/src/lib/form/mocks/attach-file-cloud-widget.mock.ts b/lib/process-services-cloud/src/lib/form/mocks/attach-file-cloud-widget.mock.ts index 5e60618dca..61de593cc0 100644 --- a/lib/process-services-cloud/src/lib/form/mocks/attach-file-cloud-widget.mock.ts +++ b/lib/process-services-cloud/src/lib/form/mocks/attach-file-cloud-widget.mock.ts @@ -69,6 +69,34 @@ export const fakeLocalPhysicalRecordResponse = { } }; +export const fakeLocalPngHavingCMProperties = { + id: 1155, + nodeId: 1155, + name: 'a_png_file.png', + created: '2017-07-25T17:17:37.099Z', + createdBy: { + id: 1001, + firstName: 'Admin', + lastName: 'admin', + email: 'admin' + }, + relatedContent: false, + contentAvailable: true, + link: false, + mimeType: null, + simpleType: 'image', + previewStatus: 'queued', + thumbnailStatus: 'queued', + properties: { + 'pfx:property_one': 'testValue', + 'pfx:property_two': true, + 'a:name': 'Alex', + 'a:age': '34', + 'a:dob': new Date(), + 'a:doj': new Date() + } +}; + export const onlyLocalParams = { fileSource: { serviceId: 'local-file' @@ -117,6 +145,47 @@ export const allSourceParams = { } }; +export const displayableCMParams = { + fileSource: { + name: 'all file sources', + serviceId: FileSourceTypes.ALL_FILE_SOURCES_SERVICE_ID, + destinationFolderPath: { + value: '-root-/myfiles', + type: DestinationFolderPathType.STATIC_TYPE + } + }, + displayableCMProperties: [ + { + 'name': 'name', + 'prefixedName': 'a:name', + 'title': '', + 'dataType': 'd:text', + 'defaultValue': 'Bob' + }, + { + 'name': 'age', + 'prefixedName': 'a:age', + 'title': 'Age', + 'dataType': 'd:text', + 'defaultValue': '' + }, + { + 'name': 'dob', + 'prefixedName': 'a:dob', + 'title': 'Date of Birth', + 'dataType': 'd:date', + 'defaultValue': '' + }, + { + 'name': 'doj', + 'prefixedName': 'a:doj', + 'title': 'Date of Joining', + 'dataType': 'd:datetime', + 'defaultValue': '' + } + ] +}; + export const allSourceWithStringTypeEmptyValue = { fileSource: { name: 'all file sources', diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.spec.ts index 31722198e3..0c4ee06020 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.spec.ts @@ -40,6 +40,7 @@ import { DateCloudFilterType } from '../../../../models/date-cloud-filter.model' import { TaskFilterCloudModel } from '../../models/filter-cloud.model'; import { PeopleCloudModule } from '../../../../people/people-cloud.module'; import { ProcessDefinitionCloud } from '../../../../models/process-definition-cloud.model'; +import { MatIconTestingModule } from '@angular/material/icon/testing'; describe('EditTaskFilterCloudComponent', () => { let component: EditTaskFilterCloudComponent; @@ -67,7 +68,8 @@ describe('EditTaskFilterCloudComponent', () => { TranslateModule.forRoot(), ProcessServiceCloudTestingModule, TaskFiltersCloudModule, - PeopleCloudModule + PeopleCloudModule, + MatIconTestingModule ], providers: [ MatDialog, diff --git a/lib/testing/src/lib/protractor/process-services-cloud/pages/form/widget/attach-file-widget-cloud.page.ts b/lib/testing/src/lib/protractor/process-services-cloud/pages/form/widget/attach-file-widget-cloud.page.ts index c3f4c06bf2..2a908be5fe 100644 --- a/lib/testing/src/lib/protractor/process-services-cloud/pages/form/widget/attach-file-widget-cloud.page.ts +++ b/lib/testing/src/lib/protractor/process-services-cloud/pages/form/widget/attach-file-widget-cloud.page.ts @@ -29,8 +29,8 @@ export class AttachFileWidgetCloudPage { } getFileAttachedLocatorByContainingText = async(text: string): Promise => { - const filesListLocator = 'div[id="adf-attach-widget-readonly-list"]'; - return this.widget.$(filesListLocator).element(by.cssContainingText('mat-list-item span ', text)); + const filesListLocator = 'div[class="adf-file-properties-table"]'; + return this.widget.$(filesListLocator).element(by.cssContainingText('table tbody tr td span ', text)); } assignWidget(fieldId: string): void {