13503929244

Committed 24 Feb 2025 05:21PM UTC coverage: 85.665% (+1.2%) from 84.467%

Build # 13503929244

Build Type

Pull #1120

github

Committed by

web-flow

Commit Message

Merge 596f118dc into 77e75b46a

Pull Request Pull Request #1120: Datahub: Add pagination for table component

Run Details

1353 of 1745 branches covered (77.54%)

Branch coverage included in aggregate %.

94 of 105 new or added lines in 8 files covered. (89.52%)

15 existing lines in 1 file now uncovered.

3840 of 4317 relevant lines covered (88.95%)

246.11 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

81.82

/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

import { ScrollingModule } from '@angular/cdk/scrolling'
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  OnChanges,
  OnInit,
  Output,
  ViewChild,
} from '@angular/core'
import { MatSort, MatSortModule } from '@angular/material/sort'
import { MatTableModule } from '@angular/material/table'
import { TranslateModule } from '@ngx-translate/core'
import { DataTableDataSource } from './data-table.data.source'
import { BaseReader } from '@geonetwork-ui/data-fetcher'
import {
  MatPaginator,
  MatPaginatorIntl,
  MatPaginatorModule,
} from '@angular/material/paginator'
import { CustomMatPaginatorIntl } from './custom.mat.paginator.intl'
import { CommonModule } from '@angular/common'
import { BehaviorSubject, filter, firstValueFrom } from 'rxjs'
import { LoadingMaskComponent } from '@geonetwork-ui/ui/widgets'
import { LetDirective } from '@ngrx/component'

const rowIdPrefix = 'table-item-'

export type TableItemId = string | number
type TableItemType = string | number | Date

export interface TableItemModel {
  id: TableItemId
  [key: string]: TableItemType
}

@Component({
  standalone: true,
  imports: [
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    ScrollingModule,
    TranslateModule,
    CommonModule,
    LoadingMaskComponent,
    LetDirective,
  ],
  providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }],
  selector: 'gn-ui-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
  @Input() set dataset(value: BaseReader) {
    this.properties$.next(null)
    this.dataset_ = value
    this.dataset_.load()
    this.dataset_.properties.then((properties) =>
      this.properties$.next(properties.map((p) => p.name))
    )
    this.dataset_.info.then((info) => (this.count = info.itemsCount))
  }
  @Input() activeId: TableItemId
  @Output() selected = new EventEmitter<any>()

  @ViewChild(MatSort) sort: MatSort
  @ViewChild(MatPaginator) paginator: MatPaginator

  dataset_: BaseReader
  properties$ = new BehaviorSubject<string[]>(null)
  dataSource: DataTableDataSource
  headerHeight: number
  count: number
  loading$ = new BehaviorSubject<boolean>(false)

  constructor(
    private eltRef: ElementRef,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.dataSource = new DataTableDataSource()
  }

  ngAfterViewInit() {
    this.headerHeight =
      this.eltRef.nativeElement.querySelector('thead').offsetHeight
    this.setPagination()
    this.cdr.detectChanges()
  }

  ngOnChanges() {
    this.setPagination()
  }

  setSort(sort: MatSort) {
    if (!this.dataset_) return
    if (!sort.active) {
      this.dataset_.orderBy()
    } else {
      this.dataset_.orderBy([sort.direction || 'asc', sort.active])
    }
    this.readData()
  }

  setPagination() {
    if (!this.paginator) return
    if (!this.dataset_) return
    this.dataset_.limit(
      this.paginator.pageIndex * this.paginator.pageSize,
      this.paginator.pageSize
    )
    this.readData()
  }

  private async readData() {
    this.loading$.next(true)
    // wait for properties to be read
    const properties = await firstValueFrom(
      this.properties$.pipe(filter((p) => !!p))
    )
    const propsWithoutGeom = properties.filter(
      (p) => !p.toLowerCase().startsWith('geom')
    )
    this.dataset_.select(...propsWithoutGeom)
    await this.dataSource.showData(this.dataset_.read())
    this.loading$.next(false)
  }

  scrollToItem(itemId: TableItemId): void {
    const row = this.eltRef.nativeElement.querySelector(
      `#${this.getRowEltId(itemId)}`
    )
    this.eltRef.nativeElement.scrollTop = row.offsetTop - this.headerHeight
  }

  public getRowEltId(id: TableItemId): string {
    return rowIdPrefix + id
  }
}

