changed labels for input groups

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

@@ -53,7 +53,7 @@
 
     <div *ngIf="hasRelationLookup" class="mt-3">
         <ul class="list-unstyled">
-            <li *ngFor="let result of ( model.value | async); let i = index">
+            <li *ngFor="let result of ( relationships$ | async); let i = index">
                 <ng-container *ngVar="result.indexableObject as v">
                     <button type="button" class="close float-left" aria-label="Close button"
                             (click)="removeSelection(result)">

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

@@ -70,7 +70,7 @@ import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-a
 import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components';
 import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './models/relation-group/dynamic-relation-group.model';
 import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component';
-import { map, switchMap, take } from 'rxjs/operators';
+import { map, switchMap, take, tap } from 'rxjs/operators';
 import { SelectableListState } from '../../../object-list/selectable-list/selectable-list.reducer';
 import { Observable } from 'rxjs';
 import { SearchResult } from '../../../search/search-result.model';
@@ -172,7 +172,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   @Input() hasErrorMessaging = false;
   @Input() layout = null as DynamicFormLayout;
   @Input() model: any;
-
+  relationships$: Observable<SearchResult<Item>[]>;
   hasRelationLookup: boolean;
   modalRef: NgbModalRef;
   modelValueMDRepresentation;
@@ -217,10 +217,10 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
         map((items: Item[]) => items.map((item) => Object.assign(new SearchResult(), { indexableObject: item }))),
       ).subscribe((relatedItems) => this.selectableListService.select(this.listId, relatedItems));
 
-      this.model.value = this.selectableListService.getSelectableList(this.listId).pipe(
+      this.relationships$ = this.selectableListService.getSelectableList(this.listId).pipe(
         map((listState: SelectableListState) => hasValue(listState) && hasValue(listState.selection) ? listState.selection : []),
-      );
+      ) as Observable<SearchResult<Item>[]>;
-      this.modelValueMDRepresentation = this.model.value.pipe(map((result: SearchResult<DSpaceObject>[]) => result.map((element: SearchResult<DSpaceObject>) => Object.assign(new ItemMetadataRepresentation(), element.indexableObject))))
+      this.modelValueMDRepresentation = this.relationships$.pipe(map((result: SearchResult<DSpaceObject>[]) => result.map((element: SearchResult<DSpaceObject>) => Object.assign(new ItemMetadataRepresentation(), element.indexableObject))));
 
     }
   }

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

