feat: format date and time in /admin/users/ -> Profile section (#20811)

Matches the format used in the user settings page.

Added a formatting function in utils.

web/src/lib/components/user-settings-page/app-settings.svelte

@@ -12,7 +12,7 @@
     playVideoThumbnailOnHover,
     showDeleteModal,
   } from '$lib/stores/preferences.store';
-  import { findLocale } from '$lib/utils';
+  import { createDateFormatter, findLocale } from '$lib/utils';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -48,21 +48,7 @@
     }
   };
   let editedLocale = $derived(findLocale($locale).code);
-  let formattedDate = $derived(
-    time.toLocaleString(editedLocale, {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-    }),
-  );
-  let timePortion = $derived(
-    time.toLocaleString(editedLocale, {
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-    }),
-  );
-  let selectedDate = $derived(`${formattedDate} ${timePortion}`);
+  let selectedDate: string = $derived(createDateFormatter(editedLocale).formatDateTime(time));
   let selectedOption = $derived({
     value: findLocale(editedLocale).code || fallbackLocale.code,
     label: findLocale(editedLocale).name || fallbackLocale.name,

web/src/lib/utils.ts

@@ -36,6 +36,12 @@ interface DownloadRequestOptions<T = unknown> {
   onDownloadProgress?: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void;
 }
 
+interface DateFormatter {
+  formatDate: (date: Date) => string;
+  formatTime: (date: Date) => string;
+  formatDateTime: (date: Date) => string;
+}
+
 export const initLanguage = async () => {
   const preferenceLang = get(lang);
   for (const { code, loader } of langs) {
@@ -343,3 +349,35 @@ export const withError = async <T>(fn: () => Promise<T>): Promise<[undefined, T]
 
 // eslint-disable-next-line unicorn/prefer-code-point
 export const decodeBase64 = (data: string) => Uint8Array.from(atob(data), (c) => c.charCodeAt(0));
+
+export function createDateFormatter(localeCode: string | undefined): DateFormatter {
+  return {
+    formatDate: (date: Date): string =>
+      date.toLocaleString(localeCode, {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      }),
+
+    formatTime: (date: Date): string =>
+      date.toLocaleString(localeCode, {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+      }),
+
+    formatDateTime: (date: Date): string => {
+      const formattedDate = date.toLocaleString(localeCode, {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      });
+      const formattedTime = date.toLocaleString(localeCode, {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+      });
+      return `${formattedDate} ${formattedTime}`;
+    },
+  };
+}

web/src/routes/admin/users/[id]/+page.svelte

@@ -13,6 +13,7 @@
   import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { user as authUser } from '$lib/stores/user.store';
+  import { createDateFormatter, findLocale } from '$lib/utils';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
   import { updateUserAdmin } from '@immich/sdk';
@@ -70,6 +71,12 @@
   let canResetPassword = $derived($authUser.id !== user.id);
   let newPassword = $state<string>('');
 
+  let editedLocale = $derived(findLocale($locale).code);
+  let createAtDate: Date = $derived(new Date(user.createdAt));
+  let updatedAtDate: Date = $derived(new Date(user.updatedAt));
+  let userCreatedAtDateAndTime: string = $derived(createDateFormatter(editedLocale).formatDateTime(createAtDate));
+  let userUpdatedAtDateAndTime: string = $derived(createDateFormatter(editedLocale).formatDateTime(updatedAtDate));
+
   const handleEdit = async () => {
     const result = await modalManager.show(UserEditModal, { user: { ...user } });
     if (result) {
@@ -266,11 +273,11 @@
                   </div>
                   <div>
                     <Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
-                    <Text>{user.createdAt}</Text>
+                    <Text>{userCreatedAtDateAndTime}</Text>
                   </div>
                   <div>
                     <Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
-                    <Text>{user.updatedAt}</Text>
+                    <Text>{userUpdatedAtDateAndTime}</Text>
                   </div>
                   <div>
                     <Heading tag="h3" size="tiny">{$t('id')}</Heading>