From a9d151801b65088817496c02e7f1a9c811bec909 Mon Sep 17 00:00:00 2001 From: Alisa Ismailati Date: Wed, 20 Nov 2024 15:23:09 +0100 Subject: [PATCH 01/11] [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 @@ -
- - - +
+
+
+ + +
+
+
-
- {{'process.new.select-script.required' | translate}} -
+
+ {{ 'process.new.select-script.required' | translate }} +
+
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; + scripts: Script[] = []; + private _selectedScript: Script; - private routeSub: Subscription; + private subscription: Subscription; + + private _isLastPage = false; + + scriptOptions: FindListOptions = { + elementsPerPage: 20, + currentPage: 1, + }; + + isLoading$: BehaviorSubject = 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