From 369cb3eedfa30809e0a3ed60109832f00f2ee655 Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Tue, 19 Nov 2024 11:42:38 +0100
Subject: [PATCH 01/20] [DURACOM-304] Refactored item-bitstreams.component by
 removing page size of 9999

---
 .../item-bitstreams.component.html            |  3 ++
 .../item-bitstreams.component.ts              | 52 +++++++++++++++----
 src/assets/i18n/en.json5                      |  2 +
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
index 88d984c19f1..1822cf22dde 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
@@ -43,6 +43,9 @@
                                    [columnSizes]="columnSizes"
                                    (dropObject)="dropBitstream(bundle, $event)">
     </ds-item-edit-bitstream-bundle>
+    <div class="d-flex justify-content-center" *ngIf="showLoadMoreLink$ | async">
+      <div class="btn btn-link py-3" (click)="loadBundles()"> {{'item.edit.bitstreams.load-more.link' | translate}}</div>
+    </div>
   </div>
   <div *ngIf="bundles?.length === 0"
        class="alert alert-info w-100 d-inline-block mt-4" role="alert">
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
index 685ad006e03..480643f7630 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
@@ -20,6 +20,7 @@ import {
 } from '@ngx-translate/core';
 import { Operation } from 'fast-json-patch';
 import {
+  BehaviorSubject,
   combineLatest,
   Observable,
   Subscription,
@@ -29,7 +30,7 @@ import {
   filter,
   map,
   switchMap,
-  take,
+  take, tap,
 } from 'rxjs/operators';
 
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
@@ -64,6 +65,7 @@ import { VarDirective } from '../../../shared/utils/var.directive';
 import { AbstractItemUpdateComponent } from '../abstract-item-update/abstract-item-update.component';
 import { ItemEditBitstreamBundleComponent } from './item-edit-bitstream-bundle/item-edit-bitstream-bundle.component';
 import { ItemEditBitstreamDragHandleComponent } from './item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component';
+import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 
 @Component({
   selector: 'ds-item-bitstreams',
@@ -89,18 +91,18 @@ import { ItemEditBitstreamDragHandleComponent } from './item-edit-bitstream-drag
 export class ItemBitstreamsComponent extends AbstractItemUpdateComponent implements OnDestroy {
 
   /**
-   * The currently listed bundles
+   * All bundles for the current item
    */
-  bundles$: Observable<Bundle[]>;
+  private bundlesSubject = new BehaviorSubject<Bundle[]>([]);
 
   /**
    * The page options to use for fetching the bundles
    */
-  bundlesOptions = {
+  bundlesOptions: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
     id: 'bundles-pagination-options',
     currentPage: 1,
-    pageSize: 9999,
-  } as any;
+    pageSize: 10,
+  });
 
   /**
    * The bootstrap sizes used for the columns within this table
@@ -128,6 +130,18 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
    */
   itemUpdateSubscription: Subscription;
 
+  /**
+   * The flag indicating to show the load more link
+   */
+  showLoadMoreLink$: BehaviorSubject<boolean> = new BehaviorSubject(true);
+
+  /**
+   * The list of bundles for the current item as an observable
+   */
+  get bundles$(): Observable<Bundle[]> {
+    return this.bundlesSubject.asObservable();
+  }
+
   constructor(
     public itemService: ItemDataService,
     public objectUpdatesService: ObjectUpdatesService,
@@ -149,11 +163,7 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
    * Actions to perform after the item has been initialized
    */
   postItemInit(): void {
-    this.bundles$ = this.itemService.getBundles(this.item.id, new PaginatedSearchOptions({ pagination: this.bundlesOptions })).pipe(
-      getFirstSucceededRemoteData(),
-      getRemoteDataPayload(),
-      map((bundlePage: PaginatedList<Bundle>) => bundlePage.page),
-    );
+    this.loadBundles(1);
   }
 
   /**
@@ -163,6 +173,26 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
     this.notificationsPrefix = 'item.edit.bitstreams.notifications.';
   }
 
+  /**
+   * Load bundles for the current item
+   * @param currentPage The current page to load
+   */
+  loadBundles(currentPage?: number) {
+    this.bundlesOptions = Object.assign(new PaginationComponentOptions(), this.bundlesOptions, {
+      currentPage: currentPage || this.bundlesOptions.currentPage + 1,
+    });
+    this.itemService.getBundles(this.item.id, new PaginatedSearchOptions({pagination: this.bundlesOptions})).pipe(
+      getFirstSucceededRemoteData(),
+      getRemoteDataPayload(),
+      tap((bundlesPL: PaginatedList<Bundle>) =>
+        this.showLoadMoreLink$.next(bundlesPL.pageInfo.currentPage < bundlesPL.pageInfo.totalPages)
+      ),
+      map((bundlePage: PaginatedList<Bundle>) => bundlePage.page),
+    ).subscribe((bundles: Bundle[]) => {
+      this.bundlesSubject.next([...this.bundlesSubject.getValue(), ...bundles]);
+    });
+  }
+
 
   /**
    * Submit the current changes
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 532fc849ffc..cec81012cb7 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2274,6 +2274,8 @@
 
   "item.edit.bitstreams.upload-button": "Upload",
 
+  "item.edit.bitstreams.load-more.link": "Load more",
+
   "item.edit.delete.cancel": "Cancel",
 
   "item.edit.delete.confirm": "Delete",

From 017d110da0d99e51ee3e66f222d58cbd3e1d5434 Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Tue, 19 Nov 2024 15:38:50 +0100
Subject: [PATCH 02/20] [DURACOM-304] Refactored edit-bitstream-page.component
 by removing page size of 9999

---
 .../edit-bitstream-page.component.ts          | 33 +++++++++++++++----
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
index 36b0816ade1..d276e452c5b 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
@@ -31,13 +31,16 @@ import cloneDeep from 'lodash/cloneDeep';
 import {
   combineLatest,
   combineLatest as observableCombineLatest,
+  EMPTY,
   Observable,
   of as observableOf,
   Subscription,
 } from 'rxjs';
 import {
+  expand,
   filter,
   map,
+  reduce,
   switchMap,
   tap,
 } from 'rxjs/operators';
@@ -178,7 +181,10 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   /**
    * Options for fetching all bitstream formats
    */
-  findAllOptions = { elementsPerPage: 9999 };
+  findAllOptions = {
+    elementsPerPage: 20,
+    currentPage: 1
+  };
 
   /**
    * The Dynamic Input Model for the file's name
@@ -463,14 +469,27 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     this.itemId = this.route.snapshot.queryParams.itemId;
     this.entityType = this.route.snapshot.queryParams.entityType;
     this.bitstreamRD$ = this.route.data.pipe(map((data: any) => data.bitstream));
-    this.bitstreamFormatsRD$ = this.bitstreamFormatService.findAll(this.findAllOptions);
 
-    const bitstream$ = this.bitstreamRD$.pipe(
+    this.bitstreamFormatsRD$ = this.bitstreamFormatService.findAll(this.findAllOptions).pipe(
       getFirstSucceededRemoteData(),
-      getRemoteDataPayload(),
+      expand((response: RemoteData<PaginatedList<BitstreamFormat>>) => {
+        const pageInfo = response.payload.pageInfo;
+        if (pageInfo.currentPage < pageInfo.totalPages) {
+          const nextPageOptions = { ...this.findAllOptions, currentPage: pageInfo.currentPage + 1 };
+          return this.bitstreamFormatService.findAll(nextPageOptions).pipe(getFirstSucceededRemoteData());
+        } else {
+          return EMPTY;
+        }
+      }),
     );
 
-    const allFormats$ = this.bitstreamFormatsRD$.pipe(
+    const bitstreamFormats$ = this.bitstreamFormatsRD$.pipe(
+      reduce((acc: BitstreamFormat[], response: RemoteData<PaginatedList<BitstreamFormat>>) => {
+          return acc.concat(response.payload.page);
+        }, [])
+    )
+
+    const bitstream$ = this.bitstreamRD$.pipe(
       getFirstSucceededRemoteData(),
       getRemoteDataPayload(),
     );
@@ -493,14 +512,14 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     this.subs.push(
       observableCombineLatest(
         bitstream$,
-        allFormats$,
+        bitstreamFormats$,
         bundle$,
         primaryBitstream$,
         item$,
       ).pipe()
         .subscribe(([bitstream, allFormats, bundle, primaryBitstream, item]) => {
           this.bitstream = bitstream as Bitstream;
-          this.formats = allFormats.page;
+          this.formats = allFormats;
           this.bundle = bundle;
           // hasValue(primaryBitstream) because if there's no primaryBitstream on the bundle it will
           // be a success response, but empty

From a9d151801b65088817496c02e7f1a9c811bec909 Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Wed, 20 Nov 2024 15:23:09 +0100
Subject: [PATCH 03/20] [DURACOM-304] Refactored scripts-select.component by
 using infinite scroll instead of page size 9999

---
 .../scripts-select.component.html             |  58 ++++++---
 .../scripts-select.component.scss             |  23 ++++
 .../scripts-select.component.ts               | 111 ++++++++++++------
 3 files changed, 138 insertions(+), 54 deletions(-)

diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.html b/src/app/process-page/form/scripts-select/scripts-select.component.html
index 9cd86d1a6d0..8b040308c4d 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.html
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.html
@@ -1,20 +1,46 @@
-<div class="form-group" *ngIf="scripts$ | async">
-    <label for="process-script">{{'process.new.select-script' | translate}}</label>
-    <select required id="process-script"
-            class="form-control"
-            name="script"
-            [(ngModel)]="selectedScript"
-            #script="ngModel">
-        <option [ngValue]="undefined">{{'process.new.select-script.placeholder' | translate}}</option>
-        <option *ngFor="let script of scripts$ | async" [ngValue]="script.id">
-            {{script.name}}
-        </option>
-    </select>
-
+<div class="d-flex w-100 flex-column gap-3">
+  <div>
+    <div ngbDropdown class="d-flex">
+      <input id="process-script"
+             class="form-control"
+             required
+             [ngModel]="selectedScript"
+             placeholder="{{'process.new.select-script.placeholder' | translate}}"
+             [ngModelOptions]="{standalone: true}"
+             ngbDropdownToggle
+             #script="ngModel">
+      <div ngbDropdownMenu aria-labelledby="process-script" class="w-100 scrollable-menu"
+            role="menu"
+            (scroll)="onScroll($event)"
+            infiniteScroll
+            [infiniteScrollDistance]="5"
+            [infiniteScrollThrottle]="300"
+            [infiniteScrollUpDistance]="1.5"
+            [fromRoot]="true"
+            [scrollWindow]="false">
+            <button class="dropdown-item"
+                    *ngFor="let script of scripts"
+                    role="menuitem"
+                    type="button"
+                    title="{{ script.name }}"
+                    (click)="onSelect(script);">
+              <span class="text-truncate">{{ script.name }}</span>
+            </button>
+          <ng-container *ngIf="(isLoading$ | async)">
+            <button class="dropdown-item disabled" role="menuitem">
+              <ds-loading message="{{'loading.default' | translate}}">
+              </ds-loading>
+            </button>
+          </ng-container>
+      </div>
+    </div>
+  </div>
+  <div>
     <div *ngIf="script.invalid && (script.dirty || script.touched)"
          class="alert alert-danger validation-error">
-        <div *ngIf="script.errors.required">
-            {{'process.new.select-script.required' | translate}}
-        </div>
+      <div *ngIf="script.errors.required">
+        {{ 'process.new.select-script.required' | translate }}
+      </div>
     </div>
+  </div>
 </div>
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.scss b/src/app/process-page/form/scripts-select/scripts-select.component.scss
index e69de29bb2d..4f9ca623107 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.scss
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.scss
@@ -0,0 +1,23 @@
+.dropdown-item {
+  padding: 0.35rem 1rem;
+
+  &:active {
+    color: white !important;
+  }
+}
+
+.scrollable-menu {
+  height: auto;
+  max-height: var(--ds-dropdown-menu-max-height);
+  overflow-x: hidden;
+}
+
+li:not(:last-of-type) .dropdown-item {
+  border-bottom: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
+}
+
+#entityControlsDropdownMenu {
+  outline: 0;
+  left: 0 !important;
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.ts b/src/app/process-page/form/scripts-select/scripts-select.component.ts
index 63c11bd91a7..9e39932f136 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.ts
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.ts
@@ -19,34 +19,33 @@ import {
 } from '@angular/forms';
 import {
   ActivatedRoute,
-  Params,
   Router,
 } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import {
-  Observable,
+  BehaviorSubject,
   Subscription,
 } from 'rxjs';
 import {
-  distinctUntilChanged,
-  filter,
   map,
-  switchMap,
-  take,
+  tap,
 } from 'rxjs/operators';
 
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { ScriptDataService } from '../../../core/data/processes/script-data.service';
 import {
-  getFirstSucceededRemoteData,
+  getFirstCompletedRemoteData,
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
 import {
-  hasNoValue,
   hasValue,
 } from '../../../shared/empty.util';
 import { Script } from '../../scripts/script.model';
+import { FindListOptions } from '../../../core/data/find-list-options.model';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
 import { controlContainerFactory } from '../process-form-factory';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 const SCRIPT_QUERY_PARAMETER = 'script';
 
@@ -61,7 +60,7 @@ const SCRIPT_QUERY_PARAMETER = 'script';
     useFactory: controlContainerFactory,
     deps: [[new Optional(), NgForm]] }],
   standalone: true,
-  imports: [NgIf, FormsModule, NgFor, AsyncPipe, TranslateModule],
+  imports: [NgIf, FormsModule, NgFor, AsyncPipe, TranslateModule, InfiniteScrollModule, ThemedLoadingComponent, NgbDropdownModule],
 })
 export class ScriptsSelectComponent implements OnInit, OnDestroy {
   /**
@@ -71,9 +70,19 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
   /**
    * All available scripts
    */
-  scripts$: Observable<Script[]>;
+  scripts: Script[] = [];
+
   private _selectedScript: Script;
-  private routeSub: Subscription;
+  private subscription: Subscription;
+
+  private _isLastPage = false;
+
+  scriptOptions: FindListOptions = {
+    elementsPerPage: 20,
+    currentPage: 1,
+  };
+
+  isLoading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   constructor(
     private scriptService: ScriptDataService,
@@ -87,31 +96,46 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
    * Checks if the route contains a script ID and auto selects this scripts
    */
   ngOnInit() {
-    this.scripts$ = this.scriptService.findAll({ elementsPerPage: 9999 })
-      .pipe(
-        getFirstSucceededRemoteData(),
-        getRemoteDataPayload(),
-        map((paginatedList: PaginatedList<Script>) => paginatedList.page),
-      );
-
-    this.routeSub = this.route.queryParams
-      .pipe(
-        filter((params: Params) => hasNoValue(params.id)),
-        map((params: Params) => params[SCRIPT_QUERY_PARAMETER]),
-        distinctUntilChanged(),
-        switchMap((id: string) =>
-          this.scripts$
-            .pipe(
-              take(1),
-              map((scripts) =>
-                scripts.find((script) => script.id === id),
-              ),
-            ),
-        ),
-      ).subscribe((script: Script) => {
-        this._selectedScript = script;
-        this.select.emit(script);
-      });
+    this.loadScripts();
+  }
+
+  /**
+   * Load the scripts and check if the route contains a script
+   */
+  loadScripts() {
+    if (this.isLoading$.value) return;
+    this.isLoading$.next(true);
+
+    this.subscription = this.scriptService.findAll(this.scriptOptions).pipe(
+      getFirstCompletedRemoteData(),
+      getRemoteDataPayload(),
+      tap((paginatedList: PaginatedList<Script>) => {
+        this._isLastPage = paginatedList?.pageInfo?.currentPage >= paginatedList?.pageInfo?.totalPages;
+      }),
+      map((paginatedList: PaginatedList<Script>) => paginatedList.page),
+    ).subscribe((newScripts: Script[]) => {
+      this.scripts = [...this.scripts, ...newScripts];
+      this.isLoading$.next(false);
+
+      const param = this.route.snapshot.queryParams[SCRIPT_QUERY_PARAMETER];
+      if (hasValue(param)) {
+        this._selectedScript = this.scripts.find((script) => script.id === param);
+        this.select.emit(this._selectedScript);
+      }
+    });
+  }
+
+  /**
+   * Load more scripts when the user scrolls to the bottom of the list
+   * @param event The scroll event
+   */
+  onScroll(event: any) {
+    if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
+      if (!this.isLoading$.value && !this._isLastPage) {
+        this.scriptOptions.currentPage++;
+        this.loadScripts();
+      }
+    }
   }
 
   /**
@@ -133,14 +157,25 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
     );
   }
 
+  selectScript(script: Script) {
+    this._selectedScript = script;
+  }
+
+  onSelect(newScript: Script) {
+    this.selectScript(newScript);
+    // this._selectedScript = newScript;
+    this.select.emit(newScript);
+    this.selectedScript = newScript.name;
+  }
+
   @Input()
   set script(value: Script) {
     this._selectedScript = value;
   }
 
   ngOnDestroy(): void {
-    if (hasValue(this.routeSub)) {
-      this.routeSub.unsubscribe();
+    if (hasValue(this.subscription)) {
+      this.subscription.unsubscribe();
     }
   }
 }

From 850a95172d382ed77b0d23d5e5f688864baeb2ec Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Wed, 20 Nov 2024 15:39:05 +0100
Subject: [PATCH 04/20] [DURACOM-304] Refactored dynamic-list.component.ts by
 removing page size of 9999

---
 .../models/list/dynamic-list.component.ts     | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
index 8dc19267e8f..9bdf43364f5 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
@@ -39,6 +39,8 @@ import {
 import { FormBuilderService } from '../../../form-builder.service';
 import { DynamicListCheckboxGroupModel } from './dynamic-list-checkbox-group.model';
 import { DynamicListRadioGroupModel } from './dynamic-list-radio-group.model';
+import { EMPTY, reduce } from 'rxjs';
+import { expand } from 'rxjs/operators';
 
 export interface ListItem {
   id: string;
@@ -142,18 +144,33 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
       if (this.model.repeatable && this.model.required) {
         listGroup.addValidators(this.hasAtLeastOneVocabularyEntry());
       }
-      const pageInfo: PageInfo = new PageInfo({
-        elementsPerPage: 9999, currentPage: 1,
+
+      const initialPageInfo: PageInfo = new PageInfo({
+        elementsPerPage: 20, currentPage: 1,
       } as PageInfo);
-      this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, pageInfo).pipe(
+
+      this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, initialPageInfo).pipe(
         getFirstSucceededRemoteDataPayload(),
-      ).subscribe((entries: PaginatedList<VocabularyEntry>) => {
+        expand((entries: PaginatedList<VocabularyEntry>) => {
+          if (entries.pageInfo.currentPage < entries.pageInfo.totalPages) {
+            const nextPageInfo: PageInfo = new PageInfo({
+              elementsPerPage: 20, currentPage: entries.pageInfo.currentPage + 1,
+            } as PageInfo);
+            return this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, nextPageInfo).pipe(
+              getFirstSucceededRemoteDataPayload()
+            );
+          } else {
+            return EMPTY;
+          }
+        }),
+        reduce((acc: VocabularyEntry[], entries: PaginatedList<VocabularyEntry>) => acc.concat(entries.page), [])
+      ).subscribe((allEntries: VocabularyEntry[]) => {
         let groupCounter = 0;
         let itemsPerGroup = 0;
         let tempList: ListItem[] = [];
-        this.optionsList = entries.page;
+        this.optionsList = allEntries;
         // Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
-        entries.page.forEach((option: VocabularyEntry, key: number) => {
+        allEntries.forEach((option: VocabularyEntry, key: number) => {
           const value = option.authority || option.value;
           const checked: boolean = isNotEmpty(findKey(
             this.model.value,

From 4cd5e0aee170f749f451bc24496d3f55e0cbcc61 Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Wed, 20 Nov 2024 16:51:04 +0100
Subject: [PATCH 05/20] [DURACOM-304] Refactored
 relationship-type-data.service.ts by removing page size of 9999

---
 .../data/relationship-type-data.service.ts    | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/app/core/data/relationship-type-data.service.ts b/src/app/core/data/relationship-type-data.service.ts
index 43c018bbce2..23125e82da1 100644
--- a/src/app/core/data/relationship-type-data.service.ts
+++ b/src/app/core/data/relationship-type-data.service.ts
@@ -1,11 +1,15 @@
 import { Injectable } from '@angular/core';
 import {
   combineLatest as observableCombineLatest,
+  EMPTY,
+  from,
   Observable,
 } from 'rxjs';
 import {
+  expand,
   map,
   mergeMap,
+  reduce,
   switchMap,
   toArray,
 } from 'rxjs/operators';
@@ -75,11 +79,26 @@ export class RelationshipTypeDataService extends BaseDataService<RelationshipTyp
    */
   getRelationshipTypeByLabelAndTypes(relationshipTypeLabel: string, firstItemType: string, secondItemType: string): Observable<RelationshipType> {
     // Retrieve all relationship types from the server in a single page
-    return this.findAllData.findAll({ currentPage: 1, elementsPerPage: 9999 }, true, true, followLink('leftType'), followLink('rightType'))
+    const initialPageInfo = { currentPage: 1, elementsPerPage: 20 };
+    return this.findAllData.findAll(initialPageInfo, true, true, followLink('leftType'), followLink('rightType'))
       .pipe(
         getFirstSucceededRemoteData(),
         // Emit each type in the page array separately
-        switchMap((typeListRD: RemoteData<PaginatedList<RelationshipType>>) => typeListRD.payload.page),
+        expand((typeListRD: RemoteData<PaginatedList<RelationshipType>>) => {
+          const currentPage = typeListRD.payload.pageInfo.currentPage;
+          const totalPages = typeListRD.payload.pageInfo.totalPages;
+          if (currentPage < totalPages) {
+            const nextPageInfo = { currentPage: currentPage + 1, elementsPerPage: 20 };
+            return this.findAllData.findAll(nextPageInfo, true, true, followLink('leftType'), followLink('rightType')).pipe(
+              getFirstSucceededRemoteData()
+            );
+          } else {
+            return EMPTY;
+          }
+        }),
+        // Collect all pages into a single array
+        reduce((acc: RelationshipType[], typeListRD: RemoteData<PaginatedList<RelationshipType>>) => acc.concat(typeListRD.payload.page), []),
+        mergeMap((relationshipTypes: RelationshipType[]) => from(relationshipTypes)),
         // Check each type individually, to see if it matches the provided types
         mergeMap((relationshipType: RelationshipType) => {
           if (relationshipType.leftwardType === relationshipTypeLabel) {

From 4830e4611211e21ceedc26b05f74c696c94f5b0b Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Thu, 21 Nov 2024 10:15:00 +0100
Subject: [PATCH 06/20] [DURACOM-304] removed unneeded selectAll method
 (dynamic-lookup-relation-search-tab.component)

---
 ...okup-relation-search-tab.component.spec.ts | 12 --------
 ...ic-lookup-relation-search-tab.component.ts | 29 -------------------
 2 files changed, 41 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.spec.ts
index fdc1f6de019..e21f8328d28 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.spec.ts
@@ -164,18 +164,6 @@ describe('DsDynamicLookupRelationSearchTabComponent', () => {
     });
   });
 
-  describe('selectAll', () => {
-    beforeEach(() => {
-      spyOn(component.selectObject, 'emit');
-      component.selectAll();
-    });
-
-    it('should emit the page filtered from already selected objects and call select on the service for all objects', () => {
-      expect(component.selectObject.emit).toHaveBeenCalledWith(searchResult3);
-      expect(selectableListService.select).toHaveBeenCalledWith(listID, [searchResult1, searchResult2, searchResult3]);
-    });
-  });
-
   describe('deselectAll', () => {
     beforeEach(() => {
       spyOn(component.deselectObject, 'emit');
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts
index b72fbf40a80..c9c181bab9e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts
@@ -240,35 +240,6 @@ export class DsDynamicLookupRelationSearchTabComponent implements OnInit, OnDest
     this.selectableListService.deselect(this.listId, page);
   }
 
-  /**
-   * Select all items that were found using the current search query
-   */
-  selectAll() {
-    this.allSelected = true;
-    this.selectAllLoading = true;
-    const fullPagination = Object.assign(new PaginationComponentOptions(), {
-      currentPage: 1,
-      pageSize: 9999,
-    });
-    const fullSearchConfig = Object.assign(this.lookupRelationService.searchConfig, { pagination: fullPagination });
-    const results$ = this.searchService.search<Item>(fullSearchConfig);
-    results$.pipe(
-      getFirstSucceededRemoteData(),
-      map((resultsRD) => resultsRD.payload.page),
-      tap(() => this.selectAllLoading = false),
-      switchMap((results) => this.selection$.pipe(
-        take(1),
-        tap((selection: SearchResult<Item>[]) => {
-          const filteredResults = results.filter((pageItem) => selection.findIndex((selected) => selected.equals(pageItem)) < 0);
-          this.selectObject.emit(...filteredResults);
-        }),
-        mapTo(results),
-      )),
-    ).subscribe((results) => {
-      this.selectableListService.select(this.listId, results);
-    });
-  }
-
   /**
    * setSelectedIds select all the items from the results that have relationship
    * @param idOfItems the uuid of items that are being checked

From ebb408e492f21f529d7a678734a7b5856b359f41 Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Thu, 21 Nov 2024 12:00:17 +0100
Subject: [PATCH 07/20] [DURACOM-304] Refactored
 submission-section-cc-licenses.component.ts by removing page size of 9999

---
 ...ubmission-section-cc-licenses.component.ts | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
index d286a830e2f..74e51287480 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
@@ -8,19 +8,23 @@ import {
   Inject,
 } from '@angular/core';
 import {
+  NgbDropdownModule,
   NgbModal,
   NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import {
+  EMPTY,
   Observable,
   of as observableOf,
   Subscription,
 } from 'rxjs';
 import {
   distinctUntilChanged,
+  expand,
   filter,
   map,
+  reduce,
   take,
 } from 'rxjs/operators';
 
@@ -48,6 +52,8 @@ import { SectionModelComponent } from '../models/section.model';
 import { SectionDataObject } from '../models/section-data.model';
 import { SectionsService } from '../sections.service';
 import { SectionsType } from '../sections-type';
+import { RemoteData } from '../../../core/data/remote-data';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
 
 /**
  * This component represents the submission section to select the Creative Commons license.
@@ -64,6 +70,7 @@ import { SectionsType } from '../sections-type';
     VarDirective,
     NgForOf,
     DsSelectComponent,
+    NgbDropdownModule,
   ],
   standalone: true,
 })
@@ -300,12 +307,25 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
         }
         this.sectionData.data = data;
       }),
-      this.submissionCcLicensesDataService.findAll({ elementsPerPage: 9999 }).pipe(
+      this.submissionCcLicensesDataService.findAll({ currentPage: 1, elementsPerPage: 20 }).pipe(
         getFirstSucceededRemoteData(),
-        getRemoteDataPayload(),
-        map((list) => list.page),
+        expand((typeListRD: RemoteData<PaginatedList<SubmissionCcLicence>>) => {
+          const currentPage = typeListRD.payload.pageInfo.currentPage;
+          const totalPages = typeListRD.payload.pageInfo.totalPages;
+          if (currentPage < totalPages) {
+            const nextPageInfo = { currentPage: currentPage + 1, elementsPerPage: 20 };
+            return this.submissionCcLicensesDataService.findAll(nextPageInfo).pipe(
+              getFirstSucceededRemoteData()
+            );
+          } else {
+            return EMPTY;
+          }
+        }),
+        reduce((acc: SubmissionCcLicence[], typeListRD: RemoteData<PaginatedList<SubmissionCcLicence>>) => acc.concat(typeListRD.payload.page), []),
       ).subscribe(
-        (licenses) => this.submissionCcLicenses = licenses,
+        (licenses) => {
+          this.submissionCcLicenses = licenses;
+        },
       ),
       this.configService.findByPropertyName('cc.license.jurisdiction').pipe(
         getFirstCompletedRemoteData(),

From 4642ed1791e6a196a49bf423336f98a2e5860dae Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Thu, 21 Nov 2024 12:17:19 +0100
Subject: [PATCH 08/20] [DURACOM-304] lint fix

---
 .../edit-bitstream-page.component.ts               |  8 ++++----
 .../core/data/relationship-type-data.service.ts    |  3 +--
 .../item-bitstreams/item-bitstreams.component.ts   |  9 +++++----
 .../scripts-select/scripts-select.component.ts     | 14 ++++++--------
 .../models/list/dynamic-list.component.ts          | 11 +++++++----
 ...dynamic-lookup-relation-search-tab.component.ts |  9 +--------
 .../submission-section-cc-licenses.component.ts    |  6 +++---
 7 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
index d276e452c5b..3e022e8c377 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
@@ -183,7 +183,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    */
   findAllOptions = {
     elementsPerPage: 20,
-    currentPage: 1
+    currentPage: 1,
   };
 
   /**
@@ -485,9 +485,9 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
 
     const bitstreamFormats$ = this.bitstreamFormatsRD$.pipe(
       reduce((acc: BitstreamFormat[], response: RemoteData<PaginatedList<BitstreamFormat>>) => {
-          return acc.concat(response.payload.page);
-        }, [])
-    )
+        return acc.concat(response.payload.page);
+      }, []),
+    );
 
     const bitstream$ = this.bitstreamRD$.pipe(
       getFirstSucceededRemoteData(),
diff --git a/src/app/core/data/relationship-type-data.service.ts b/src/app/core/data/relationship-type-data.service.ts
index 23125e82da1..dc553973ee5 100644
--- a/src/app/core/data/relationship-type-data.service.ts
+++ b/src/app/core/data/relationship-type-data.service.ts
@@ -10,7 +10,6 @@ import {
   map,
   mergeMap,
   reduce,
-  switchMap,
   toArray,
 } from 'rxjs/operators';
 
@@ -90,7 +89,7 @@ export class RelationshipTypeDataService extends BaseDataService<RelationshipTyp
           if (currentPage < totalPages) {
             const nextPageInfo = { currentPage: currentPage + 1, elementsPerPage: 20 };
             return this.findAllData.findAll(nextPageInfo, true, true, followLink('leftType'), followLink('rightType')).pipe(
-              getFirstSucceededRemoteData()
+              getFirstSucceededRemoteData(),
             );
           } else {
             return EMPTY;
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
index 480643f7630..3c105f15ecf 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
@@ -30,7 +30,8 @@ import {
   filter,
   map,
   switchMap,
-  take, tap,
+  take,
+  tap,
 } from 'rxjs/operators';
 
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
@@ -57,6 +58,7 @@ import {
 } from '../../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { ResponsiveColumnSizes } from '../../../shared/responsive-table-sizes/responsive-column-sizes';
 import { ResponsiveTableSizes } from '../../../shared/responsive-table-sizes/responsive-table-sizes';
 import { PaginatedSearchOptions } from '../../../shared/search/models/paginated-search-options.model';
@@ -65,7 +67,6 @@ import { VarDirective } from '../../../shared/utils/var.directive';
 import { AbstractItemUpdateComponent } from '../abstract-item-update/abstract-item-update.component';
 import { ItemEditBitstreamBundleComponent } from './item-edit-bitstream-bundle/item-edit-bitstream-bundle.component';
 import { ItemEditBitstreamDragHandleComponent } from './item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 
 @Component({
   selector: 'ds-item-bitstreams',
@@ -181,11 +182,11 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
     this.bundlesOptions = Object.assign(new PaginationComponentOptions(), this.bundlesOptions, {
       currentPage: currentPage || this.bundlesOptions.currentPage + 1,
     });
-    this.itemService.getBundles(this.item.id, new PaginatedSearchOptions({pagination: this.bundlesOptions})).pipe(
+    this.itemService.getBundles(this.item.id, new PaginatedSearchOptions({ pagination: this.bundlesOptions })).pipe(
       getFirstSucceededRemoteData(),
       getRemoteDataPayload(),
       tap((bundlesPL: PaginatedList<Bundle>) =>
-        this.showLoadMoreLink$.next(bundlesPL.pageInfo.currentPage < bundlesPL.pageInfo.totalPages)
+        this.showLoadMoreLink$.next(bundlesPL.pageInfo.currentPage < bundlesPL.pageInfo.totalPages),
       ),
       map((bundlePage: PaginatedList<Bundle>) => bundlePage.page),
     ).subscribe((bundles: Bundle[]) => {
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.ts b/src/app/process-page/form/scripts-select/scripts-select.component.ts
index 9e39932f136..9eccb7ceffc 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.ts
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.ts
@@ -21,7 +21,9 @@ import {
   ActivatedRoute,
   Router,
 } from '@angular/router';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import {
   BehaviorSubject,
   Subscription,
@@ -31,21 +33,17 @@ import {
   tap,
 } from 'rxjs/operators';
 
+import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { ScriptDataService } from '../../../core/data/processes/script-data.service';
 import {
   getFirstCompletedRemoteData,
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
-import {
-  hasValue,
-} from '../../../shared/empty.util';
-import { Script } from '../../scripts/script.model';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { hasValue } from '../../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
+import { Script } from '../../scripts/script.model';
 import { controlContainerFactory } from '../process-form-factory';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 const SCRIPT_QUERY_PARAMETER = 'script';
 
@@ -103,7 +101,7 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
    * Load the scripts and check if the route contains a script
    */
   loadScripts() {
-    if (this.isLoading$.value) return;
+    if (this.isLoading$.value) {return;}
     this.isLoading$.next(true);
 
     this.subscription = this.scriptService.findAll(this.scriptOptions).pipe(
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
index 9bdf43364f5..79af663cfc4 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
@@ -26,6 +26,11 @@ import {
   DynamicFormValidationService,
 } from '@ng-dynamic-forms/core';
 import findKey from 'lodash/findKey';
+import {
+  EMPTY,
+  reduce,
+} from 'rxjs';
+import { expand } from 'rxjs/operators';
 
 import { PaginatedList } from '../../../../../../core/data/paginated-list.model';
 import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/shared/operators';
@@ -39,8 +44,6 @@ import {
 import { FormBuilderService } from '../../../form-builder.service';
 import { DynamicListCheckboxGroupModel } from './dynamic-list-checkbox-group.model';
 import { DynamicListRadioGroupModel } from './dynamic-list-radio-group.model';
-import { EMPTY, reduce } from 'rxjs';
-import { expand } from 'rxjs/operators';
 
 export interface ListItem {
   id: string;
@@ -157,13 +160,13 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
               elementsPerPage: 20, currentPage: entries.pageInfo.currentPage + 1,
             } as PageInfo);
             return this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, nextPageInfo).pipe(
-              getFirstSucceededRemoteDataPayload()
+              getFirstSucceededRemoteDataPayload(),
             );
           } else {
             return EMPTY;
           }
         }),
-        reduce((acc: VocabularyEntry[], entries: PaginatedList<VocabularyEntry>) => acc.concat(entries.page), [])
+        reduce((acc: VocabularyEntry[], entries: PaginatedList<VocabularyEntry>) => acc.concat(entries.page), []),
       ).subscribe((allEntries: VocabularyEntry[]) => {
         let groupCounter = 0;
         let itemsPerGroup = 0;
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts
index c9c181bab9e..ceee05fee06 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts
@@ -16,13 +16,7 @@ import {
   BehaviorSubject,
   Observable,
 } from 'rxjs';
-import {
-  map,
-  mapTo,
-  switchMap,
-  take,
-  tap,
-} from 'rxjs/operators';
+import { take } from 'rxjs/operators';
 
 import { LookupRelationService } from '../../../../../../core/data/lookup-relation.service';
 import { PaginatedList } from '../../../../../../core/data/paginated-list.model';
@@ -44,7 +38,6 @@ import { hasValue } from '../../../../../empty.util';
 import { CollectionElementLinkType } from '../../../../../object-collection/collection-element-link.type';
 import { ListableObject } from '../../../../../object-collection/shared/listable-object.model';
 import { SelectableListService } from '../../../../../object-list/selectable-list/selectable-list.service';
-import { PaginationComponentOptions } from '../../../../../pagination/pagination-component-options.model';
 import { SearchObjects } from '../../../../../search/models/search-objects.model';
 import { SearchResult } from '../../../../../search/models/search-result.model';
 import { ThemedSearchComponent } from '../../../../../search/themed-search.component';
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
index 74e51287480..04ea4b7274e 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
@@ -29,6 +29,8 @@ import {
 } from 'rxjs/operators';
 
 import { ConfigurationDataService } from '../../../core/data/configuration-data.service';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../core/data/remote-data';
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
 import {
@@ -52,8 +54,6 @@ import { SectionModelComponent } from '../models/section.model';
 import { SectionDataObject } from '../models/section-data.model';
 import { SectionsService } from '../sections.service';
 import { SectionsType } from '../sections-type';
-import { RemoteData } from '../../../core/data/remote-data';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
 
 /**
  * This component represents the submission section to select the Creative Commons license.
@@ -315,7 +315,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
           if (currentPage < totalPages) {
             const nextPageInfo = { currentPage: currentPage + 1, elementsPerPage: 20 };
             return this.submissionCcLicensesDataService.findAll(nextPageInfo).pipe(
-              getFirstSucceededRemoteData()
+              getFirstSucceededRemoteData(),
             );
           } else {
             return EMPTY;

From ac7af44c1dfb5387beabbbea83ff3a6628d151ec Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Thu, 21 Nov 2024 12:29:54 +0100
Subject: [PATCH 09/20] [DURACOM-304] test fix

---
 .../form/scripts-select/scripts-select.component.spec.ts      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts b/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts
index 6b8c39eb8f3..7b095926fbb 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts
@@ -87,7 +87,7 @@ describe('ScriptsSelectComponent', () => {
     fixture.detectChanges();
     tick();
 
-    const select = fixture.debugElement.query(By.css('select'));
+    const select = fixture.debugElement.query(By.css('#process-script'));
     select.triggerEventHandler('blur', null);
 
     fixture.detectChanges();
@@ -101,7 +101,7 @@ describe('ScriptsSelectComponent', () => {
     fixture.detectChanges();
     tick();
 
-    const select = fixture.debugElement.query(By.css('select'));
+    const select = fixture.debugElement.query(By.css('#process-script'));
     select.triggerEventHandler('blur', null);
 
     fixture.detectChanges();

From b43e1f4a8714cc596352d007fce5605561f00400 Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Thu, 21 Nov 2024 14:52:40 +0100
Subject: [PATCH 10/20] [DURACOM-304] fix accessibility issue on scripts-select

---
 .../form/scripts-select/scripts-select.component.html            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.html b/src/app/process-page/form/scripts-select/scripts-select.component.html
index 8b040308c4d..6b521e8d408 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.html
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.html
@@ -8,6 +8,7 @@
              placeholder="{{'process.new.select-script.placeholder' | translate}}"
              [ngModelOptions]="{standalone: true}"
              ngbDropdownToggle
+             role="button"
              #script="ngModel">
       <div ngbDropdownMenu aria-labelledby="process-script" class="w-100 scrollable-menu"
             role="menu"

From 335fe621a003650e628b7a723d542c4a62d72889 Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Thu, 21 Nov 2024 15:31:41 +0100
Subject: [PATCH 11/20] [DURACOM-304] Refactor of bundle-data.service.ts by
 removing page size of 9999

---
 src/app/core/data/bitstream-data.service.ts |  5 ++-
 src/app/core/data/bundle-data.service.ts    | 46 ++++++++++++++++++++-
 src/app/core/metadata/head-tag.service.ts   |  2 +
 3 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/app/core/data/bitstream-data.service.ts b/src/app/core/data/bitstream-data.service.ts
index b8776d25309..9455a456fa7 100644
--- a/src/app/core/data/bitstream-data.service.ts
+++ b/src/app/core/data/bitstream-data.service.ts
@@ -241,11 +241,12 @@ export class BitstreamDataService extends IdentifiableDataService<Bitstream> imp
    *                                    no valid cached version. Defaults to true
    * @param reRequestOnStale            Whether or not the request should automatically be re-
    *                                    requested after the response becomes stale
+   * @param options                     the {@link FindListOptions} for the request
    * @return {Observable<Bitstream | null>}
    *    Return an observable that contains primary bitstream information or null
    */
-  public findPrimaryBitstreamByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true): Observable<Bitstream | null> {
-    return this.bundleService.findByItemAndName(item, bundleName, useCachedVersionIfAvailable, reRequestOnStale, followLink('primaryBitstream')).pipe(
+  public findPrimaryBitstreamByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, options?: FindListOptions): Observable<Bitstream | null> {
+    return this.bundleService.findByItemAndName(item, bundleName, useCachedVersionIfAvailable, reRequestOnStale, options, followLink('primaryBitstream')).pipe(
       getFirstCompletedRemoteData(),
       switchMap((rd: RemoteData<Bundle>) => {
         if (!rd.hasSucceeded) {
diff --git a/src/app/core/data/bundle-data.service.ts b/src/app/core/data/bundle-data.service.ts
index 5d552c9bf0f..027ec4e68a7 100644
--- a/src/app/core/data/bundle-data.service.ts
+++ b/src/app/core/data/bundle-data.service.ts
@@ -78,10 +78,11 @@ export class BundleDataService extends IdentifiableDataService<Bundle> implement
    *                                    requested after the response becomes stale
    * @param linksToFollow               List of {@link FollowLinkConfig} that indicate which
    *                                    {@link HALLink}s should be automatically resolved
+   * @param options                     the {@link FindListOptions} for the request
    */
   // TODO should be implemented rest side
-  findByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig<Bundle>[]): Observable<RemoteData<Bundle>> {
-    return this.findAllByItem(item, { elementsPerPage: 9999 }, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow).pipe(
+  findByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, options?: FindListOptions, ...linksToFollow: FollowLinkConfig<Bundle>[]): Observable<RemoteData<Bundle>> {
+    return this.findAllByItem(item, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow).pipe(
       map((rd: RemoteData<PaginatedList<Bundle>>) => {
         if (hasValue(rd.payload) && hasValue(rd.payload.page)) {
           const matchingBundle = rd.payload.page.find((bundle: Bundle) =>
@@ -114,6 +115,47 @@ export class BundleDataService extends IdentifiableDataService<Bundle> implement
     );
   }
 
+  // findByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig<Bundle>[]): Observable<RemoteData<Bundle>> {
+  //   return this.findAllByItem(item, { elementsPerPage: 1, currentPage: 1 }, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow).pipe(
+  //     expand((rd: RemoteData<PaginatedList<Bundle>>) => {
+  //       if (rd.hasSucceeded && hasValue(rd.payload) && hasValue(rd.payload.page) && rd.payload.currentPage < rd.payload.totalPages) {
+  //         const nextPageOptions = { elementsPerPage: 1, currentPage: rd.payload.currentPage + 1 };
+  //         return this.findAllByItem(item, nextPageOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  //       } else {
+  //         return EMPTY;
+  //       }
+  //     }),
+  //     map((rd: RemoteData<PaginatedList<Bundle>>) => {
+  //       if (hasValue(rd.payload) && hasValue(rd.payload.page)) {
+  //         const matchingBundle = rd.payload.page.find((bundle: Bundle) => bundle.name === bundleName);
+  //         if (hasValue(matchingBundle)) {
+  //           return new RemoteData(
+  //             rd.timeCompleted,
+  //             rd.msToLive,
+  //             rd.lastUpdated,
+  //             RequestEntryState.Success,
+  //             null,
+  //             matchingBundle,
+  //             200
+  //           );
+  //         } else {
+  //           return new RemoteData(
+  //             rd.timeCompleted,
+  //             rd.msToLive,
+  //             rd.lastUpdated,
+  //             RequestEntryState.Error,
+  //             `The bundle with name ${bundleName} was not found.`,
+  //             null,
+  //             404
+  //           );
+  //         }
+  //       } else {
+  //         return rd as any;
+  //       }
+  //     })
+  //   );
+  // }
+
   /**
    * Get the bitstreams endpoint for a bundle
    * @param bundleId
diff --git a/src/app/core/metadata/head-tag.service.ts b/src/app/core/metadata/head-tag.service.ts
index 270e5fde723..f3751704aa6 100644
--- a/src/app/core/metadata/head-tag.service.ts
+++ b/src/app/core/metadata/head-tag.service.ts
@@ -70,6 +70,7 @@ import {
   ClearMetaTagAction,
 } from './meta-tag.actions';
 import { MetaTagState } from './meta-tag.reducer';
+import { FindListOptions } from '../data/find-list-options.model';
 
 /**
  * The base selector function to select the metaTag section in the store
@@ -331,6 +332,7 @@ export class HeadTagService {
         'ORIGINAL',
         true,
         true,
+        new FindListOptions(),
         followLink('primaryBitstream'),
         followLink('bitstreams', {
           findListOptions: {

From d90a988e33a8181e3cac4549d58cef44d5dcaa61 Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Thu, 21 Nov 2024 15:40:05 +0100
Subject: [PATCH 12/20] [DURACOM-304] other fix related to accessibility

---
 .../form/scripts-select/scripts-select.component.html           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.html b/src/app/process-page/form/scripts-select/scripts-select.component.html
index 6b521e8d408..5c161f8d8d5 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.html
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.html
@@ -8,7 +8,7 @@
              placeholder="{{'process.new.select-script.placeholder' | translate}}"
              [ngModelOptions]="{standalone: true}"
              ngbDropdownToggle
-             role="button"
+             role="combobox"
              #script="ngModel">
       <div ngbDropdownMenu aria-labelledby="process-script" class="w-100 scrollable-menu"
             role="menu"

From f5ec5f9674fa3e404e08dbfa7eae7f7002445fa7 Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Thu, 21 Nov 2024 15:46:17 +0100
Subject: [PATCH 13/20] [DURACOM-304] lint fix

---
 src/app/core/metadata/head-tag.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/core/metadata/head-tag.service.ts b/src/app/core/metadata/head-tag.service.ts
index f3751704aa6..8041bb3a4ac 100644
--- a/src/app/core/metadata/head-tag.service.ts
+++ b/src/app/core/metadata/head-tag.service.ts
@@ -50,6 +50,7 @@ import { coreSelector } from '../core.selectors';
 import { CoreState } from '../core-state.model';
 import { BundleDataService } from '../data/bundle-data.service';
 import { AuthorizationDataService } from '../data/feature-authorization/authorization-data.service';
+import { FindListOptions } from '../data/find-list-options.model';
 import { PaginatedList } from '../data/paginated-list.model';
 import { RemoteData } from '../data/remote-data';
 import { RootDataService } from '../data/root-data.service';
@@ -70,7 +71,6 @@ import {
   ClearMetaTagAction,
 } from './meta-tag.actions';
 import { MetaTagState } from './meta-tag.reducer';
-import { FindListOptions } from '../data/find-list-options.model';
 
 /**
  * The base selector function to select the metaTag section in the store

From 9f8083e9c539a76bdf45a49121ff5de4f4d9be1e Mon Sep 17 00:00:00 2001
From: FrancescoMolinaro <francesco.molinaro@4science.com>
Date: Wed, 18 Dec 2024 14:57:55 +0100
Subject: [PATCH 14/20] [DURACOM-304] resolve conflicts

---
 .../item-bitstreams.component.ts              | 24 +++----------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
index f3dd0bfd369..c02418bceb9 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
@@ -63,6 +63,7 @@ import { ItemBitstreamsService } from './item-bitstreams.service';
 import { ItemEditBitstreamBundleComponent } from './item-edit-bitstream-bundle/item-edit-bitstream-bundle.component';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { AlertComponent } from 'src/app/shared/alert/alert.component';
+import { AlertType } from 'src/app/shared/alert/alert-type';
 
 @Component({
   selector: 'ds-item-bitstreams',
@@ -76,7 +77,6 @@ import { AlertComponent } from 'src/app/shared/alert/alert.component';
     RouterLink,
     NgIf,
     VarDirective,
-    ItemEditBitstreamDragHandleComponent,
     NgForOf,
     ThemedLoadingComponent,
     AlertComponent,
@@ -257,30 +257,12 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
    */
   submit() {
     this.submitting = true;
-    const bundlesOnce$ = this.bundles$.pipe(take(1));
-
-    // Fetch all removed bitstreams from the object update service
-    const removedBitstreams$ = bundlesOnce$.pipe(
-      switchMap((bundles: Bundle[]) => observableZip(
-        ...bundles.map((bundle: Bundle) => this.objectUpdatesService.getFieldUpdates(bundle.self, [], true)),
-      )),
-      map((fieldUpdates: FieldUpdates[]) => ([] as FieldUpdate[]).concat(
-        ...fieldUpdates.map((updates: FieldUpdates) => Object.values(updates).filter((fieldUpdate: FieldUpdate) => fieldUpdate.changeType === FieldChangeType.REMOVE)),
-      )),
-      map((fieldUpdates: FieldUpdate[]) => fieldUpdates.map((fieldUpdate: FieldUpdate) => fieldUpdate.field)),
-    );
 
-    // Send out delete requests for all deleted bitstreams
-    const removedResponses$: Observable<RemoteData<NoContent>> = removedBitstreams$.pipe(
-      take(1),
-      switchMap((removedBitstreams: Bitstream[]) => {
-        return this.bitstreamService.removeMultiple(removedBitstreams);
-      }),
-    );
+    const removedResponses$ = this.itemBitstreamsService.removeMarkedBitstreams(this.bundles$.pipe(take(1)));
 
     // Perform the setup actions from above in order and display notifications
     removedResponses$.subscribe((responses: RemoteData<NoContent>) => {
-      this.displayNotifications('item.edit.bitstreams.notifications.remove', [responses]);
+      this.itemBitstreamsService.displayNotifications('item.edit.bitstreams.notifications.remove', [responses]);
       this.submitting = false;
     });
   }

From 134ecd6d48167d3111f512abf997dfc739cb1c62 Mon Sep 17 00:00:00 2001
From: FrancescoMolinaro <francesco.molinaro@4science.com>
Date: Wed, 18 Dec 2024 16:09:13 +0100
Subject: [PATCH 15/20] [DURACOM-304] fix lint

---
 .../item-bitstreams.component.ts              | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
index c02418bceb9..205c67fa61e 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
@@ -1,4 +1,9 @@
-import { AsyncPipe, CommonModule, NgForOf, NgIf } from '@angular/common';
+import {
+  AsyncPipe,
+  CommonModule,
+  NgForOf,
+  NgIf,
+} from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -21,27 +26,25 @@ import {
   combineLatest,
   Observable,
   Subscription,
-  zip as observableZip,
 } from 'rxjs';
 import {
   filter,
   map,
   switchMap,
-  take, tap,
+  take,
+  tap,
 } from 'rxjs/operators';
+import { AlertComponent } from 'src/app/shared/alert/alert.component';
+import { AlertType } from 'src/app/shared/alert/alert-type';
 
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
 import { BitstreamDataService } from '../../../core/data/bitstream-data.service';
 import { BundleDataService } from '../../../core/data/bundle-data.service';
 import { ItemDataService } from '../../../core/data/item-data.service';
-import { FieldChangeType } from '../../../core/data/object-updates/field-change-type.model';
-import { FieldUpdate } from '../../../core/data/object-updates/field-update.model';
-import { FieldUpdates } from '../../../core/data/object-updates/field-updates.model';
 import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { RequestService } from '../../../core/data/request.service';
-import { Bitstream } from '../../../core/shared/bitstream.model';
 import { Bundle } from '../../../core/shared/bundle.model';
 import { NoContent } from '../../../core/shared/NoContent.model';
 import {
@@ -54,6 +57,7 @@ import {
 } from '../../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { ResponsiveTableSizes } from '../../../shared/responsive-table-sizes/responsive-table-sizes';
 import { PaginatedSearchOptions } from '../../../shared/search/models/paginated-search-options.model';
 import { ObjectValuesPipe } from '../../../shared/utils/object-values-pipe';
@@ -61,9 +65,6 @@ import { VarDirective } from '../../../shared/utils/var.directive';
 import { AbstractItemUpdateComponent } from '../abstract-item-update/abstract-item-update.component';
 import { ItemBitstreamsService } from './item-bitstreams.service';
 import { ItemEditBitstreamBundleComponent } from './item-edit-bitstream-bundle/item-edit-bitstream-bundle.component';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { AlertComponent } from 'src/app/shared/alert/alert.component';
-import { AlertType } from 'src/app/shared/alert/alert-type';
 
 @Component({
   selector: 'ds-item-bitstreams',
@@ -237,11 +238,11 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
     this.bundlesOptions = Object.assign(new PaginationComponentOptions(), this.bundlesOptions, {
       currentPage: currentPage || this.bundlesOptions.currentPage + 1,
     });
-    this.itemService.getBundles(this.item.id, new PaginatedSearchOptions({pagination: this.bundlesOptions})).pipe(
+    this.itemService.getBundles(this.item.id, new PaginatedSearchOptions({ pagination: this.bundlesOptions })).pipe(
       getFirstSucceededRemoteData(),
       getRemoteDataPayload(),
       tap((bundlesPL: PaginatedList<Bundle>) =>
-        this.showLoadMoreLink$.next(bundlesPL.pageInfo.currentPage < bundlesPL.pageInfo.totalPages)
+        this.showLoadMoreLink$.next(bundlesPL.pageInfo.currentPage < bundlesPL.pageInfo.totalPages),
       ),
       map((bundlePage: PaginatedList<Bundle>) => bundlePage.page),
     ).subscribe((bundles: Bundle[]) => {

From 903daadcbf422f10d8c6af76c17e99c6bd7ad8e4 Mon Sep 17 00:00:00 2001
From: FrancescoMolinaro <francesco.molinaro@4science.com>
Date: Tue, 14 Jan 2025 17:42:52 +0100
Subject: [PATCH 16/20] [DURACOM-304] add support for findAll method in
 dynamic-scrollable-dropdown.component.ts

---
 .../edit-bitstream-page.component.html        |   6 +-
 .../edit-bitstream-page.component.spec.ts     |  17 ++-
 .../edit-bitstream-page.component.ts          | 134 +++++++-----------
 ...dynamic-scrollable-dropdown.component.html |   4 +-
 .../dynamic-scrollable-dropdown.component.ts  |  52 +++++--
 .../dynamic-scrollable-dropdown.model.ts      |  20 ++-
 6 files changed, 133 insertions(+), 100 deletions(-)

diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
index f7d2c608324..259ab599cb3 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngVar="(bitstreamRD$ | async) as bitstreamRD">
-  <div class="container" *ngVar="(bitstreamFormatsRD$ | async) as formatsRD">
-    <div class="row" *ngIf="bitstreamRD?.hasSucceeded && formatsRD?.hasSucceeded">
+  <div class="container">
+    <div class="row" *ngIf="bitstreamRD?.hasSucceeded">
       <div class="col-md-2">
         <ds-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-thumbnail>
       </div>
@@ -27,7 +27,7 @@ <h1 class="h2">{{dsoNameService.getName(bitstreamRD?.payload)}} <span class="tex
       </div>
     </div>
     <ds-error *ngIf="bitstreamRD?.hasFailed" message="{{'error.bitstream' | translate}}"></ds-error>
-    <ds-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
+    <ds-loading *ngIf="!bitstreamRD || bitstreamRD?.isLoading"
                 message="{{'loading.bitstream' | translate}}"></ds-loading>
   </div>
 </ng-container>
diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts
index 9243a364916..7da9e040ceb 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts
@@ -261,7 +261,7 @@ describe('EditBitstreamPageComponent', () => {
       });
 
       it('should select the correct format', () => {
-        expect(rawForm.formatContainer.selectedFormat).toEqual(selectedFormat.id);
+        expect(rawForm.formatContainer.selectedFormat).toEqual(selectedFormat.shortDescription);
       });
 
       it('should put the \"New Format\" input on invisible', () => {
@@ -292,7 +292,13 @@ describe('EditBitstreamPageComponent', () => {
 
     describe('when an unknown format is selected', () => {
       beforeEach(() => {
-        comp.updateNewFormatLayout(allFormats[0].id);
+        comp.onChange({
+          model: {
+            id: 'selectedFormat',
+            value: allFormats[0],
+          },
+        });
+        comp.updateNewFormatLayout();
       });
 
       it('should remove the invisible class from the \"New Format\" input', () => {
@@ -394,9 +400,10 @@ describe('EditBitstreamPageComponent', () => {
 
       describe('when selected format has changed', () => {
         beforeEach(() => {
-          comp.formGroup.patchValue({
-            formatContainer: {
-              selectedFormat: allFormats[2].id,
+          comp.onChange({
+            model: {
+              id: 'selectedFormat',
+              value: allFormats[2],
             },
           });
           fixture.detectChanges();
diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
index 3e022e8c377..af7539b2737 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
@@ -21,7 +21,6 @@ import {
   DynamicFormLayout,
   DynamicFormService,
   DynamicInputModel,
-  DynamicSelectModel,
 } from '@ng-dynamic-forms/core';
 import {
   TranslateModule,
@@ -31,24 +30,22 @@ import cloneDeep from 'lodash/cloneDeep';
 import {
   combineLatest,
   combineLatest as observableCombineLatest,
-  EMPTY,
   Observable,
   of as observableOf,
   Subscription,
 } from 'rxjs';
 import {
-  expand,
   filter,
   map,
-  reduce,
   switchMap,
+  take,
   tap,
 } from 'rxjs/operators';
 
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { FindAllDataImpl } from '../../core/data/base/find-all-data';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
 import { BitstreamFormatDataService } from '../../core/data/bitstream-format-data.service';
-import { PaginatedList } from '../../core/data/paginated-list.model';
 import { PrimaryBitstreamService } from '../../core/data/primary-bitstream.service';
 import { RemoteData } from '../../core/data/remote-data';
 import { Bitstream } from '../../core/shared/bitstream.model';
@@ -58,7 +55,6 @@ import { Bundle } from '../../core/shared/bundle.model';
 import { Item } from '../../core/shared/item.model';
 import { Metadata } from '../../core/shared/metadata.utils';
 import {
-  getAllSucceededRemoteDataPayload,
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteData,
   getFirstSucceededRemoteDataPayload,
@@ -75,6 +71,7 @@ import { ErrorComponent } from '../../shared/error/error.component';
 import { DynamicCustomSwitchModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model';
 import { DsDynamicInputModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model';
 import { DsDynamicTextAreaModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model';
+import { DynamicScrollableDropdownModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
 import { FormComponent } from '../../shared/form/form.component';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -112,12 +109,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    */
   bitstreamRD$: Observable<RemoteData<Bitstream>>;
 
-  /**
-   * The formats their remote data observable
-   * Tracks changes and updates the view
-   */
-  bitstreamFormatsRD$: Observable<RemoteData<PaginatedList<BitstreamFormat>>>;
-
   /**
    * The UUID of the primary bitstream for this bundle
    */
@@ -133,11 +124,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    */
   originalFormat: BitstreamFormat;
 
-  /**
-   * A list of all available bitstream formats
-   */
-  formats: BitstreamFormat[];
-
   /**
    * @type {string} Key prefix used to generate form messages
    */
@@ -224,9 +210,22 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   /**
    * The Dynamic Input Model for the selected format
    */
-  selectedFormatModel = new DynamicSelectModel({
+  selectedFormatModel = new DynamicScrollableDropdownModel({
     id: 'selectedFormat',
     name: 'selectedFormat',
+    displayKey: 'shortDescription',
+    repeatable: false,
+    metadataFields: [],
+    submissionId: '',
+    hasSelectableMetadata: false,
+    findAllFactory: this.findAllFormatsServiceFactory(),
+    formatFunction: (format: BitstreamFormat | string) => {
+      if (format instanceof  BitstreamFormat) {
+        return hasValue(format) && format.supportLevel === BitstreamFormatSupportLevel.Unknown ? this.translate.instant(this.KEY_PREFIX + 'selectedFormat.unknown') : format.shortDescription;
+      } else {
+        return format;
+      }
+    },
   });
 
   /**
@@ -444,6 +443,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    * @private
    */
   private bundle: Bundle;
+  /**
+   * The currently selected format
+   * @private
+   */
+  private selectedFormat: BitstreamFormat;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
@@ -470,25 +474,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     this.entityType = this.route.snapshot.queryParams.entityType;
     this.bitstreamRD$ = this.route.data.pipe(map((data: any) => data.bitstream));
 
-    this.bitstreamFormatsRD$ = this.bitstreamFormatService.findAll(this.findAllOptions).pipe(
-      getFirstSucceededRemoteData(),
-      expand((response: RemoteData<PaginatedList<BitstreamFormat>>) => {
-        const pageInfo = response.payload.pageInfo;
-        if (pageInfo.currentPage < pageInfo.totalPages) {
-          const nextPageOptions = { ...this.findAllOptions, currentPage: pageInfo.currentPage + 1 };
-          return this.bitstreamFormatService.findAll(nextPageOptions).pipe(getFirstSucceededRemoteData());
-        } else {
-          return EMPTY;
-        }
-      }),
-    );
-
-    const bitstreamFormats$ = this.bitstreamFormatsRD$.pipe(
-      reduce((acc: BitstreamFormat[], response: RemoteData<PaginatedList<BitstreamFormat>>) => {
-        return acc.concat(response.payload.page);
-      }, []),
-    );
-
     const bitstream$ = this.bitstreamRD$.pipe(
       getFirstSucceededRemoteData(),
       getRemoteDataPayload(),
@@ -509,24 +494,31 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
       switchMap((bundle: Bundle) => bundle.item),
       getFirstSucceededRemoteDataPayload(),
     );
+    const format$ = bitstream$.pipe(
+      switchMap(bitstream => bitstream.format),
+      getFirstSucceededRemoteDataPayload(),
+    );
+
     this.subs.push(
       observableCombineLatest(
         bitstream$,
-        bitstreamFormats$,
         bundle$,
         primaryBitstream$,
         item$,
-      ).pipe()
-        .subscribe(([bitstream, allFormats, bundle, primaryBitstream, item]) => {
-          this.bitstream = bitstream as Bitstream;
-          this.formats = allFormats;
-          this.bundle = bundle;
-          // hasValue(primaryBitstream) because if there's no primaryBitstream on the bundle it will
-          // be a success response, but empty
-          this.primaryBitstreamUUID = hasValue(primaryBitstream) ? primaryBitstream.uuid : null;
-          this.itemId = item.uuid;
-          this.setIiifStatus(this.bitstream);
-        }),
+        format$,
+      ).subscribe(([bitstream, bundle, primaryBitstream, item, format]) => {
+        this.bitstream = bitstream as Bitstream;
+        this.bundle = bundle;
+        this.selectedFormat = format;
+        // hasValue(primaryBitstream) because if there's no primaryBitstream on the bundle it will
+        // be a success response, but empty
+        this.primaryBitstreamUUID = hasValue(primaryBitstream) ? primaryBitstream.uuid : null;
+        this.itemId = item.uuid;
+        this.setIiifStatus(this.bitstream);
+      }),
+      format$.pipe(take(1)).subscribe(
+        (format) => this.originalFormat = format,
+      ),
     );
 
     this.subs.push(
@@ -542,7 +534,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    */
   setForm() {
     this.formGroup = this.formService.createFormGroup(this.formModel);
-    this.updateFormatModel();
     this.updateForm(this.bitstream);
     this.updateFieldTranslations();
   }
@@ -561,6 +552,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
         description: bitstream.firstMetadataValue('dc.description'),
       },
       formatContainer: {
+        selectedFormat: this.selectedFormat.shortDescription,
         newFormat: hasValue(bitstream.firstMetadata('dc.format')) ? bitstream.firstMetadata('dc.format').value : undefined,
       },
     });
@@ -580,36 +572,16 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
         },
       });
     }
-    this.bitstream.format.pipe(
-      getAllSucceededRemoteDataPayload(),
-    ).subscribe((format: BitstreamFormat) => {
-      this.originalFormat = format;
-      this.formGroup.patchValue({
-        formatContainer: {
-          selectedFormat: format.id,
-        },
-      });
-      this.updateNewFormatLayout(format.id);
-    });
+    this.updateNewFormatLayout();
   }
 
-  /**
-   * Create the list of unknown format IDs an add options to the selectedFormatModel
-   */
-  updateFormatModel() {
-    this.selectedFormatModel.options = this.formats.map((format: BitstreamFormat) =>
-      Object.assign({
-        value: format.id,
-        label: this.isUnknownFormat(format.id) ? this.translate.instant(this.KEY_PREFIX + 'selectedFormat.unknown') : format.shortDescription,
-      }));
-  }
 
   /**
    * Update the layout of the "Other Format" input depending on the selected format
    * @param selectedId
    */
-  updateNewFormatLayout(selectedId: string) {
-    if (this.isUnknownFormat(selectedId)) {
+  updateNewFormatLayout() {
+    if (this.isUnknownFormat()) {
       this.formLayout.newFormat.grid.host = this.newFormatBaseLayout;
     } else {
       this.formLayout.newFormat.grid.host = this.newFormatBaseLayout + ' invisible';
@@ -620,9 +592,8 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    * Is the provided format (id) part of the list of unknown formats?
    * @param id
    */
-  isUnknownFormat(id: string): boolean {
-    const format = this.formats.find((f: BitstreamFormat) => f.id === id);
-    return hasValue(format) && format.supportLevel === BitstreamFormatSupportLevel.Unknown;
+  isUnknownFormat(): boolean {
+    return hasValue(this.selectedFormat) &&  this.selectedFormat.supportLevel === BitstreamFormatSupportLevel.Unknown;
   }
 
   /**
@@ -654,7 +625,8 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   onChange(event) {
     const model = event.model;
     if (model.id === this.selectedFormatModel.id) {
-      this.updateNewFormatLayout(model.value);
+      this.selectedFormat = model.value;
+      this.updateNewFormatLayout();
     }
   }
 
@@ -664,8 +636,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   onSubmit() {
     const updatedValues = this.formGroup.getRawValue();
     const updatedBitstream = this.formToBitstream(updatedValues);
-    const selectedFormat = this.formats.find((f: BitstreamFormat) => f.id === updatedValues.formatContainer.selectedFormat);
-    const isNewFormat = selectedFormat.id !== this.originalFormat.id;
+    const isNewFormat = this.selectedFormat.id !== this.originalFormat.id;
     const isPrimary = updatedValues.fileNamePrimaryContainer.primaryBitstream;
     const wasPrimary = this.primaryBitstreamUUID === this.bitstream.uuid;
 
@@ -717,7 +688,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
       bundle$ = observableOf(this.bundle);
     }
     if (isNewFormat) {
-      bitstream$ = this.bitstreamService.updateFormat(this.bitstream, selectedFormat).pipe(
+      bitstream$ = this.bitstreamService.updateFormat(this.bitstream, this.selectedFormat).pipe(
         getFirstCompletedRemoteData(),
         map((formatResponse: RemoteData<Bitstream>) => {
           if (hasValue(formatResponse) && formatResponse.hasFailed) {
@@ -875,4 +846,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
       .forEach((subscription) => subscription.unsubscribe());
   }
 
+  findAllFormatsServiceFactory() {
+    return () => this.bitstreamFormatService as any as FindAllDataImpl<BitstreamFormat>;
+  }
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
index b4e6ac2c44f..f8cdb06dace 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -50,8 +50,8 @@
       <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList; let i = index"
               [class.active]="i === selectedIndex"
               (keydown.enter)="onSelect(listEntry); sdRef.close()" (mousedown)="onSelect(listEntry); sdRef.close()"
-              title="{{ listEntry.display }}" role="option"
-              [attr.id]="listEntry.display === (currentValue|async) ? ('combobox_' + id + '_selected') : null">
+              title="{{ inputFormatter(listEntry) }}" role="option"
+              [attr.id]="inputFormatter(listEntry) === (currentValue|async) ? ('combobox_' + id + '_selected') : null">
         {{inputFormatter(listEntry)}}
       </button>
       <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>{{'form.loading' | translate}}</p></div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
index 051bb3f2252..0577341347e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
@@ -35,15 +35,20 @@ import {
   tap,
 } from 'rxjs/operators';
 
+import { CacheableObject } from '../../../../../../core/cache/cacheable-object.model';
+import { FindAllData } from '../../../../../../core/data/base/find-all-data';
 import {
   buildPaginatedList,
   PaginatedList,
 } from '../../../../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../../../../core/data/remote-data';
 import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/shared/operators';
 import { PageInfo } from '../../../../../../core/shared/page-info.model';
-import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model';
 import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service';
-import { isEmpty } from '../../../../../empty.util';
+import {
+  hasValue,
+  isEmpty,
+} from '../../../../../empty.util';
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 import { DsDynamicVocabularyComponent } from '../dynamic-vocabulary.component';
 import { DynamicScrollableDropdownModel } from './dynamic-scrollable-dropdown.model';
@@ -84,6 +89,21 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   public selectedIndex = 0;
   public acceptableKeys = ['Space', 'NumpadMultiply', 'NumpadAdd', 'NumpadSubtract', 'NumpadDecimal', 'Semicolon', 'Equal', 'Comma', 'Minus', 'Period', 'Quote', 'Backquote'];
 
+  /**
+   * If true the component can rely on the findAll method for data loading.
+   * This is a behaviour activated by dependency injection through the dropdown config.
+   * If a service that implements findAll is not provided in the config the component falls back on the standard vocabulary service.
+   *
+   * @private
+   */
+  private useFindAllService: boolean;
+  /**
+   * A service that implements FindAllData.
+   * If is provided in the config will be used for data loading in stead of the VocabularyService
+   * @private
+   */
+  private findAllService: FindAllData<CacheableObject>;
+
   constructor(protected vocabularyService: VocabularyService,
               protected cdr: ChangeDetectorRef,
               protected layoutService: DynamicFormLayoutService,
@@ -96,6 +116,9 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
    * Initialize the component, setting up the init form value
    */
   ngOnInit() {
+    this.findAllService = this.model?.findAllFactory();
+    this.useFindAllService = hasValue(this.findAllService?.findAll) && typeof this.findAllService.findAll === 'function';
+
     this.updatePageInfo(this.model.maxOptions, 1);
     this.loadOptions(true);
     this.group.get(this.model.id).valueChanges.pipe(distinctUntilChanged())
@@ -104,13 +127,24 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
       });
   }
 
+  /**
+   * Get service and method to use to retrieve dropdown options
+   */
+  getDataFromService(): Observable<RemoteData<PaginatedList<CacheableObject>>> {
+    if (this.useFindAllService) {
+      return this.findAllService.findAll({ elementsPerPage: this.pageInfo.elementsPerPage, currentPage: this.pageInfo.currentPage });
+    } else {
+      return this.vocabularyService.getVocabularyEntriesByValue(this.inputText, false, this.model.vocabularyOptions, this.pageInfo);
+    }
+  }
+
   loadOptions(fromInit: boolean) {
     this.loading = true;
-    this.vocabularyService.getVocabularyEntriesByValue(this.inputText, false, this.model.vocabularyOptions, this.pageInfo).pipe(
+    this.getDataFromService().pipe(
       getFirstSucceededRemoteDataPayload(),
       catchError(() => observableOf(buildPaginatedList(new PageInfo(), []))),
       tap(() => this.loading = false),
-    ).subscribe((list: PaginatedList<VocabularyEntry>) => {
+    ).subscribe((list: PaginatedList<CacheableObject>) => {
       this.optionsList = list.page;
       if (fromInit && this.model.value) {
         this.setCurrentValue(this.model.value, true);
@@ -130,7 +164,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   /**
    * Converts an item from the result list to a `string` to display in the `<input>` field.
    */
-  inputFormatter = (x: VocabularyEntry): string => x.display || x.value;
+  inputFormatter = (x: any): string => (this.model.formatFunction ? this.model.formatFunction(x) : (x.display || x.value));
 
   /**
    * Opens dropdown menu
@@ -233,7 +267,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
         this.pageInfo.totalElements,
         this.pageInfo.totalPages,
       );
-      this.vocabularyService.getVocabularyEntriesByValue(this.inputText, false, this.model.vocabularyOptions, this.pageInfo).pipe(
+      this.getDataFromService().pipe(
         getFirstSucceededRemoteDataPayload(),
         catchError(() => observableOf(buildPaginatedList(
           new PageInfo(),
@@ -241,7 +275,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
         )),
         ),
         tap(() => this.loading = false))
-        .subscribe((list: PaginatedList<VocabularyEntry>) => {
+        .subscribe((list: PaginatedList<any>) => {
           this.optionsList = this.optionsList.concat(list.page);
           this.updatePageInfo(
             list.pageInfo.elementsPerPage,
@@ -272,7 +306,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   setCurrentValue(value: any, init = false): void {
     let result: Observable<string>;
 
-    if (init) {
+    if (init && !this.useFindAllService) {
       result = this.getInitValueFromModel().pipe(
         map((formValue: FormFieldMetadataValueObject) => formValue.display),
       );
@@ -281,6 +315,8 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
         result = observableOf('');
       } else if (typeof value === 'string') {
         result = observableOf(value);
+      } else if (this.useFindAllService) {
+        result = observableOf(value[this.model.displayKey]);
       } else {
         result = observableOf(value.display);
       }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
index 870cd12cf67..6de48160edf 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
@@ -4,6 +4,8 @@ import {
   serializable,
 } from '@ng-dynamic-forms/core';
 
+import { CacheableObject } from '../../../../../../core/cache/cacheable-object.model';
+import { FindAllDataImpl } from '../../../../../../core/data/base/find-all-data';
 import { VocabularyOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-options.model';
 import {
   DsDynamicInputModel,
@@ -13,15 +15,26 @@ import {
 export const DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN = 'SCROLLABLE_DROPDOWN';
 
 export interface DynamicScrollableDropdownModelConfig extends DsDynamicInputModelConfig {
-  vocabularyOptions: VocabularyOptions;
+  vocabularyOptions?: VocabularyOptions;
   maxOptions?: number;
   value?: any;
-}
+  displayKey?: string;
+  formatFunction?: (value: any) => string;
+  findAllFactory?: () =>  FindAllDataImpl<CacheableObject>;}
 
 export class DynamicScrollableDropdownModel extends DsDynamicInputModel {
 
   @serializable() maxOptions: number;
   @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN;
+  @serializable() displayKey: string;
+  /**
+   * Configurable function for display value formatting in input
+   */
+  formatFunction: (value: any) => string;
+  /**
+   * Factory for a service that implements FindAllData
+   */
+  findAllFactory: () =>  FindAllDataImpl<CacheableObject>;
 
   constructor(config: DynamicScrollableDropdownModelConfig, layout?: DynamicFormControlLayout) {
 
@@ -30,6 +43,9 @@ export class DynamicScrollableDropdownModel extends DsDynamicInputModel {
     this.autoComplete = AUTOCOMPLETE_OFF;
     this.vocabularyOptions = config.vocabularyOptions;
     this.maxOptions = config.maxOptions || 10;
+    this.displayKey = config.displayKey || 'display';
+    this.formatFunction = config.formatFunction;
+    this.findAllFactory = config.findAllFactory || (() => null);
   }
 
 }

From 25b2f681ef341f70b17ab1feb0286e964c88ee9a Mon Sep 17 00:00:00 2001
From: FrancescoMolinaro <francesco.molinaro@4science.com>
Date: Wed, 15 Jan 2025 11:23:04 +0100
Subject: [PATCH 17/20] [DURACOM-304] refactor to use lazy data provider

---
 .../edit-bitstream-page.component.ts          |  3 +-
 .../data/relationship-type-data.service.ts    | 24 ++----------
 ...amic-scrollable-dropdown.component.spec.ts |  4 ++
 .../dynamic-scrollable-dropdown.component.ts  | 38 ++++++++++++++-----
 .../dynamic-scrollable-dropdown.model.ts      | 12 +++---
 5 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
index af7539b2737..9f1a84c19dc 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
@@ -50,6 +50,7 @@ import { PrimaryBitstreamService } from '../../core/data/primary-bitstream.servi
 import { RemoteData } from '../../core/data/remote-data';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { BitstreamFormat } from '../../core/shared/bitstream-format.model';
+import { BITSTREAM_FORMAT } from '../../core/shared/bitstream-format.resource-type';
 import { BitstreamFormatSupportLevel } from '../../core/shared/bitstream-format-support-level';
 import { Bundle } from '../../core/shared/bundle.model';
 import { Item } from '../../core/shared/item.model';
@@ -218,7 +219,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     metadataFields: [],
     submissionId: '',
     hasSelectableMetadata: false,
-    findAllFactory: this.findAllFormatsServiceFactory(),
+    resourceType: BITSTREAM_FORMAT,
     formatFunction: (format: BitstreamFormat | string) => {
       if (format instanceof  BitstreamFormat) {
         return hasValue(format) && format.supportLevel === BitstreamFormatSupportLevel.Unknown ? this.translate.instant(this.KEY_PREFIX + 'selectedFormat.unknown') : format.shortDescription;
diff --git a/src/app/core/data/relationship-type-data.service.ts b/src/app/core/data/relationship-type-data.service.ts
index dc553973ee5..43c018bbce2 100644
--- a/src/app/core/data/relationship-type-data.service.ts
+++ b/src/app/core/data/relationship-type-data.service.ts
@@ -1,15 +1,12 @@
 import { Injectable } from '@angular/core';
 import {
   combineLatest as observableCombineLatest,
-  EMPTY,
-  from,
   Observable,
 } from 'rxjs';
 import {
-  expand,
   map,
   mergeMap,
-  reduce,
+  switchMap,
   toArray,
 } from 'rxjs/operators';
 
@@ -78,26 +75,11 @@ export class RelationshipTypeDataService extends BaseDataService<RelationshipTyp
    */
   getRelationshipTypeByLabelAndTypes(relationshipTypeLabel: string, firstItemType: string, secondItemType: string): Observable<RelationshipType> {
     // Retrieve all relationship types from the server in a single page
-    const initialPageInfo = { currentPage: 1, elementsPerPage: 20 };
-    return this.findAllData.findAll(initialPageInfo, true, true, followLink('leftType'), followLink('rightType'))
+    return this.findAllData.findAll({ currentPage: 1, elementsPerPage: 9999 }, true, true, followLink('leftType'), followLink('rightType'))
       .pipe(
         getFirstSucceededRemoteData(),
         // Emit each type in the page array separately
-        expand((typeListRD: RemoteData<PaginatedList<RelationshipType>>) => {
-          const currentPage = typeListRD.payload.pageInfo.currentPage;
-          const totalPages = typeListRD.payload.pageInfo.totalPages;
-          if (currentPage < totalPages) {
-            const nextPageInfo = { currentPage: currentPage + 1, elementsPerPage: 20 };
-            return this.findAllData.findAll(nextPageInfo, true, true, followLink('leftType'), followLink('rightType')).pipe(
-              getFirstSucceededRemoteData(),
-            );
-          } else {
-            return EMPTY;
-          }
-        }),
-        // Collect all pages into a single array
-        reduce((acc: RelationshipType[], typeListRD: RemoteData<PaginatedList<RelationshipType>>) => acc.concat(typeListRD.payload.page), []),
-        mergeMap((relationshipTypes: RelationshipType[]) => from(relationshipTypes)),
+        switchMap((typeListRD: RemoteData<PaginatedList<RelationshipType>>) => typeListRD.payload.page),
         // Check each type individually, to see if it matches the provided types
         mergeMap((relationshipType: RelationshipType) => {
           if (relationshipType.leftwardType === relationshipTypeLabel) {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
index 539c1608a1c..b7e974ce695 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
@@ -3,6 +3,7 @@ import {
   ChangeDetectorRef,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
+  Injector,
 } from '@angular/core';
 import {
   ComponentFixture,
@@ -29,6 +30,7 @@ import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstr
 import { TranslateModule } from '@ngx-translate/core';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
+import { APP_DATA_SERVICES_MAP } from '../../../../../../../config/app-config.interface';
 import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model';
 import { VocabularyOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service';
@@ -96,11 +98,13 @@ describe('Dynamic Dynamic Scrollable Dropdown component', () => {
         TestComponent,
       ],
       providers: [
+        Injector,
         ChangeDetectorRef,
         DsDynamicScrollableDropdownComponent,
         { provide: VocabularyService, useValue: vocabularyServiceStub },
         { provide: DynamicFormLayoutService, useValue: mockDynamicFormLayoutService },
         { provide: DynamicFormValidationService, useValue: mockDynamicFormValidationService },
+        { provide: APP_DATA_SERVICES_MAP, useValue: {} },
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     });
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
index 0577341347e..6d319b14d11 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
@@ -8,6 +8,8 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  Inject,
+  Injector,
   Input,
   OnInit,
   Output,
@@ -27,21 +29,28 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import {
   Observable,
   of as observableOf,
+  of,
 } from 'rxjs';
 import {
   catchError,
   distinctUntilChanged,
   map,
+  take,
   tap,
 } from 'rxjs/operators';
+import {
+  APP_DATA_SERVICES_MAP,
+  LazyDataServicesMap,
+} from 'src/config/app-config.interface';
 
 import { CacheableObject } from '../../../../../../core/cache/cacheable-object.model';
-import { FindAllData } from '../../../../../../core/data/base/find-all-data';
+import { FindAllDataImpl } from '../../../../../../core/data/base/find-all-data';
 import {
   buildPaginatedList,
   PaginatedList,
 } from '../../../../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../../../../core/data/remote-data';
+import { lazyDataService } from '../../../../../../core/lazy-data-service';
 import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/shared/operators';
 import { PageInfo } from '../../../../../../core/shared/page-info.model';
 import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service';
@@ -102,12 +111,15 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
    * If is provided in the config will be used for data loading in stead of the VocabularyService
    * @private
    */
-  private findAllService: FindAllData<CacheableObject>;
+  private findAllService: FindAllDataImpl<CacheableObject>;
 
-  constructor(protected vocabularyService: VocabularyService,
-              protected cdr: ChangeDetectorRef,
-              protected layoutService: DynamicFormLayoutService,
-              protected validationService: DynamicFormValidationService,
+  constructor(
+    protected vocabularyService: VocabularyService,
+    protected cdr: ChangeDetectorRef,
+    protected layoutService: DynamicFormLayoutService,
+    protected validationService: DynamicFormValidationService,
+    protected parentInjector: Injector,
+    @Inject(APP_DATA_SERVICES_MAP) private dataServiceMap: LazyDataServicesMap,
   ) {
     super(vocabularyService, layoutService, validationService);
   }
@@ -116,11 +128,17 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
    * Initialize the component, setting up the init form value
    */
   ngOnInit() {
-    this.findAllService = this.model?.findAllFactory();
-    this.useFindAllService = hasValue(this.findAllService?.findAll) && typeof this.findAllService.findAll === 'function';
+    const lazyProvider$: Observable<Cache> = hasValue(this.model.resourceType) ?
+      lazyDataService(this.dataServiceMap, this.model.resourceType.value, this.parentInjector) : of(null);
+
+    lazyProvider$.pipe(take(1)).subscribe((dataService) => {
+      this.findAllService = dataService as unknown as FindAllDataImpl<CacheableObject>;
+      this.useFindAllService = hasValue(this.findAllService?.findAll) && typeof this.findAllService.findAll === 'function';
+      this.updatePageInfo(this.model.maxOptions, 1);
+      this.loadOptions(true);
+    });
+
 
-    this.updatePageInfo(this.model.maxOptions, 1);
-    this.loadOptions(true);
     this.group.get(this.model.id).valueChanges.pipe(distinctUntilChanged())
       .subscribe((value) => {
         this.setCurrentValue(value);
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
index 6de48160edf..8454186801f 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
@@ -4,8 +4,7 @@ import {
   serializable,
 } from '@ng-dynamic-forms/core';
 
-import { CacheableObject } from '../../../../../../core/cache/cacheable-object.model';
-import { FindAllDataImpl } from '../../../../../../core/data/base/find-all-data';
+import { ResourceType } from '../../../../../../core/shared/resource-type';
 import { VocabularyOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-options.model';
 import {
   DsDynamicInputModel,
@@ -20,7 +19,8 @@ export interface DynamicScrollableDropdownModelConfig extends DsDynamicInputMode
   value?: any;
   displayKey?: string;
   formatFunction?: (value: any) => string;
-  findAllFactory?: () =>  FindAllDataImpl<CacheableObject>;}
+  resourceType?: ResourceType;
+}
 
 export class DynamicScrollableDropdownModel extends DsDynamicInputModel {
 
@@ -32,9 +32,9 @@ export class DynamicScrollableDropdownModel extends DsDynamicInputModel {
    */
   formatFunction: (value: any) => string;
   /**
-   * Factory for a service that implements FindAllData
+   * Resource type to match data service
    */
-  findAllFactory: () =>  FindAllDataImpl<CacheableObject>;
+  resourceType: ResourceType;
 
   constructor(config: DynamicScrollableDropdownModelConfig, layout?: DynamicFormControlLayout) {
 
@@ -45,7 +45,7 @@ export class DynamicScrollableDropdownModel extends DsDynamicInputModel {
     this.maxOptions = config.maxOptions || 10;
     this.displayKey = config.displayKey || 'display';
     this.formatFunction = config.formatFunction;
-    this.findAllFactory = config.findAllFactory || (() => null);
+    this.resourceType = config.resourceType;
   }
 
 }

From c79affdec6a0a3f6b44bbd18be9ed72b2b95029a Mon Sep 17 00:00:00 2001
From: FrancescoMolinaro <francesco.molinaro@4science.com>
Date: Wed, 15 Jan 2025 17:01:07 +0100
Subject: [PATCH 18/20] [DURACOM-304] improve loading logic for cc-licenses
 section and dynamic-list

---
 .../models/list/dynamic-list.component.html   |   4 +
 .../models/list/dynamic-list.component.ts     | 142 ++++++++++--------
 ...mission-section-cc-licenses.component.html |  71 ++++-----
 ...mission-section-cc-licenses.component.scss |  10 ++
 ...sion-section-cc-licenses.component.spec.ts |   8 +-
 ...ubmission-section-cc-licenses.component.ts |  87 +++++++----
 src/assets/i18n/en.json5                      |   2 +
 7 files changed, 195 insertions(+), 129 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
index 728c59aa460..2407a740226 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -62,6 +62,10 @@
       </div>
       <br>
     </div>
+  </div>
 
+  <div class="d-flex justify-content-center" *ngIf="(showLoadMore$ | async)">
+    <div *ngIf="(showLoadMore$ | async)" class="btn btn-link py-3" (click)="loadEntries()">{{'dynamic-list.load-more' | translate}}</div>
   </div>
+
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
index 79af663cfc4..49b4bd11be9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
@@ -1,4 +1,5 @@
 import {
+  AsyncPipe,
   NgClass,
   NgForOf,
   NgIf,
@@ -25,12 +26,13 @@ import {
   DynamicFormLayoutService,
   DynamicFormValidationService,
 } from '@ng-dynamic-forms/core';
+import { TranslateModule } from '@ngx-translate/core';
 import findKey from 'lodash/findKey';
+import { BehaviorSubject } from 'rxjs';
 import {
-  EMPTY,
-  reduce,
-} from 'rxjs';
-import { expand } from 'rxjs/operators';
+  map,
+  tap,
+} from 'rxjs/operators';
 
 import { PaginatedList } from '../../../../../../core/data/paginated-list.model';
 import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/shared/operators';
@@ -65,6 +67,8 @@ export interface ListItem {
     NgbButtonsModule,
     NgForOf,
     ReactiveFormsModule,
+    AsyncPipe,
+    TranslateModule,
   ],
   standalone: true,
 })
@@ -78,7 +82,9 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
   @Output() focus: EventEmitter<any> = new EventEmitter<any>();
 
   public items: ListItem[][] = [];
-  protected optionsList: VocabularyEntry[];
+  public showLoadMore$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  protected optionsList: VocabularyEntry[] = [];
+  private nextPageInfo: PageInfo;
 
   constructor(private vocabularyService: VocabularyService,
               private cdr: ChangeDetectorRef,
@@ -94,7 +100,7 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
    */
   ngOnInit() {
     if (this.model.vocabularyOptions && hasValue(this.model.vocabularyOptions.name)) {
-      this.setOptionsFromVocabulary();
+      this.initOptionsFromVocabulary();
     }
   }
 
@@ -141,70 +147,18 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
   /**
    * Setting up the field options from vocabulary
    */
-  protected setOptionsFromVocabulary() {
+  protected initOptionsFromVocabulary() {
     if (this.model.vocabularyOptions.name && this.model.vocabularyOptions.name.length > 0) {
       const listGroup = this.group.controls[this.model.id] as UntypedFormGroup;
       if (this.model.repeatable && this.model.required) {
         listGroup.addValidators(this.hasAtLeastOneVocabularyEntry());
       }
 
-      const initialPageInfo: PageInfo = new PageInfo({
+      this.nextPageInfo = new PageInfo({
         elementsPerPage: 20, currentPage: 1,
       } as PageInfo);
 
-      this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, initialPageInfo).pipe(
-        getFirstSucceededRemoteDataPayload(),
-        expand((entries: PaginatedList<VocabularyEntry>) => {
-          if (entries.pageInfo.currentPage < entries.pageInfo.totalPages) {
-            const nextPageInfo: PageInfo = new PageInfo({
-              elementsPerPage: 20, currentPage: entries.pageInfo.currentPage + 1,
-            } as PageInfo);
-            return this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, nextPageInfo).pipe(
-              getFirstSucceededRemoteDataPayload(),
-            );
-          } else {
-            return EMPTY;
-          }
-        }),
-        reduce((acc: VocabularyEntry[], entries: PaginatedList<VocabularyEntry>) => acc.concat(entries.page), []),
-      ).subscribe((allEntries: VocabularyEntry[]) => {
-        let groupCounter = 0;
-        let itemsPerGroup = 0;
-        let tempList: ListItem[] = [];
-        this.optionsList = allEntries;
-        // Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
-        allEntries.forEach((option: VocabularyEntry, key: number) => {
-          const value = option.authority || option.value;
-          const checked: boolean = isNotEmpty(findKey(
-            this.model.value,
-            (v) => v.value === option.value));
-
-          const item: ListItem = {
-            id: `${this.model.id}_${value}`,
-            label: option.display,
-            value: checked,
-            index: key,
-          };
-          if (this.model.repeatable) {
-            this.formBuilderService.addFormGroupControl(listGroup, (this.model as DynamicListCheckboxGroupModel), new DynamicCheckboxModel(item));
-          } else {
-            (this.model as DynamicListRadioGroupModel).options.push({
-              label: item.label,
-              value: option,
-            });
-          }
-          tempList.push(item);
-          itemsPerGroup++;
-          this.items[groupCounter] = tempList;
-          if (itemsPerGroup === this.model.groupLength) {
-            groupCounter++;
-            itemsPerGroup = 0;
-            tempList = [];
-          }
-        });
-        this.cdr.markForCheck();
-      });
-
+      this.loadEntries(listGroup);
     }
   }
 
@@ -217,4 +171,70 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
     };
   }
 
+  /**
+   * Update current page state to keep track of which one to load next
+   * @param response
+   */
+  setPaginationInfo(response: PaginatedList<VocabularyEntry>) {
+    if (response.pageInfo.currentPage < response.pageInfo.totalPages) {
+      this.nextPageInfo = Object.assign(new PageInfo(), response.pageInfo,  { currentPage: response.currentPage + 1 });
+      this.showLoadMore$.next(true);
+    } else {
+      this.showLoadMore$.next(false);
+    }
+  }
+
+  /**
+   * Load entries page
+   *
+   * @param listGroup
+   */
+  loadEntries(listGroup?: UntypedFormGroup) {
+    if (!hasValue(listGroup)) {
+      listGroup = this.group.controls[this.model.id] as UntypedFormGroup;
+    }
+
+    this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, this.nextPageInfo).pipe(
+      getFirstSucceededRemoteDataPayload(),
+      tap((response) => this.setPaginationInfo(response)),
+      map(entries => entries.page),
+    ).subscribe((allEntries: VocabularyEntry[]) => {
+      this.optionsList = [...this.optionsList, ...allEntries];
+      let groupCounter = (this.items.length > 0) ? (this.items.length - 1) : 0;
+      let itemsPerGroup = 0;
+      let tempList: ListItem[] = [];
+
+      // Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
+      allEntries.forEach((option: VocabularyEntry, key: number) => {
+        const value = option.authority || option.value;
+        const checked: boolean = isNotEmpty(findKey(
+          this.model.value,
+          (v) => v?.value === option.value));
+
+        const item: ListItem = {
+          id: `${this.model.id}_${value}`,
+          label: option.display,
+          value: checked,
+          index: key,
+        };
+        if (this.model.repeatable) {
+          this.formBuilderService.addFormGroupControl(listGroup, (this.model as DynamicListCheckboxGroupModel), new DynamicCheckboxModel(item));
+        } else {
+          (this.model as DynamicListRadioGroupModel).options.push({
+            label: item.label,
+            value: option,
+          });
+        }
+        tempList.push(item);
+        itemsPerGroup++;
+        this.items[groupCounter] = tempList;
+        if (itemsPerGroup === this.model.groupLength) {
+          groupCounter++;
+          itemsPerGroup = 0;
+          tempList = [];
+        }
+      });
+      this.cdr.markForCheck();
+    });
+  }
 }
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
index 0c8c1abeeb2..a8d6ef32621 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
@@ -1,38 +1,39 @@
-<div class="mb-4 ccLicense-select">
-  <ds-select
-    [disabled]="!submissionCcLicenses">
-
-    <ng-container class="selection">
-      <span *ngIf="!submissionCcLicenses">
-        <ds-loading></ds-loading>
-      </span>
-      <span *ngIf="getSelectedCcLicense()">
-        {{ getSelectedCcLicense().name }}
-      </span>
-      <span *ngIf="submissionCcLicenses && !getSelectedCcLicense()">
-        <ng-container *ngIf="storedCcLicenseLink">
-          {{ 'submission.sections.ccLicense.change' | translate }}
-        </ng-container>
-        <ng-container *ngIf="!storedCcLicenseLink">
-          {{ 'submission.sections.ccLicense.select' | translate }}
-        </ng-container>
-      </span>
-    </ng-container>
-
-    <ng-container class="menu">
-      <button *ngIf="submissionCcLicenses?.length === 0"
-              class="dropdown-item disabled">
-        {{ 'submission.sections.ccLicense.none' | translate }}
-      </button>
-      <button *ngFor="let license of submissionCcLicenses"
-              class="dropdown-item"
-              (click)="selectCcLicense(license)">
-        {{ license.name }}
-      </button>
-    </ng-container>
-
-  </ds-select>
-</div>
+@if (submissionCcLicenses) {
+  <div class="mb-4 ccLicense-select">
+    <div ngbDropdown>
+      <input id="cc-license-dropdown"
+             class="form-control"
+             [(ngModel)]="selectedCcLicense.name"
+             placeholder="{{ !storedCcLicenseLink ? ('submission.sections.ccLicense.select' | translate) : ('submission.sections.ccLicense.change' | translate)}}"
+             [ngModelOptions]="{standalone: true}"
+             ngbDropdownToggle
+             role="combobox"
+             #script="ngModel">
+      <div ngbDropdownMenu aria-labelledby="cc-license-dropdown" class="w-100 scrollable-menu"
+           role="menu"
+           infiniteScroll
+           (scroll)="onScroll($event)"
+           [infiniteScrollDistance]="5"
+           [infiniteScrollThrottle]="300"
+           [infiniteScrollUpDistance]="1.5"
+           [fromRoot]="true"
+           [scrollWindow]="false">
+
+        @if(submissionCcLicenses?.length === 0) {
+          <button class="dropdown-item disabled">
+            {{ 'submission.sections.ccLicense.none' | translate }}
+          </button>
+        } @else {
+          @for(license of submissionCcLicenses; track license.id) {
+            <button class="dropdown-item" (click)="selectCcLicense(license)">
+              {{ license.name }}
+            </button>
+          }
+        }
+      </div>
+  </div>
+  </div>
+}
 
 <ng-container *ngIf="getSelectedCcLicense()">
 
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss
index 62a902b79a3..142cd82822a 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss
@@ -1,3 +1,13 @@
 .options-select-menu {
   max-height: 25vh;
 }
+
+.ccLicense-select {
+  width: fit-content;
+}
+
+.scrollable-menu {
+  height: auto;
+  max-height: var(--ds-dropdown-menu-max-height);
+  overflow-x: hidden;
+}
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
index 7b540ecd910..2e82948c149 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
@@ -209,10 +209,10 @@ describe('SubmissionSectionCcLicensesComponent', () => {
 
   it('should display a dropdown with the different cc licenses', () => {
     expect(
-      de.query(By.css('.ccLicense-select ds-select .dropdown-menu button:nth-child(1)')).nativeElement.innerText,
+      de.query(By.css('.ccLicense-select .scrollable-menu button:nth-child(1)')).nativeElement.innerText,
     ).toContain('test license name 1');
     expect(
-      de.query(By.css('.ccLicense-select ds-select .dropdown-menu button:nth-child(2)')).nativeElement.innerText,
+      de.query(By.css('.ccLicense-select .scrollable-menu button:nth-child(2)')).nativeElement.innerText,
     ).toContain('test license name 2');
   });
 
@@ -226,9 +226,7 @@ describe('SubmissionSectionCcLicensesComponent', () => {
     });
 
     it('should display the selected cc license', () => {
-      expect(
-        de.query(By.css('.ccLicense-select ds-select button.selection')).nativeElement.innerText,
-      ).toContain('test license name 2');
+      expect(component.selectedCcLicense.name).toContain('test license name 2');
     });
 
     it('should display all field labels of the selected cc license only', () => {
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
index 04ea4b7274e..cc1925a4a66 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
@@ -4,38 +4,38 @@ import {
   NgIf,
 } from '@angular/common';
 import {
+  ChangeDetectorRef,
   Component,
   Inject,
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import {
   NgbDropdownModule,
   NgbModal,
   NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import {
-  EMPTY,
   Observable,
   of as observableOf,
   Subscription,
 } from 'rxjs';
 import {
   distinctUntilChanged,
-  expand,
   filter,
   map,
-  reduce,
   take,
+  tap,
 } from 'rxjs/operators';
 
 import { ConfigurationDataService } from '../../../core/data/configuration-data.service';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../core/data/remote-data';
+import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
 import {
   getFirstCompletedRemoteData,
-  getFirstSucceededRemoteData,
+  getFirstSucceededRemoteDataPayload,
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
 import {
@@ -71,6 +71,8 @@ import { SectionsType } from '../sections-type';
     NgForOf,
     DsSelectComponent,
     NgbDropdownModule,
+    FormsModule,
+    InfiniteScrollModule,
   ],
   standalone: true,
 })
@@ -102,7 +104,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
   /**
    * Cache of the available Creative Commons licenses.
    */
-  submissionCcLicenses: SubmissionCcLicence[];
+  submissionCcLicenses: SubmissionCcLicence[] = [];
 
   /**
    * Reference to NgbModal
@@ -114,6 +116,25 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
    */
   defaultJurisdiction: string;
 
+  /**
+   * The currently selected cc licence
+   */
+  selectedCcLicense: SubmissionCcLicence = new SubmissionCcLicence();
+
+  /**
+   * Options for paginated data loading
+   */
+  ccLicenceOptions: FindListOptions = {
+    elementsPerPage: 20,
+    currentPage: 1,
+  };
+  /**
+   * Check to stop paginated search
+   *
+   * @private
+   */
+  private _isLastPage: boolean;
+
   /**
    * The Creative Commons link saved in the workspace item.
    */
@@ -138,6 +159,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
     protected submissionCcLicenseUrlDataService: SubmissionCcLicenseUrlDataService,
     protected operationsBuilder: JsonPatchOperationsBuilder,
     protected configService: ConfigurationDataService,
+    protected ref: ChangeDetectorRef,
     @Inject('collectionIdProvider') public injectedCollectionId: string,
     @Inject('sectionDataProvider') public injectedSectionData: SectionDataObject,
     @Inject('submissionIdProvider') public injectedSubmissionId: string,
@@ -161,9 +183,10 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
    * @param ccLicense the Creative Commons license to select.
    */
   selectCcLicense(ccLicense: SubmissionCcLicence) {
-    if (!!this.getSelectedCcLicense() && this.getSelectedCcLicense().id === ccLicense.id) {
+    if (this.selectedCcLicense.id === ccLicense.id) {
       return;
     }
+    this.selectedCcLicense = ccLicense;
     this.setAccepted(false);
     this.updateSectionData({
       ccLicense: {
@@ -307,26 +330,6 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
         }
         this.sectionData.data = data;
       }),
-      this.submissionCcLicensesDataService.findAll({ currentPage: 1, elementsPerPage: 20 }).pipe(
-        getFirstSucceededRemoteData(),
-        expand((typeListRD: RemoteData<PaginatedList<SubmissionCcLicence>>) => {
-          const currentPage = typeListRD.payload.pageInfo.currentPage;
-          const totalPages = typeListRD.payload.pageInfo.totalPages;
-          if (currentPage < totalPages) {
-            const nextPageInfo = { currentPage: currentPage + 1, elementsPerPage: 20 };
-            return this.submissionCcLicensesDataService.findAll(nextPageInfo).pipe(
-              getFirstSucceededRemoteData(),
-            );
-          } else {
-            return EMPTY;
-          }
-        }),
-        reduce((acc: SubmissionCcLicence[], typeListRD: RemoteData<PaginatedList<SubmissionCcLicence>>) => acc.concat(typeListRD.payload.page), []),
-      ).subscribe(
-        (licenses) => {
-          this.submissionCcLicenses = licenses;
-        },
-      ),
       this.configService.findByPropertyName('cc.license.jurisdiction').pipe(
         getFirstCompletedRemoteData(),
         getRemoteDataPayload(),
@@ -339,6 +342,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
         }
       }),
     );
+    this.loadCcLicences();
   }
 
   /**
@@ -358,4 +362,31 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
   updateSectionData(data: WorkspaceitemSectionCcLicenseObject) {
     this.sectionService.updateSectionData(this.submissionId, this.sectionData.id, Object.assign({}, this.data, data));
   }
+
+  onScroll(event) {
+    if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
+      if (!this.isLoading && !this._isLastPage) {
+        this.ccLicenceOptions.currentPage++;
+        this.loadCcLicences();
+      }
+    }
+  }
+
+  loadCcLicences() {
+    this.isLoading = true;
+
+    this.subscriptions.push(
+      this.submissionCcLicensesDataService.findAll(this.ccLicenceOptions).pipe(
+        getFirstSucceededRemoteDataPayload(),
+        tap((response) => this._isLastPage = response.pageInfo.currentPage === response.pageInfo.totalPages),
+        map((list) => list.page),
+      ).subscribe(
+        (licenses) => {
+          this.submissionCcLicenses = [...this.submissionCcLicenses, ...licenses];
+          this.isLoading = false;
+          this.ref.detectChanges();
+        },
+      ),
+    );
+  }
 }
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 5515f7f801e..987da565489 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1684,6 +1684,8 @@
 
   "deny-request-copy.success": "Successfully denied item request",
 
+  "dynamic-list.load-more": "Load more",
+
   "dropdown.clear": "Clear selection",
 
   "dropdown.clear.tooltip": "Clear the selected option",

From 9570cd9721891fc3fb3bef613e2758a3494f3dbf Mon Sep 17 00:00:00 2001
From: FrancescoMolinaro <francesco.molinaro@4science.com>
Date: Fri, 17 Jan 2025 17:42:18 +0100
Subject: [PATCH 19/20] [DURACOM-304] refactor, fix dynamic-list.component
 loading

---
 src/app/core/data/bundle-data.service.ts      |  46 +-------
 .../item-bitstreams.component.html            |   2 +-
 .../models/list/dynamic-list.component.html   |   4 +-
 .../models/list/dynamic-list.component.ts     | 111 ++++++++++--------
 4 files changed, 72 insertions(+), 91 deletions(-)

diff --git a/src/app/core/data/bundle-data.service.ts b/src/app/core/data/bundle-data.service.ts
index 027ec4e68a7..79f877fadd7 100644
--- a/src/app/core/data/bundle-data.service.ts
+++ b/src/app/core/data/bundle-data.service.ts
@@ -82,7 +82,10 @@ export class BundleDataService extends IdentifiableDataService<Bundle> implement
    */
   // TODO should be implemented rest side
   findByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, options?: FindListOptions, ...linksToFollow: FollowLinkConfig<Bundle>[]): Observable<RemoteData<Bundle>> {
-    return this.findAllByItem(item, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow).pipe(
+    //Since we filter by bundleName where the pagination options are not indicated we need to load all the possible bundles.
+    // This is a workaround, in substitution of the previously recursive call with expand
+    const paginationOptions = options ?? { elementsPerPage: 9999 };
+    return this.findAllByItem(item, paginationOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow).pipe(
       map((rd: RemoteData<PaginatedList<Bundle>>) => {
         if (hasValue(rd.payload) && hasValue(rd.payload.page)) {
           const matchingBundle = rd.payload.page.find((bundle: Bundle) =>
@@ -115,47 +118,6 @@ export class BundleDataService extends IdentifiableDataService<Bundle> implement
     );
   }
 
-  // findByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig<Bundle>[]): Observable<RemoteData<Bundle>> {
-  //   return this.findAllByItem(item, { elementsPerPage: 1, currentPage: 1 }, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow).pipe(
-  //     expand((rd: RemoteData<PaginatedList<Bundle>>) => {
-  //       if (rd.hasSucceeded && hasValue(rd.payload) && hasValue(rd.payload.page) && rd.payload.currentPage < rd.payload.totalPages) {
-  //         const nextPageOptions = { elementsPerPage: 1, currentPage: rd.payload.currentPage + 1 };
-  //         return this.findAllByItem(item, nextPageOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-  //       } else {
-  //         return EMPTY;
-  //       }
-  //     }),
-  //     map((rd: RemoteData<PaginatedList<Bundle>>) => {
-  //       if (hasValue(rd.payload) && hasValue(rd.payload.page)) {
-  //         const matchingBundle = rd.payload.page.find((bundle: Bundle) => bundle.name === bundleName);
-  //         if (hasValue(matchingBundle)) {
-  //           return new RemoteData(
-  //             rd.timeCompleted,
-  //             rd.msToLive,
-  //             rd.lastUpdated,
-  //             RequestEntryState.Success,
-  //             null,
-  //             matchingBundle,
-  //             200
-  //           );
-  //         } else {
-  //           return new RemoteData(
-  //             rd.timeCompleted,
-  //             rd.msToLive,
-  //             rd.lastUpdated,
-  //             RequestEntryState.Error,
-  //             `The bundle with name ${bundleName} was not found.`,
-  //             null,
-  //             404
-  //           );
-  //         }
-  //       } else {
-  //         return rd as any;
-  //       }
-  //     })
-  //   );
-  // }
-
   /**
    * Get the bitstreams endpoint for a bundle
    * @param bundleId
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
index 1564d3abc79..6ac44b5ac20 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
@@ -40,7 +40,7 @@
                                    aria-describedby="reorder-description">
     </ds-item-edit-bitstream-bundle>
     <div class="d-flex justify-content-center" *ngIf="showLoadMoreLink$ | async">
-      <div class="btn btn-link py-3" (click)="loadBundles()"> {{'item.edit.bitstreams.load-more.link' | translate}}</div>
+      <button class="btn btn-link my-3" (click)="loadBundles()"> {{'item.edit.bitstreams.load-more.link' | translate}}</button>
     </div>
   </div>
   <div *ngIf="bundles?.length === 0"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
index 2407a740226..8e45d3e11e1 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -64,8 +64,8 @@
     </div>
   </div>
 
-  <div class="d-flex justify-content-center" *ngIf="(showLoadMore$ | async)">
-    <div *ngIf="(showLoadMore$ | async)" class="btn btn-link py-3" (click)="loadEntries()">{{'dynamic-list.load-more' | translate}}</div>
+  <div class="d-flex justify-content-center" *ngIf="(isLoading$ | async)">
+    <ds-loading></ds-loading>
   </div>
 
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
index 49b4bd11be9..c1964db1e75 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
@@ -9,6 +9,7 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnDestroy,
   OnInit,
   Output,
 } from '@angular/core';
@@ -28,7 +29,10 @@ import {
 } from '@ng-dynamic-forms/core';
 import { TranslateModule } from '@ngx-translate/core';
 import findKey from 'lodash/findKey';
-import { BehaviorSubject } from 'rxjs';
+import {
+  BehaviorSubject,
+  Subscription,
+} from 'rxjs';
 import {
   map,
   tap,
@@ -43,6 +47,7 @@ import {
   hasValue,
   isNotEmpty,
 } from '../../../../../empty.util';
+import { ThemedLoadingComponent } from '../../../../../loading/themed-loading.component';
 import { FormBuilderService } from '../../../form-builder.service';
 import { DynamicListCheckboxGroupModel } from './dynamic-list-checkbox-group.model';
 import { DynamicListRadioGroupModel } from './dynamic-list-radio-group.model';
@@ -69,10 +74,11 @@ export interface ListItem {
     ReactiveFormsModule,
     AsyncPipe,
     TranslateModule,
+    ThemedLoadingComponent,
   ],
   standalone: true,
 })
-export class DsDynamicListComponent extends DynamicFormControlComponent implements OnInit {
+export class DsDynamicListComponent extends DynamicFormControlComponent implements OnInit, OnDestroy {
 
   @Input() group: UntypedFormGroup;
   @Input() model: any;
@@ -82,9 +88,10 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
   @Output() focus: EventEmitter<any> = new EventEmitter<any>();
 
   public items: ListItem[][] = [];
-  public showLoadMore$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public isLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
   protected optionsList: VocabularyEntry[] = [];
   private nextPageInfo: PageInfo;
+  private subs: Subscription[] = [];
 
   constructor(private vocabularyService: VocabularyService,
               private cdr: ChangeDetectorRef,
@@ -104,6 +111,12 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
     }
   }
 
+  ngOnDestroy() {
+    if (this.subs.length > 0) {
+      this.subs.forEach(sub => sub.unsubscribe());
+    }
+  }
+
   /**
    * Emits a blur event containing a given value.
    * @param event The value to emit.
@@ -178,9 +191,9 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
   setPaginationInfo(response: PaginatedList<VocabularyEntry>) {
     if (response.pageInfo.currentPage < response.pageInfo.totalPages) {
       this.nextPageInfo = Object.assign(new PageInfo(), response.pageInfo,  { currentPage: response.currentPage + 1 });
-      this.showLoadMore$.next(true);
+      this.isLoading$.next(true);
     } else {
-      this.showLoadMore$.next(false);
+      this.isLoading$.next(false);
     }
   }
 
@@ -194,47 +207,53 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
       listGroup = this.group.controls[this.model.id] as UntypedFormGroup;
     }
 
-    this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, this.nextPageInfo).pipe(
-      getFirstSucceededRemoteDataPayload(),
-      tap((response) => this.setPaginationInfo(response)),
-      map(entries => entries.page),
-    ).subscribe((allEntries: VocabularyEntry[]) => {
-      this.optionsList = [...this.optionsList, ...allEntries];
-      let groupCounter = (this.items.length > 0) ? (this.items.length - 1) : 0;
-      let itemsPerGroup = 0;
-      let tempList: ListItem[] = [];
-
-      // Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
-      allEntries.forEach((option: VocabularyEntry, key: number) => {
-        const value = option.authority || option.value;
-        const checked: boolean = isNotEmpty(findKey(
-          this.model.value,
-          (v) => v?.value === option.value));
-
-        const item: ListItem = {
-          id: `${this.model.id}_${value}`,
-          label: option.display,
-          value: checked,
-          index: key,
-        };
-        if (this.model.repeatable) {
-          this.formBuilderService.addFormGroupControl(listGroup, (this.model as DynamicListCheckboxGroupModel), new DynamicCheckboxModel(item));
-        } else {
-          (this.model as DynamicListRadioGroupModel).options.push({
-            label: item.label,
-            value: option,
-          });
-        }
-        tempList.push(item);
-        itemsPerGroup++;
-        this.items[groupCounter] = tempList;
-        if (itemsPerGroup === this.model.groupLength) {
-          groupCounter++;
-          itemsPerGroup = 0;
-          tempList = [];
+    this.subs.push(
+      this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, this.nextPageInfo).pipe(
+        getFirstSucceededRemoteDataPayload(),
+        tap((response) => this.setPaginationInfo(response)),
+        map(entries => entries.page),
+      ).subscribe((allEntries: VocabularyEntry[]) => {
+        this.optionsList = [...this.optionsList, ...allEntries];
+        let groupCounter = this.items.length;
+        let itemsPerGroup = 0;
+        let tempList: ListItem[] = [];
+
+        // Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
+        allEntries.forEach((option: VocabularyEntry) => {
+          const value = option.authority || option.value;
+          const checked: boolean = isNotEmpty(findKey(
+            this.model.value,
+            (v) => v?.value === option.value));
+
+          const item: ListItem = {
+            id: `${this.model.id}_${value}`,
+            label: option.display,
+            value: checked,
+            index: this.optionsList.indexOf(option),
+          };
+          if (this.model.repeatable) {
+            this.formBuilderService.addFormGroupControl(listGroup, (this.model as DynamicListCheckboxGroupModel), new DynamicCheckboxModel(item));
+          } else {
+            (this.model as DynamicListRadioGroupModel).options.push({
+              label: item.label,
+              value: option,
+            });
+          }
+          tempList.push(item);
+          itemsPerGroup++;
+          this.items[groupCounter] = tempList;
+          if (itemsPerGroup === this.model.groupLength) {
+            groupCounter++;
+            itemsPerGroup = 0;
+            tempList = [];
+          }
+        });
+        this.cdr.markForCheck();
+        // If the paginated request did not reach the end keep loading the entries in the background
+        if (this.isLoading$.value) {
+          this.loadEntries();
         }
-      });
-      this.cdr.markForCheck();
-    });
+      }),
+    );
   }
 }

From 2847dc39d9c8e9e23b5d353a6fb9ed1cb4e55798 Mon Sep 17 00:00:00 2001
From: FrancescoMolinaro <francesco.molinaro@4science.com>
Date: Thu, 23 Jan 2025 15:04:41 +0100
Subject: [PATCH 20/20] [DURACOM-304] remove br

---
 .../models/list/dynamic-list.component.html                   | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
index 8e45d3e11e1..c2f35861fe5 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -28,9 +28,7 @@
           <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
         </label>
       </div>
-      <br>
     </div>
-
   </div>
 
   <div *ngIf="!model.repeatable"
@@ -60,10 +58,8 @@
           <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
         </label>
       </div>
-      <br>
     </div>
   </div>
-
   <div class="d-flex justify-content-center" *ngIf="(isLoading$ | async)">
     <ds-loading></ds-loading>
   </div>