[DURACOM-304] Refactored scripts-select.component by using infinite scroll instead of page size 9999

src/app/process-page/form/scripts-select/scripts-select.component.html

@@ -1,16 +1,41 @@
-<div class="form-group" *ngIf="scripts$ | async">
-    <label for="process-script">{{'process.new.select-script' | translate}}</label>
-    <select required id="process-script"
+<div class="d-flex w-100 flex-column gap-3">
+  <div>
+    <div ngbDropdown class="d-flex">
+      <input id="process-script"
              class="form-control"
-            name="script"
-            [(ngModel)]="selectedScript"
+             required
+             [ngModel]="selectedScript"
+             placeholder="{{'process.new.select-script.placeholder' | translate}}"
+             [ngModelOptions]="{standalone: true}"
+             ngbDropdownToggle
              #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 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">
@@ -18,3 +43,4 @@
       </div>
     </div>
   </div>
+</div>

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);
+}

src/app/process-page/form/scripts-select/scripts-select.component.ts

@@ -1,14 +1,19 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Optional, Output } from '@angular/core';
 import { ScriptDataService } from '../../../core/data/processes/script-data.service';
 import { Script } from '../../scripts/script.model';
-import { Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription, tap } from 'rxjs';
 import { distinctUntilChanged, filter, map, switchMap, take } from 'rxjs/operators';
-import { getRemoteDataPayload, getFirstSucceededRemoteData } from '../../../core/shared/operators';
+import {
+  getRemoteDataPayload,
+  getFirstSucceededRemoteData,
+  getFirstCompletedRemoteData
+} from '../../../core/shared/operators';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { hasNoValue, hasValue } from '../../../shared/empty.util';
 import { ControlContainer, NgForm } from '@angular/forms';
 import { controlContainerFactory } from '../process-form.component';
+import { FindListOptions } from "../../../core/data/find-list-options.model";
 
 const SCRIPT_QUERY_PARAMETER = 'script';
 
@@ -31,10 +36,20 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
   /**
    * All available scripts
    */
-  scripts$: Observable<Script[]>;
+  scripts: Script[] = [];
+
   private _selectedScript: Script;
   private routeSub: Subscription;
 
+  private _isLastPage = false;
+
+  scriptOptions: FindListOptions = {
+    elementsPerPage: 20,
+    currentPage: 1,
+  };
+
+  isLoading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
   constructor(
     private scriptService: ScriptDataService,
     private router: Router,
@@ -47,33 +62,48 @@ 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.loadScripts();
+  }
 
-    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);
+  /**
+   * Load the scripts and check if the route contains a script
+   */
+  loadScripts() {
+    if (this.isLoading$.value) return;
+    this.isLoading$.next(true);
+
+    this.routeSub = 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();
+      }
+    }
+  }
+
   /**
    * Returns the identifier of the selected script
    */
@@ -93,6 +123,17 @@ 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;