I am calling a child component which is app-table-multi-sort from deals-transaction.component.html , the data from the table is from the result of _pageEventDealsList which is this.table.data = res.items;

What I want is how do we create different set of table with different this.tableOptions based on dealType value as you can see on the object below.

If dealType is qual to "A" then show data in separate table , if dealType is qual to "B" show data on separate table , so in this example there are 2 tables since there 2 different dealType .

Right now my current code they are all in one table which is wrong.

but we should only reuse the app-table-multi-sort to do that , is it possible without keeping on repeating the app-table-multi-sort >?. Any idea guys. Thank you.

#sample data table result screenshot

enter image description here

#deals-transaction.component.html

 <app-table-multi-sort (dataServiceEvent)="dataServiceEvent($event)" [tableOptions]="tableOptions" [tableData]="data"
      (tableActionsEvent)="tableActions($event)" (editRowEvent)="editDeal($event)"></app-table-multi-sort>      

#tscode - deals-transaction.component.ts

export class DealsTransactionComponent implements OnInit {
  @ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;
  transactionSubscripion: Subscription;
  tableOptions: any;
  @Input() transaction: any;
  isLoading: boolean;
  accountId: any;
  data: any;
  searchInput: string;
  leaseId : number;
  table: any;
  DEAL_TYPES = DEAL.TYPES;
  menuItems: any[];
  totalDealsForApproval: number;
  totalDeals: number = 0;
  hasPendingAprroval = false;
  subscription!: Subscription; 
  propertyId: any;

  constructor(
    private _snackBar: MatSnackBar,
    private trasactionService: TransactionService,
    private dialog: MatDialog,
    private dealService: DealService,
    private notificationService: NotificationService,
    private route: Router,
    private dealTransactionService: DealTransactionService
    
  ) {}
  ngOnInit(): void {
    this.leaseId = this.transaction.leaseId;
    this.propertyId = this.transaction.propertyId;    
    const currentAccountDetails = localStorage.getItem('currAcct') as any;
    if (currentAccountDetails) {
      this.accountId = JSON.parse(currentAccountDetails).accountId;
    }

    this.menuItems = [
      { dealType: this.DEAL_TYPES.IDLE_DISPOSITION, buttonText: this.DEAL_TYPES.IDLE_DISPOSITION.text , },
      { dealType: this.DEAL_TYPES.PARTNERSHIP, buttonText: this.DEAL_TYPES.PARTNERSHIP.text },
      { dealType: this.DEAL_TYPES.PORTFOLIO_MANAGEMENT, buttonText: this.DEAL_TYPES.PORTFOLIO_MANAGEMENT.text , condition: !this.leaseId },
    ]

    this.tableOptions = {
      columns:[
        {id:'name',name:'Deal Name',subId:'type', subtitle:'Deal Type'},
        {id:'annualRentProposed',name:'Annual Rent (Proposed)', subId: 'annualRentCurrent', subtitle:'Annual Rent (Proposed)'},
        {id:'firmTermRemain',name:'Firm Term Remaining', subId: 'firmTermAdded', subtitle:'(Current)'},
        {id:'maxTerm',name:'Max Available Term'},
        {id:'cash',name:'Cash Contribution'},
        {id:'action', name: 'Actions', actions:[
          {icon:'file_copy', name:'Copy', class:'primary-color' , },
          {icon:'delete', name: 'Delete', class:'mat-error ml-7px'},
          {icon:'forward', name: 'For Approval', class:'primary-color'}
        ]}
      ]
    }

    this.subscription = this.dealTransactionService.dataSubject.subscribe((data: any) => {
      this.editDeal(data);
     });

  }
 dataServiceEvent(item) {
    this.table = item;
    if(this.table) {
      this.reloadDeals();
    }
  }
  reloadDeals() {
    this._pageEventDealsList();
  }
  public _pageEventDealsList() {
    this.searchInput = '';
    const status = 'Draft'
    this.isLoading = true;
    this.dealService
      .getAllDeals(
        status,
        this.accountId,
        this.transaction.id,
        this.table.pageIndex   1,
        this.table.pageSize,
        this.searchInput,
        this.table.sortParams,
        this.table.sortDirs
      )
      .pipe(finalize(() => (this.isLoading = false)))
      .subscribe({
        error: (err) => this.notificationService.showError(err),
        next: (res) => {
          this.table.totalItemCount = res.totalItemCount;
          this.table.lastItemOnPage = res.lastItemOnPage;
          this.table.totalElements = res.totalItemCount;
          this.table.data = res.items;
        },
        complete: noop,
      });
  }

#sample data result from _pageEventDealsList

[
    {
        "id": 183,
        "name": "A",
        "dealType": "A",
        "annualRentProposed": null,
        "annualRentCurrent": null,
        "firmTermRemaining": null,
        "firmTermAdded": null,
        "maxAvailableTerm": null,
        "capitalContribution": null,
        "createdOnString": "09/29/2021",
        "fileName": null,
        "serverFileName": null,
        "size": null,
        "absoluteUri": null,
        "sentTo": null
    },
    {
        "id": 186,
        "name": "B",
        "dealType": "B",
        "annualRentProposed": null,
        "annualRentCurrent": null,
        "firmTermRemaining": null,
        "firmTermAdded": null,
        "maxAvailableTerm": null,
        "capitalContribution": null,
        "createdOnString": "09/29/2021",
        "fileName": null,
        "serverFileName": null,
        "size": null,
        "absoluteUri": null,
        "sentTo": null
    },
]

CodePudding user response：

I have not tested this, Let me know if you did not understand anything.

// Declare two variables 
dealsByTypeA$  = of([]);
dealsByTypeB$  = of([]);

const allDeals$ = this.dealService
      .getAllDeals(
        status,
        this.accountId,
        this.transaction.id,
        this.table.pageIndex   1,
        this.table.pageSize,
        this.searchInput,
        this.table.sortParams,
        this.table.sortDirs
      )
      .pipe(
            tap(res => {
                if(res){
                    this.table.totalItemCount = res.totalItemCount;
                    this.table.lastItemOnPage = res.lastItemOnPage;
                    this.table.totalElements = res.totalItemCount;
                }
            }),
            catchError(error => this.handleError(error)),
            finalize(() => (this.isLoading = false))
        );

// Observable with dealType with 'A'        
this.dealsByTypeA$ = allDeals$ .pipe(
    map(res => res.items.filter(o => o.dealType === 'A'));
);

// Observable with dealType with 'B'
this.dealsByTypeB$ = allDeals$ .pipe(
    map(res => res.items.filter(o => o.dealType === 'B'));
);

handleError(error: any): Observable<PagedModel>{
    this.notificationService.showError(error);
    return of({ totalItemCount: 0, lastItemOnPage: 0, firstItemOnPage: true, isLastPage: true, items: [] });
}

In template:

<app-table-multi-sort
    ...
    [tableData]="dealsByTypeA$ | async">
</app-table-multi-sort>

<app-table-multi-sort
    ...
    [tableData]="dealsByTypeB$ | async">
</app-table-multi-sort>

If you have only two dealTYpes then you can also solve this problem very easily using RxJs Partition operator