mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[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:
@@ -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);
|
||||
}
|
||||
}
|
@@ -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();
|
||||
|
@@ -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) {
|
||||
|
@@ -42,6 +42,8 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent
|
||||
implements OnInit {
|
||||
static ACS_SERVICE = 'alfresco-content';
|
||||
|
||||
typeId = 'AttachFileCloudWidgetComponent';
|
||||
|
||||
constructor(
|
||||
formService: FormService,
|
||||
logger: LogService,
|
||||
|
@@ -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;
|
||||
|
@@ -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,
|
||||
|
@@ -33,6 +33,7 @@ export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit
|
||||
|
||||
private onDestroy$ = new Subject<boolean>();
|
||||
|
||||
typeId = 'GroupCloudWidgetComponent';
|
||||
roles: string[];
|
||||
mode: string;
|
||||
title: string;
|
||||
|
@@ -33,6 +33,7 @@ export class PeopleCloudWidgetComponent extends WidgetComponent implements OnIni
|
||||
|
||||
private onDestroy$ = new Subject<boolean>();
|
||||
|
||||
typeId = 'PeopleCloudWidgetComponent';
|
||||
appName: string;
|
||||
roles: string[];
|
||||
mode: string;
|
||||
|
@@ -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';
|
||||
|
Reference in New Issue
Block a user