9712764930

Committed 28 Jun 2024 12:27PM UTC coverage: 69.463%. Remained the same

Build # 9712764930

Build Type

Pull #33

github

Committed by

web-flow

Commit Message

Merge 5dd1263b0 into abfc12e88

Pull Request Pull Request #33: ⬆️ Bump ws and socket.io

Run Details

108 of 192 branches covered (56.25%)

Branch coverage included in aggregate %.

422 of 571 relevant lines covered (73.91%)

4.42 hits per line

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

78.08

/src/app/datasets/datasets.component.ts

import { AfterViewInit, Component, ElementRef, ViewChild, OnDestroy, OnInit } from '@angular/core';

import { fromEvent, merge, Observable, of as observableOf, Subscription } from 'rxjs';
import { catchError, debounceTime, delay, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort, SortDirection } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';
import { ActivatedRoute, Router } from '@angular/router';

import { Dataset } from './datasets.model';
import { DatasetsService } from './datasets.service';
import { UIService } from '../shared/ui.service';
import { PaginationParams } from '../shared/shared.model';

interface QueryParams extends PaginationParams {
  search?: string;
}
@Component({
  selector: 'app-datasets',
  templateUrl: './datasets.component.html',
  styleUrls: ['./datasets.component.scss']
})
export class DatasetsComponent implements AfterViewInit, OnInit, OnDestroy {
  displayedColumns = ['file', 'species', 'breed', 'country', 'type'];
  dataSource = new MatTableDataSource<Dataset>();
  private sortSubscription!: Subscription;
  private searchSubscription!: Subscription;
  private mergeSubscription!: Subscription;

  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild('searchBox') searchBox!: ElementRef;

  resultsLength = 0;
  isLoading = false;
  search$!: Observable<void>;

  // track query params
  searchValue = '';
  pageIndex = 0;
  pageSize = 10;
  sortActive = '';
  sortDirection: SortDirection = "desc";

  constructor(
    private datasetsService: DatasetsService,
    private uiService: UIService,
    private route: ActivatedRoute,
    private router: Router
  ) {
    this.pageSize = this.datasetsService.pageSize;
  }

  ngOnInit() {
    // get parameters from url
    this.route.queryParams.subscribe((params: QueryParams) => {
      params['page'] ? this.pageIndex = +params['page'] : null;
      params['size'] ? this.pageSize = +params['size'] : null;
      params['sort'] ? this.sortActive = params['sort'] : null;
      params['order'] ? this.sortDirection = params['order'] : null;
      params['search'] ? this.searchValue = params['search'] : null;
    });
  }

  ngAfterViewInit() {
    this.search$ = fromEvent(this.searchBox.nativeElement, 'keyup').pipe(
      debounceTime(500),
      distinctUntilChanged(),
      // get value
      map((event: any) => {
        this.searchValue = event.target.value;
        this.router.navigate(
          ["/datasets"],
          {
            queryParams: this.getQueryParams()
          }
        )
      })
    );

    // If the user changes the sort order, reset back to the first page.
    this.sortSubscription = this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);

    // the same applies when user start searching stuff
    this.searchSubscription = this.search$.subscribe(() => this.paginator.pageIndex = 0);

    this.mergeSubscription = merge(this.sort.sortChange, this.paginator.page, this.search$)
      .pipe(
        startWith({}),
        // delay(0) is required to solve the ExpressionChangedAfterItHasBeenCheckedError:
        // Expression has changed after it was checked. See https://blog.angular-university.io/angular-debugging/
        delay(0),
        switchMap(() => {
          this.isLoading = true;

          // update values
          this.sortActive = this.sort.active;
          this.sortDirection = this.sort.direction;
          this.pageIndex = this.paginator.pageIndex;
          this.pageSize = this.paginator.pageSize;

          return this.datasetsService.getDatasets(
              this.sortActive,
              this.sortDirection,
              this.pageIndex,
              this.pageSize,
              this.searchValue)
            .pipe(catchError((error) => {
              console.log(error);
              this.uiService.showSnackbar("Error while fetching data. Please, try again later", "Dismiss");
              return observableOf(null)
            })
          );
        }),
        map(data => {
          this.router.navigate(
            ["/datasets"],
            {
              queryParams: this.getQueryParams()
            }
          );

          // Flip flag to show that loading has finished.
          this.isLoading = false;

          if (data === null) {
            return [];
          }

          // Only refresh the result length if there is new data. In case of rate
          // limit errors, we do not want to reset the paginator to zero, as that
          // would prevent users from re-triggering requests.
          this.resultsLength = data.total;
          return data.items;
        })
      ).subscribe(data => this.dataSource.data = data);
  }

  getQueryParams(): Object {
    let queryParams: QueryParams = {};

    // condition ? true_expression : false_expression
    this.pageIndex ? queryParams['page'] = this.pageIndex : null;
    this.sortActive ? queryParams['sort'] = this.sortActive : null;
    this.sortDirection && this.sortActive ? queryParams['order'] = this.sortDirection : null;
    this.searchValue ? queryParams['searchValue'] = this.searchValue : null;

    return queryParams;
  }

  ngOnDestroy() {
    this.sortSubscription.unsubscribe();
    this.searchSubscription.unsubscribe();
    this.mergeSubscription.unsubscribe();
  }

}

