[DURACOM-152] Fixed read-only visibility for submission form fields

Author: alisaismailati

src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts

@@ -55,6 +55,7 @@ export class DsDynamicInputModel extends DynamicInputModel {
     this.metadataFields = config.metadataFields;
     this.hint = config.hint;
     this.readOnly = config.readOnly;
+    this.disabled = config.readOnly;
     this.value = config.value;
     this.relationship = config.relationship;
     this.submissionId = config.submissionId;

src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html

@@ -39,6 +39,7 @@
          [ngbTypeahead]="search"
          [placeholder]="model.placeholder"
          [readonly]="model.readOnly"
+         [disabled]="model.readOnly"
          [resultTemplate]="rt"
          [type]="model.inputType"
          [(ngModel)]="currentValue"
@@ -63,6 +64,7 @@
          [name]="model.name"
          [placeholder]="model.placeholder"
          [readonly]="true"
+         [disabled]="model.readOnly"
          [type]="model.inputType"
          [value]="currentValue?.display"
          (focus)="onFocus($event)"

src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts

@@ -216,6 +216,9 @@ export class DsDynamicOneboxComponent extends DsDynamicVocabularyComponent imple
    * @param event The click event fired
    */
   openTree(event) {
+    if (this.model.readOnly) {
+      return;
+    }
     event.preventDefault();
     event.stopImmediatePropagation();
     this.subs.push(this.vocabulary$.pipe(

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html

@@ -3,8 +3,10 @@
        role="combobox"
        [attr.aria-label]="model.label"
        [attr.aria-owns]="'combobox_' + id + '_listbox'">
-    <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
-       aria-hidden="true"></i>
+       <i *ngIf="!model.readOnly" ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
+          aria-hidden="true"></i>
+       <i *ngIf="model.readOnly" class="dropdown-toggle position-absolute toggle-icon"
+          aria-hidden="true"></i>
     <input class="form-control"
            [attr.aria-controls]="'combobox_' + id + '_listbox'"
            [attr.aria-activedescendant]="'combobox_' + id + '_selected'"
@@ -15,6 +17,7 @@
            [id]="id"
            [name]="model.name"
            [readonly]="true"
+           [disabled]="model.readOnly"
            [type]="model.inputType"
            [value]="(currentValue | async)"
            (blur)="onBlur($event)"

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss

@@ -32,3 +32,7 @@
 .scrollable-dropdown-input[readonly]{
   background-color: #fff;
 }
+
+.toggle-icon {
+  padding: 0.7rem 0.7rem 0 0.7rem;
+}

src/app/shared/form/builder/models/form-field.model.ts

@@ -1,3 +1,4 @@
+import { SectionVisibility } from './../../../../submission/objects/section-visibility.model';
 import { autoserialize } from 'cerialize';
 
 import { LanguageCode } from './form-field-language-value.model';
@@ -124,4 +125,7 @@ export class FormFieldModel {
    */
   @autoserialize
   value: any;
+
+  @autoserialize
+  visibility: SectionVisibility;
 }

src/app/shared/form/builder/parsers/concat-field-parser.ts

@@ -19,6 +19,8 @@ import {
   SUBMISSION_ID
 } from './field-parser';
 import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
+import { VisibilityType } from '../../../../submission/sections/visibility-type';
+import isEqual from 'lodash/isEqual';
 
 export class ConcatFieldParser extends FieldParser {
 
@@ -83,6 +85,10 @@ export class ConcatFieldParser extends FieldParser {
       input1ModelConfig.required = true;
     }
 
+    if (isNotEmpty(this.configData.visibility) && isEqual(this.configData.visibility.main, VisibilityType.READONLY)) {
+      concatGroup.disabled = true;
+    }
+
     if (isNotEmpty(this.firstPlaceholder)) {
       input1ModelConfig.placeholder = this.firstPlaceholder;
     }

src/app/shared/form/builder/parsers/field-parser.ts

@@ -1,3 +1,5 @@
+import { SectionVisibility } from './../../../../submission/objects/section-visibility.model';
+import { VisibilityType } from './../../../../submission/sections/visibility-type';
 import { Inject, InjectionToken } from '@angular/core';
 
 import uniqueId from 'lodash/uniqueId';
@@ -280,8 +282,8 @@ export abstract class FieldParser {
     controlModel.id = (this.fieldId).replace(/\./g, '_');
 
     // Set read only option
-    controlModel.readOnly = this.parserOptions.readOnly;
-    controlModel.disabled = this.parserOptions.readOnly;
+    controlModel.readOnly = this.parserOptions.readOnly || this.isFieldReadOnly(this.configData.visibility, this.parserOptions.submissionScope);
+    controlModel.disabled = controlModel.readOnly;
     if (hasValue(this.configData.selectableRelationship)) {
       controlModel.relationship = Object.assign(new RelationshipOptions(), this.configData.selectableRelationship);
     }
@@ -319,6 +321,17 @@ export abstract class FieldParser {
     return controlModel;
   }
 
+  /**
+   * Check if a field is read-only with the given scope
+   * @param visibility
+   * @param submissionScope
+   */
+  private isFieldReadOnly(visibility: SectionVisibility, submissionScope: string) {
+    return isNotEmpty(submissionScope)
+    && isNotEmpty(visibility)
+    && visibility.main === VisibilityType.READONLY;
+  }
+
   /**
    * Get the type bind values from the REST data for a specific field
    * The return value is any[] in the method signature but in reality it's

src/app/shared/form/builder/parsers/onebox-field-parser.ts

@@ -59,19 +59,20 @@ export class OneboxFieldParser extends FieldParser {
       this.setLabel(inputSelectGroup, label);
       inputSelectGroup.required = isNotEmpty(this.configData.mandatory);
 
+      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, false, false);
+      inputModelConfig.hint = null;
+      this.setValues(inputModelConfig, fieldValue);
+
       const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, label, false, false);
       selectModelConfig.hint = null;
       this.setOptions(selectModelConfig);
       if (isNotEmpty(fieldValue)) {
         selectModelConfig.value = fieldValue.metadata;
       }
-      inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));
-
-      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, false, false);
-      inputModelConfig.hint = null;
-      this.setValues(inputModelConfig, fieldValue);
+      selectModelConfig.disabled = inputModelConfig.readOnly;
       inputSelectGroup.readOnly = selectModelConfig.disabled && inputModelConfig.readOnly;
 
+      inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));
       inputSelectGroup.group.push(new DsDynamicInputModel(inputModelConfig, clsInput));
 
       return new DynamicQualdropModel(inputSelectGroup, clsGroup);

src/app/shared/form/builder/parsers/row-parser.ts

@@ -1,9 +1,10 @@
+import { SectionVisibility } from './../../../../submission/objects/section-visibility.model';
 import { Injectable, Injector } from '@angular/core';
 
 import { DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormGroupModelConfig } from '@ng-dynamic-forms/core';
 import uniqueId from 'lodash/uniqueId';
 
-import { isEmpty } from '../../../empty.util';
+import { isEmpty, isNotEmpty } from '../../../empty.util';
 import { DynamicRowGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
 import { FormFieldModel } from '../models/form-field.model';
 import { CONFIG_DATA, FieldParser, INIT_FORM_VALUES, PARSER_OPTIONS, SUBMISSION_ID } from './field-parser';
@@ -12,6 +13,7 @@ import { ParserOptions } from './parser-options';
 import { ParserType } from './parser-type';
 import { setLayout } from './parser.utils';
 import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from '../ds-dynamic-form-ui/ds-dynamic-form-constants';
+import { VisibilityType } from '../../../../submission/sections/visibility-type';
 
 export const ROW_ID_PREFIX = 'df-row-group-config-';
 
@@ -118,15 +120,30 @@ export class RowParser {
     return parsedResult;
   }
 
-  checksFieldScope(fieldScope, submissionScope) {
-    return (isEmpty(fieldScope) || isEmpty(submissionScope) || fieldScope === submissionScope);
+  checksFieldScope(fieldScope, submissionScope, visibility: SectionVisibility) {
+    return (isEmpty(fieldScope) || !this.isHidden(visibility, fieldScope, submissionScope));
+  }
+
+  /**
+   * Check if the field is hidden or not, based on the visibility and the submission scope
+   * @param visibility The visibility of the field
+   * @param scope the scope of the field
+   * @param submissionScope the scope of the submission
+   * @returns If the field is hidden or not
+   */
+  private isHidden(visibility: SectionVisibility, scope: string, submissionScope: string): boolean {
+    return isEmpty(visibility)
+      || (isNotEmpty(visibility) && visibility.main !== VisibilityType.READONLY)
+      && isNotEmpty(submissionScope)
+      && (isNotEmpty(scope)
+      && scope !== submissionScope);
   }
 
   filterScopedFields(fields: FormFieldModel[], submissionScope): FormFieldModel[] {
     const filteredFields: FormFieldModel[] = [];
     fields.forEach((field: FormFieldModel) => {
       // Whether field scope doesn't match the submission scope, skip it
-      if (this.checksFieldScope(field.scope, submissionScope)) {
+      if (this.checksFieldScope(field.scope, submissionScope, field.visibility)) {
         filteredFields.push(field);
       }
     });