anyone has an idea why the mat sort header arrow and sorting number is not showing when I assign sortParams and sortDirs inside an async call which is the getUserData() , I called it inside getUserData because it contains the default sorting params from the API. The sorting works but the arrow and the number is not showing on load.
I try to assign sortData after the component view is already rendered.
But then I try to put for example in ngOnit like this.requestsListTable.sortParams = ['requestTitle', 'requestorName'] the numbers is showing. I also tried adding this.changeDetectorRef.detectChanges(); but it does not solve it either. Ideas would be much appreciated. Thanks.
— it should show the mat sorting arrow like belo
#ts code
requestsListTable: TableData;
constructor(
public dialog: MatDialog,
private route: Router,
private _projectIntakeService: ProjectIntakeService,
private _notificationService: NotificationService,
private _storageService: StorageService,
private _workflowApprovalService : WorkflowApprovalService,
private _picklistService: PicklistService,
private _reportService: ReportService,
private _userService: UserService,
private changeDetectorRef: ChangeDetectorRef
) {
this.requestsListTable = new TableData<any>([]);
this.requestsListTable.pageSize = 10;
this.requestsListTable.pageIndex = 0;
}
ngOnInit(): void {
this.currAcct = JSON.parse(this._storageService.getCurrAcct());
this.isProjectTeamData = this.currAcct.isProjectTeamData;
this.isRequestIntakeReadOnly = this.currAcct.isRequestIntakeReadOnly;
this.isRequestIntakeSubmitter = this.currAcct.isRequestIntakeSubmitter;
this.requestsListTable.dataSource = new MatMultiSortTableDataSource(this.sort, this.CLIENT_SIDE);
this.requestsListTable.nextObservable.subscribe(() => { this.initRequestsList(); });
this.requestsListTable.sortObservable.subscribe(() => { this.initRequestsList(); });
this.requestsListTable.previousObservable.subscribe(() => { this.initRequestsList(); });
this.requestsListTable.sizeObservable.subscribe(() => { this.initRequestsList(); });
this.getProjectIntakeDepartments();
this.getRequestsCount();
this.checkPageAccess();
// setTimeout(() => {
// this.requestsListTable.sortParams = ['requestTitle', 'requestorName']
// this.requestsListTable.sortDirs = ['asc', 'asc'];
// }, 2000)
}
ngAfterViewInit(): void {
fromEvent<any>(this.searchInput.nativeElement, 'keyup')
.pipe(
map(event => event.target.value.trim()),
startWith(''),
debounceTime(500),
distinctUntilChanged(),
tap(search => {
if (search) {
this.requestsListTable.pageIndex = 0;
}
this.setDefaultFilters();
}),
switchMap(search => {``
return this.filtersSubject.pipe(
tap(() => {
this.getUserData();
})
);
})
)
.subscribe({
next: () => {
},
error: (err) => console.error(err),
complete: () => noop
});
}
initRequestsList() {
console.log("12")
const currAcct = JSON.parse(this._storageService.getCurrAcct());
const sortKey = (this.requestsListTable.sortParams.length > 0) ? this.requestsListTable.sortParams : ['requestTitle'];
const sortOrder = (this.requestsListTable.sortDirs.length > 0) ? this.requestsListTable.sortDirs : ['asc'];
const isMyRequests = (this.selectedOption === '1') ? currAcct.userId : null;
this.isLoading = true;
this._projectIntakeService
.getRequestsList(
currAcct.accountId,
isMyRequests,
this.requestsListTable.sortParams,
this.requestsListTable.sortDirs,
this.searchInput.nativeElement.value || '',
this.requestsListTable.pageIndex + 1,
this.requestsListTable.pageSize,
this.selectedDepartmentIds,
this.selectedStatusIds
)
.pipe(finalize(() => (this.isLoading = false)))
.subscribe({
error: (err) => this._notificationService.showError(err),
next: (res) => {
this.firstItemPosition = res.firstItemOnPage;
this.lastItemPosition = res.lastItemOnPage;
this.dataSource = res.items;
this.requestsListTable.data = res.items;
this.lastItemOnPage = res.lastItemOnPage;
this.totalItemCount = res.totalItemCount;
},
complete: _.noop,
});
}
getUserData() {
this._userService.getUserProfile(this.currAcct.userId, this.currAcct.accountId)
.subscribe(
res => {
if (res.isSuccess) {
const filteredAccounts = this.filterAccountsByName(res.data.userAccountDto, this.currAcct.accountName);
this.projectIntakeSettings = JSON.parse(filteredAccounts[0].projectIntakeSettings);
if (this.projectIntakeSettings) {
//request type
this.selectedOption = (this.projectIntakeSettings.UserId) ? '1' : '2';
// Check if sortKey and sortOrder are provided in projectIntakeSettings
const sortKey = this.projectIntakeSettings.SortKey ? JSON.parse(this.projectIntakeSettings.SortKey) : ['requestTitle'];
const sortOrder = this.projectIntakeSettings.SortOrder ? JSON.parse(this.projectIntakeSettings.SortOrder) : ['asc'];
// console.log('this.requestsListTable', this.requestsListTable)
// Assign sortParams and sortDirs
this.requestsListTable.sortParams = sortKey;
this.requestsListTable.sortDirs = sortOrder;
//page
this.requestsListTable.pageIndex = (this.projectIntakeSettings.Page) ? this.projectIntakeSettings.Page - 1 : 0
this.requestsListTable.pageSize = (this.projectIntakeSettings.PageSize) ? this.projectIntakeSettings.PageSize : 10;
this.changeDetectorRef.detectChanges();
this.initRequestsList();
}
}
},
err => {
AppUtils.errorHandler(err, this._notificationService, null);
}
)
}
#html code
<table
mat-table
[dataSource]="requestsListTable.dataSource"
matMultiSort
[@animateStagger]="{value:'50'}"
(matSortChange)="requestsListTable.onSortEvent()"
>
<ng-container matColumnDef="requestTitle" sticky>
<th mat-multi-sort-header="requestTitle" mat-header-cell *matHeaderCellDef>Request Title</th>
<td mat-cell *matCellDef="let element">
<div class="checkbox-container td-value-name">
<mat-checkbox matTooltip="{{ isNotAllowedBulk(element) ? 'Unable to batch approve' : '' }}"
[checked]="isSelected(element)" [disabled]="isNotAllowedBulk(element)" class="no-navigation"
color="primary" (change)="onChangeSelect(element, $event, 'request')"></mat-checkbox>
<div style="width:180px;" [matTooltip]="element.requestTitle" class="td-value-name request-title">{{
element.requestTitle?.length > 45 ? element.requestTitle.slice(0,45) + '...' : element.requestTitle }}</div>
</div>
</td>
</ng-container>
<ng-container matColumnDef="requestorName">
<th mat-multi-sort-header="requestorName" mat-header-cell *matHeaderCellDef>Requestor Name</th>
<td mat-cell *matCellDef="let element">
<div class="td-value-name">
{{element.requestorName}}
</div>
</td>
</ng-container>