[DSpace-CRIS] Nested / Basic Hierarchical Metadata (Frontend)

src/app/core/json-patch/builder/json-patch-operations-builder.ts

@@ -64,7 +64,6 @@ export class JsonPatchOperationsBuilder {
    *    the value to update the referenced path
    * @param plain
    *    a boolean representing if the value to be added is a plain text value
-   * @param securityLevel
    * @param language
    */
   replace(path: JsonPatchOperationPathObject, value, plain = false, language = null) {

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html

@@ -19,7 +19,7 @@
         <ng-container #componentViewContainer></ng-container>
       </div>
 
-      @if (hasHint && (formBuilderService.hasArrayGroupValue(model) || (!model.repeatable && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)) {
+      @if (hasHint && (formBuilderService.hasArrayGroupValue(model) || ((!model.repeatable && (!(model?.isModelOfNotRepeatableGroup) || model?.isModelOfNotRepeatableGroup && context?.index === context?.context?.groups?.length - 1)) && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)) {
 <small
              class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
       }
@@ -28,7 +28,7 @@
         <div class="clearfix w-100 mb-2"></div>
       }
 
-      @if (!model.hideErrorMessages && showErrorMessages) {
+      @if (!model.hideErrorMessages && showErrorMessages && (!(model?.isModelOfNotRepeatableGroup) || model?.isModelOfNotRepeatableGroup && context?.index === context?.context?.groups?.length - 1) && isNotRequiredGroupAndEmpty()) {
         <div [id]="id + '_errors'"
           [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
           @for (message of errorMessages; track message) {

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts

@@ -81,6 +81,7 @@ import { SubmissionObjectService } from '../../../../submission/submission-objec
 import { LiveRegionService } from '../../../live-region/live-region.service';
 import { getLiveRegionServiceStub } from '../../../live-region/live-region.service.stub';
 import { SelectableListService } from '../../../object-list/selectable-list/selectable-list.service';
+import { getMockFormBuilderService } from '../../testing/form-builder-service.mock';
 import { FormBuilderService } from '../form-builder.service';
 import { DsDynamicFormControlContainerComponent } from './ds-dynamic-form-control-container.component';
 import { dsDynamicFormControlMapFn } from './ds-dynamic-form-control-map-fn';
@@ -101,6 +102,7 @@ import { DsDynamicOneboxComponent } from './models/onebox/dynamic-onebox.compone
 import { DynamicOneboxModel } from './models/onebox/dynamic-onebox.model';
 import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components';
 import { DynamicRelationGroupModel } from './models/relation-group/dynamic-relation-group.model';
+import { DsDynamicRelationInlineGroupComponent } from './models/relation-inline-group/dynamic-relation-inline-group.components';
 import { DsDynamicScrollableDropdownComponent } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.component';
 import { DynamicScrollableDropdownModel } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
 import { DsDynamicTagComponent } from './models/tag/dynamic-tag.component';
@@ -186,6 +188,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
       submissionId: '1234',
       id: 'relationGroup',
       formConfiguration: [],
+      isInlineGroup: false,
       mandatoryField: '',
       name: 'relationGroup',
       relationFields: [],
@@ -195,6 +198,20 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
       metadataFields: [],
       hasSelectableMetadata: false,
     }),
+    new DynamicRelationGroupModel({
+      submissionId: '1234',
+      id: 'inlineRelationGroup',
+      formConfiguration: [],
+      isInlineGroup: true,
+      mandatoryField: '',
+      name: 'inlineRelationGroup',
+      relationFields: [],
+      scopeUUID: '',
+      submissionScope: '',
+      repeatable: false,
+      metadataFields: [],
+      hasSelectableMetadata: false,
+    }),
     new DynamicDsDatePickerModel({ id: 'datepicker', repeatable: false }),
     new DynamicLookupModel({
       id: 'lookup',
@@ -244,7 +261,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
         { provide: Store, useValue: {} },
         { provide: RelationshipDataService, useValue: {} },
         { provide: SelectableListService, useValue: {} },
-        { provide: FormBuilderService, useValue: {} },
+        { provide: FormBuilderService, useValue: getMockFormBuilderService() },
         { provide: SubmissionService, useValue: {} },
         {
           provide: SubmissionObjectService,
@@ -392,10 +409,11 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
     expect(testFn(formModel[19])).toEqual(DsDynamicListComponent);
     expect(testFn(formModel[20])).toEqual(DsDynamicListComponent);
     expect(testFn(formModel[21])).toEqual(DsDynamicRelationGroupComponent);
-    expect(testFn(formModel[22])).toEqual(DsDatePickerComponent);
-    expect(testFn(formModel[23])).toEqual(DsDynamicLookupComponent);
+    expect(testFn(formModel[22])).toEqual(DsDynamicRelationInlineGroupComponent);
+    expect(testFn(formModel[23])).toEqual(DsDatePickerComponent);
     expect(testFn(formModel[24])).toEqual(DsDynamicLookupComponent);
-    expect(testFn(formModel[25])).toEqual(DsDynamicFormGroupComponent);
+    expect(testFn(formModel[25])).toEqual(DsDynamicLookupComponent);
+    expect(testFn(formModel[26])).toEqual(DsDynamicFormGroupComponent);
   });
 
   describe('store action subscriptions', () => {

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts

@@ -516,4 +516,22 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     this.subs.push(collection$.subscribe((collection) => this.collection = collection));
 
   }
+
+  isNotRequiredGroupAndEmpty(): boolean {
+    const parent = this.model.parent;
+    // Check if the model is part of a group, the group needs to be an inner form and be in the submission form not in a nested form.
+    // The check hasValue(parent.parent) tells if the parent is in the submission or in a modal (nested cases)
+    if (hasValue(parent) && parent.type === 'GROUP' && this.model.isModelOfInnerForm && hasValue(parent.parent)) {
+
+      const groupHasSomeValue = parent.group.some(elem => !!elem.value);
+
+      if (!groupHasSomeValue && !parent.isRequired && parent.group?.length > 1) {
+        this.group.reset();
+      }
+
+      return (groupHasSomeValue && !parent.isRequired) || (hasValue(parent.isRequired) && parent.isRequired);
+    } else {
+      return true;
+    }
+  }
 }

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-map-fn.ts

@@ -44,6 +44,8 @@ import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_NAME } from './models/lookup/dynamic-l
 import { DsDynamicOneboxComponent } from './models/onebox/dynamic-onebox.component';
 import { DYNAMIC_FORM_CONTROL_TYPE_ONEBOX } from './models/onebox/dynamic-onebox.model';
 import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components';
+import { DynamicRelationGroupModel } from './models/relation-group/dynamic-relation-group.model';
+import { DsDynamicRelationInlineGroupComponent } from './models/relation-inline-group/dynamic-relation-inline-group.components';
 import { DsDynamicScrollableDropdownComponent } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.component';
 import { DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
 import { DsDynamicTagComponent } from './models/tag/dynamic-tag.component';
@@ -93,7 +95,7 @@ export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<
       return DsDynamicTagComponent;
 
     case DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP:
-      return DsDynamicRelationGroupComponent;
+      return (model as DynamicRelationGroupModel).isInlineGroup ? DsDynamicRelationInlineGroupComponent : DsDynamicRelationGroupComponent;
 
     case DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER:
       return DsDatePickerComponent;

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss

@@ -71,3 +71,13 @@
     background-color: var(--bs-gray-400);
   }
 }
+
+
+.grey-background{
+  background-color: #f3f3f3;
+  margin-bottom: 10px;
+  padding-top: 10px;
+  margin-left: -1rem;
+  margin-right: -1rem;
+  padding-right: 0px;
+}

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

@@ -120,7 +120,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
    * If the drag feature is disabled for this DynamicRowArrayModel.
    */
   get dragDisabled(): boolean {
-    return this.model.groups.length === 1 || !this.model.isDraggable;
+    return this.model.groups.length === 1 || !this.model.isDraggable || this.model.notRepeatable;
   }
 
   /**

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

@@ -2,8 +2,12 @@ import { LanguageCode } from '@dspace/core/shared/form/models/form-field-languag
 import { FormFieldMetadataValueObject } from '@dspace/core/shared/form/models/form-field-metadata-value.model';
 import { RelationshipOptions } from '@dspace/core/shared/relationship-options.model';
 import { VocabularyOptions } from '@dspace/core/submission/vocabularies/models/vocabulary-options.model';
-import { hasValue } from '@dspace/shared/utils/empty.util';
 import {
+  hasValue,
+  isNotUndefined,
+} from '@dspace/shared/utils/empty.util';
+import {
+  AUTOCOMPLETE_OFF,
   DynamicFormControlLayout,
   DynamicFormControlRelation,
   DynamicInputModel,
@@ -27,6 +31,7 @@ export interface DsDynamicInputModelConfig extends DynamicInputModelConfig {
   metadataValue?: FormFieldMetadataValueObject;
   isModelOfInnerForm?: boolean;
   hideErrorMessages?: boolean;
+  isModelOfNotRepeatableGroup?: boolean;
 }
 
 export class DsDynamicInputModel extends DynamicInputModel {
@@ -46,10 +51,12 @@ export class DsDynamicInputModel extends DynamicInputModel {
   @serializable() metadataValue: FormFieldMetadataValueObject;
   @serializable() isModelOfInnerForm: boolean;
   @serializable() hideErrorMessages?: boolean;
+  @serializable() isModelOfNotRepeatableGroup = false;
 
 
   constructor(config: DsDynamicInputModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
+    this.autoComplete = AUTOCOMPLETE_OFF;
     this.repeatable = config.repeatable;
     this.metadataFields = config.metadataFields;
     this.hint = config.hint;
@@ -61,6 +68,9 @@ export class DsDynamicInputModel extends DynamicInputModel {
     this.hasSelectableMetadata = config.hasSelectableMetadata;
     this.metadataValue = config.metadataValue;
     this.place = config.place;
+    if (isNotUndefined(config.isModelOfNotRepeatableGroup)) {
+      this.isModelOfNotRepeatableGroup = config.isModelOfNotRepeatableGroup;
+    }
     this.isModelOfInnerForm = (hasValue(config.isModelOfInnerForm) ? config.isModelOfInnerForm : false);
     this.hideErrorMessages = config.hideErrorMessages;
 

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

@@ -1,65 +1,4 @@
-@if ((formCollapsed | async) !== true) {
-  <a
-    class="close position-relative"
-    ngbTooltip="{{'form.group-collapse-help' | translate}}"
-    placement="left">
-    <span class="fas fa-angle-up fa-fw fa-2x"
-      aria-hidden="true"
-    (click)="collapseForm()"></span>
-  </a>
-}
-@if ((formCollapsed | async)) {
-  <a
-    class="close position-relative"
-    ngbTooltip="{{'form.group-expand-help' | translate}}"
-    placement="left">
-    <span class="fas fa-angle-down fa-fw fa-2x"
-      aria-hidden="true"
-    (click)="expandForm()"></span>
-  </a>
-}
-
-<div class="pt-2" [ngClass]="{'border-top': !showErrorMessages, 'border border-danger': showErrorMessages}">
-  @if ((formCollapsed | async) !== true) {
-    <div class="ps-2 row"  @shrinkInOut>
-      <ds-form #formRef="formComponent"
-        class="col-sm-12 col-md-8 col-lg-9 col-xl-10 ps-0"
-        [formId]="formId"
-        [formModel]="formModel"
-        [displaySubmit]="false"
-        [displayCancel]="false"
-        [emitChange]="false"
-        (dfBlur)="onBlur($event)"
-      (dfFocus)="onFocus($event)"></ds-form>
-      @if ((formCollapsed | async) !== true) {
-        <div class="col p-0 m-0 d-flex justify-content-center align-items-center">
-          <button type="button"
-            class="btn btn-link"
-            [dsBtnDisabled]="isMandatoryFieldEmpty()"
-            (click)="save()">
-            <i class="fas fa-save link-primary fa-2x"
-            aria-hidden="true"></i>
-          </button>
-          <button type="button"
-            class="btn btn-link"
-            [dsBtnDisabled]="!editMode"
-            (click)="delete()">
-            <i class="fas fa-trash link-danger fa-2x"
-            aria-hidden="true"></i>
-          </button>
-          <button type="button"
-            class="btn btn-link"
-            [dsBtnDisabled]="isMandatoryFieldEmpty()"
-            (click)="clear()">
-            <i class="fas fa-undo fa-2x"
-            aria-hidden="true"></i>
-          </button>
-        </div>
-      }
-      <div class="clearfix"></div>
-    </div>
-  }
-
+<div class="pt-2">
   <div class="d-flex">
     @if (!chips) {
       <ds-loading [showMessage]="false"></ds-loading>
@@ -76,9 +15,15 @@
     @if (chips && chips.hasItems()) {
       <ds-chips
         [chips]="chips"
-        [editable]="true"
+        [editable]="!model.readOnly"
         [showIcons]="true"
-      (selected)="onChipSelected($event)"></ds-chips>
+        (selected)="onChipSelected($event)"></ds-chips>
     }
+    <button type="button" class="ds-form-add-more btn btn-link"
+            title="{{'form.add' | translate}}"
+            [dsBtnDisabled]="model.readOnly"
+            (click)="openModal()">
+      <span attr.aria-label="{{'form.add' | translate}}"><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
+    </button>
   </div>
 </div>