Feature/extend user detail dialog by last request (#7979)

* Include last request in user detail dialog

* Update changelog

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Extended the emergency fund dialog in the portfolio summary to include the currency suffix
+- Extended the user detail dialog in the users section of the admin control panel to include the last request
 - Migrated the client to the code generated by the new `prisma-client` generator of _Prisma_
 - Migrated from `lodash` to `lodash-es`
 

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -48,12 +48,7 @@ import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
-import {
+import { addMilliseconds, formatDistanceToNowStrict } from 'date-fns';
-  addMilliseconds,
-  differenceInSeconds,
-  formatDistanceToNowStrict,
-  parseISO
-} from 'date-fns';
 import { addIcons } from 'ionicons';
 import {
   closeCircleOutline,
@@ -187,21 +182,6 @@ export class GfAdminOverviewComponent implements OnInit {
     this.fetchAdminData();
   }
 
-  protected formatDistanceToNow(aDateString: string) {
-    if (aDateString) {
-      const distanceString = formatDistanceToNowStrict(parseISO(aDateString), {
-        addSuffix: true
-      });
-
-      return Math.abs(differenceInSeconds(parseISO(aDateString), new Date())) <
-        60
-        ? 'just now'
-        : distanceString;
-    }
-
-    return '';
-  }
-
   protected formatStringValue(aStringValue: StringValue) {
     return formatDistanceToNowStrict(
       addMilliseconds(new Date(), ms(aStringValue)),

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -5,12 +5,12 @@ import {
 import { GfUserDetailDialogComponent } from '@ghostfolio/client/components/user-detail-dialog/user-detail-dialog.component';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { formatRelativeTime } from '@ghostfolio/client/util/date.util';
 import { DEFAULT_LOCALE, DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import {
   canDeleteUser,
   getCountryName,
-  getDateFnsLocale,
   getDateFormatString,
   getEmojiFlag
 } from '@ghostfolio/common/helper';
@@ -49,11 +49,6 @@ import {
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
-import {
-  differenceInSeconds,
-  formatDistanceToNowStrict,
-  parseISO
-} from 'date-fns';
 import { addIcons } from 'ionicons';
 import {
   contractOutline,
@@ -93,6 +88,7 @@ export class GfAdminUsersComponent implements OnInit {
   protected defaultDateFormat: string;
   protected displayedColumns: string[] = [];
   protected readonly canDeleteUser = canDeleteUser;
+  protected readonly formatRelativeTime = formatRelativeTime;
   protected readonly getCountryName = getCountryName;
   protected readonly getEmojiFlag = getEmojiFlag;
   protected hasPermissionForSubscription: boolean;
@@ -209,22 +205,6 @@ export class GfAdminUsersComponent implements OnInit {
       });
   }
 
-  protected formatDistanceToNow(aDateString: string) {
-    if (aDateString) {
-      const distanceString = formatDistanceToNowStrict(parseISO(aDateString), {
-        addSuffix: true,
-        locale: getDateFnsLocale(this.user?.settings?.language)
-      });
-
-      return Math.abs(differenceInSeconds(parseISO(aDateString), new Date())) <
-        60
-        ? $localize`just now`
-        : distanceString;
-    }
-
-    return '';
-  }
-
   protected onChangePage(page: PageEvent) {
     this.fetchUsers({
       pageIndex: page.pageIndex
@@ -332,6 +312,7 @@ export class GfAdminUsersComponent implements OnInit {
         currentUserId: this.user?.id,
         deviceType: this.deviceType(),
         hasPermissionForSubscription: this.hasPermissionForSubscription,
+        language: this.user?.settings?.language,
         locale: this.user?.settings?.locale ?? DEFAULT_LOCALE,
         userId: aUserId
       } satisfies UserDetailDialogParams,

apps/client/src/app/components/admin-users/admin-users.html

@@ -32,7 +32,10 @@
                     class="ml-1"
                     i18n-title
                     title="Expires {{
-                      formatDistanceToNow(element.subscription.expiresAt)
+                      formatRelativeTime({
+                        date: element.subscription.expiresAt,
+                        language: user?.settings?.language
+                      })
                     }} ({{
                       element.subscription.expiresAt | date: defaultDateFormat
                     }})"
@@ -79,7 +82,12 @@
               class="mat-mdc-cell px-1 py-2 text-nowrap"
               mat-cell
             >
-              {{ formatDistanceToNow(element.createdAt) }}
+              {{
+                formatRelativeTime({
+                  date: element.createdAt,
+                  language: user?.settings?.language
+                })
+              }}
             </td>
           </ng-container>
 
@@ -175,17 +183,21 @@
               <th
                 *matHeaderCellDef
                 class="mat-mdc-header-cell px-1 py-2"
-                i18n
                 mat-header-cell
               >
-                Last Request
+                <ng-container i18n>Last Request</ng-container>
               </th>
               <td
                 *matCellDef="let element"
                 class="mat-mdc-cell px-1 py-2 text-nowrap"
                 mat-cell
               >
-                {{ formatDistanceToNow(element.lastActivity) }}
+                {{
+                  formatRelativeTime({
+                    date: element.lastActivity,
+                    language: user?.settings?.language
+                  })
+                }}
               </td>
             </ng-container>
           }

apps/client/src/app/components/user-detail-dialog/interfaces/interfaces.ts

@@ -2,6 +2,7 @@ export interface UserDetailDialogParams {
   currentUserId: string;
   deviceType: string;
   hasPermissionForSubscription: boolean;
+  language?: string;
   locale: string;
   userId: string;
 }

apps/client/src/app/components/user-detail-dialog/user-detail-dialog.component.ts

@@ -1,3 +1,4 @@
+import { formatRelativeTime } from '@ghostfolio/client/util/date.util';
 import {
   canDeleteUser,
   getCountryName,
@@ -55,6 +56,7 @@ import {
 export class GfUserDetailDialogComponent implements OnInit {
   protected readonly baseCurrency: string;
   protected readonly canDeleteUser = canDeleteUser;
+  protected readonly formatRelativeTime = formatRelativeTime;
   protected readonly getCountryName = getCountryName;
   protected isLoading = true;
 

apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html

@@ -154,6 +154,23 @@
         </div>
       </div>
 
+      <div class="mb-3 row">
+        <div class="col-6 mb-3">
+          <gf-value
+            i18n
+            size="medium"
+            [isLoading]="isLoading"
+            [value]="
+              formatRelativeTime({
+                date: user?.lastActivity,
+                language: data.language
+              }) || '-'
+            "
+            >Last Request</gf-value
+          >
+        </div>
+      </div>
+
       @if (subscriptionsDataSource.data.length > 0) {
         <div class="row">
           <div class="col">

apps/client/src/app/util/date.util.ts

@@ -0,0 +1,28 @@
+import { getDateFnsLocale } from '@ghostfolio/common/helper';
+
+import {
+  differenceInSeconds,
+  formatDistanceToNowStrict,
+  parseISO
+} from 'date-fns';
+
+export function formatRelativeTime({
+  date,
+  language
+}: {
+  date: string;
+  language?: string;
+}) {
+  if (date) {
+    const distanceString = formatDistanceToNowStrict(parseISO(date), {
+      addSuffix: true,
+      locale: getDateFnsLocale(language)
+    });
+
+    return Math.abs(differenceInSeconds(parseISO(date), new Date())) < 60
+      ? $localize`just now`
+      : distanceString;
+  }
+
+  return '';
+}