Skip to content

Commit

Permalink
feat: improve paging of search results (DEV-2468) (#1995)
Browse files Browse the repository at this point in the history
  • Loading branch information
domsteinbach authored Jan 27, 2025
1 parent c7fb551 commit 8c9d77c
Show file tree
Hide file tree
Showing 18 changed files with 363 additions and 168 deletions.
2 changes: 1 addition & 1 deletion apps/dsp-app/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ export function httpLoaderFactory(httpClient: HttpClient) {
...StringLiteralComponents,
],
imports: [
...UiStandaloneComponents,
AngularSplitModule,
AppDatePickerComponent,
AppProgressIndicatorComponent,
Expand Down Expand Up @@ -123,6 +122,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
MultiLanguageTextareaComponent,
MutiLanguageInputComponent,
NgxsStoreModule,
...UiStandaloneComponents,
],
providers: [
AppConfigService,
Expand Down
12 changes: 11 additions & 1 deletion apps/dsp-app/src/assets/i18n/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -216,5 +216,15 @@
"home": "DSP-App Startseite",
"myAccount": "Mein Konto"
}
},
"paginator": {
"firstPage": "Erste Seite",
"lastPage": "Letzte Seite",
"nextPage": "Nächste Seite",
"inputTooltip": "Seitennummer eingeben und über Enter zur gewählten Seite springen.",
"pageLabel": "Seite",
"previousPage": "Vorherige Seite",
"rangeLabelOf": "von",
"rangeLabelZero": "Seite 1 von 1"
}
}
}
12 changes: 11 additions & 1 deletion apps/dsp-app/src/assets/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -243,5 +243,15 @@
"home": "DSP-App Home Page",
"myAccount": "My Account"
}
},
"paginator": {
"firstPage": "First page",
"lastPage": "Last page",
"nextPage": "Next page",
"inputTooltip": "Enter the page number and apply with the Enter key.",
"pageLabel": "Page",
"previousPage": "Previous page",
"rangeLabelOf": "of",
"rangeLabelZero": "Page 1 of 1"
}
}
}
14 changes: 13 additions & 1 deletion apps/dsp-app/src/assets/i18n/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -243,5 +243,17 @@
"home": "DSP-App Home Page",
"myAccount": "My Account"
}
},
"paginator": {
"firstPage": "Première page",
"itemsPerPage": "Articles par page :",
"lastPage": "Dernière page",
"nextPage": "Page suivante",
"inputTooltip": "Saisir le numéro de page et appuyer sur Entrée pour aller à la page.",
"pageLabel": "Page",
"previousPage": "Page précédente",
"rangeLabelOf": "sur",
"rangeLabelZero": "Page 1 sur 1"
}
}

}
13 changes: 12 additions & 1 deletion apps/dsp-app/src/assets/i18n/it.json
Original file line number Diff line number Diff line change
Expand Up @@ -243,5 +243,16 @@
"home": "DSP-App Home Page",
"myAccount": "My Account"
}
},
"paginator": {
"firstPage": "Prima pagina",
"itemsPerPage": "Elementi per pagina:",
"lastPage": "Ultima pagina",
"nextPage": "Pagina successiva",
"inputTooltip": "Inserisci il numero della pagina e premi Invio per andare alla pagina.",
"previousPage": "Pagina precedente",
"pageLabel": "Pagina",
"rangeLabelOf": "di",
"rangeLabelZero": "Pagina 1 di 1"
}
}
}
13 changes: 12 additions & 1 deletion apps/dsp-app/src/assets/i18n/rm.json
Original file line number Diff line number Diff line change
Expand Up @@ -243,5 +243,16 @@
"home": "DSP-App Home Page",
"myAccount": "My Account"
}
},
"paginator": {
"firstPage": "First page",
"itemsPerPage": "Items per page:",
"lastPage": "Last page",
"nextPage": "Next page",
"inputTooltip": "Enter the page number and apply with the Enter key.",
"previousPage": "Previous page",
"pageLabel": "Page",
"rangeLabelOf": "of",
"rangeLabelZero": "Page 1 of 1"
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@
</button>
</div>
</div>
<dasch-swiss-app-pager #pager (pageChanged)="doSearch($event)" [numberOfAllResults]="numberOfAllResults">
</dasch-swiss-app-pager>

<!-- container with search results -->
<div class="list-view-container">
<dasch-swiss-app-progress-indicator *ngIf="loading"></dasch-swiss-app-progress-indicator>
<div *ngIf="!loading && (numberOfAllResults > 0 && resources)">
<dasch-swiss-app-pager (pageIndexChanged)="doSearch($event)" [numberOfAllResults]="numberOfAllResults">
</dasch-swiss-app-pager>
<div *ngIf="numberOfAllResults > 0 && resources">
<app-resource-list
[withMultipleSelection]="true"
[resources]="resources"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
OnDestroy,
OnInit,
Output,
ViewChild,
} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ApiResponseError, CountQueryResponse, KnoraApiConnection, ReadResourceSequence } from '@dasch-swiss/dsp-js';
Expand All @@ -18,7 +17,6 @@ import { OntologiesSelectors } from '@dasch-swiss/vre/core/state';
import { FilteredResources, SearchParams } from '@dasch-swiss/vre/shared/app-common-to-move';
import { ComponentCommunicationEventService, EmitEvent, Events } from '@dasch-swiss/vre/shared/app-helper-services';
import { NotificationService } from '@dasch-swiss/vre/ui/notification';
import { PagerComponent } from '@dasch-swiss/vre/ui/ui';
import { Store } from '@ngxs/store';
import { combineLatest, of, Subject, Subscription } from 'rxjs';
import { map, take, takeUntil, tap } from 'rxjs/operators';
Expand Down Expand Up @@ -69,16 +67,12 @@ export class ListViewComponent implements OnChanges, OnInit, OnDestroy {
*/
@Output() selectedResources: EventEmitter<FilteredResources> = new EventEmitter<FilteredResources>();

@ViewChild('pager', { static: false }) pagerComponent: PagerComponent;

resources: ReadResourceSequence;

selectedResourceIdx: number[] = [];

componentCommsSubscriptions: Subscription[] = [];

resetCheckBoxes = false;

// number of all results including the ones not included as resources in the response bc. the user does not have the permissions to see them
numberOfAllResults = 0;

Expand Down Expand Up @@ -119,7 +113,6 @@ export class ListViewComponent implements OnChanges, OnInit, OnDestroy {
if (this.isCurrentSearch()) {
this.currentSearch = this.search;
this.initSearch();
this.pagerComponent.initPager();
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChildren } from '@angular/core';
import { MatCheckbox } from '@angular/material/checkbox';
import { Constants, ReadLinkValue, ReadResource, ReadResourceSequence } from '@dasch-swiss/dsp-js';
import { ResourceService } from '@dasch-swiss/vre/shared/app-common';
Expand All @@ -11,7 +11,7 @@ import { ListViewService } from '../list-view.service';
templateUrl: './resource-list.component.html',
styleUrls: ['./resource-list.component.scss'],
})
export class ResourceListComponent implements OnInit {
export class ResourceListComponent implements OnChanges {
/**
* list of all resource checkboxes. This list is used to
* unselect all checkboxes when single selection to view
Expand Down Expand Up @@ -48,9 +48,9 @@ export class ResourceListComponent implements OnInit {
private _resourceService: ResourceService
) {}

ngOnInit() {
ngOnChanges(changes: SimpleChanges) {
// select the first item in the list
if (this.resources.resources.length) {
if (changes['resources'] && this.resources.resources.length) {
this.selectResource({
checked: true,
resIndex: 0,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
import { Cardinality, Constants, ReadLinkValue, ResourcePropertyDefinition } from '@dasch-swiss/dsp-js';
import { ResourceSelectors } from '@dasch-swiss/vre/core/state';
import { DspResource, PropertyInfoValues } from '@dasch-swiss/vre/shared/app-common';
import { PagerComponent } from '@dasch-swiss/vre/ui/ui';
import { IncomingResourcePagerComponent } from '@dasch-swiss/vre/ui/ui';
import { Store } from '@ngxs/store';
import { BehaviorSubject, Subject } from 'rxjs';
import { map, take, takeUntil } from 'rxjs/operators';
Expand Down Expand Up @@ -93,7 +93,10 @@ import { sortByKeys } from './sortByKeys';
<app-incoming-standoff-link-value
*ngIf="(incomingLinks$ | async)?.length > 0"
[links]="incomingLinks$ | async"></app-incoming-standoff-link-value>
<dasch-swiss-app-pager #pager (pageChanged)="pageChanged()"></dasch-swiss-app-pager>
<dasch-swiss-app-incoming-resource-pager
#pager
[lastItemOfPage]="incomingLinks.length"
(pageChanged)="pageChanged()"></dasch-swiss-app-incoming-resource-pager>
</app-property-row>
<ng-template #noProperties>
Expand Down Expand Up @@ -145,7 +148,7 @@ export class PropertiesDisplayComponent implements OnChanges, OnDestroy {
@Output() afterResourceDeleted = new EventEmitter();

@ViewChild('pager', { static: false })
pagerComponent: PagerComponent | undefined;
pagerComponent: IncomingResourcePagerComponent | undefined;

protected readonly cardinality = Cardinality;

Expand Down Expand Up @@ -183,17 +186,14 @@ export class PropertiesDisplayComponent implements OnChanges, OnDestroy {
this.editableProperties = this.properties.filter(prop => (prop.propDef as ResourcePropertyDefinition).isEditable);

this.incomingLinks$.next([]);
if (this.pagerComponent) {
this.pagerComponent!.initPager();
}

this.doIncomingLinkSearch(offset);
this.setStandOffLinks();
}

pageChanged() {
this.incomingLinks$.next(
this.incomingLinks.slice(this.pagerComponent?.currentRangeStart, this.pagerComponent?.currentRangeEnd)
this.incomingLinks.slice(this.pagerComponent?.itemRangeStart, this.pagerComponent?.itemRangeEnd)
);
}

Expand All @@ -203,11 +203,8 @@ export class PropertiesDisplayComponent implements OnChanges, OnDestroy {
.pipe(take(1))
.subscribe(incomingLinks => {
this.incomingLinks = incomingLinks;
this.incomingLinks$.next(incomingLinks.slice(0, PagerComponent.pageSize));
this.incomingLinks$.next(incomingLinks.slice(0, this.pagerComponent!.pageSize - 1));
this._cd.detectChanges();
if (incomingLinks.length > 0) {
this.pagerComponent!.calculateNumberOfAllResults(incomingLinks.length);
}
});
}

Expand Down
1 change: 1 addition & 0 deletions libs/vre/ui/ui/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export * from './lib/dialog/dialog.service';
export * from './lib/dialog/dialog-sizes.constant';
export * from './lib/dialog/confirm-dialog.component';
export * from './lib/pager/pager.component';
export * from './lib/incoming-resource-pager/incoming-resource-pager.component';
export * from './lib/time-input/seconds-to-time-string';
export * from './lib/time-input/time-format.directive';
export * from './lib/time-input/time-input.component';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class="paging-container">
<div class="navigation">
<button mat-button class="pagination-button previous" [disabled]="pageIndex === 0" (click)="changePage( - 1)">
<mat-icon>west</mat-icon>
<span>{{'uiControls.pager.previous' | translate}}</span>
</button>
<span class="fill-remaining-space"></span>
<div class="range">
<span>{{itemRangeStart}} - </span>
<span>{{itemRangeEnd }}</span>
</div>
<span class="fill-remaining-space"></span>
<button mat-button class="pagination-button next" [disabled]="isLastOnPage" (click)="changePage(1)">
<span>{{'uiControls.pager.next' | translate}}</span>
<mat-icon>east</mat-icon>
</button>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
@use '../../../../../../../apps/dsp-app/src/styles/config' as *;

.paging-container {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
position: sticky !important;
top: 0;
background: $bright;
z-index: 1;

.navigation {
display: flex;
box-sizing: border-box;
flex-direction: row;
align-items: center;
white-space: nowrap;
padding: 0 16px;
height: 60px;
width: 100%;

.pagination-button:disabled {
span,
mat-icon{
color: $cool_gray_300;
}
}

.pagination-button {
&.previous {
span{
padding-left: 14px;
}
}

&.next {
span{
padding-right: 14px;
}
}

span,
mat-icon{
color: $primary;
font-weight: 400;
}
}

.range{
color: $cool_gray_500;
font-weight: 300;
}
}
}

button.active {
background-color: $black-12-opacity;
}

.link:hover {
background-color: $black-12-opacity;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';

@Component({
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'dasch-swiss-app-incoming-resource-pager',
imports: [MatIconModule, MatButtonModule, TranslateModule],
templateUrl: './incoming-resource-pager.component.html',
styleUrls: ['./incoming-resource-pager.component.scss'],
})
export class IncomingResourcePagerComponent {
@Input() pageSize = 25;
@Input() lastItemOfPage = 0;
@Output() pageChanged: EventEmitter<number> = new EventEmitter<number>();

private _pageIndex = 0;

get pageIndex(): number {
return this._pageIndex;
}

get isLastOnPage(): boolean {
return this.lastItemOfPage !== undefined && this.lastItemOfPage < this.pageSize;
}

get itemRangeStart(): number {
return this.pageSize * this._pageIndex + 1;
}

get itemRangeEnd(): number {
return this.lastItemOfPage ? this.lastItemOfPage : this.pageSize * (this._pageIndex + 1);
}

changePage(dir: 1 | -1) {
this._pageIndex += dir;
this.pageChanged.emit(dir);
}
}
Loading

0 comments on commit 8c9d77c

Please sign in to comment.