inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-6093] - fixed rest option for cloud widget (#7304)

Browse Source 
* [AAE-6093] - fixed rest option for cloud widget

* [AAE-6093] - reverted app config change

* [AAE-6093] - fixed naming

* [AAE-6093] - fixed radio button complete task and added support for rest url with the new feature

* [AAE-6093] - removed test value

* [AAE-6093] - fixed lint

* [AAE-6093] - fixed lint

* [AAE-6093] - merged fix for dropdown
This commit is contained in:
Vito
2021-10-29 14:55:51 +01:00
committed by GitHub
parent c596a06eda
commit 7481001461
12 changed files with 431 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/process-services-cloud/src/lib/form/components/cloud-form-rendering.service.ts
View File

@@ -23,6 +23,7 @@ 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 { PropertiesViewerWidgetComponent } from './widgets/properties-viewer/properties-viewer.widget';
import { RadioButtonsCloudWidgetComponent } from './widgets/radio-buttons/radio-buttons-cloud.widget';
@Injectable({
providedIn: 'root'
@@ -37,7 +38,8 @@ export class CloudFormRenderingService extends FormRenderingService {
'date': () => DateCloudWidgetComponent,
'people': () => PeopleCloudWidgetComponent,
'functional-group': () => GroupCloudWidgetComponent,
'properties-viewer': () => PropertiesViewerWidgetComponent
'properties-viewer': () => PropertiesViewerWidgetComponent,
'radio-buttons': () => RadioButtonsCloudWidgetComponent
}, true);
}
}

105
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
View File

