AAE-20848 Add display external property widget (#9429)

* AAE-20848 Add display external property widget * revert css changes * AAE-20848 validate validatable types * AAE-20848 implement suggestions * fix lint
Alfresco · Mar 18, 2024 · b4f27d1 · b4f27d1
1 parent d8bd7dc
commit b4f27d1
Show file tree

Hide file tree

Showing 11 changed files with 411 additions and 4 deletions.
diff --git a/cspell.json b/cspell.json
@@ -143,7 +143,8 @@
     "xsrf",
     "BPMECM",
     "berseria",
-    "zestiria"
+    "zestiria",
+    "validatable"
   ],
   "dictionaries": [
     "html",

diff --git a/lib/core/src/lib/form/components/widgets/core/form-field-types.ts b/lib/core/src/lib/form/components/widgets/core/form-field-types.ts
@@ -48,6 +48,7 @@ export class FormFieldTypes {
     static DISPLAY_RICH_TEXT: string = 'display-rich-text';
     static JSON: string = 'json';
     static DATA_TABLE: string = 'data-table';
+    static DISPLAY_EXTERNAL_PROPERTY: string = 'display-external-property';
 
     static READONLY_TYPES: string[] = [
         FormFieldTypes.HYPERLINK,
@@ -56,10 +57,18 @@ export class FormFieldTypes {
         FormFieldTypes.GROUP
     ];
 
+    static VALIDATABLE_TYPES: string[] = [
+        FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY
+    ];
+
     static isReadOnlyType(type: string) {
         return FormFieldTypes.READONLY_TYPES.includes(type);
     }
 
+    static isValidatableType(type: string) {
+        return FormFieldTypes.VALIDATABLE_TYPES.includes(type);
+    }
+
     static isContainerType(type: string) {
         return type === FormFieldTypes.CONTAINER || type === FormFieldTypes.GROUP;
     }

diff --git a/lib/core/src/lib/form/components/widgets/core/form-field-validator.ts b/lib/core/src/lib/form/components/widgets/core/form-field-validator.ts
@@ -49,7 +49,8 @@ export class RequiredFieldValidator implements FormFieldValidator {
         FormFieldTypes.DATE,
         FormFieldTypes.DATETIME,
         FormFieldTypes.ATTACH_FOLDER,
-        FormFieldTypes.DECIMAL
+        FormFieldTypes.DECIMAL,
+        FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY
     ];
 
     isSupported(field: FormFieldModel): boolean {

diff --git a/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts b/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts
@@ -17,6 +17,7 @@
 
 import { DateFnsUtils } from '../../../../common';
 import { FormFieldTypes } from './form-field-types';
+import { RequiredFieldValidator } from './form-field-validator';
 import { FormFieldModel } from './form-field.model';
 import { FormModel } from './form.model';
 
@@ -881,4 +882,55 @@ describe('FormFieldModel', () => {
         });
 
     });
+
+    it('should validate readOnly field if it is validatable', () => {
+        const form = new FormModel();
+        const field = new FormFieldModel(form, {
+            id: 'mockDisplayExternalPropertyFieldId',
+            type: FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY,
+            readOnly: true,
+            required: true,
+            value: null
+        });
+
+        const validator = new RequiredFieldValidator();
+        form.fieldValidators = [validator];
+
+        expect(FormFieldTypes.isValidatableType(FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY)).toBeTrue();
+        expect(field.validate()).toBe(false);
+    });
+
+    it('should validate NOT readOnly field if it is validatable', () => {
+        const form = new FormModel();
+        const field = new FormFieldModel(form, {
+            id: 'mockDisplayExternalPropertyFieldId',
+            type: FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY,
+            readOnly: false,
+            required: true,
+            value: null
+        });
+
+        const validator = new RequiredFieldValidator();
+        form.fieldValidators = [validator];
+
+        expect(FormFieldTypes.isValidatableType(FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY)).toBeTrue();
+        expect(field.validate()).toBe(false);
+    });
+
+    it('should NOT validate readOnly field if it is NOT validatable', () => {
+        const form = new FormModel();
+        const field = new FormFieldModel(form, {
+            id: 'mockTextFieldId',
+            type: FormFieldTypes.TEXT,
+            readOnly: true,
+            required: true,
+            value: null
+        });
+
+        const validator = new RequiredFieldValidator();
+        form.fieldValidators = [validator];
+
+        expect(FormFieldTypes.isValidatableType(FormFieldTypes.TEXT)).toBeFalse();
+        expect(field.validate()).toBe(true);
+    });
 });
