From 9081fbb114b12e3882bc8397fac055d63112c0ee Mon Sep 17 00:00:00 2001 From: VictorHugoDuranS Date: Fri, 10 Jan 2025 15:17:08 -0600 Subject: [PATCH] Change - Metadata field selector, add infinite scroll for data paginated (#3096) * Change - Metadata field selector add infinite scroll for data paginated * Update change on new BRANCH * Fix - LINT ERRORS * Fix - LINT ERRORS --- .../metadata-field-selector.component.html | 29 +++- .../metadata-field-selector.component.scss | 5 + .../metadata-field-selector.component.spec.ts | 9 +- .../metadata-field-selector.component.ts | 130 +++++++++++++----- 4 files changed, 131 insertions(+), 42 deletions(-) diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html index 3f5af76051e..a82f31b9538 100644 --- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html @@ -6,13 +6,30 @@ [formControl]="input" (focusin)="query$.next(mdField)" (dsClickOutside)="query$.next(null)" - (click)="$event.stopPropagation();" /> + (click)="$event.stopPropagation();" + (keyup)="this.selectedValueLoading = false" + />
{{ dsoType + '.edit.metadata.metadatafield.invalid' | translate }}
-
-
-
- + +
diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.scss b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.scss index e69de29bb2d..e4c20f130d9 100644 --- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.scss +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.scss @@ -0,0 +1,5 @@ +.scrollable-menu { + height: auto; + max-height: var(--ds-dso-selector-list-max-height); + overflow: scroll; +} diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.spec.ts b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.spec.ts index de8736df94d..999012a7feb 100644 --- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.spec.ts +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.spec.ts @@ -28,7 +28,8 @@ describe('MetadataFieldSelectorComponent', () => { metadataSchema = Object.assign(new MetadataSchema(), { id: 0, prefix: 'dc', - namespace: 'http://dublincore.org/documents/dcmi-terms/', + namespace: 'https://schema.org/CreativeWork', + field: '.', }); metadataFields = [ Object.assign(new MetadataField(), { @@ -68,10 +69,10 @@ describe('MetadataFieldSelectorComponent', () => { }); describe('when a query is entered', () => { - const query = 'test query'; + const query = 'dc.d'; beforeEach(() => { - component.showInvalid = true; + component.showInvalid = false; component.query$.next(query); }); @@ -80,7 +81,7 @@ describe('MetadataFieldSelectorComponent', () => { }); it('should query the registry service for metadata fields and include the schema', () => { - expect(registryService.queryMetadataFields).toHaveBeenCalledWith(query, { elementsPerPage: 10, sort: new SortOptions('fieldName', SortDirection.ASC) }, true, false, followLink('schema')); + expect(registryService.queryMetadataFields).toHaveBeenCalledWith(query, { elementsPerPage: 20, sort: new SortOptions('fieldName', SortDirection.ASC), currentPage: 1 }, true, false, followLink('schema')); }); }); diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts index fc0d57046d0..9e5e8dbe734 100644 --- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts @@ -9,28 +9,34 @@ import { Output, ViewChild } from '@angular/core'; -import { debounceTime, distinctUntilChanged, map, switchMap, take, tap } from 'rxjs/operators'; +import { debounceTime, map, startWith, switchMap, take, tap } from 'rxjs/operators'; import { followLink } from '../../../shared/utils/follow-link-config.model'; import { getAllSucceededRemoteData, getFirstCompletedRemoteData, metadataFieldsToString } from '../../../core/shared/operators'; -import { Observable } from 'rxjs/internal/Observable'; +import { + BehaviorSubject, + combineLatest as observableCombineLatest, + Observable, + of, + Subscription, +} from 'rxjs'; import { RegistryService } from '../../../core/registry/registry.service'; import { UntypedFormControl } from '@angular/forms'; -import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; import { hasValue } from '../../../shared/empty.util'; -import { Subscription } from 'rxjs/internal/Subscription'; -import { of } from 'rxjs/internal/observable/of'; +import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component'; import { NotificationsService } from '../../../shared/notifications/notifications.service'; import { TranslateService } from '@ngx-translate/core'; +import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model'; @Component({ selector: 'ds-metadata-field-selector', styleUrls: ['./metadata-field-selector.component.scss'], - templateUrl: './metadata-field-selector.component.html' + templateUrl: './metadata-field-selector.component.html', + imports: [ThemedLoadingComponent, InfiniteScrollModule], }) /** * Component displaying a searchable input for metadata-fields @@ -67,7 +73,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV * List of available metadata field options to choose from, dependent on the current query the user entered * Shows up in a dropdown below the input */ - mdFieldOptions$: Observable; + mdFieldOptions$: BehaviorSubject = new BehaviorSubject([]); /** * FormControl for the input @@ -102,6 +108,30 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV */ subs: Subscription[] = []; + + /** + * The current page to load + * Dynamically goes up as the user scrolls down until it reaches the last page possible + */ + currentPage$ = new BehaviorSubject(1); + + /** + * Whether or not the list contains a next page to load + * This allows us to avoid next pages from trying to load when there are none + */ + hasNextPage = false; + + /** + * Whether or not new results are currently loading + */ + loading = false; + + /** + * Default page option for this feature + */ + pageOptions = { elementsPerPage: 20, sort: new SortOptions('fieldName', SortDirection.ASC) }; + + constructor(protected registryService: RegistryService, protected notificationsService: NotificationsService, protected translate: TranslateService) { @@ -112,32 +142,33 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV * Update the mdFieldOptions$ depending on the query$ fired by querying the server */ ngOnInit(): void { + this.subs.push(this.input.valueChanges.pipe( + debounceTime(this.debounceTime), + startWith(''), + ).subscribe((valueChange) => { + this.currentPage$.next(1); + if (!this.selectedValueLoading) { + this.query$.next(valueChange); + } + this.mdField = valueChange; + this.mdFieldChange.emit(this.mdField); + })); this.subs.push( - this.input.valueChanges.pipe( - debounceTime(this.debounceTime), - ).subscribe((valueChange) => { - if (!this.selectedValueLoading) { - this.query$.next(valueChange); - } - this.selectedValueLoading = false; - this.mdField = valueChange; - this.mdFieldChange.emit(this.mdField); - }), - ); - this.mdFieldOptions$ = this.query$.pipe( - distinctUntilChanged(), - switchMap((query: string) => { - this.showInvalid = false; - if (query !== null) { - return this.registryService.queryMetadataFields(query, { elementsPerPage: 10, sort: new SortOptions('fieldName', SortDirection.ASC) }, true, false, followLink('schema')).pipe( - getAllSucceededRemoteData(), - metadataFieldsToString(), - ); - } else { - return [[]]; - } - }), - ); + observableCombineLatest( + this.query$, + this.currentPage$, + ) + .pipe( + switchMap(([query, page]: [string, number]) => { + this.loading = true; + if (page === 1) { + this.mdFieldOptions$.next([]); + } + return this.search(query as string, page as number); + }), + ).subscribe((rd ) => { + if (!this.selectedValueLoading) {this.updateList(rd);} + })); } /** @@ -181,6 +212,41 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV this.input.setValue(mdFieldOption); } + + /** + * When the user reaches the bottom of the page (or almost) and there's a next page available, increase the current page + */ + onScrollDown() { + if (this.hasNextPage && !this.loading) { + this.currentPage$.next(this.currentPage$.value + 1); + } + } + + /** + * @Description It update the mdFieldOptions$ according the query result page + * */ + updateList(list: string[]) { + this.loading = false; + this.hasNextPage = list.length > 0; + const currentEntries = this.mdFieldOptions$.getValue(); + this.mdFieldOptions$.next([...currentEntries, ...list]); + this.selectedValueLoading = false; + } + /** + * Perform a search for the current query and page + * @param query Query to search objects for + * @param page Page to retrieve + * @param useCache Whether or not to use the cache + */ + search(query: string, page: number, useCache: boolean = true) { + return this.registryService.queryMetadataFields(query,{ + elementsPerPage: this.pageOptions.elementsPerPage, sort: this.pageOptions.sort, + currentPage: page }, useCache, false, followLink('schema')) + .pipe( + getAllSucceededRemoteData(), + metadataFieldsToString(), + ); + } /** * Unsubscribe from any open subscriptions */