From 1e2aeb0afbb35f096a993bf9af5ae992b654cb88 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Thu, 9 Jan 2025 17:34:23 +0700
Subject: [PATCH] refactor: show time

---
 .../receive/InfoMessengerExpansion.vue        | 14 +++++++++---
 src/utils/datetime.ts                         | 22 +++++++++++++++----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/pages/09_task-order/expansion/receive/InfoMessengerExpansion.vue b/src/pages/09_task-order/expansion/receive/InfoMessengerExpansion.vue
index f16b6c28..d05568e5 100644
--- a/src/pages/09_task-order/expansion/receive/InfoMessengerExpansion.vue
+++ b/src/pages/09_task-order/expansion/receive/InfoMessengerExpansion.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // NOTE: Import stores
-import { dateFormat } from 'src/utils/datetime';
+import { dateFormatJS } from 'src/utils/datetime';
 
 // NOTE  Import Types
 import {
@@ -96,7 +96,11 @@ defineProps<{
           :label="$t('taskOrder.workStartDate')"
         >
           <template #value>
-            {{ acceptedAt ? dateFormat(acceptedAt) : '-' }}
+            {{
+              acceptedAt
+                ? dateFormatJS({ date: acceptedAt, withTime: true })
+                : '-'
+            }}
           </template>
         </DataDisplay>
 
@@ -105,7 +109,11 @@ defineProps<{
           :label="$t('taskOrder.workSubmissionDate')"
         >
           <template #value>
-            {{ submittedAt ? dateFormat(submittedAt) : '-' }}
+            {{
+              submittedAt
+                ? dateFormatJS({ date: submittedAt, withTime: true })
+                : '-'
+            }}
           </template>
         </DataDisplay>
 
diff --git a/src/utils/datetime.ts b/src/utils/datetime.ts
index 6994869b..0178319d 100644
--- a/src/utils/datetime.ts
+++ b/src/utils/datetime.ts
@@ -19,7 +19,8 @@ export function dateFormatJS(opts: {
   noDay?: boolean;
   noMonth?: boolean;
   noYear?: boolean;
-}) {
+  withTime?: boolean;
+}): string {
   const dt = opts.date ? new Date(opts.date) : new Date();
 
   const { locale } = i18n.global;
@@ -35,6 +36,17 @@ export function dateFormatJS(opts: {
     opts.timeStyle = opts.timeStyle || 'short';
   }
 
+  let timeText = opts.withTime
+    ? ' ' +
+      dateFormatJS({
+        date: opts.date,
+        timeOnly: true,
+        timeStyle: opts.timeStyle,
+      })
+    : '';
+
+  if (timeText) opts.timeStyle = undefined;
+
   let formatted = new Intl.DateTimeFormat(opts.locale, {
     day: opts.noDay ? undefined : opts.dayStyle || 'numeric',
     month: opts.noMonth ? undefined : opts.monthStyle || 'short',
@@ -46,11 +58,13 @@ export function dateFormatJS(opts: {
     case Lang.Thai:
     case 'th-TH':
     case 'th-Th':
-      return formatted.replace(/(\d{4})/, (year) =>
-        (parseInt(year) - 543).toString(),
+      return (
+        formatted.replace(/(\d{4})/, (year) =>
+          (parseInt(year) - 543).toString(),
+        ) + timeText
       );
     default:
-      return formatted;
+      return formatted + timeText;
   }
 }