diff --git a/lib/core/src/lib/form/components/widgets/core/form-field.model.ts b/lib/core/src/lib/form/components/widgets/core/form-field.model.ts
@@ -86,6 +86,7 @@ export class FormFieldModel extends FormWidgetModel {
     leftLabels: boolean = false;
     variableConfig: VariableConfig;
     schemaDefinition: DataColumn[];
+    externalProperty?: string;
 
     // container model members
     numberOfColumns: number = 1;
@@ -143,7 +144,7 @@ export class FormFieldModel extends FormWidgetModel {
     validate(): boolean {
         this.validationSummary = new ErrorMessageModel();
 
-        if (!this.readOnly) {
+        if (this.isFieldValidatable()) {
             const validators = this.form.fieldValidators || [];
             for (const validator of validators) {
                 if (!validator.validate(this)) {
@@ -156,6 +157,10 @@ export class FormFieldModel extends FormWidgetModel {
         return this._isValid;
     }
 
+    private isFieldValidatable(): boolean {
+        return !this.readOnly || FormFieldTypes.isValidatableType(this.type);
+    }
+
     constructor(form: any, json?: any) {
         super(form, json);
         if (json) {
@@ -204,6 +209,7 @@ export class FormFieldModel extends FormWidgetModel {
             this.variableConfig = json.variableConfig;
             this.schemaDefinition = json.schemaDefinition;
             this.precision = json.precision;
+            this.externalProperty = json.externalProperty;
 
             if (json.placeholder && json.placeholder !== '' && json.placeholder !== 'null') {
                 this.placeholder = json.placeholder;

diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json
@@ -48,6 +48,7 @@
       "REST_API_FAILED": "The server `{{ hostname }}` is not reachable",
       "VARIABLE_DROPDOWN_OPTIONS_FAILED": "There was a problem loading dropdown elements. Please contact administrator.",
       "DATA_TABLE_LOAD_FAILED": "There was a problem loading table elements. Please contact administrator.",
+      "EXTERNAL_PROPERTY_LOAD_FAILED": "There was a problem loading external property. Please contact administrator.",
       "FILE_NAME": "File Name",
       "NO_FILE_ATTACHED": "No file attached",
       "VALIDATOR": {

diff --git a/lib/process-services-cloud/src/lib/form/components/cloud-form-rendering.service.ts b/lib/process-services-cloud/src/lib/form/components/cloud-form-rendering.service.ts
@@ -27,6 +27,7 @@ import { RadioButtonsCloudWidgetComponent } from './widgets/radio-buttons/radio-
 import { FileViewerWidgetComponent } from './widgets/file-viewer/file-viewer.widget';
 import { DisplayRichTextWidgetComponent } from './widgets/display-rich-text/display-rich-text.widget';
 import { DataTableWidgetComponent } from './widgets/data-table/data-table.widget';
+import { DisplayExternalPropertyWidgetComponent } from './widgets/display-external-property/display-external-property.widget';
 
 @Injectable({
     providedIn: 'root'
@@ -45,7 +46,8 @@ export class CloudFormRenderingService extends FormRenderingService {
             [FormFieldTypes.RADIO_BUTTONS]: () => RadioButtonsCloudWidgetComponent,
             [FormFieldTypes.ALFRESCO_FILE_VIEWER]: () => FileViewerWidgetComponent,
             [FormFieldTypes.DISPLAY_RICH_TEXT]: () => DisplayRichTextWidgetComponent,
-            [FormFieldTypes.DATA_TABLE]: () => DataTableWidgetComponent
+            [FormFieldTypes.DATA_TABLE]: () => DataTableWidgetComponent,
+            [FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY]: () => DisplayExternalPropertyWidgetComponent
         }, true);
     }
 }
diff --git a/...b/form/components/widgets/display-external-property/display-external-property.widget.html b/...b/form/components/widgets/display-external-property/display-external-property.widget.html
@@ -0,0 +1,30 @@
+<div
+    class="adf-textfield adf-display-external-property-widget {{ field.className }}"
+    [class.adf-invalid]="!field.isValid && isTouched()"
+    [class.adf-readonly]="field.readOnly"
+    [class.adf-left-label-input-container]="field.leftLabels"
+>
+    <div *ngIf="field.leftLabels">
+        <label class="adf-label adf-left-label" [attr.for]="field.id">
+            {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+        </label>
+    </div>
+
+    <div>
+        <mat-form-field [hideRequiredMarker]="true">
+            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
+                {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+            </label>
+            <input matInput
+                   class="adf-input"
+                   type="text"
+                   data-automation-id="adf-display-external-property-widget"
+                   [id]="field.id"
+                   [formControl]="propertyControl"
+            >
+        </mat-form-field>
+
+        <ng-container *ngIf="!previewState">
+            <error-widget *ngIf="propertyLoadFailed" [required]="'FORM.FIELD.EXTERNAL_PROPERTY_LOAD_FAILED' | translate"></error-widget>
+        </ng-container>
+</div>
diff --git a/...b/form/components/widgets/display-external-property/display-external-property.widget.scss b/...b/form/components/widgets/display-external-property/display-external-property.widget.scss
@@ -0,0 +1,9 @@
+.adf {
+    &-display-external-property-widget {
+        width: 100%;
+
+        .adf-label {
+            top: 20px;
+        }
+    }
+}