思路：总任务数组 -> 过滤出分配给我的任务 -> 过滤出 pending 的任务 -> 过滤出清房的任务 -> 按选定字段排序 -> 分页

优点：变量少，只需维护一个数组，当有 websocket 推送任务变更到客户端，只需要在一个数组找到对应的任务然后替换，再深拷贝一次数组。

缺点：pipe 的 transform 方法会执行多次。

使用方

<sp-tasks
  [showEmpty]="false"
  [animationDisabled]="isAnimationDisabled"
  [tasks]="myTasks | myTasks:userId:organizationUnitIds | filterTasks:'pending' | filterTasks:'cleanRoom' | sortTasks:selectedSortId | pagination:myTasksPageIndex"
  (actionEvent)="changeTaskStaging($event)"
  (chatEvent)="taskChat($event)"
  (taskEvent)="showDetail($event)"
  (pressEvent)="onPressTask($event)"
></sp-tasks>

当滑动页面底部时，只需把 myTasksPageIndex 加一即可，分页的逻辑交给 pipe 处理

filterTasks pipe

import { Pipe, PipeTransform } from '@angular/core';
import { TaskStage } from '@app/pages/add-task/constants';

import { Task } from '../models/task.model';

@Pipe({
  name: 'filterTasks',
})
export class FilterTaskPipe implements PipeTransform {
  transform(
    tasks: Task[],
    type: 'cleanRoom' | 'normal' | 'pending' | 'done' = 'cleanRoom',
    pageIndex = 1,
  ): any {
    switch (type) {
      case 'cleanRoom':
        return tasks.filter(task => task.isCleanRoomTask);
      case 'normal':
        return tasks.filter(task => !task.isCleanRoomTask);
      case 'pending':
        return tasks.filter(task => task.stage !== TaskStage.Done);
      case 'done':
        return tasks.filter(task => task.stage === TaskStage.Done);
      default:
        return tasks;
    }
  }
}

分页 pipe

import { Pipe, PipeTransform } from '@angular/core';
import { Task } from '../models/task.model';

@Pipe({
  name: 'pagination'
})
export class PaginationPipe implements PipeTransform {

  transform(tasks: Task[], pageIndex = 1, pageSize = 10): Task[] {
    const start = (pageIndex - 1) * pageSize;
    const end = start + pageSize;
    return tasks.slice(0, end);
  }
}