[ADF-5106] allow to redefine form widgets (APS 1.x and cloud) (#5601)

* create failing test

* fix form and start form widget registration

* update cloud form
This commit is contained in:
Denys Vuika 2020-04-21 15:47:09 +01:00 committed by GitHub
parent af7eb53251
commit 122bd9face
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 285 additions and 56 deletions

View File

@ -201,15 +201,11 @@ export abstract class FormBaseComponent {
this.error.emit(err);
}
abstract onRefreshClicked();
abstract onRefreshClicked(): void;
abstract saveTaskForm(): void;
abstract completeTaskForm(outcome?: string): void;
abstract saveTaskForm();
abstract completeTaskForm(outcome?: string);
protected abstract onTaskSaved(form: FormModel);
protected abstract storeFormAsMetadata();
protected abstract onExecuteOutcome(outcome: FormOutcomeModel);
protected abstract onTaskSaved(form: FormModel): void;
protected abstract storeFormAsMetadata(): void;
protected abstract onExecuteOutcome(outcome: FormOutcomeModel): boolean;
}

View File

@ -0,0 +1,38 @@
/*!
* @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 { Injectable } from '@angular/core';
import { 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';
import { PeopleCloudWidgetComponent } from './widgets/people/people-cloud.widget';
import { GroupCloudWidgetComponent } from './widgets/group/group-cloud.widget';
@Injectable({
providedIn: 'root'
})
export class CloudFormRenderingService extends FormRenderingService {
constructor() {
super();
this.setComponentTypeResolver('upload', () => AttachFileCloudWidgetComponent, true);
this.setComponentTypeResolver('dropdown', () => DropdownCloudWidgetComponent, true);
this.setComponentTypeResolver('date', () => DateCloudWidgetComponent, true);
this.setComponentTypeResolver('people', () => PeopleCloudWidgetComponent, true);
this.setComponentTypeResolver('functional-group', () => GroupCloudWidgetComponent, true);
}
}

View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange } from '@angular/core';
import { Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange, NgModule, Injector, ComponentFactoryResolver } from '@angular/core';
import { By } from '@angular/platform-browser';
import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { Observable, of, throwError } from 'rxjs';
@ -27,7 +27,6 @@ import {
FormModel,
FormOutcomeEvent,
FormOutcomeModel,
FormRenderingService,
setupTestBed,
TRANSLATION_PROVIDER,
WidgetVisibilityService
@ -46,20 +45,48 @@ import { FormCloudRepresentation } from '../models/form-cloud-representation.mod
import { FormCloudModule } from '../form-cloud.module';
import { TranslateService } from '@ngx-translate/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { CloudFormRenderingService } from './cloud-form-rendering.service';
describe('FormCloudComponent', () => {
let formCloudService: FormCloudService;
let fixture: ComponentFixture<FormCloudComponent>;
let formComponent: FormCloudComponent;
let visibilityService: WidgetVisibilityService;
let formRenderingService: FormRenderingService;
let formRenderingService: CloudFormRenderingService;
let translateService: TranslateService;
@Component({
selector: 'adf-cloud-custom-widget',
template: '<div></div>'
})
class CustomWidget {
typeId = 'CustomWidget';
}
@NgModule({
declarations: [CustomWidget],
exports: [CustomWidget],
entryComponents: [CustomWidget]
})
class CustomUploadModule {}
function buildWidget(type: string, injector: Injector): any {
const resolver = formRenderingService.getComponentTypeResolver(type);
const widgetType = resolver(null);
const factoryResolver: ComponentFactoryResolver = TestBed.get(ComponentFactoryResolver);
const factory = factoryResolver.resolveComponentFactory(widgetType);
const componentRef = factory.create(injector);
return componentRef.instance;
}
setupTestBed({
imports: [
NoopAnimationsModule,
CoreModule.forRoot(),
FormCloudModule
FormCloudModule,
CustomUploadModule
],
providers: [
{
@ -74,19 +101,82 @@ describe('FormCloudComponent', () => {
});
beforeEach(async(() => {
formRenderingService = TestBed.get(FormRenderingService);
formRenderingService = TestBed.get(CloudFormRenderingService);
formCloudService = TestBed.get(FormCloudService);
visibilityService = TestBed.get(WidgetVisibilityService);
translateService = TestBed.get(TranslateService);
visibilityService = TestBed.get(WidgetVisibilityService);
spyOn(visibilityService, 'refreshVisibility').and.callThrough();
const appConfigService = TestBed.get(AppConfigService);
spyOn(appConfigService, 'get').and.returnValue([]);
spyOn(formRenderingService, 'setComponentTypeResolver').and.returnValue(true);
fixture = TestBed.createComponent(FormCloudComponent);
formComponent = fixture.componentInstance;
fixture.detectChanges();
}));
it('should register custom [upload] widget', () => {
const widget = buildWidget('upload', fixture.componentRef.injector);
expect(widget['typeId']).toBe('AttachFileCloudWidgetComponent');
});
it('should allow to replace custom [upload] widget', () => {
formRenderingService.setComponentTypeResolver('upload', () => CustomWidget, true);
const widget = buildWidget('upload', fixture.componentRef.injector);
expect(widget['typeId']).toBe('CustomWidget');
});
it('should register custom [dropdown] widget', () => {
const widget = buildWidget('dropdown', fixture.componentRef.injector);
expect(widget['typeId']).toBe('DropdownCloudWidgetComponent');
});
it('should allow to replace custom [dropdown] widget', () => {
formRenderingService.setComponentTypeResolver('dropdown', () => CustomWidget, true);
const widget = buildWidget('dropdown', fixture.componentRef.injector);
expect(widget['typeId']).toBe('CustomWidget');
});
it('should register custom [date] widget', () => {
const widget = buildWidget('date', fixture.componentRef.injector);
expect(widget['typeId']).toBe('DateCloudWidgetComponent');
});
it('should allow to replace custom [date] widget', () => {
formRenderingService.setComponentTypeResolver('date', () => CustomWidget, true);
const widget = buildWidget('date', fixture.componentRef.injector);
expect(widget['typeId']).toBe('CustomWidget');
});
it('should register custom [people] widget', () => {
const widget = buildWidget('people', fixture.componentRef.injector);
expect(widget['typeId']).toBe('PeopleCloudWidgetComponent');
});
it('should allow to replace custom [people] widget', () => {
formRenderingService.setComponentTypeResolver('people', () => CustomWidget, true);
const widget = buildWidget('people', fixture.componentRef.injector);
expect(widget['typeId']).toBe('CustomWidget');
});
it('should register custom [functional-group] widget', () => {
const widget = buildWidget('functional-group', fixture.componentRef.injector);
expect(widget['typeId']).toBe('GroupCloudWidgetComponent');
});
it('should allow to replace custom [functional-group] widget', () => {
formRenderingService.setComponentTypeResolver('functional-group', () => CustomWidget, true);
const widget = buildWidget('functional-group', fixture.componentRef.injector);
expect(widget['typeId']).toBe('CustomWidget');
});
it('should check form', () => {
expect(formComponent.hasForm()).toBeFalsy();
formComponent.form = new FormModel();

View File

@ -39,16 +39,15 @@ import {
} from '@alfresco/adf-core';
import { FormCloudService } from '../services/form-cloud.service';
import { TaskVariableCloud } from '../models/task-variable-cloud.model';
import { DropdownCloudWidgetComponent } from './widgets/dropdown/dropdown-cloud.widget';
import { AttachFileCloudWidgetComponent } from './widgets/attach-file/attach-file-cloud-widget.component';
import { DateCloudWidgetComponent } from './widgets/date/date-cloud.widget';
import { PeopleCloudWidgetComponent } from './widgets/people/people-cloud.widget';
import { GroupCloudWidgetComponent } from './widgets/group/group-cloud.widget';
import { TaskDetailsCloudModel } from '../../task/start-task/models/task-details-cloud.model';
import { CloudFormRenderingService } from './cloud-form-rendering.service';
@Component({
selector: 'adf-cloud-form',
templateUrl: './form-cloud.component.html'
templateUrl: './form-cloud.component.html',
providers: [
{ provide: FormRenderingService, useClass: CloudFormRenderingService }
]
})
export class FormCloudComponent extends FormBaseComponent implements OnChanges, OnDestroy {
@ -113,21 +112,15 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
constructor(protected formCloudService: FormCloudService,
protected formService: FormService,
private notificationService: NotificationService,
private formRenderingService: FormRenderingService,
protected visibilityService: WidgetVisibilityService,
private appConfigService: AppConfigService) {
super();
this.formService.formContentClicked
.pipe(takeUntil(this.onDestroy$))
.subscribe((content) => {
this.formContentClicked.emit(content);
});
this.formRenderingService.setComponentTypeResolver('upload', () => AttachFileCloudWidgetComponent, true);
this.formRenderingService.setComponentTypeResolver('dropdown', () => DropdownCloudWidgetComponent, true);
this.formRenderingService.setComponentTypeResolver('date', () => DateCloudWidgetComponent, true);
this.formRenderingService.setComponentTypeResolver('people', () => PeopleCloudWidgetComponent, true);
this.formRenderingService.setComponentTypeResolver('functional-group', () => GroupCloudWidgetComponent, true);
.pipe(takeUntil(this.onDestroy$))
.subscribe((content) => {
this.formContentClicked.emit(content);
});
}
ngOnChanges(changes: SimpleChanges) {

View File

@ -42,6 +42,8 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent
implements OnInit {
static ACS_SERVICE = 'alfresco-content';
typeId = 'AttachFileCloudWidgetComponent';
constructor(
formService: FormService,
logger: LogService,

View File

@ -38,6 +38,7 @@ import { MOMENT_DATE_FORMATS, MomentDateAdapter, baseHost, WidgetComponent,
})
export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
typeId = 'DateCloudWidgetComponent';
DATE_FORMAT_CLOUD = 'YYYY-MM-DD';
minDate: Moment;

View File

@ -32,6 +32,7 @@ import { takeUntil } from 'rxjs/operators';
})
export class DropdownCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
typeId = 'DropdownCloudWidgetComponent';
protected onDestroy$ = new Subject<boolean>();
constructor(public formService: FormService,

View File

@ -33,6 +33,7 @@ export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit
private onDestroy$ = new Subject<boolean>();
typeId = 'GroupCloudWidgetComponent';
roles: string[];
mode: string;
title: string;

View File

@ -33,6 +33,7 @@ export class PeopleCloudWidgetComponent extends WidgetComponent implements OnIni
private onDestroy$ = new Subject<boolean>();
typeId = 'PeopleCloudWidgetComponent';
appName: string;
roles: string[];
mode: string;

View File

@ -19,6 +19,7 @@ export * from './models/task-variable-cloud.model';
export * from './components/form-cloud.component';
export * from './components/form-definition-selector-cloud.component';
export * from './components/cloud-form-rendering.service';
export * from './services/form-cloud.service';
export * from './services/form-definition-selector-cloud.service';

View File

@ -55,6 +55,7 @@ import { AttachFileWidgetDialogService } from './attach-file-widget-dialog.servi
})
export class AttachFileWidgetComponent extends UploadWidgetComponent implements OnInit, OnDestroy {
typeId = 'AttachFileWidgetComponent';
repositoryList = [];
private tempFilesList = [];
private onDestroy$ = new Subject<boolean>();

View File

@ -45,6 +45,7 @@ import { Node } from '@alfresco/js-api';
})
export class AttachFolderWidgetComponent extends WidgetComponent implements OnInit {
typeId = 'AttachFolderWidgetComponent';
hasFolder: boolean = false;
selectedFolderName: string = '';

View File

@ -15,30 +15,98 @@
* limitations under the License.
*/
import { SimpleChange } from '@angular/core';
import { SimpleChange, ComponentFactoryResolver, Injector, NgModule, Component } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { Observable, of, throwError } from 'rxjs';
import { FormFieldModel, FormFieldTypes, FormModel, FormOutcomeEvent, FormOutcomeModel,
FormService, WidgetVisibilityService, NodeService, LogService, ContainerModel, fakeForm, FormRenderingService } from '@alfresco/adf-core';
FormService, WidgetVisibilityService, NodeService, ContainerModel, fakeForm,
setupTestBed, CoreModule } from '@alfresco/adf-core';
import { FormComponent } from './form.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { FormModule } from './form.module';
import { ContentWidgetModule } from '../content-widget/content-widget.module';
import { ProcessFormRenderingService } from './process-form-rendering.service';
describe('FormComponent', () => {
let formService: FormService;
let fixture: ComponentFixture<FormComponent>;
let formComponent: FormComponent;
let formService: FormService;
let visibilityService: WidgetVisibilityService;
let nodeService: NodeService;
let logService: LogService;
let formRenderingService: FormRenderingService;
let formRenderingService: ProcessFormRenderingService;
@Component({
selector: 'adf-custom-widget',
template: '<div></div>'
})
class CustomWidget {
typeId = 'CustomWidget';
}
@NgModule({
declarations: [CustomWidget],
exports: [CustomWidget],
entryComponents: [CustomWidget]
})
class CustomUploadModule {}
setupTestBed({
imports: [
NoopAnimationsModule,
CoreModule.forRoot(),
FormModule,
ContentWidgetModule,
CustomUploadModule
]
});
function buildWidget(type: string, injector: Injector): any {
const resolver = formRenderingService.getComponentTypeResolver(type);
const widgetType = resolver(null);
const factoryResolver: ComponentFactoryResolver = TestBed.get(ComponentFactoryResolver);
const factory = factoryResolver.resolveComponentFactory(widgetType);
const componentRef = factory.create(injector);
return componentRef.instance;
}
beforeEach(() => {
logService = new LogService(null);
visibilityService = new WidgetVisibilityService(null, logService);
visibilityService = TestBed.get(WidgetVisibilityService);
spyOn(visibilityService, 'refreshVisibility').and.stub();
formService = new FormService(null, null, logService);
nodeService = new NodeService(null);
formRenderingService = new FormRenderingService();
formComponent = new FormComponent(formService, visibilityService, null, nodeService, formRenderingService);
formService = TestBed.get(FormService);
nodeService = TestBed.get(NodeService);
formRenderingService = TestBed.get(ProcessFormRenderingService);
fixture = TestBed.createComponent(FormComponent);
formComponent = fixture.componentInstance;
});
it('should register custom [upload] widget', () => {
const widget = buildWidget('upload', fixture.componentRef.injector);
expect(widget['typeId']).toBe('AttachFileWidgetComponent');
});
it('should register custom [select-folder] widget', () => {
const widget = buildWidget('select-folder', fixture.componentRef.injector);
expect(widget['typeId']).toBe('AttachFolderWidgetComponent');
});
it('should allow to replace custom [upload] widget', () => {
formRenderingService.setComponentTypeResolver('upload', () => CustomWidget, true);
const widget = buildWidget('upload', fixture.componentRef.injector);
expect(widget['typeId']).toBe('CustomWidget');
});
it('should allow to replace custom [select-folder] widget', () => {
formRenderingService.setComponentTypeResolver('select-folder', () => CustomWidget, true);
const widget = buildWidget('select-folder', fixture.componentRef.injector);
expect(widget['typeId']).toBe('CustomWidget');
});
it('should check form', () => {

View File

@ -16,18 +16,21 @@
*/
import { Component, EventEmitter, Input, Output, ViewEncapsulation, SimpleChanges, OnInit, OnDestroy, OnChanges } from '@angular/core';
import { AttachFileWidgetComponent, AttachFolderWidgetComponent } from '../content-widget';
import { EcmModelService, NodeService, WidgetVisibilityService,
FormService, FormRenderingService, FormBaseComponent, FormOutcomeModel,
FormEvent, FormErrorEvent, FormFieldModel,
FormModel, FormOutcomeEvent, FormValues, ContentLinkModel } from '@alfresco/adf-core';
import { Observable, of, Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';
import { ProcessFormRenderingService } from './process-form-rendering.service';
@Component({
selector: 'adf-form',
templateUrl: './form.component.html',
encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.None,
providers: [
{ provide: FormRenderingService, useClass: ProcessFormRenderingService }
]
})
export class FormComponent extends FormBaseComponent implements OnInit, OnDestroy, OnChanges {
@ -86,11 +89,8 @@ export class FormComponent extends FormBaseComponent implements OnInit, OnDestro
constructor(protected formService: FormService,
protected visibilityService: WidgetVisibilityService,
protected ecmModelService: EcmModelService,
protected nodeService: NodeService,
protected formRenderingService: FormRenderingService) {
protected nodeService: NodeService) {
super();
this.formRenderingService.setComponentTypeResolver('upload', () => AttachFileWidgetComponent, true);
this.formRenderingService.setComponentTypeResolver('select-folder', () => AttachFolderWidgetComponent, true);
}
ngOnInit() {

View File

@ -0,0 +1,32 @@
/*!
* @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 { Injectable } from '@angular/core';
import { FormRenderingService } from '@alfresco/adf-core';
import { AttachFileWidgetComponent } from '../content-widget/attach-file-widget.component';
import { AttachFolderWidgetComponent } from '../content-widget/attach-folder-widget.component';
@Injectable({
providedIn: 'root'
})
export class ProcessFormRenderingService extends FormRenderingService {
constructor() {
super();
this.setComponentTypeResolver('upload', () => AttachFileWidgetComponent, true);
this.setComponentTypeResolver('select-folder', () => AttachFolderWidgetComponent, true);
}
}

View File

@ -17,4 +17,5 @@
export * from './form.component';
export * from './start-form.component';
export * from './process-form-rendering.service';
export * from './form.module';

View File

@ -30,12 +30,16 @@ import {
} from '@angular/core';
import { FormComponent } from './form.component';
import { ContentLinkModel, FormService, WidgetVisibilityService, FormRenderingService, FormOutcomeModel } from '@alfresco/adf-core';
import { ProcessFormRenderingService } from './process-form-rendering.service';
@Component({
selector: 'adf-start-form',
templateUrl: './start-form.component.html',
styleUrls: ['./start-form.component.scss'],
encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.None,
providers: [
{ provide: FormRenderingService, useClass: ProcessFormRenderingService }
]
})
export class StartFormComponent extends FormComponent implements OnChanges, OnInit, OnDestroy {
@ -70,10 +74,8 @@ export class StartFormComponent extends FormComponent implements OnChanges, OnIn
@ViewChild('outcomesContainer', {})
outcomesContainer: ElementRef = null;
constructor(formService: FormService,
visibilityService: WidgetVisibilityService,
formRenderingService: FormRenderingService) {
super(formService, visibilityService, null, null, formRenderingService);
constructor(formService: FormService, visibilityService: WidgetVisibilityService) {
super(formService, visibilityService, null, null);
this.showTitle = false;
}