Angular material table — несколько таблиц на странице, обновление таблицы после restAPI ответа, как сделать без дублирования кода?

Question

[Rudy Dudy]

Здравствуйте! Помогите с оптимизацией кода.
Есть вью, где выводится инфа в таблицы, использую материал для этой задачи.
одна таблици виводит информацию о юзерах, а другая о админах. в табилце айди, фирстНейм, ластНейм, емейл и тд.
Есть кнопка обновить таблицу, которая делает запрос на бекенд, и вытягивает данные о юзерах/админах.
В таблице есть чекбоксы + фильтрация. Проблем в том, что мне не нравится реализация кода... для каждой таблицы используется разные переменные, методы и тд, которые по-сути не сильно отличаются.

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
selection = new SelectionModel<PeriodicElement>(true, []);
dataSourceAdmin = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA_ADMIN);
selectionAdmin = new SelectionModel<PeriodicElement>(true, []);

isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }
  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }

  checkboxLabel(row?: PeriodicElement): string {
    if (!row) {
      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
    }
    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
  }

 isAllSelectedForAdmin() {
    const numSelected = this.selectionAdmin.selected.length;
    const numRows = this.dataSourceAdmin.data.length;
    return numSelected === numRows;
  }
  masterToggleForAdmin() {
    this.isAllSelected() ?
        this.selectionAdmin.clear() :
        this.dataSourceAdmin.data.forEach(row => this.selectionAdmin.select(row));
  }

  checkboxLabelForAdmin(row?: PeriodicElement): string {
    if (!row) {
      return `${this.isAllSelectedForAdmin() ? 'select' : 'deselect'} all`;
    }
    return `${this.selectionAdmin.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
  }

И так далее... Как видно код сильно дублируется, и выглядит уже запутанно, а если добавится ещё одна таблица - буде еще хуже.
Была идея сделать таблицу отдельным компонентом, но у таблиц разные поля ( у админа больше, у юзера меньше, и много полей различаются тд )

Когда приходит новые данные с бекенда - мне нужно обновить таблицу - как это лучше всего сделать? Потому что сейчас это выглядит как-то так:

dataSource = new MatTableDataSource<PeriodicElement>(NEW DATA FROM RESPONSE);
selection = new SelectionModel<PeriodicElement>(true, []);

То есть я постоянно перезаписываю dataSource, скидываю SelectionModel и тд.

Возможно ли как-то оптимизировать? Что бы методы были универсальные для таблиц, а обновление было более элегантное.
Заранее спасибо!

Answer 1

[p1plop]

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

isAllSelected(selection, dataSource) {
    const numSelected = selection.selected.length;
    const numRows = dataSource.data.length;
    return numSelected === numRows;
  }