layout changes, result list, fixed prod build

src/app/core/core.module.ts

@@ -97,7 +97,6 @@ import { EndpointMockingRestService } from './dspace-rest-v2/endpoint-mocking-re
 import { ENV_CONFIG, GLOBAL_CONFIG, GlobalConfig } from '../../config';
 
 export const restServiceFactory = (cfg: GlobalConfig, mocks: MockResponseMap, http: HttpClient) => {
-  console.log('REST SERVICE FACTORY');
   if (ENV_CONFIG.production) {
     return new DSpaceRESTv2Service(http);
   } else {

src/app/core/dspace-rest-v2/mocks/mock-submission-response.json

@@ -10,7 +10,7 @@
           },
           "label": "Journal Issue",
           "mandatory": true,
-          "repeatable": false,
+          "repeatable": true,
           "mandatoryMessage": "Required field!",
           "hints": "Select a journal issue for this publication.",
           "selectableMetadata": [

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

@@ -6,8 +6,14 @@
     </button>
 </div>
 <div class="modal-body" *ngVar="(resultsRD$ | async) as resultsRD">
+    <div class="input-group mb-3">
+        <input type="text" class="form-control" placeholder="Search query" [(ngModel)]="queryInput">
+        <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button" (click)="search()">Go</button>
+        </div>
+    </div>
     <ds-loading *ngIf="!resultsRD || resultsRD.isLoading"></ds-loading>
-    <div *ngIf="resultsRD.hasSucceeded">
+    <div *ngIf="resultsRD?.hasSucceeded && resultsRD.payload.page.length > 0">
         <div *ngIf="repeatable">
             <div class="input-group mb-3">
                 <div class="input-group-prepend">
@@ -77,6 +83,9 @@
             </div>
         </ds-pagination>
     </div>
+    <div *ngIf="resultsRD?.hasSucceeded && resultsRD.payload.page.length === 0">
+        {{ 'form.no-results' | translate}}
+    </div>
 </div>
 <div class="modal-footer">
     <small>Selected {{selection.length}} items</small>

src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup-relation/dynamic-lookup-relation-modal.component.ts

@@ -28,24 +28,32 @@ export class DsDynamicLookupRelationModalComponent implements OnInit {
   fieldName: string;
   resultsRD$: Observable<RemoteData<PaginatedList<SearchResult<DSpaceObject>>>>;
   searchConfig: PaginatedSearchOptions;
-  repeatable: boolean = true;
+  repeatable: boolean;
   selection: DSpaceObject[] = [];
   allSelected = false;
-
-  constructor(protected modal: NgbActiveModal, private searchService: SearchService) {
+  queryInput;
+  searchQuery;
+  initialPagination = Object.assign(new PaginationComponentOptions(), {
+    id: 'submission-relation-list',
+    pageSize: 5
+  });;
+  constructor(public modal: NgbActiveModal, private searchService: SearchService) {
   }
 
   ngOnInit(): void {
     this.fieldName = this.relationKey.substring(RELATION_TYPE_METADATA_PREFIX.length);
-    const pagination = Object.assign(new PaginationComponentOptions(), {
-      id: 'submission-relation-list',
-      pageSize: 5
-    });
-    this.onPaginationChange(pagination);
+    this.onPaginationChange(this.initialPagination);
+  }
+
+  search() {
+    this.searchQuery = this.queryInput;
+    this.onPaginationChange(this.initialPagination);
+    this.deselectAll();
   }
 
   onPaginationChange(pagination: PaginationComponentOptions) {
     this.searchConfig = new PaginatedSearchOptions({
+      query: this.searchQuery,
       pagination: pagination,
       fixedFilter: RELATION_TYPE_FILTER_PREFIX + this.fieldName
     });
@@ -105,6 +113,7 @@ export class DsDynamicLookupRelationModalComponent implements OnInit {
   selectAll() {
     this.allSelected = true;
     const fullPagination = Object.assign(new PaginationComponentOptions(), {
+      query: this.searchQuery,
       currentPage: 1,
       pageSize: Number.POSITIVE_INFINITY
     });

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

@@ -1,7 +1,7 @@
+<script src="dynamic-lookup-relation.component.ts"></script>
 <div>
-    <div class="form-row align-items-center">
-        <!--Simple lookup, first field -->
-        <div class="col right-addon">
+    <div *ngIf="model.repeatable || !model.value" class="form-row align-items-center">
+        <div class="col">
             <input class="form-control"
                    [class.is-invalid]="showErrorMessages"
                    [value]="modalValuesString"
@@ -9,14 +9,6 @@
                    [type]="model.inputType"
                    [placeholder]="model.placeholder | translate"
                    [readonly]="model.readOnly">
-            <ng-container *ngFor="let value of model.value">
-                <input [dynamicId]="bindId && model.id"
-                       [name]="model.name"
-                       type="hidden"
-                       [ngModel]="value.uuid"
-                       [disabled]="true"
-                       [readonly]="true">
-            </ng-container>
         </div>
         <div class="col-auto text-center">
             <button class="btn btn-secondary"
@@ -30,10 +22,28 @@
             <button class="btn btn-secondary"
                     type="button"
                     ngbTooltip="{{'form.add-help' | translate}}"
+                    #tooltip = ngbTooltip
                     placement="top"
-                    [disabled]="!hasEmptyValue()"
-                    (click)="alert('add'); $event.stopPropagation();">{{'form.add' | translate}}
+                    [disabled]="!hasResultsSelected()"
+                    (click)="add(); tooltip.close(); $event.stopPropagation();">{{'form.add' | translate}}
             </button>
         </div>
     </div>
+    <div class="mt-3">
+        <ul class="list-unstyled">
+            <li *ngFor="let value of model.value">
+                <button type="button" class="close float-left" aria-label="Close button"
+                        (click)="removeSelection(value.uuid)">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <span class="d-inline-block align-middle ml-1">{{value.name}}</span>
+                <input [dynamicId]="bindId && model.id"
+                           [name]="model.name"
+                           type="hidden"
+                           [ngModel]="value.uuid"
+                           [disabled]="true"
+                           [readonly]="true">
+            </li>
+        </ul>
+    </div>
 </div>

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

@@ -11,11 +11,9 @@ import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { DsDynamicLookupRelationModalComponent } from './dynamic-lookup-relation-modal.component';
 import { DynamicLookupRelationModel } from './dynamic-lookup-relation.model';
 import { DSpaceObject } from '../../../../../../core/shared/dspace-object.model';
-import { RelationshipService } from '../../../../../../core/data/relationship.service';
 
 @Component({
   selector: 'ds-dynamic-lookup-relation',
-  // styleUrls: ['./dynamic-lookup-relation.component.scss'],
   templateUrl: './dynamic-lookup-relation.component.html'
 })
 export class DsDynamicLookupRelationComponent extends DynamicFormControlComponent implements OnInit {
@@ -30,34 +28,44 @@ export class DsDynamicLookupRelationComponent extends DynamicFormControlComponen
 
   modalRef: NgbModalRef;
   modalValuesString = '';
-  currentObjects;
+  selectedResults: DSpaceObject[];
 
   constructor(private modalService: NgbModal,
               protected layoutService: DynamicFormLayoutService,
               protected validationService: DynamicFormValidationService,
-              private relationshipService: RelationshipService
   ) {
     super(layoutService, validationService);
   }
 
   ngOnInit(): void {
-    this.currentObjects = this.relationshipService.getItemRelationshipLabels();
   }
 
-  public hasEmptyValue() {
-    return isNotEmpty(this.model.value);
+  public hasResultsSelected() {
+    return isNotEmpty(this.selectedResults);
   }
 
   openLookup() {
     this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent);
+    this.modalRef.componentInstance.repeatable = this.model.repeatable;
     this.modalRef.componentInstance.relationKey = this.model.name;
     this.modalRef.result.then((resultList) => {
-      this.model.value = resultList;
+      this.selectedResults = resultList;
       this.modalValuesString = resultList.map((dso: DSpaceObject) => dso.name).join('; ');
     });
   }
 
-  alert(t: string) {
-    alert(t);
+  add() {
+    if (isNotEmpty(this.model.value)) {
+      this.model.value = [...this.model.value, ...this.selectedResults];
+    } else {
+      this.model.value = this.selectedResults;
+    }
+
+    this.modalValuesString = '';
+    this.selectedResults = [];
+  }
+
+  removeSelection(uuid: string) {
+    this.model.value = this.model.value.filter((dso: DSpaceObject) => dso.uuid !== uuid);
   }
 }

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

@@ -5,12 +5,14 @@ export const DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_RELATION = 'LOOKUP_RELATION';
 
 export interface DynamicLookupRelationModelConfig extends DsDynamicInputModelConfig {
   value?: any;
+  repeatable: boolean;
 }
 
 export class DynamicLookupRelationModel extends DsDynamicInputModel {
 
   @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_RELATION;
   @serializable() value: any[];
+  @serializable() repeatable: boolean;
 
   constructor(config: DynamicLookupRelationModelConfig, layout?: DynamicFormControlLayout) {
 
@@ -18,6 +20,7 @@ export class DynamicLookupRelationModel extends DsDynamicInputModel {
 
     this.readOnly = true;
     this.disabled = true;
+    this.repeatable = config.repeatable;
     this.valueUpdates.next(config.value);
   }
 }

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

@@ -27,6 +27,7 @@ export abstract class FieldParser {
       && (this.configData.input.type !== 'list')
       && (this.configData.input.type !== 'tag')
       && (this.configData.input.type !== 'group')
+      && (this.configData.input.type !== 'lookup-relation')
     ) {
       let arrayCounter = 0;
       let fieldArrayCounter = 0;

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

@@ -1,5 +1,8 @@
 import { FieldParser } from './field-parser';
-import { DynamicLookupModel, DynamicLookupModelConfig } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup.model';
+import {
+  DynamicLookupModel,
+  DynamicLookupModelConfig
+} from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 import {
   DynamicLookupRelationModel,
@@ -9,9 +12,9 @@ import {
 export class LookupRelationFieldParser extends FieldParser {
 
   public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
-      const lookupModelConfig: DynamicLookupRelationModelConfig = this.initModel(null, label);
+    const lookupModelConfig: DynamicLookupRelationModelConfig = this.initModel(null, label);
+    lookupModelConfig.repeatable = this.configData.repeatable;
 
-
-      return new DynamicLookupRelationModel(lookupModelConfig);
+    return new DynamicLookupRelationModel(lookupModelConfig);
   }
 }

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

@@ -12,10 +12,10 @@
       (dfFocus)="onFocus($event)">
 
       <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
-        <!--Array with repeteable items-->
+        <!--Array with repeatable items-->
         <div *ngIf="!context.notRepeatable"
              class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
-          <div class="btn-group" role="group" aria-label="Basic example">
+          <div class="btn-group" role="group" aria-label="Add and remove button">
             <button type="button" class="btn btn-secondary"
                     [disabled]="isItemReadOnly(context, index)"
                     (click)="insertItem($event, group.context, group.index + 1)">
@@ -29,10 +29,10 @@
           </div>
         </div>
 
-        <!--Array with non repeteable items - Only delete button-->
+        <!--Array with non repeatable items - Only delete button-->
         <div *ngIf="context.notRepeatable && group.context.groups.length > 1"
              class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
-          <div class="btn-group" role="group" aria-label="Basic example">
+          <div class="btn-group" role="group" aria-label="Remove button">
             <button type="button" class="btn btn-secondary"
                     (click)="removeItem($event, context, index)"
                     [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">

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

@@ -1,49 +0,0 @@
-import { ChangeDetectorRef, Component, Inject } from '@angular/core';
-
-import { Observable } from 'rxjs';
-
-import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
-import { FormService } from '../../../shared/form/form.service';
-import { SectionModelComponent } from '../models/section.model';
-import { SectionDataObject } from '../models/section-data.model';
-import { renderSectionFor } from '../sections-decorator';
-import { SectionsType } from '../sections-type';
-import { SubmissionService } from '../../submission.service';
-import { SectionsService } from '../sections.service';
-import { CollectionDataService } from '../../../core/data/collection-data.service';
-import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
-
-/**
- * This component represents a section that contains a Form.
- */
-@Component({
-  selector: 'ds-submission-section-relationships',
-  styleUrls: ['./section-relationships.component.scss'],
-  templateUrl: './section-relationships.component.html',
-})
-@renderSectionFor(SectionsType.Relationships)
-export class SubmissionSectionRelationshipComponent extends SectionModelComponent {
-  constructor(protected changeDetectorRef: ChangeDetectorRef,
-              protected collectionDataService: CollectionDataService,
-              protected formBuilderService: FormBuilderService,
-              protected formService: FormService,
-              protected operationsBuilder: JsonPatchOperationsBuilder,
-              protected sectionService: SectionsService,
-              protected submissionService: SubmissionService,
-              @Inject('collectionIdProvider') public injectedCollectionId: string,
-              @Inject('sectionDataProvider') public injectedSectionData: SectionDataObject,
-              @Inject('submissionIdProvider') public injectedSubmissionId: string) {
-    super(injectedCollectionId, injectedSectionData, injectedSubmissionId);
-  }
-
-  protected getSectionStatus(): Observable<boolean> {
-    return undefined;
-  }
-
-  protected onSectionDestroy(): void {
-  }
-
-  protected onSectionInit(): void {
-  }
-
-}