@@ -15,6 +15,7 @@ export interface DynamicConcatModelConfig extends DynamicFormGroupModelConfig {
   workspaceItem: WorkspaceItem;
   relationship?: RelationshipOptions;
   repeatable: boolean;
+  required: boolean;
 }
 
 export class DynamicConcatModel extends DynamicFormGroupModel {
@@ -24,6 +25,7 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
   @serializable() workspaceItem: WorkspaceItem;
   @serializable() relationship?: RelationshipOptions;
   @serializable() repeatable?: boolean;
+  @serializable() required?: boolean;
   isCustomGroup = true;
 
   constructor(config: DynamicConcatModelConfig, layout?: DynamicFormControlLayout) {
@@ -34,6 +36,7 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
     this.relationship = config.relationship;
     this.workspaceItem = config.workspaceItem;
     this.repeatable = config.repeatable;
+    this.required = config.required;
   }
 
   get value() {

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

@@ -12,6 +12,7 @@ export interface DsDynamicQualdropModelConfig extends DynamicFormGroupModelConfi
   languageCodes?: LanguageCode[];
   language?: string;
   readOnly: boolean;
+  required: boolean;
 }
 
 export class DynamicQualdropModel extends DynamicFormGroupModel {
@@ -20,12 +21,14 @@ export class DynamicQualdropModel extends DynamicFormGroupModel {
   @serializable() languageUpdates: Subject<string>;
   @serializable() hasLanguages = false;
   @serializable() readOnly: boolean;
+  @serializable() required: boolean;
   isCustomGroup = true;
 
   constructor(config: DsDynamicQualdropModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
 
     this.readOnly = config.readOnly;
+    this.required = config.required;
     this.language = config.language;
     this.languageCodes = config.languageCodes;
 

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

@@ -7,15 +7,17 @@ import { DYNAMIC_FORM_CONTROL_TYPE_TAG } from './tag/dynamic-tag.model';
 
 export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig {
   notRepeatable: boolean;
+  required: boolean;
 }
 
 export class DynamicRowArrayModel extends DynamicFormArrayModel {
   @serializable() notRepeatable = false;
+  @serializable() required = false;
   isRowArray = true;
 
   constructor(config: DynamicRowArrayModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
     this.notRepeatable = config.notRepeatable;
+    this.required = config.required;
   }
-
 }

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

@@ -46,15 +46,16 @@ export class ConcatFieldParser extends FieldParser {
     };
 
     const groupId = id.replace(/\./g, '_') + CONCAT_GROUP_SUFFIX;
-    const concatGroup: DynamicConcatModelConfig = this.initModel(groupId, false, false);
+    const concatGroup: DynamicConcatModelConfig = this.initModel(groupId, label, false);
 
     concatGroup.group = [];
     concatGroup.separator = this.separator;
 
-    const input1ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_FIRST_INPUT_SUFFIX, label, false, false);
+    const input1ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_FIRST_INPUT_SUFFIX, false, false);
-    const input2ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_SECOND_INPUT_SUFFIX, label, true, false);
+    const input2ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_SECOND_INPUT_SUFFIX, false, false);
 
     if (this.configData.mandatory) {
+      concatGroup.required = true;
       input1ModelConfig.required = true;
     }
 

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

