I have a user table where sorting is not working properly for the role column.
The data that I get from the service getAllUsers is like this :
Here is the HTML code: it is a very long code that is why at first i thought i must put the needed block only.
<div class="page-layout simple">
<div class="w-100-p">
<div
class="header accent p-24"
fxLayout="column"
fxLayoutAlign="center
center"
fxLayout.gt-sm="row"
fxLayoutAlign.gt-sm="space-between center"
>
<div class="logo" fxLayout="row" fxLayoutAlign="start center">
<span class="logo-text h1">Users</span>
</div>
<div fxLayout="row" fxLayoutAlign="end center">
<button mat-icon-button (click)="ExportAll()" matTooltip="Export Excel">
<mat-icon class="secondary-text">cloud_download</mat-icon>
</button>
<button mat-flat-button color="primary" (click)="goToCreateUser()">
Add User
</button>
</div>
</div>
<div class="content-card p-24">
<div>
<mat-table class="p-8" #table matSort [dataSource]="userDataSource">
<ng-container matColumnDef="UserName">
<mat-header-cell
mat-sort-header
fxLayoutAlign="center center"
*matHeaderCellDef
>Uid</mat-header-cell
>
<mat-cell fxLayoutAlign="center center" *matCellDef="let user">
<p class="text-truncate">{{ user.UserName }}</p>
</mat-cell>
</ng-container>
<ng-container matColumnDef="FirstName">
<mat-header-cell
mat-sort-header
fxLayoutAlign="center center"
*matHeaderCellDef
>Name</mat-header-cell
>
<mat-cell fxLayoutAlign="center center" *matCellDef="let user">
<p class="text-truncate">
{{ user.FirstName }} {{ user.LastName }}
</p>
</mat-cell>
</ng-container>
<ng-container matColumnDef="PhoneNumber">
<mat-header-cell
mat-sort-header
fxLayoutAlign="center center"
*matHeaderCellDef
>Phone Number</mat-header-cell
>
<mat-cell fxLayoutAlign="center center" *matCellDef="let user">
<p
class="job-title text-truncate"
*ngIf="user.PhoneNumber; else noData"
>
{{ user.PhoneNumber }}
</p>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Role.Name">
<mat-header-cell
mat-sort-header
fxLayoutAlign="center center"
*matHeaderCellDef
>Role</mat-header-cell
>
<mat-cell fxLayoutAlign="center center" *matCellDef="let user">
<p class="job-title text-truncate" *ngIf="user.Role; else noData">
{{ user.Role.Name }}
</p>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Department">
<mat-header-cell
mat-sort-header
fxLayoutAlign="center center"
*matHeaderCellDef
>Team</mat-header-cell
>
<mat-cell fxLayoutAlign="center center" *matCellDef="let user">
<p
class="job-title text-truncate"
*ngIf="user.Department; else noData"
>
{{ user.Department }}
</p>
</mat-cell>
</ng-container>
<ng-container matColumnDef="ActiveOnLdap">
<mat-header-cell
mat-sort-header
fxLayoutAlign="center center"
*matHeaderCellDef
>Status on LDAP</mat-header-cell
>
<mat-cell fxLayoutAlign="center center" *matCellDef="let user">
<div
[ngClass]="
user.ActiveOnLDAP ? 'tag-color-valid' : 'tag-color-invalid'
"
[matTooltip]="user.ActiveOnLDAP ? 'Active' : 'Inactive'"
></div>
</mat-cell>
</ng-container>
<ng-container
(click)="$event.stopPropagation()"
matColumnDef="actions"
>
<mat-header-cell fxLayoutAlign="center center" *matHeaderCellDef
>Actions</mat-header-cell
>
<mat-cell fxLayoutAlign="center center" *matCellDef="let user">
<button
mat-icon-button
(click)="goToEdit(user.Id)"
matTooltip="Edit"
>
<mat-icon class="secondary-text">open_in_new</mat-icon>
</button>
<button
*ngIf="user.LockoutEnabled"
mat-icon-button
matTooltip="Activate"
(click)="ActivateUser(user.UserName)"
>
<mat-icon class="secondary-text">lock_open</mat-icon>
</button>
<button
*ngIf="!user.LockoutEnabled"
mat-icon-button
matTooltip="Deactivate"
(click)="DesactivateUser(user.UserName)"
>
<mat-icon class="secondary-text">lock</mat-icon>
</button>
<button
mat-icon-button
matTooltip="Delete"
(click)="deleteUser(user)"
>
<mat-icon class="secondary-text">delete</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="displayedColumns; sticky: true"
></mat-header-row>
<mat-row *matRowDef="let user; columns: displayedColumns"> </mat-row>
</mat-table>
<mat-paginator
#paginator
[length]="userDataSource.data.length"
[pageIndex]="0"
[pageSize]="5"
[pageSizeOptions]="[5, 10, 25, 100]"
>
</mat-paginator>
<ng-template #noData>
<p>N/A</p>
</ng-template>
</div>
</div>
</div>
</div>
Here is the user model :
export class userModel {
FirstName: string;
LastName: string;
Email: string;
Deleted: Delete;
PhoneNumber: string;
Uid: string;
Department: string;
ActiveONldap: boolean;
Role: any[];
Avatar = [];
ConfirmPassword;
Password;
UserName: string;
constructor(user?) {
user = user || {};
this.FirstName = user.firstName || "";
this.Deleted = user.Deleted || Delete.UNDELETED;
this.UserName = user.userName || "";
this.LastName = user.lastName || "";
this.PhoneNumber = user.phoneNumber || "";
this.Email = user.email || "";
this.Uid = user.uid || "";
this.Role = user.Role || [];
this.ActiveONldap = user.activeONldap;
this.Department = user.department || "";
this.ConfirmPassword = user.confirmPassword || "";
this.Password = user.password || "";
}
}
export interface CurrentUser {
Avatar: any;
Email: string;
FirstName: string;
HasRegistered: boolean;
LastName: string;
LoginProvider: any;
Role: string;
UserName: string;
}
export enum RoleIds {
Administrator = "1",
Manager = "2",
Recruiter = "3",
Interviewer = "4",
Requester = "5",
Viewer = "6",
}
export enum Roles {
Administrator = "Administrator",
Manager = "Manager",
Recruiter = "Recruiter",
Interviewer = "Interviewer",
Requester = "Requester",
Viewer = "Viewer",
}
export class RoleModel {
Id: string;
Name: string;
constructor(role?) {
role = role || {};
this.Id = role.Id || "0000000001";
this.Name = role.Name || "";
}
}
this is the TS code :
reloadData() {
this.usersService.getAllIUsers().subscribe(
(res: any) => {
if (res) {
this.userList = res.accountsList;
this.userDataSource.data = this.userList;
this.userDataSource.sortingDataAccessor = (item: any, property: string): any => {
switch (property) {
case 'Role.Name': return item.Role.Name;
default: return item[property]?.toString().toLowerCase() || "Ω";
}
};
}
},
(err) => {
this.snotify.error("Error loading users");
}
);
}
Here is the erreur in the browser console that i get when i try to do role sort (the others work fine)
Here is the userService :
export class usersService {
private readonly usersUrl = environment.apiEndpoint + "Account";
constructor(private http: HttpClient) {}
getAllIUsers(): Observable<userModel> {
return this.http.get<userModel>(this.usersUrl + "/accountsList");
}
}
PS : I tried both Role: any[] and Role: RoleModel[] in user Model neither one of them worked.
What's wrong?
I am using Angular 9.
