I have reusable component which is app-table-multi-sort and I am using it on DealsApprovalComponent , in DealsApprovalComponent if res.items[0].dealType === 'Partner Location Submission' the tableOptions should update and change but currently right now its not working.
Any idea that might help how to update the tableOptions? Thanks.
the tableOptions is the dynamic json options for the table header.
#html code
<app-table-multi-sort (editRowEvent)="editDeal($event)" (dataServiceEvent)="dataServiceEvent($event)" [tableOptions]="tableOptions"[tableData]="data"></app-table-multi-sort>
#DealsApprovalComponent ts code
export class DealsApprovalComponent implements OnInit {
transactionSubscripion: Subscription;
@ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;
tableOptions: any;
hasApproval = false;
@Input() transaction: any;
@Input() dataTest: any;
isLoading: boolean;
DEAL_TYPES = DEAL.TYPES;
totalDeals : number;
accountId: any;
data: any;
searchInput: string;
table: any;
totalDealsForApproval = 0;
constructor(
private dealService: DealService,
private notificationService: NotificationService,
private trasactionService: TransactionService,
private route: Router,
private dealTransactionService: DealTransactionService
)
{
this.transactionSubscripion =
this.trasactionService.transactionEvent$.subscribe(
(data) => {
if (data) {
switch (data['operation']) {
case 'transaction/update':
this.table.pageIndex = 0;
this.table.pageSize = 10;
this._pageEventDealsForApprovalList();
break;
}
}
},
(error) => {}
);
}
ngOnInit(): void {
const currentAccountDetails = localStorage.getItem('currAcct') as any;
if (currentAccountDetails) {
this.accountId = JSON.parse(currentAccountDetails).accountId;
}
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'},
],
notifications: [
{type:'info', message:'This deal was sent to approval and waiting for approval.'},
]
}
}
ngOnDestroy(): void {
if (this.transactionSubscripion) this.transactionSubscripion.unsubscribe();
}
dataServiceEvent(item) {
this.table = item;
if(this.table) {
this._pageEventDealsForApprovalList();
}
}
editDeal($event): void {
if ($event) {
this.dealTransactionService.dataSubject.next($event);
}
}
gotoDealDetails(state:any){
this.route.navigateByUrl(`deals/detail/`, {state: state});
}
private _pageEventDealsForApprovalList() {
this.searchInput = '';
const status = 'ForApproval'
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((res) => {
this.table.data = res.items;
if(res.items && res.items[0].dealType === 'Partner Location Submission') {
this.tableOptions = {
columns:[
{id:'name',name:'Deal Name',subId:'type', subtitle:'Deal Type'},
{id:'wagAnnualRent',name:'WAG Annual Rent (Current)'},
{id:'wagFirmTermRemaining',name:'WAG Firm Term Remaining (Current)'},
{id:'partnerTerm',name:'Partner Term'},
{id:'partnerBaseRent',name:'Partner CAM'},
{id:'partnerServiceFees',name:'Partner Service Fees and Security Monitorning'},
{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.totalDealsForApproval = res.items.length;
this.hasApproval = this.totalDealsForApproval > 0;
}, (err) => this.notificationService.showError(err)
);
}
}
#ts table-multi-sort.component.ts code
export class TableMultiSortComponent implements OnInit, OnChanges {
@Input() tableOptions:any;
@Input() tableMessage:any;
@Input() tableData:any = [];
@Input() isClientSide:boolean = false;
@Input() isLoading: boolean = false;
@Output() tableActionsEvent = new EventEmitter<any>();
@Output() dataServiceEvent = new EventEmitter<any>() ;
@Output() editRowEvent = new EventEmitter<any>();
@ViewChild(MatMultiSort, { static: false }) sort: MatMultiSort;
hasInfoMessage: boolean;
tableConfig: any = TABLE_MULTI_SORT_OPTIONS.DEFAULT;
table:TableData<any> ;
displayedColumns: any;
curChanges:any
constructor() { }
ngOnChanges(changes: SimpleChanges): void {
// if(changes && changes.tableData.currentValue) {
// this.table.data = changes.tableData.currentValue;
// }
}
ngOnInit(): void {
this.initTableMultiSort();
}
initTableMultiSort() {
this.tableConfig = {
...this.tableConfig,
...this.tableOptions
}
this.table = new TableData<any>(this.tableConfig.columns,this.tableConfig.sortParams);
this.table.pageSize = this.tableConfig.pageSize;
this.table.pageIndex = this.tableConfig.pageIndex;
this.table.nextObservable.subscribe(() => { this.getData(); });
this.table.sortObservable.subscribe(() => { this.getData(); });
this.table.previousObservable.subscribe(() => { this.getData(); });
this.table.sizeObservable.subscribe(() => { this.getData(); });
setTimeout(()=>{
this.table.dataSource = new MatMultiSortTableDataSource(this.sort, this.isClientSide);
this.getData();
},0);
}
getData(){
this.table.totalElements = 1;
this.table.pageIndex = 0;
this.table.totalElements = 0;
this.table.pageSize = 10;
this.table.data = this.tableData;
if(this.dataServiceEvent) {
this.dataServiceEvent.emit(this.table);
}
}
getColumnSubtitle(id) :string{
return this.tableOptions.columns.filter(c => c.id === id)[0].subtitle;
}
getColumnSubId(id) :string{
return this.tableOptions.columns.filter(c => c.id === id)[0].subId;
}
getActions(id):any{
return this.tableOptions.columns.filter(c => c.id === id)[0].actions;
}
clickTableAction(actionName:string, row:any):any{
this.tableActionsEvent.emit({
actionName: actionName,
data: row
});
}
editRow(rowData:any){
this.editRowEvent.emit(rowData);
}
}
#table-multi-sort.component.html
<div *ngIf="table !== undefined">
<div style="padding-top: 12px;" *ngIf="tableOptions.notifications">
<div class="alertInfo" >
<mat-icon>{{tableOptions.notifications[0].type}}</mat-icon>{{tableOptions.notifications[0].message}}
</div>
</div>
<mat-table mat-table [dataSource]="table.dataSource" matMultiSort (matSortChange)="table.onSortEvent()">
<ng-container *ngFor="let column of table.columns" [matColumnDef]="column.id">
<mat-header-cell class="table-multi-sort-header" *matHeaderCellDef [mat-multi-sort-header]="column.id">
<div>{{column.name}}</div>
<div class="sub-text">{{getColumnSubtitle(column.id)}}</div>
</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="editRow(row)">
<ng-container *ngIf="column.id !== 'action'; then col; else actionCol"></ng-container>
<ng-template #col>
<app-table-multi-sort-cell-default [cellData]="row" [id]="column.id" [subId]="getColumnSubId(column.id)" [columnName]="column.name"></app-table-multi-sort-cell-default>
</ng-template>
<ng-template #actionCol>
<app-table-multi-sort-cell-action [rowData]="row" [actions]="getActions(column.id)" (actionClickEvent)="clickTableAction($event,row)"></app-table-multi-sort-cell-action>
</ng-template>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="table.displayedColumns; sticky:true"></mat-header-row>
<!-- <mat-row *matRowDef="let item; columns: table.displayedColumns;" (click)="editRow(item)"></mat-row> -->
<mat-row *matRowDef="let item; columns: table.displayedColumns;" class="cursor-pointer"></mat-row>
</mat-table>
<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
</div>