[DURACOM-444] add group component

Author: FrancescoMolinaro

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/core/submission/vocabularies/models/vocabulary-entry.model.ts

@@ -45,12 +45,6 @@ export class VocabularyEntry extends ListableObject {
   @autoserialize
   otherInformation: OtherInformation;
 
-  /**
-   * A value representing security level value of the metadata
-   */
-  @autoserialize
-    securityLevel: number;
-
   /**
    * A string representing the kind of vocabulary entry
    */

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

@@ -68,6 +68,7 @@ import { environment } from '../../../../../environments/environment';
 import { SubmissionService } from '../../../../submission/submission.service';
 import { SubmissionObjectService } from '../../../../submission/submission-object.service';
 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';
@@ -88,6 +89,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';
@@ -173,6 +175,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
       submissionId: '1234',
       id: 'relationGroup',
       formConfiguration: [],
+      isInlineGroup: false,
       mandatoryField: '',
       name: 'relationGroup',
       relationFields: [],
@@ -182,6 +185,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',
@@ -229,7 +246,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,
@@ -375,10 +392,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);
   });
 
 });

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/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.spec.ts

@@ -22,11 +22,15 @@ import { SubmissionFormsModel } from '@dspace/core/config/models/config-submissi
 import { APP_DATA_SERVICES_MAP } from '@dspace/core/data-services-map-type';
 import { FormFieldModel } from '@dspace/core/shared/form/models/form-field.model';
 import { FormFieldMetadataValueObject } from '@dspace/core/shared/form/models/form-field-metadata-value.model';
+import { Vocabulary } from '@dspace/core/submission/vocabularies/models/vocabulary.model';
 import { VocabularyService } from '@dspace/core/submission/vocabularies/vocabulary.service';
+import { SubmissionServiceStub } from '@dspace/core/testing/submission-service.stub';
 import { createTestComponent } from '@dspace/core/testing/utils.test';
 import { VocabularyServiceStub } from '@dspace/core/testing/vocabulary-service.stub';
+import { createSuccessfulRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
 import { XSRFService } from '@dspace/core/xsrf/xsrf.service';
 import {
+  NgbModal,
   NgbModule,
   NgbTooltip,
 } from '@ng-bootstrap/ng-bootstrap';
@@ -74,6 +78,49 @@ const initialState: any = {
     'route': {},
   },
 };
+
+const vocabulary: any = Object.assign(new Vocabulary(), {
+  id: 'types',
+  name: 'types',
+  scrollable: true,
+  hierarchical: false,
+  preloadLevel: 1,
+  entity: null,
+  externalSource: null,
+  type: 'vocabulary',
+  uuid: 'vocabulary-types',
+  _links: {
+    self: {
+      href: 'https://rest.api/rest/api/submission/vocabularies/types',
+    },
+    entries: {
+      href: 'https://rest.api/rest/api/submission/vocabularies/types/entries',
+    },
+  },
+});
+
+const vocabularyExternal: any = Object.assign(new Vocabulary(), {
+  id: 'author',
+  name: 'author',
+  scrollable: true,
+  hierarchical: false,
+  preloadLevel: 1,
+  entity: 'test',
+  externalSource: {
+    'dc.contributor.author': 'authorExternalSource',
+  },
+  type: 'vocabulary',
+  uuid: 'vocabulary-author',
+  _links: {
+    self: {
+      href: 'https://rest.api/rest/api/submission/vocabularies/types',
+    },
+    entries: {
+      href: 'https://rest.api/rest/api/submission/vocabularies/types/entries',
+    },
+  },
+});
+
 function init() {
   FORM_GROUP_TEST_MODEL_CONFIG = {
     disabled: false,
@@ -111,6 +158,7 @@ function init() {
     submissionId,
     id: 'dc_contributor_author',
     label: 'Authors',
+    isInlineGroup: false,
     mandatoryField: 'dc.contributor.author',
     name: 'dc.contributor.author',
     placeholder: 'Authors',
@@ -168,7 +216,9 @@ describe('DsDynamicRelationGroupComponent test suite', () => {
         FormBuilderService,
         FormComponent,
         FormService,
+        NgbModal,
         provideMockStore({ initialState }),
+        { provide: SubmissionService, useClass: SubmissionServiceStub },
         { provide: VocabularyService, useValue: vocabularyServiceStub },
         { provide: DsDynamicTypeBindRelationService, useClass: DsDynamicTypeBindRelationService },
         { provide: SubmissionObjectService, useValue: {} },
@@ -187,6 +237,7 @@ describe('DsDynamicRelationGroupComponent test suite', () => {
   describe('', () => {
     // synchronous beforeEach
     beforeEach(() => {
+      spyOn(vocabularyServiceStub, 'findVocabularyById').and.returnValue(createSuccessfulRemoteDataObject$(vocabulary));
       html = `<ds-dynamic-relation-group [model]="model"
                             [formId]="formId"
                             [group]="group"

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

@@ -23,6 +23,7 @@ import {
 export interface DynamicRelationGroupModelConfig extends DsDynamicInputModelConfig {
   submissionId: string;
   formConfiguration: FormRowModel[];
+  isInlineGroup: boolean;
   mandatoryField: string;
   relationFields: string[];
   scopeUUID: string;
@@ -35,6 +36,7 @@ export interface DynamicRelationGroupModelConfig extends DsDynamicInputModelConf
 export class DynamicRelationGroupModel extends DsDynamicInputModel {
   @serializable() submissionId: string;
   @serializable() formConfiguration: FormRowModel[];
+  @serializable() isInlineGroup: boolean;
   @serializable() mandatoryField: string;
   @serializable() relationFields: string[];
   @serializable() scopeUUID: string;
@@ -50,6 +52,7 @@ export class DynamicRelationGroupModel extends DsDynamicInputModel {
     this.relationFields = config.relationFields;
     this.scopeUUID = config.scopeUUID;
     this.submissionScope = config.submissionScope;
+    this.isInlineGroup = config.isInlineGroup;
     const value = config.value || [];
     this.value = value;
   }

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

@@ -0,0 +1,16 @@
+<div class="pt-2 border-top" [ngClass]="{ 'inline-group-is-invalid': showErrorMessages}" [hidden]="model.hidden">
+  @if (formModel) {
+    <ds-form #formRef="formComponent" @shrinkInOut
+             [formId]="formId"
+             [formModel]="formModel"
+             [displayCancel]="false"
+             [displaySubmit]="false"
+             [arrayButtonsStyle]="'inline-btn-group'"
+             [isInlineGroupForm]="true"
+             (dfBlur)="onBlur($event)"
+             (dfChange)="onChange($event)"
+             (dfFocus)="onFocus($event)"
+             (ngbEvent)="onCustomEvent($event)"
+             (removeArrayItem)="remove($event)"></ds-form>
+  }
+</div>

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

@@ -0,0 +1,7 @@
+.inline-btn-group {
+  margin-top: 2rem;
+}
+
+.inline-group-is-invalid ds-form:has(ds-dynamic-form-array) .grey-background {
+  border: 1px solid var(--bs-danger);
+}