[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.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,31 +62,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.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();
+      }
+    }
   }
 
   /**
@@ -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;