Update timestamp format using time-ago package

codescalers · Feb 12, 2025 · 7e27161 · 7e27161
1 parent 83e13fd
commit 7e27161
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 24 deletions.
diff --git a/client/src/views/accManagemenTabs/AuditLogs.vue b/client/src/views/accManagemenTabs/AuditLogs.vue
@@ -14,7 +14,7 @@
           </template>
 
           <template #[`item.timestamp`]="{ item }">
-            {{ formatDate(item.timestamp) }}
+            {{ timeAgo.format(convertDate(item.timestamp)) }}
           </template>
         </v-data-table>
       </v-col>
@@ -26,7 +26,11 @@
 import { ref, onMounted } from "vue";
 import userService from "@/services/userService";
 import Toast from "@/components/Toast.vue";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+TimeAgo.addLocale(en)
 
+const timeAgo = ref(new TimeAgo("en-US"));
 const events = ref([]);
 const toast = ref(null);
 const loading = ref(false);
@@ -41,6 +45,10 @@ const headers = ref([
   },
 ]);
 
+function convertDate(date) {
+  return new Date(date);
+}
+
 async function getAuditEvents() {
   loading.value = true;
   await userService
@@ -58,18 +66,6 @@ async function getAuditEvents() {
     });
 }
 
-function formatDate(date) {
-  var d = new Date(date),
-    month = "" + (d.getMonth() + 1),
-    day = "" + d.getDate(),
-    year = d.getFullYear();
-
-  if (month.length < 2) month = "0" + month;
-  if (day.length < 2) day = "0" + day;
-
-  return [day, month, year].join("-");
-}
-
 onMounted(async () => {
   await getAuditEvents();
 });

diff --git a/client/src/views/accManagemenTabs/Invoices.vue b/client/src/views/accManagemenTabs/Invoices.vue
@@ -19,7 +19,7 @@
           :hide-default-footer="invoices == 0"
         >
           <template #[`item.created_at`]="{ item }">
-            {{ formatDate(item.created_at) }}
+            {{ timeAgo.format(convertDate(item.created_at)) }}
           </template>
 
           <template #[`item.invoice`]="{ item }">
@@ -52,7 +52,11 @@ import userService from "@/services/userService";
 import Toast from "@/components/Toast.vue";
 import { storeToRefs } from "pinia";
 import { useUserStore } from "@/store/UserStore";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+TimeAgo.addLocale(en);
 
+const timeAgo = ref(new TimeAgo("en-US"));
 const invoices = ref();
 const toast = ref(null);
 const message = ref();
@@ -75,16 +79,8 @@ const headers = ref([
   },
 ]);
 
-function formatDate(date) {
-  var d = new Date(date),
-    month = "" + (d.getMonth() + 1),
-    day = "" + d.getDate(),
-    year = d.getFullYear();
-
-  if (month.length < 2) month = "0" + month;
-  if (day.length < 2) day = "0" + day;
-
-  return [day, month, year].join("-");
+function convertDate(date) {
+  return new Date(date);
 }
 
 // TODO handle invoices InvoiceID