1	import { ScrollingModule } from '@angular/cdk/scrolling'	1✔
2	import {	1✔
3	AfterViewInit,
4	ChangeDetectionStrategy,
5	ChangeDetectorRef,
6	Component,
7	ElementRef,
8	EventEmitter,
9	Input,
10	OnChanges,
11	OnInit,
12	Output,
13	ViewChild,
14	} from '@angular/core'
15	import { MatSort, MatSortModule } from '@angular/material/sort'	1✔
16	import { MatTableModule } from '@angular/material/table'	1✔
17	import { TranslateModule } from '@ngx-translate/core'	1✔
18	import { DataTableDataSource } from './data-table.data.source'	1✔
19	import { BaseReader } from '@geonetwork-ui/data-fetcher'	1✔
20	import {	1✔
21	MatPaginator,
22	MatPaginatorIntl,
23	MatPaginatorModule,
24	} from '@angular/material/paginator'
25	import { CustomMatPaginatorIntl } from './custom.mat.paginator.intl'	1✔
26	import { CommonModule } from '@angular/common'	1✔
27	import { BehaviorSubject, filter, firstValueFrom } from 'rxjs'	1✔
28	import { LoadingMaskComponent } from '@geonetwork-ui/ui/widgets'	1✔
29	import { LetDirective } from '@ngrx/component'	1✔
30
31	const rowIdPrefix = 'table-item-'	1✔
32
33	export type TableItemId = string \| number
34	type TableItemType = string \| number \| Date
35
36	export interface TableItemModel {
37	id: TableItemId
38	[key: string]: TableItemType
39	}
40
41	@Component({
42	standalone: true,
43	imports: [
44	MatTableModule,
45	MatSortModule,
46	MatPaginatorModule,
47	ScrollingModule,
48	TranslateModule,
49	CommonModule,
50	LoadingMaskComponent,
51	LetDirective,
52	],
53	providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }],
54	selector: 'gn-ui-data-table',
55	templateUrl: './data-table.component.html',
56	styleUrls: ['./data-table.component.css'],
57	changeDetection: ChangeDetectionStrategy.OnPush,
58	})
59	export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {	1✔
60	@Input() set dataset(value: BaseReader) {
61	this.properties$.next(null)	15✔
62	this.dataset_ = value	15✔
63	this.dataset_.load()	15✔
64	this.dataset_.properties.then((properties) =>	15✔
65	this.properties$.next(properties.map((p) => p.name))	45✔
66	)
67	this.dataset_.info.then((info) => (this.count = info.itemsCount))	15✔
68	}
69	@Input() activeId: TableItemId
70	@Output() selected = new EventEmitter<any>()	13✔
71
72	@ViewChild(MatSort) sort: MatSort
73	@ViewChild(MatPaginator) paginator: MatPaginator
74
75	dataset_: BaseReader
76	properties$ = new BehaviorSubject<string[]>(null)	13✔
77	dataSource: DataTableDataSource
78	headerHeight: number
79	count: number
80	loading$ = new BehaviorSubject<boolean>(false)	13✔
81
82	constructor(
83	private eltRef: ElementRef,	13!
84	private cdr: ChangeDetectorRef	13✔
85	) {}
86
87	ngOnInit() {
88	this.dataSource = new DataTableDataSource()	13✔
89	}
90
91	ngAfterViewInit() {
92	this.headerHeight =	13✔
93	this.eltRef.nativeElement.querySelector('thead').offsetHeight
94	this.setPagination()	13✔
95	this.cdr.detectChanges()	13✔
96	}
97
98	ngOnChanges() {
NEW 99	this.setPagination()	×
100	}
101
102	setSort(sort: MatSort) {
103	if (!this.dataset_) return	1!
104	if (!sort.active) {	1!
NEW 105	this.dataset_.orderBy()	×
106	} else {
107	this.dataset_.orderBy([sort.direction \|\| 'asc', sort.active])	1!
108	}
109	this.readData()	1✔
110	}
111
112	setPagination() {
113	if (!this.paginator) return	15!
114	if (!this.dataset_) return	15!
115	this.dataset_.limit(	15✔
116	this.paginator.pageIndex * this.paginator.pageSize,
117	this.paginator.pageSize
118	)
119	this.readData()	15✔
120	}
121
122	private async readData() {
123	this.loading$.next(true)	16✔
124	// wait for properties to be read
125	const properties = await firstValueFrom(	16✔
126	this.properties$.pipe(filter((p) => !!p))	18✔
127	)
128	const propsWithoutGeom = properties.filter(	16✔
129	(p) => !p.toLowerCase().startsWith('geom')	48✔
130	)
131	this.dataset_.select(...propsWithoutGeom)	16✔
132	await this.dataSource.showData(this.dataset_.read())	16✔
133	this.loading$.next(false)	16✔
134	}
135
136	scrollToItem(itemId: TableItemId): void {
NEW 137	const row = this.eltRef.nativeElement.querySelector(	×
138	`#${this.getRowEltId(itemId)}`
139	)
NEW 140	this.eltRef.nativeElement.scrollTop = row.offsetTop - this.headerHeight	×
141	}
142
143	public getRowEltId(id: TableItemId): string {
NEW 144	return rowIdPrefix + id	×
145	}
146	}

geonetwork / geonetwork-ui / 13503929244

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous