From ee8e915695503debab6875af2d0ce938b0fb98cf Mon Sep 17 00:00:00 2001 From: Victor Hugo Duran Santiago Date: Thu, 30 May 2024 20:14:24 -0600 Subject: [PATCH 1/4] Change - Metadata field selector add infinite scroll for data paginated --- .../metadata-field-selector.component.html | 29 ++++- .../metadata-field-selector.component.scss | 5 + .../metadata-field-selector.component.spec.ts | 9 +- .../metadata-field-selector.component.ts | 123 ++++++++++++++---- src/app/dso-shared/dso-shared.module.ts | 2 + 5 files changed, 130 insertions(+), 38 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..331567fbe6f 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..89c430dae00 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..136e6b5f8d1 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,7 +9,13 @@ 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, @@ -22,10 +28,11 @@ 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 { of } from 'rxjs'; import { NotificationsService } from '../../../shared/notifications/notifications.service'; import { TranslateService } from '@ngx-translate/core'; import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model'; +import { combineLatest as observableCombineLatest } from 'rxjs'; @Component({ selector: 'ds-metadata-field-selector', @@ -67,7 +74,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 +109,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 +143,33 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV * Update the mdFieldOptions$ depending on the query$ fired by querying the server */ ngOnInit(): void { + this.input.valueChanges.pipe( + debounceTime(this.debounceTime), + startWith(''), + tap( () => this.currentPage$.next(1) ) + ).subscribe((valueChange) => { + 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, page); + }) + ).subscribe((rd ) => { + if (!this.selectedValueLoading) {this.updateList(rd);} + })); } /** @@ -181,6 +213,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 */ diff --git a/src/app/dso-shared/dso-shared.module.ts b/src/app/dso-shared/dso-shared.module.ts index 7d44d6a9206..6f5f9912181 100644 --- a/src/app/dso-shared/dso-shared.module.ts +++ b/src/app/dso-shared/dso-shared.module.ts @@ -7,10 +7,12 @@ import { DsoEditMetadataValueComponent } from './dso-edit-metadata/dso-edit-meta import { DsoEditMetadataHeadersComponent } from './dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component'; import { DsoEditMetadataValueHeadersComponent } from './dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component'; import { ThemedDsoEditMetadataComponent } from './dso-edit-metadata/themed-dso-edit-metadata.component'; +import { InfiniteScrollModule } from 'ngx-infinite-scroll'; @NgModule({ imports: [ SharedModule, + InfiniteScrollModule ], declarations: [ DsoEditMetadataComponent, From ea4076af29dc4a9f5df2284fc0e170da6f9454fd Mon Sep 17 00:00:00 2001 From: Victor Hugo Duran Santiago Date: Sun, 8 Sep 2024 00:58:05 -0600 Subject: [PATCH 2/4] Update change on new BRANCH --- .../metadata-field-selector.component.html | 2 +- .../metadata-field-selector.component.ts | 22 ++++++------------- 2 files changed, 8 insertions(+), 16 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 331567fbe6f..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 @@ -29,7 +29,7 @@
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 17976651513..50c8e7db590 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 @@ -32,7 +32,6 @@ import { } from 'rxjs'; import { debounceTime, - distinctUntilChanged, map, startWith, switchMap, @@ -51,26 +50,19 @@ import { getFirstCompletedRemoteData, metadataFieldsToString, } from '../../../core/shared/operators'; -import { Observable } from 'rxjs/internal/Observable'; -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'; import { NotificationsService } from '../../../shared/notifications/notifications.service'; -import { TranslateService } from '@ngx-translate/core'; -import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model'; import { combineLatest as observableCombineLatest } from 'rxjs'; import { ClickOutsideDirective } from '../../../shared/utils/click-outside.directive'; -import { followLink } from '../../../shared/utils/follow-link-config.model'; +import { ThemedLoadingComponent } from "../../../shared/loading/themed-loading.component"; +import { InfiniteScrollModule } from 'ngx-infinite-scroll'; @Component({ selector: 'ds-metadata-field-selector', styleUrls: ['./metadata-field-selector.component.scss'], templateUrl: './metadata-field-selector.component.html', standalone: true, - imports: [FormsModule, NgClass, ReactiveFormsModule, ClickOutsideDirective, NgIf, NgFor, AsyncPipe, TranslateModule], + imports: [FormsModule, NgClass, ReactiveFormsModule, ClickOutsideDirective, NgIf, NgFor, AsyncPipe, TranslateModule, ThemedLoadingComponent, InfiniteScrollModule], }) /** * Component displaying a searchable input for metadata-fields @@ -176,17 +168,17 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV * Update the mdFieldOptions$ depending on the query$ fired by querying the server */ ngOnInit(): void { - this.input.valueChanges.pipe( + this.subs.push(this.input.valueChanges.pipe( debounceTime(this.debounceTime), startWith(''), - tap( () => this.currentPage$.next(1) ) ).subscribe((valueChange) => { + this.currentPage$.next(1); if (!this.selectedValueLoading) { this.query$.next(valueChange); } this.mdField = valueChange; this.mdFieldChange.emit(this.mdField); - }); + })); this.subs.push( observableCombineLatest( this.query$, @@ -198,7 +190,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV if (page === 1) { this.mdFieldOptions$.next([]); } - return this.search(query, page); + return this.search(query as string, page as number); }) ).subscribe((rd ) => { if (!this.selectedValueLoading) {this.updateList(rd);} From 354675f06b6104868173c62f3d794203aa7a35f1 Mon Sep 17 00:00:00 2001 From: Victor Hugo Duran Santiago Date: Sun, 8 Sep 2024 15:17:34 -0600 Subject: [PATCH 3/4] Fix - LINT ERRORS --- .../metadata-field-selector.component.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) 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 50c8e7db590..d6508e9bb62 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 @@ -24,8 +24,10 @@ import { TranslateModule, TranslateService, } from '@ngx-translate/core'; +import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { BehaviorSubject, + combineLatest as observableCombineLatest, Observable, of, Subscription, @@ -44,18 +46,16 @@ import { SortOptions, } from '../../../core/cache/models/sort-options.model'; import { RegistryService } from '../../../core/registry/registry.service'; -import { followLink } from '../../../shared/utils/follow-link-config.model'; import { getAllSucceededRemoteData, getFirstCompletedRemoteData, metadataFieldsToString, } from '../../../core/shared/operators'; import { hasValue } from '../../../shared/empty.util'; +import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component'; import { NotificationsService } from '../../../shared/notifications/notifications.service'; -import { combineLatest as observableCombineLatest } from 'rxjs'; import { ClickOutsideDirective } from '../../../shared/utils/click-outside.directive'; -import { ThemedLoadingComponent } from "../../../shared/loading/themed-loading.component"; -import { InfiniteScrollModule } from 'ngx-infinite-scroll'; +import { followLink } from '../../../shared/utils/follow-link-config.model'; @Component({ selector: 'ds-metadata-field-selector', @@ -181,9 +181,9 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV })); this.subs.push( observableCombineLatest( - this.query$, - this.currentPage$ - ) + this.query$, + this.currentPage$, + ) .pipe( switchMap(([query, page]: [string, number]) => { this.loading = true; @@ -191,9 +191,9 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV this.mdFieldOptions$.next([]); } return this.search(query as string, page as number); - }) + }), ).subscribe((rd ) => { - if (!this.selectedValueLoading) {this.updateList(rd);} + if (!this.selectedValueLoading) {this.updateList(rd);} })); } @@ -250,7 +250,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV /** * @Description It update the mdFieldOptions$ according the query result page - * */ + * */ updateList(list: string[]) { this.loading = false; this.hasNextPage = list.length > 0; @@ -267,10 +267,10 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV 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')) + currentPage: page }, useCache, false, followLink('schema')) .pipe( getAllSucceededRemoteData(), - metadataFieldsToString() + metadataFieldsToString(), ); } /** From ad1c954984c39df32d3a4bd87b5fe3e713a05dcd Mon Sep 17 00:00:00 2001 From: Victor Hugo Duran Santiago Date: Mon, 9 Sep 2024 00:00:48 -0600 Subject: [PATCH 4/4] Fix - LINT ERRORS --- .../metadata-field-selector.component.spec.ts | 2 +- .../metadata-field-selector.component.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) 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 1503b28e5bf..198a6f102d4 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 @@ -40,7 +40,7 @@ describe('MetadataFieldSelectorComponent', () => { id: 0, prefix: 'dc', namespace: 'https://schema.org/CreativeWork', - field: '.' + field: '.', }); metadataFields = [ Object.assign(new MetadataField(), { 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 d6508e9bb62..abdf2f14d86 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 @@ -193,8 +193,8 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV return this.search(query as string, page as number); }), ).subscribe((rd ) => { - if (!this.selectedValueLoading) {this.updateList(rd);} - })); + if (!this.selectedValueLoading) {this.updateList(rd);} + })); } /**