Merge pull request #2297 from 4Science/DURACOM-152

Fixed read-only visibility for submission form fields

src/app/core/submission/submission-field-scope-type.ts

@@ -0,0 +1,4 @@
+export enum SubmissionFieldScopeType {
+  WorkspaceItem = 'SUBMISSION',
+  WorkflowItem = 'WORKFLOW',
+}

src/app/core/submission/submission-scope-type.ts

@@ -1,4 +1,4 @@
 export enum SubmissionScopeType {
   WorkspaceItem = 'WORKSPACE',
-  WorkflowItem = 'WORKFLOW'
+  WorkflowItem = 'WORKFLOW',
 }

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

@@ -46,6 +46,7 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
   @serializable() submissionId: string;
   @serializable() hasSelectableMetadata: boolean;
   @serializable() metadataValue: MetadataValue;
+  @serializable() readOnly?: boolean;
 
   isCustomGroup = true;
   valueUpdates: Subject<string>;
@@ -65,6 +66,7 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
     this.valueUpdates = new Subject<string>();
     this.valueUpdates.subscribe((value: string) => this.value = value);
     this.typeBindRelations = config.typeBindRelations ? config.typeBindRelations : [];
+    this.readOnly = config.disabled;
   }
 
   get value() {

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"
+       <i *ngIf="!model.readOnly" ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
-       aria-hidden="true"></i>
+          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

@@ -83,6 +83,8 @@ export class ConcatFieldParser extends FieldParser {
       input1ModelConfig.required = true;
     }
 
+    concatGroup.disabled = input1ModelConfig.readOnly;
+
     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';
@@ -22,6 +24,7 @@ import { RelationshipOptions } from '../models/relationship-options.model';
 import { VocabularyOptions } from '../../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { ParserType } from './parser-type';
 import { isNgbDateStruct } from '../../../date.util';
+import { SubmissionScopeType } from '../../../../core/submission/submission-scope-type';
 
 export const SUBMISSION_ID: InjectionToken<string> = new InjectionToken<string>('submissionId');
 export const CONFIG_DATA: InjectionToken<FormFieldModel> = new InjectionToken<FormFieldModel>('configData');
@@ -280,8 +283,8 @@ export abstract class FieldParser {
     controlModel.id = (this.fieldId).replace(/\./g, '_');
 
     // Set read only option
-    controlModel.readOnly = this.parserOptions.readOnly;
+    controlModel.readOnly = this.parserOptions.readOnly || this.isFieldReadOnly(this.configData.visibility, this.configData.scope, this.parserOptions.submissionScope);
-    controlModel.disabled = this.parserOptions.readOnly;
+    controlModel.disabled = controlModel.readOnly;
     if (hasValue(this.configData.selectableRelationship)) {
       controlModel.relationship = Object.assign(new RelationshipOptions(), this.configData.selectableRelationship);
     }
@@ -319,6 +322,28 @@ export abstract class FieldParser {
     return controlModel;
   }
 
+  /**
+   * Checks if a field is read-only with the given scope.
+   * The field is readonly when submissionScope is WORKSPACE and the main visibility is READONLY
+   * or when submissionScope is WORKFLOW and the other visibility is READONLY
+   * @param visibility
+   * @param submissionScope
+   */
+  private isFieldReadOnly(visibility: SectionVisibility, fieldScope: string, submissionScope: string) {
+    return isNotEmpty(submissionScope)
+      && isNotEmpty(fieldScope)
+      && isNotEmpty(visibility)
+      && ((
+          submissionScope === SubmissionScopeType.WorkspaceItem
+          && visibility.main === VisibilityType.READONLY
+          )
+        ||
+          (visibility.other === VisibilityType.READONLY
+          && submissionScope === SubmissionScopeType.WorkflowItem
+          )
+      );
+  }
+
   /**
    * 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));
+      selectModelConfig.disabled = inputModelConfig.readOnly;
-
-      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, false, false);
-      inputModelConfig.hint = null;
-      this.setValues(inputModelConfig, fieldValue);
       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,11 @@
+import { SubmissionFieldScopeType } from './../../../../core/submission/submission-field-scope-type';
+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 +14,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 { SubmissionScopeType } from '../../../../core/submission/submission-scope-type';
 
 export const ROW_ID_PREFIX = 'df-row-group-config-';
 
@@ -118,15 +121,37 @@ export class RowParser {
     return parsedResult;
   }
 
-  checksFieldScope(fieldScope, submissionScope) {
+  checksFieldScope(fieldScope, submissionScope, visibility: SectionVisibility) {
-    return (isEmpty(fieldScope) || isEmpty(submissionScope) || fieldScope === submissionScope);
+    return (isEmpty(fieldScope) || !this.isHidden(visibility, fieldScope, submissionScope));
+  }
+
+  /**
+   * Check if the field is hidden or not.
+   * It is hidden when we do have the scope,
+   * but we do not have the visibility,
+   * also the field scope should be different from the submissionScope.
+   * @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 isNotEmpty(scope)
+      && (
+        isEmpty(visibility)
+        && (
+          submissionScope === SubmissionScopeType.WorkspaceItem && scope !== SubmissionFieldScopeType.WorkspaceItem
+          ||
+          submissionScope === SubmissionScopeType.WorkflowItem && scope !== SubmissionFieldScopeType.WorkflowItem
+        )
+      );
   }
 
   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);
       }
     });

src/app/submission/sections/form/section-form.component.spec.ts

@@ -249,6 +249,8 @@ describe('SubmissionSectionFormComponent test suite', () => {
       formConfigService.findByHref.and.returnValue(createSuccessfulRemoteDataObject$(testFormConfiguration));
       sectionsServiceStub.getSectionData.and.returnValue(observableOf(sectionData));
       sectionsServiceStub.getSectionServerErrors.and.returnValue(observableOf([]));
+      sectionsServiceStub.isSectionReadOnly.and.returnValue(observableOf(false));
+
       spyOn(comp, 'initForm');
       spyOn(comp, 'subscriptions');
 

src/app/submission/sections/form/section-form.component.ts

@@ -119,6 +119,12 @@ export class SubmissionSectionFormComponent extends SectionModelComponent {
   protected subs: Subscription[] = [];
 
   protected submissionObject: SubmissionObject;
+
+  /**
+   * A flag representing if this section is readonly
+   */
+  protected isSectionReadonly = false;
+
   /**
    * The FormComponent reference
    */
@@ -176,13 +182,15 @@ export class SubmissionSectionFormComponent extends SectionModelComponent {
           this.sectionService.getSectionData(this.submissionId, this.sectionData.id, this.sectionData.sectionType),
           this.submissionObjectService.findById(this.submissionId, true, false, followLink('item')).pipe(
             getFirstSucceededRemoteData(),
-            getRemoteDataPayload())
+            getRemoteDataPayload()),
+            this.sectionService.isSectionReadOnly(this.submissionId, this.sectionData.id, this.submissionService.getSubmissionScope())
         ])),
       take(1))