@@ -31,12 +31,12 @@ export abstract class FieldParser {
     ) {
       let arrayCounter = 0;
       let fieldArrayCounter = 0;
-
       const config = {
         id: uniqueId() + '_array',
-        label: this.configData.label,
         initialCount: this.getInitArrayIndex(),
         notRepeatable: !this.configData.repeatable,
+        label: this.configData.label,
+        required: isNotEmpty(this.configData.mandatory),
         groupFactory: () => {
           let model;
           if ((arrayCounter === 0)) {
@@ -169,7 +169,7 @@ export abstract class FieldParser {
     }
   }
 
-  protected initModel(id?: string, label = true, labelEmpty = false, setErrors = true) {
+  protected initModel(id?: string, label = true, setErrors = true) {
 
     const controlModel = Object.create(null);
 
@@ -190,7 +190,7 @@ export abstract class FieldParser {
     controlModel.repeatable = this.configData.repeatable;
 
     // Set label
-    this.setLabel(controlModel, label, labelEmpty);
+    this.setLabel(controlModel, label);
 
     controlModel.placeholder = this.configData.label;
 
@@ -243,7 +243,7 @@ export abstract class FieldParser {
 
   protected setLabel(controlModel, label = true, labelEmpty = false) {
     if (label) {
-      controlModel.label = (labelEmpty) ? ' ' : this.configData.label;
+      controlModel.label = this.configData.label;
     }
   }
 

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

@@ -54,18 +54,20 @@ export class OneboxFieldParser extends FieldParser {
       inputSelectGroup.id = newId.replace(/\./g, '_') + QUALDROP_GROUP_SUFFIX;
       inputSelectGroup.group = [];
       inputSelectGroup.legend = this.configData.label;
+      this.setLabel(inputSelectGroup, label);
+      inputSelectGroup.required = isNotEmpty(this.configData.mandatory);
 
-      const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, label);
+      const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, false);
       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, true);
+      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, false);
       this.setValues(inputModelConfig, fieldValue);
-
       inputSelectGroup.readOnly = selectModelConfig.disabled && inputModelConfig.readOnly;
+
       inputSelectGroup.group.push(new DsDynamicInputModel(inputModelConfig, clsInput));
 
       return new DynamicQualdropModel(inputSelectGroup, clsGroup);

src/app/shared/form/form.component.html

@@ -12,6 +12,7 @@
       (dfFocus)="onFocus($event)">
 
       <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
+
         <!--Array with repeatable items-->
         <div *ngIf="!context.notRepeatable"
              class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">

src/app/shared/mocks/mock-form-models.ts

@@ -65,7 +65,8 @@ export const qualdropConfig = {
   id: 'dc_identifier_QUALDROP_GROUP',
   legend: 'Identifiers',
   readOnly: false,
-  group: [mockQualdropSelectModel, mockQualdropInputModel]
+  group: [mockQualdropSelectModel, mockQualdropInputModel],
+  required: false
 };
 
 export const MockQualdropModel = new DynamicQualdropModel(qualdropConfig);

src/app/shared/object-list/object-list.component.html

@@ -1,30 +1,32 @@
 <ds-pagination
-  [paginationOptions]="config"
+        [paginationOptions]="config"
-  [pageInfoState]="objects?.payload"
+        [pageInfoState]="objects?.payload"
-  [collectionSize]="objects?.payload?.totalElements"
+        [collectionSize]="objects?.payload?.totalElements"
-  [sortOptions]="sortConfig"
+        [sortOptions]="sortConfig"
-  [hideGear]="hideGear"
+        [hideGear]="hideGear"
-  [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
+        [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
-  (pageChange)="onPageChange($event)"
+        (pageChange)="onPageChange($event)"
-  (pageSizeChange)="onPageSizeChange($event)"
+        (pageSizeChange)="onPageSizeChange($event)"
-  (sortDirectionChange)="onSortDirectionChange($event)"
+        (sortDirectionChange)="onSortDirectionChange($event)"
-  (sortFieldChange)="onSortFieldChange($event)"
+        (sortFieldChange)="onSortFieldChange($event)"
-  (paginationChange)="onPaginationChange($event)">
+        (paginationChange)="onPaginationChange($event)">
-  <ul *ngIf="objects?.hasSucceeded" class="list-unstyled">
+    <ul *ngIf="objects?.hasSucceeded" class="list-unstyled">
-      <li *ngFor="let object of objects?.payload?.page; let i = index; let last = last" class="mt-4 mb-4" [class.border-bottom]="hasBorder && !last">
+        <li *ngFor="let object of objects?.payload?.page; let i = index; let last = last" class="mt-4 mb-4" [class.border-bottom]="hasBorder && !last">
-          <ng-container *ngVar="selectionService.isObjectSelected(selectionConfig.listId, object) | async as checked">
+          <span *ngIf="selectable">
-          <input *ngIf="selectable && selectionConfig.repeatable" class="form-check-input" type="checkbox"
+                <ng-container *ngVar="selectionService?.isObjectSelected(selectionConfig?.listId, object) | async as checked">
-                 [name]="'checkbox' + i"
+                    <input *ngIf="selectionConfig.repeatable" class="form-check-input" type="checkbox"
-                 [id]="'object'+i"
+                           [name]="'checkbox' + i"
-                 [checked]="checked"
+                           [id]="'object'+i"
-                 (change)="selectCheckbox(!checked, object)">
+                           [checked]="checked"
-          <input *ngIf="selectable && !selectionConfig.repeatable" class="form-check-input" type="radio"
+                           (change)="selectCheckbox(!checked, object)">
-                 [name]="'radio' + i"
+                    <input *ngIf="!selectionConfig.repeatable" class="form-check-input" type="radio"
-                 [id]="'object'+i"
+                           [name]="'radio' + i"
-                 [checked]="checked"
+                           [id]="'object'+i"
-                 (click)="selectRadio(!checked, object)">
+                           [checked]="checked"
-          </ng-container>
+                           (click)="selectRadio(!checked, object)">
-        <ds-wrapper-list-element [object]="object" [index]="i"></ds-wrapper-list-element>
+                </ng-container>
-      </li>
+              </span>
-  </ul>
+            <ds-wrapper-list-element [object]="object" [index]="i"></ds-wrapper-list-element>
+        </li>
+    </ul>
 </ds-pagination>