@@ -146,7 +146,7 @@ describe('DropdownCloudWidgetComponent', () => {
});
it('should load data from restUrl and populate options', async () => {
const jsonDataSpy = spyOn(formCloudService, 'getDropDownJsonData').and.returnValue(of(fakeOptionList));
const jsonDataSpy = spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of(fakeOptionList));
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
id: 'dropdown-id',
name: 'date-name',
@@ -166,9 +166,9 @@ describe('DropdownCloudWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const optOne = fixture.debugElement.queryAll(By.css('[id="option_1"]'));
const optTwo = fixture.debugElement.queryAll(By.css('[id="option_2"]'));
const optThree = fixture.debugElement.queryAll(By.css('[id="option_3"]'));
const optOne = fixture.debugElement.queryAll(By.css('[id="opt_1"]'));
const optTwo = fixture.debugElement.queryAll(By.css('[id="opt_2"]'));
const optThree = fixture.debugElement.queryAll(By.css('[id="opt_3"]'));
const allOptions = fixture.debugElement.queryAll(By.css('mat-option'));
expect(jsonDataSpy).toHaveBeenCalled();
@@ -195,7 +195,7 @@ describe('DropdownCloudWidgetComponent', () => {
}
});
spyOn(formCloudService, 'getDropDownJsonData').and.returnValue(of([
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([
{
id: 'opt1',
name: 'default1_value'
@@ -230,7 +230,7 @@ describe('DropdownCloudWidgetComponent', () => {
value: 'opt1'
});
spyOn(formCloudService, 'getDropDownJsonData').and.returnValue(of([
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([
{
id: 'opt1',
name: 'default1_value'
@@ -265,98 +265,11 @@ describe('DropdownCloudWidgetComponent', () => {
restResponsePath: 'path'
});
const dropdownSpy = spyOn(formCloudService, 'getDropDownJsonData').and.returnValue(of({
id: 1,
path: [
const dropdownSpy = spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of( [
{ id: 'opt_1', name: 'option_1' },
{ id: 'opt_2', name: 'option_2' },
{ id: 'opt_3', name: 'option_3' }],
name: ''
}));
widget.ngOnInit();
fixture.detectChanges();
openSelect('#dropdown-id');
fixture.whenStable().then(() => {
expect(dropdownSpy).toHaveBeenCalled();
const optOne: any = fixture.debugElement.queryAll(By.css('[id="opt_1"]'));
expect(optOne[0].context.value).toBe('opt_1');
expect(optOne[0].context.viewValue).toBe('option_1');
const optTwo: any = fixture.debugElement.queryAll(By.css('[id="opt_2"]'));
expect(optTwo[0].context.value).toBe('opt_2');
expect(optTwo[0].context.viewValue).toBe('option_2');
const optThree: any = fixture.debugElement.queryAll(By.css('[id="opt_3"]'));
expect(optThree[0].context.value).toBe('opt_3');
expect(optThree[0].context.viewValue).toBe('option_3');
done();
});
});
it('should map correct label if restLabelProperty is set', (done) => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
id: 'dropdown-id',
name: 'date-name',
type: 'dropdown-cloud',
readOnly: 'false',
restUrl: 'fake-rest-url',
optionType: 'rest',
restResponsePath: 'path',
restLabelProperty: 'first_name'
});
const dropdownSpy = spyOn(formCloudService, 'getDropDownJsonData').and.returnValue(of({
id: 1,
path: [
{ id: 'opt_1', first_name: 'option_1' },
{ id: 'opt_2', first_name: 'option_2' },
{ id: 'opt_3', first_name: 'option_3' }],
name: ''
}));
widget.ngOnInit();
fixture.detectChanges();
openSelect('#dropdown-id');
fixture.whenStable().then(() => {
expect(dropdownSpy).toHaveBeenCalled();
const optOne: any = fixture.debugElement.queryAll(By.css('[id="opt_1"]'));
expect(optOne[0].context.value).toBe('opt_1');
expect(optOne[0].context.viewValue).toBe('option_1');
const optTwo: any = fixture.debugElement.queryAll(By.css('[id="opt_2"]'));
expect(optTwo[0].context.value).toBe('opt_2');
expect(optTwo[0].context.viewValue).toBe('option_2');
const optThree: any = fixture.debugElement.queryAll(By.css('[id="opt_3"]'));
expect(optThree[0].context.value).toBe('opt_3');
expect(optThree[0].context.viewValue).toBe('option_3');
done();
});
});
it('should map correct id if restIdProperty is set', (done) => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
id: 'dropdown-id',
name: 'date-name',
type: 'dropdown-cloud',
readOnly: 'false',
restUrl: 'fake-rest-url',
optionType: 'rest',
restResponsePath: 'path',
restIdProperty: 'my_id'
});
const dropdownSpy = spyOn(formCloudService, 'getDropDownJsonData').and.returnValue(of({
id: 1,
path: [
{ my_id: 'opt_1', name: 'option_1' },
{ my_id: 'opt_2', name: 'option_2' },
{ my_id: 'opt_3', name: 'option_3' }],
name: ''
}));
{ id: 'opt_3', name: 'option_3' }]
));
widget.ngOnInit();
fixture.detectChanges();

17
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
View File

@@ -59,27 +59,14 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
getValuesFromRestApi() {
if (this.isValidRestType()) {
this.formCloudService.getDropDownJsonData(this.field.restUrl)
this.formCloudService.getRestWidgetData(this.field.form.id, this.field.id)
.pipe(takeUntil(this.onDestroy$))
.subscribe((result: FormFieldOption[]) => {
this.field.options = this.mapJsonData(result);
this.field.options = result;
}, (err) => this.handleError(err));
}
}
mapJsonData(data: any[]): FormFieldOption[] {
const dataToMap: any[] = this.field.restResponsePath ? data[this.field.restResponsePath] : data;
const idProperty = this.field.restIdProperty || 'id';
const restLabelProperty = this.field.restLabelProperty || 'name';
return dataToMap.map((value: any) => {
return {
name: value[restLabelProperty],
id: value[idProperty]
};
});
}
compareDropdownValues(opt1: FormFieldOption | string, opt2: FormFieldOption | string): boolean {
if (!opt1 || !opt2) {
return false;

23
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html Normal file
View File

@@ -0,0 +1,23 @@
<div class="adf-radio-buttons-widget-cloud {{field.className}}"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" [id]="field.id">
<div class="adf-radio-button-container">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
<mat-radio-button
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
[id]="field.id + '-' + opt.id"
[name]="field.id"
[value]="opt.id"
[checked]="field.value === opt.id"
(change)="onOptionClick(opt.id)"
color="primary"
class="adf-radio-button" *ngFor="let opt of field.options" >
{{opt.name}}
</mat-radio-button>
</mat-radio-group>
</div>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

20
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss Normal file
View File

@@ -0,0 +1,20 @@
.adf {
&-radio-button-container {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}
&-radio-group {
margin-top: 15px;
margin-left: 5px;
display: inline-flex;
flex-direction: column;
}
&-radio-button {
margin: 5px;
}
}

177
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.spec.ts Normal file
View File

@@ -0,0 +1,177 @@
/*!
* @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 { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { MatRadioModule } from '@angular/material/radio';
import { TranslateModule } from '@ngx-translate/core';
import { AlfrescoApiService, CoreTestingModule, FormFieldModel, FormFieldOption, FormFieldTypes, FormModel, FormService, setupTestBed } from 'core';
import { FormCloudService } from 'process-services-cloud';
import { Observable } from 'rxjs';
import { RadioButtonsCloudWidgetComponent } from './radio-buttons-cloud.widget';
describe('RadioButtonsCloudWidgetComponent', () => {
let formService: FormService;
let formCloudService: FormCloudService;
let widget: RadioButtonsCloudWidgetComponent;
let alfrescoApiService: AlfrescoApiService;
setupTestBed({
imports: [
TranslateModule.forRoot(),
CoreTestingModule,
MatRadioModule,
FormsModule,
MatIconModule
]
});
beforeEach(() => {
alfrescoApiService = TestBed.inject(AlfrescoApiService);
formService = new FormService(null, alfrescoApiService, null);
formCloudService = new FormCloudService(alfrescoApiService, null);
widget = new RadioButtonsCloudWidgetComponent(formService, formCloudService, null);
widget.field = new FormFieldModel(new FormModel(), { restUrl: '<url>' });
});
it('should update form on values fetched', () => {
const taskId = '<form-id>';
const fieldId = '<field-id>';
const form = new FormModel({
taskId: taskId
});
widget.field = new FormFieldModel(form, {
id: fieldId,
restUrl: '<url>'
});
const field = widget.field;
spyOn(field, 'updateForm').and.stub();
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(new Observable((observer) => {
observer.next(null);
observer.complete();
}));
widget.ngOnInit();
expect(field.updateForm).toHaveBeenCalled();
});
it('should update the field value when an option is selected', () => {
spyOn(widget, 'onFieldChanged').and.stub();
widget.onOptionClick('fake-opt');
expect(widget.field.value).toEqual('fake-opt');
});
describe('when template is ready', () => {
let radioButtonWidget: RadioButtonsCloudWidgetComponent;
let fixture: ComponentFixture<RadioButtonsCloudWidgetComponent>;
let element: HTMLElement;
const restOption: FormFieldOption[] = [
{
id: 'opt-1',
name: 'opt-name-1'
},
{
id: 'opt-2',
name: 'opt-name-2'
}];
beforeEach(() => {
fixture = TestBed.createComponent(RadioButtonsCloudWidgetComponent);
radioButtonWidget = fixture.componentInstance;
element = fixture.nativeElement;
});
it('should show radio buttons as text when is readonly', async () => {
radioButtonWidget.field = new FormFieldModel(new FormModel({}), {
id: 'radio-id',
name: 'radio-name',
type: FormFieldTypes.RADIO_BUTTONS,
readOnly: true
});
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
expect(element.querySelector('display-text-widget')).toBeDefined();
});
it('should be able to set label property for Radio Button widget', () => {
radioButtonWidget.field = new FormFieldModel(new FormModel({}), {
id: 'radio-id',
name: 'radio-name-label',
type: FormFieldTypes.RADIO_BUTTONS,
readOnly: true
});
fixture.detectChanges();
expect(element.querySelector('label').innerText).toBe('radio-name-label');
});
it('should be able to set a Radio Button widget as required', async () => {
radioButtonWidget.field = new FormFieldModel(new FormModel({}), {
id: 'radio-id',
name: 'radio-name-label',
type: FormFieldTypes.RADIO_BUTTONS,
readOnly: false,
required: true,
optionType: 'manual',
options: restOption,
restUrl: null
});
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
const widgetLabel = element.querySelector('label');
expect(widgetLabel.innerText).toBe('radio-name-label*');
expect(radioButtonWidget.field.isValid).toBe(false);
const option: HTMLElement = <HTMLElement> element.querySelector('#radio-id-opt-1 label');
option.click();
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
const selectedOption: HTMLElement = <HTMLElement> element.querySelector('[class*="mat-radio-checked"]');
expect(selectedOption.innerText).toBe('opt-name-1');
expect(radioButtonWidget.field.isValid).toBe(true);
});
it('should be able to set a Radio Button widget as required', () => {
radioButtonWidget.field = new FormFieldModel(new FormModel({}), {
id: 'radio-id',
name: 'radio-name-label',
type: FormFieldTypes.RADIO_BUTTONS,
readOnly: false,
required: true,
optionType: 'manual',
options: restOption,
restUrl: null,
value: 'opt-name-2'
});
fixture.detectChanges();
const selectedOption: HTMLElement = <HTMLElement> element.querySelector('[class*="mat-radio-checked"]');
expect(selectedOption.innerText).toBe('opt-name-2');
expect(radioButtonWidget.field.isValid).toBe(true);
});
});
});

78
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.ts Normal file
View File

@@ -0,0 +1,78 @@
/*!
* @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, OnInit, ViewEncapsulation } from '@angular/core';
import { WidgetComponent, FormService, LogService, FormFieldOption } from '@alfresco/adf-core';
import { FormCloudService } from '../../../services/form-cloud.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'radio-buttons-cloud-widget',
templateUrl: './radio-buttons-cloud.widget.html',
styleUrls: ['./radio-buttons-cloud.widget.scss'],
host: {
'(click)': 'event($event)',
'(blur)': 'event($event)',
'(change)': 'event($event)',
'(focus)': 'event($event)',
'(focusin)': 'event($event)',
'(focusout)': 'event($event)',
'(input)': 'event($event)',
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
encapsulation: ViewEncapsulation.None
})
export class RadioButtonsCloudWidgetComponent extends WidgetComponent implements OnInit {
typeId = 'RadioButtonsCloudWidgetComponent';
protected onDestroy$ = new Subject<boolean>();
constructor(public formService: FormService,
private formCloudService: FormCloudService,
private logService: LogService) {
super(formService);
}
ngOnInit() {
if (this.field && this.field.restUrl) {
this.getValuesFromRestApi();
}
}
getValuesFromRestApi() {
this.formCloudService.getRestWidgetData(this.field.form.id, this.field.id)
.pipe(takeUntil(this.onDestroy$))
.subscribe((result: FormFieldOption[]) => {
this.field.options = result;
this.field.updateForm();
}, (err) => this.handleError(err));
}
onOptionClick(optionSelected: any) {
this.field.value = optionSelected;
this.fieldChanged.emit(this.field);
}
handleError(error: any) {
this.logService.error(error);
}
}

3
lib/process-services-cloud/src/lib/form/form-cloud.module.ts
View File

@@ -37,6 +37,7 @@ import { PeopleCloudModule } from '../people/people-cloud.module';
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';
@NgModule({
imports: [
@@ -57,6 +58,7 @@ import { PropertiesViewerWrapperComponent } from './components/widgets/propertie
FormDefinitionSelectorCloudComponent,
FormCustomOutcomesComponent,
DropdownCloudWidgetComponent,
RadioButtonsCloudWidgetComponent,
AttachFileCloudWidgetComponent,
DateCloudWidgetComponent,
PeopleCloudWidgetComponent,
@@ -70,6 +72,7 @@ import { PropertiesViewerWrapperComponent } from './components/widgets/propertie
FormDefinitionSelectorCloudComponent,
FormCustomOutcomesComponent,
DropdownCloudWidgetComponent,
RadioButtonsCloudWidgetComponent,
AttachFileCloudWidgetComponent,
DateCloudWidgetComponent,
PeopleCloudWidgetComponent,

4
lib/process-services-cloud/src/lib/form/services/form-cloud.service.interface.ts
View File

@@ -16,7 +16,7 @@
*/
import { UploadApi } from '@alfresco/js-api';
import { FormModel, FormValues } from '@alfresco/adf-core';
import { FormFieldOption, FormModel, FormValues } from '@alfresco/adf-core';
import { TaskDetailsCloudModel } from '../../task/start-task/models/task-details-cloud.model';
import { TaskVariableCloud } from '../models/task-variable-cloud.model';
import { FormContent } from '../../services/form-fields.interfaces';
@@ -33,6 +33,6 @@ export interface FormCloudServiceInterface {
getTask(appName: string, taskId: string): Observable<TaskDetailsCloudModel>;
getTaskVariables(appName: string, taskId: string): Observable<TaskVariableCloud[]>;
getForm(appName: string, formKey: string, version?: number): Observable<FormContent>;
getDropDownJsonData(url: string): Observable<any>;
parseForm(json: any, data?: TaskVariableCloud[], readOnly?: boolean): FormModel;
getRestWidgetData(formName: string, widgetId: string, body: Map<String, String>): Observable<FormFieldOption[]>;
}

14
lib/process-services-cloud/src/lib/form/services/form-cloud.service.ts
View File

@@ -21,7 +21,8 @@ import {
FormValues,
AppConfigService,
FormOutcomeModel,
FormModel
FormModel,
FormFieldOption
} from '@alfresco/adf-core';
import { Observable, from } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
@@ -191,13 +192,10 @@ export class FormCloudService extends BaseCloudService implements FormCloudServi
return this.get(url);
}
/**
* Parses JSON data to create a corresponding form.
* @param url String data to make the request
* @returns Array of FormFieldOption object
*/
getDropDownJsonData(url: string): Observable<any> {
return this.get<any>(url);
getRestWidgetData(formName: string, widgetId: string, body: any = {}): Observable<FormFieldOption[]> {
const appName = this.appConfigService.get('alfresco-deployed-apps')[0]?.name;
const apiUrl = `${this.getBasePath(appName)}/form/v1/forms/${formName}/values/${widgetId}`;
return this.post(apiUrl, body);
}
/**