-      .subscribe(([sectionData, submissionObject]: [WorkspaceitemSectionFormObject, SubmissionObject]) => {
+      .subscribe(([sectionData, submissionObject, isSectionReadOnly]: [WorkspaceitemSectionFormObject, SubmissionObject, boolean]) => {
         if (isUndefined(this.formModel)) {
           // this.sectionData.errorsToShow = [];
           this.submissionObject = submissionObject;
+          this.isSectionReadonly = isSectionReadOnly;
           // Is the first loading so init form
           this.initForm(sectionData);
           this.sectionData.data = sectionData;
@@ -295,11 +303,11 @@ export class SubmissionSectionFormComponent extends SectionModelComponent {
         this.formConfig,
         this.collectionId,
         sectionData,
-        this.submissionService.getSubmissionScope()
+        this.submissionService.getSubmissionScope(),
+        this.isSectionReadonly
       );
       const sectionMetadata = this.sectionService.computeSectionConfiguredMetadata(this.formConfig);
       this.sectionService.updateSectionData(this.submissionId, this.sectionData.id, sectionData, this.sectionData.errorsToShow, this.sectionData.serverValidationErrors, sectionMetadata);
-
     } catch (e) {
       const msg: string = this.translate.instant('error.submission.sections.init-form-error') + e.toString();
       const sectionError: SubmissionSectionError = {

src/app/submission/sections/sections.service.ts

@@ -334,8 +334,9 @@ export class SectionsService {
       filter((sectionObj) => hasValue(sectionObj)),
       map((sectionObj: SubmissionSectionObject) => {
         return isNotEmpty(sectionObj.visibility)
-          && sectionObj.visibility.other === 'READONLY'
+          && ((sectionObj.visibility.other === 'READONLY' && submissionScope !== SubmissionScopeType.WorkspaceItem)
-          && submissionScope !== SubmissionScopeType.WorkspaceItem;
+              || (sectionObj.visibility.main === 'READONLY' && submissionScope === SubmissionScopeType.WorkspaceItem)
+             );
       }),
       distinctUntilChanged());
   }