[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
17 changed files with 285 additions and 56 deletions

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';