1	import { AfterViewInit, Component, ElementRef, ViewChild, OnDestroy, OnInit } from '@angular/core';
2
3	import { fromEvent, merge, Observable, of as observableOf, Subscription } from 'rxjs';
4	import { catchError, debounceTime, delay, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
5	import { MatTableDataSource } from '@angular/material/table';
6	import { MatSort, SortDirection } from '@angular/material/sort';
7	import { MatPaginator } from '@angular/material/paginator';
8	import { ActivatedRoute, Router } from '@angular/router';
9
10	import { Dataset } from './datasets.model';
11	import { DatasetsService } from './datasets.service';
12	import { UIService } from '../shared/ui.service';
13	import { PaginationParams } from '../shared/shared.model';
14
15	interface QueryParams extends PaginationParams {
16	search?: string;
17	}
18	@Component({
19	selector: 'app-datasets',
20	templateUrl: './datasets.component.html',
21	styleUrls: ['./datasets.component.scss']
22	})
23	export class DatasetsComponent implements AfterViewInit, OnInit, OnDestroy {	1✔
24	displayedColumns = ['file', 'species', 'breed', 'country', 'type'];	4✔
25	dataSource = new MatTableDataSource<Dataset>();	4✔
26	private sortSubscription!: Subscription;
27	private searchSubscription!: Subscription;
28	private mergeSubscription!: Subscription;
29
30	@ViewChild(MatSort) sort!: MatSort;
31	@ViewChild(MatPaginator) paginator!: MatPaginator;
32	@ViewChild('searchBox') searchBox!: ElementRef;
33
34	resultsLength = 0;	4✔
35	isLoading = false;	4✔
36	search$!: Observable<void>;
37
38	// track query params
39	searchValue = '';	4✔
40	pageIndex = 0;	4✔
41	pageSize = 10;	4✔
42	sortActive = '';	4✔
43	sortDirection: SortDirection = "desc";	4✔
44
45	constructor(
46	private datasetsService: DatasetsService,	4✔
47	private uiService: UIService,	4✔
48	private route: ActivatedRoute,	4✔
49	private router: Router	4✔
50	) {
51	this.pageSize = this.datasetsService.pageSize;	4✔
52	}
53
54	ngOnInit() {
55	// get parameters from url
56	this.route.queryParams.subscribe((params: QueryParams) => {	4✔
57	params['page'] ? this.pageIndex = +params['page'] : null;	4!
58	params['size'] ? this.pageSize = +params['size'] : null;	4!
59	params['sort'] ? this.sortActive = params['sort'] : null;	4!
60	params['order'] ? this.sortDirection = params['order'] : null;	4!
61	params['search'] ? this.searchValue = params['search'] : null;	4!
62	});
63	}
64
65	ngAfterViewInit() {
66	this.search$ = fromEvent(this.searchBox.nativeElement, 'keyup').pipe(	5✔
67	debounceTime(500),
68	distinctUntilChanged(),
69	// get value
70	map((event: any) => {
71	this.searchValue = event.target.value;	×
72	this.router.navigate(	×
73	["/datasets"],
74	{
75	queryParams: this.getQueryParams()
76	}
77	)
78	})
79	);
80
81	// If the user changes the sort order, reset back to the first page.
82	this.sortSubscription = this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);	5✔
83
84	// the same applies when user start searching stuff
85	this.searchSubscription = this.search$.subscribe(() => this.paginator.pageIndex = 0);	5✔
86
87	this.mergeSubscription = merge(this.sort.sortChange, this.paginator.page, this.search$)	5✔
88	.pipe(
89	startWith({}),
90	// delay(0) is required to solve the ExpressionChangedAfterItHasBeenCheckedError:
91	// Expression has changed after it was checked. See https://blog.angular-university.io/angular-debugging/
92	delay(0),
93	switchMap(() => {
94	this.isLoading = true;	2✔
95
96	// update values
97	this.sortActive = this.sort.active;	2✔
98	this.sortDirection = this.sort.direction;	2✔
99	this.pageIndex = this.paginator.pageIndex;	2✔
100	this.pageSize = this.paginator.pageSize;	2✔
101
102	return this.datasetsService.getDatasets(	2✔
103	this.sortActive,
104	this.sortDirection,
105	this.pageIndex,
106	this.pageSize,
107	this.searchValue)
108	.pipe(catchError((error) => {
109	console.log(error);	×
110	this.uiService.showSnackbar("Error while fetching data. Please, try again later", "Dismiss");	×
111	return observableOf(null)	×
112	})
113	);
114	}),
115	map(data => {
116	this.router.navigate(	2✔
117	["/datasets"],
118	{
119	queryParams: this.getQueryParams()
120	}
121	);
122
123	// Flip flag to show that loading has finished.
124	this.isLoading = false;	2✔
125
126	if (data === null) {	2!
127	return [];	×
128	}
129
130	// Only refresh the result length if there is new data. In case of rate
131	// limit errors, we do not want to reset the paginator to zero, as that
132	// would prevent users from re-triggering requests.
133	this.resultsLength = data.total;	2✔
134	return data.items;	2✔
135	})
136	).subscribe(data => this.dataSource.data = data);	2✔
137	}
138
139	getQueryParams(): Object {
140	let queryParams: QueryParams = {};	3✔
141
142	// condition ? true_expression : false_expression
143	this.pageIndex ? queryParams['page'] = this.pageIndex : null;	3!
144	this.sortActive ? queryParams['sort'] = this.sortActive : null;	3!
145	this.sortDirection && this.sortActive ? queryParams['order'] = this.sortDirection : null;	3!
146	this.searchValue ? queryParams['searchValue'] = this.searchValue : null;	3!
147
148	return queryParams;	3✔
149	}
150
151	ngOnDestroy() {
152	this.sortSubscription.unsubscribe();	4✔
153	this.searchSubscription.unsubscribe();	4✔
154	this.mergeSubscription.unsubscribe();	4✔
155	}
156
157	}

cnr-ibba / SMARTER-frontend / 9712764930

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