Angular 6 Таблица материалов Нумерация на стороне сервера и клиента - PullRequest
0 голосов
/ 10 ноября 2018

Я бы хотел попросить о помощи.Я должен сделать общий типовой угловой материал, который получает данные из веб-сервиса Jira.Моя проблема в том, что в некоторых случаях мне придется выполнять нумерацию страниц на клиентском сайте, а в некоторых случаях - в Jira, поскольку максимальный результат, который он может вернуть, равен 1000 элементам.

Причина, по которой мне придется выполнять разбиение на страницы на стороне клиента, заключается в том, что во многих случаях диаграмма встроена рядом с таблицей данных, что должно работать со всеми доступными элементами, а не только с видимымив таблице материалов.

Чего я хотел бы избежать, так это иметь больше параметров, которые бы проверяли, придется ли мне использовать нумерацию на стороне клиента / сервера.

Соответствующий код:

import {
  Component,
  Input,
  ViewChild,
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef} from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource, MatSlideToggle } from '@angular/material';
import { TableService } from './table.service';
import { merge } from 'rxjs';

@Component({
  selector: 'app-table-component',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableComponent implements AfterViewInit {

  @Input() dataTypes: any[];
  @Input() columnsToDisplay: string[];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatSlideToggle) toggle: MatSlideToggle;
  private dataSource: any = new MatTableDataSource<any>();
  private currentPage;
  public selectedTab: any;
  public resultsLength: number;


  constructor(private service: TableService, private ref: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.service.changeFilter({
      previousPageIndex: 0,
      pageIndex: this.paginator._pageIndex,
      pageSize: 5,
      length: this.paginator._length,
      active: this.sort.active,
      direction: 'asc',
      checked: false
    });
    merge(this.paginator.page, this.sort.sortChange, this.toggle.change).subscribe(res => {
      this.currentPage = this.paginator.pageIndex;
      this.service.changeFilter(res);
    })

    this.service.dataChanged$.subscribe(res => {
      this.dataSource.paginator = this.paginator;
      this.dataSource.data = res.tickets;
      this.dataSource.paginator.pageIndex = this.currentPage;
      this.dataSource.paginator.length = res.results;  
  }

}

То, что в основном это делает, заключается в том, что при любом изменении события (сортировка, разбиение по страницам и на переключателе) HTTP-запрос отправляется на сервер Jira.В большинстве случаев максимальный результат будет 10-20 результатов, но у меня есть экран, на котором мне нужно будет получить 1000-3000 результатов.В последнем случае нумерация страниц на стороне сервера является правильным подходом, который я знаю, но если результаты ниже разумного числа, я бы хотел использовать разбиение на страницы на стороне клиента, опять же, потому что диаграмма использует данные из таблицы материалов.

Как мне решить эту проблему, не добавляя еще один @Input к компоненту таблицы?

Заранее спасибо, ребята!

Редактировать Удалены тайм-ауты из кода, чтобы избежать путаницы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...