Feature/improve language localization in users table of admin control panel (#5104)

* Improve language localization

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the language localization in the users table of the admin control panel
 - Renamed `Settings` to `settings` in the `User` database schema
 - Improved the language localization for Dutch (`nl`)
 - Improved the language localization for Español (`es`)

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

@@ -1,6 +1,10 @@
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
-import { getDateFormatString, getEmojiFlag } from '@ghostfolio/common/helper';
+import {
+  getDateFnsLocale,
+  getDateFormatString,
+  getEmojiFlag
+} from '@ghostfolio/common/helper';
 import { AdminUsers, InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
@@ -125,7 +129,8 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
   public formatDistanceToNow(aDateString: string) {
     if (aDateString) {
       const distanceString = formatDistanceToNowStrict(parseISO(aDateString), {
-        addSuffix: true
+        addSuffix: true,
+        locale: getDateFnsLocale(this.user?.settings?.language)
       });
 
       return Math.abs(differenceInSeconds(parseISO(aDateString), new Date())) <

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

@@ -52,14 +52,15 @@
                 @if (element.subscription?.expiresAt) {
                   <gf-premium-indicator
                     class="ml-1"
+                    i18n-title
                     [enableLink]="false"
                     [title]="
-                      'Expires ' +
+                      `Expires ${formatDistanceToNow(
-                      formatDistanceToNow(element.subscription.expiresAt) +
+                        element.subscription.expiresAt
-                      ' (' +
+                      )} (${
-                      (element.subscription.expiresAt
+                        (element.subscription.expiresAt
-                        | date: defaultDateFormat) +
+                        | date: defaultDateFormat)
-                      ')'
+                      })`
                     "
                   />
                 }