Only local filter on users list

VernissageApp · Nov 3, 2024 · 80906d2 · 80906d2
1 parent d21ed1e
commit 80906d2
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 23 deletions.
diff --git a/src/app/models/user.ts b/src/app/models/user.ts
@@ -30,6 +30,7 @@ export class User {
     public twoFactorEnabled = false;
     public manuallyApprovesFollowers = false;
     public featured = false;
+    public lastLoginDate = '';
     public createdAt = '';
     public updatedAt = '';
 }
diff --git a/src/app/pages/users/users.page.html b/src/app/pages/users/users.page.html
@@ -18,6 +18,11 @@ <h1>
                                 </mat-form-field>
                                 <button mat-flat-button color="primary">Search</button>
                             </div>
+                            <div class="margin-top-5">
+                                <mat-checkbox name="isLocal" color="primary" [disableRipple]="true" [(ngModel)]="onlyLocal">
+                                    Only local
+                                </mat-checkbox>
+                            </div>
                         </form>
                     </mat-card-content>
                 </mat-card>
@@ -28,21 +33,9 @@ <h1>
                 <!-- User Avatar Column -->
                 <ng-container matColumnDef="avatar">
                     <th mat-header-cell *matHeaderCellDef></th>
-                    <td mat-cell *matCellDef="let element">
-                        <app-avatar [user]="element" [size]="avatarSize.medium"></app-avatar>
-                    </td>
-                </ng-container>
-
-                <!-- User Name Column -->
-                <ng-container matColumnDef="userName">
-                    <th mat-header-cell *matHeaderCellDef> User name </th>
                     <td mat-cell *matCellDef="let element">
                         <div class="flex-row gap-8 flex-align-center">
-                            <div class="user-name-link">
-                                <a [routerLink]="['/@' + element.userName ]">
-                                    {{ element.userName }}    
-                                </a>                            
-                            </div>
+                            <app-avatar [user]="element" [size]="avatarSize.medium"></app-avatar>
                             <mat-chip-set *ngIf="!isHandset" aria-label="Roles">
                                 <mat-chip-option *ngIf="element.roles?.includes(role.Administrator)" [disableRipple]="true" disabled>A</mat-chip-option>
                                 <mat-chip-option *ngIf="element.roles?.includes(role.Moderator)" [disableRipple]="true" disabled>M</mat-chip-option>
@@ -52,11 +45,18 @@ <h1>
                     </td>
                 </ng-container>
 
-                <!-- User Full Name Column -->
-                <ng-container matColumnDef="userFullName">
-                    <th mat-header-cell *matHeaderCellDef> Full name </th>
+                <!-- User Name Column -->
+                <ng-container matColumnDef="userName">
+                    <th mat-header-cell *matHeaderCellDef> Name </th>
                     <td mat-cell *matCellDef="let element">
-                        {{ element.name }}
+                        <div class="user-name-link">
+                            <a [routerLink]="['/@' + element.userName ]">
+                                {{ element.userName }}
+                            </a>
+                        </div>
+                        <div class="name">
+                            {{ element.name }}
+                        </div>
                     </td>
                 </ng-container>
 
@@ -98,6 +98,16 @@ <h1>
                     </td>
                 </ng-container>
 
+                <!-- Last login Column -->
+                <ng-container matColumnDef="lastLoginDate">
+                    <th mat-header-cell *matHeaderCellDef> Last login </th>
+                    <td mat-cell *matCellDef="let element">
+                        <span *ngIf="element.lastLoginDate">
+                            {{ element.lastLoginDate | date: 'short' }}
+                        </span>
+                    </td>
+                </ng-container>
+
                 <!-- Created Date Column -->
                 <ng-container matColumnDef="createdAt">
                     <th mat-header-cell *matHeaderCellDef> Created date </th>

diff --git a/src/app/pages/users/users.page.scss b/src/app/pages/users/users.page.scss
@@ -18,6 +18,15 @@ h1 {
   display: block;
 }
 
+.name {
+  width: 140px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+
 ::ng-deep .mat-mdc-form-field-subscript-wrapper {
   height: 0;
 }
diff --git a/src/app/pages/users/users.page.ts b/src/app/pages/users/users.page.ts
@@ -30,6 +30,7 @@ export class UsersPage extends ResponsiveComponent implements OnInit {
     readonly role = Role;
 
     search = '';
+    onlyLocal = false;
     isReady = false;
     pageIndex = 0;
     users?: PaginableResult<User>;
@@ -38,8 +39,8 @@ export class UsersPage extends ResponsiveComponent implements OnInit {
 
     private readonly displayedColumnsHandsetPortrait: string[] = ['avatar', 'userName', 'actions'];
     private readonly displayedColumnsHandsetLandscape: string[] = ['avatar', 'userName', 'createdAt', 'actions'];
-    private readonly displayedColumnsTablet: string[] = ['avatar', 'userName', 'userFullName', 'email', 'isApproved', 'createdAt', 'actions'];
-    private readonly displayedColumnsBrowser: string[] = ['avatar', 'userName', 'userFullName', 'email', 'isLocal', 'isApproved', 'statuses', 'createdAt', 'actions'];
+    private readonly displayedColumnsTablet: string[] = ['avatar', 'userName', 'email', 'isApproved', 'lastLoginDate', 'createdAt', 'actions'];
+    private readonly displayedColumnsBrowser: string[] = ['avatar', 'userName', 'email', 'isLocal', 'isApproved', 'statuses', 'lastLoginDate', 'createdAt', 'actions'];
 
     constructor(
         private authorizationService: AuthorizationService,
@@ -68,13 +69,16 @@ export class UsersPage extends ResponsiveComponent implements OnInit {
             const pageString = params['page'] as string;
             const sizeString = params['size'] as string;
             const query = params['query'] as string;
+            const local = params['onlyLocal'] as string;
 
             const page = pageString ? +pageString : 0;
             const size = sizeString ? +sizeString : 10;
 
             this.pageIndex = page;
             this.search = query
-            this.users = await this.usersService.get(page + 1, size, query);
+            this.onlyLocal = local === 'true';
+
+            this.users = await this.usersService.get(page + 1, size, query, this.onlyLocal);
 
             this.isReady = true;
             this.loadingService.hideLoader();
@@ -83,7 +87,7 @@ export class UsersPage extends ResponsiveComponent implements OnInit {
 
     async onSubmit(): Promise<void> {
         const navigationExtras: NavigationExtras = {
-            queryParams: { query: this.search },
+            queryParams: { query: this.search, onlyLocal: this.onlyLocal },
             queryParamsHandling: 'merge'
         };
 

diff --git a/src/app/services/http/users.service.ts b/src/app/services/http/users.service.ts
@@ -16,8 +16,8 @@ export class UsersService {
     constructor(private httpClient: HttpClient, private windowService: WindowService) {
     }
 
-    public async get(page: number, size: number, query: string): Promise<PaginableResult<User>> {
-        const event$ = this.httpClient.get<PaginableResult<User>>(this.windowService.apiUrl() + `/api/v1/users?page=${page}&size=${size}&query=${query ?? ''}`);
+    public async get(page: number, size: number, query: string, onlyLocal = false): Promise<PaginableResult<User>> {
+        const event$ = this.httpClient.get<PaginableResult<User>>(this.windowService.apiUrl() + `/api/v1/users?page=${page}&size=${size}&query=${query ?? ''}&onlyLocal=${onlyLocal}`);
         return await firstValueFrom(event$);
     }