From 3c2025b04d09957fe9d1b2f59eb8b52bf41a1545 Mon Sep 17 00:00:00 2001
From: K-Dud <krystian.dudzik@veroo.io>
Date: Thu, 10 Apr 2025 14:11:27 +0200
Subject: [PATCH] Event log UX improvements

---
 .../ReadModels/ApplicationReadModels.fs       |  2 +-
 frontend-vue/package-lock.json                | 15 +++++++++++++++
 frontend-vue/package.json                     |  1 +
 .../src/components/event-log/EventLog.vue     | 14 ++++----------
 .../components/event-log/FormattedDate.vue    | 15 +++++++++++++++
 frontend-vue/src/composables/date-utls.ts     | 19 +++++++++++++++++++
 frontend-vue/src/composables/index.ts         |  0
 7 files changed, 55 insertions(+), 11 deletions(-)
 create mode 100644 frontend-vue/src/components/event-log/FormattedDate.vue
 create mode 100644 frontend-vue/src/composables/date-utls.ts
 delete mode 100644 frontend-vue/src/composables/index.ts

diff --git a/backend/Contexture.Api/ReadModels/ApplicationReadModels.fs b/backend/Contexture.Api/ReadModels/ApplicationReadModels.fs
index 87e1c8ed..25de5922 100644
--- a/backend/Contexture.Api/ReadModels/ApplicationReadModels.fs
+++ b/backend/Contexture.Api/ReadModels/ApplicationReadModels.fs
@@ -455,7 +455,7 @@ module EventLog =
             }
             [
                 prependEvent d.DomainId eventToAppend
-                updateDomain { Id = d.DomainId; Name = d.Name; ShortName = None }
+                updateDomain { Id = d.DomainId; Name = d.Name; ShortName = d.ShortName }
             ]
         | Domain.DomainCreated d -> 
             let eventToAppend = { 
diff --git a/frontend-vue/package-lock.json b/frontend-vue/package-lock.json
index 2230fd9e..c1d07f02 100644
--- a/frontend-vue/package-lock.json
+++ b/frontend-vue/package-lock.json
@@ -15,6 +15,7 @@
         "@vueuse/core": "^10.7.2",
         "@vueuse/router": "^10.7.2",
         "d3": "^7.8.5",
+        "date-fns": "^4.1.0",
         "fuse.js": "^7.0.0",
         "oidc-client-ts": "^2.4.0",
         "pinia": "^2.1.7",
@@ -3309,6 +3310,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -10656,6 +10666,11 @@
         "whatwg-url": "^11.0.0"
       }
     },
+    "date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
diff --git a/frontend-vue/package.json b/frontend-vue/package.json
index 7658df7f..4d6107f4 100644
--- a/frontend-vue/package.json
+++ b/frontend-vue/package.json
@@ -20,6 +20,7 @@
     "@vueuse/core": "^10.7.2",
     "@vueuse/router": "^10.7.2",
     "d3": "^7.8.5",
+    "date-fns": "^4.1.0",
     "fuse.js": "^7.0.0",
     "oidc-client-ts": "^2.4.0",
     "pinia": "^2.1.7",
diff --git a/frontend-vue/src/components/event-log/EventLog.vue b/frontend-vue/src/components/event-log/EventLog.vue
index 4487b9ec..2521a712 100644
--- a/frontend-vue/src/components/event-log/EventLog.vue
+++ b/frontend-vue/src/components/event-log/EventLog.vue
@@ -2,9 +2,9 @@
   <ol class="mt-3 divide-y divide-gray-200 dark:divide-gray-700">
     <li v-for="(event, index) in paginatedEvents" :key="index">
       <div class="flex flex-col p-3">
-        <div class="flex justify-between gap-6 text-base font-normal">
+        <div class="flex items-center justify-between gap-6 text-base font-normal">
           <span class="font-medium text-blue-500">{{ translateEventTypeName(event.eventType) }}</span>
-          <span class="font-medium text-blue-500">{{ formatTimestamp(event.timestamp) }}</span>
+          <FormattedDate :date="event.timestamp"></FormattedDate>
         </div>
         <template v-if="event.eventType === 'BoundedContextImported'">
           <PropertyValue :name="t('event_log.boundedcontext.name')" :value="event.eventData.name"></PropertyValue>
@@ -60,17 +60,11 @@ import { useI18n } from "vue-i18n";
 import { EventLogEntry } from "~/types/event-log";
 import ValueDiff from "./ValueDiff.vue";
 import PropertyValue from "./PropertyValue.vue";
-const { events } = defineProps<{ events: EventLogEntry[] }>();
+import FormattedDate from "./FormattedDate.vue";
 
+const { events } = defineProps<{ events: EventLogEntry[] }>();
 const { t } = useI18n();
-
 const translateEventTypeName = (eventType: string) => t(`event_log.eventype.${eventType.toLowerCase()}`);
-
-const formatTimestamp = (timestamp: string) => {
-  const date = new Date(timestamp);
-  return date.toUTCString();
-};
-
 const itemsPerPage = 5;
 const currentPage = ref(1);
 
diff --git a/frontend-vue/src/components/event-log/FormattedDate.vue b/frontend-vue/src/components/event-log/FormattedDate.vue
new file mode 100644
index 00000000..2ddf2242
--- /dev/null
+++ b/frontend-vue/src/components/event-log/FormattedDate.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="flex flex-col items-end">
+    <span v-if="isRecentDate" class="font-medium text-blue-500">{{ toRelativeTime(date) }}</span>
+    <span class="font-medium text-blue-500">{{ toFormattedDate(date) }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDateUtils } from "~/composables/date-utls";
+import { differenceInDays } from "date-fns";
+import { computed } from "vue";
+const { date } = defineProps<{ date: string }>();
+const { toFormattedDate, toRelativeTime } = useDateUtils();
+const isRecentDate = computed(() => differenceInDays(new Date(), date) < 7);
+</script>
diff --git a/frontend-vue/src/composables/date-utls.ts b/frontend-vue/src/composables/date-utls.ts
new file mode 100644
index 00000000..727cd3c6
--- /dev/null
+++ b/frontend-vue/src/composables/date-utls.ts
@@ -0,0 +1,19 @@
+import { formatDistanceToNow, format } from "date-fns";
+import { enGB } from "date-fns/locale";
+
+export const useDateUtils = (locale = enGB) => {
+  const toRelativeTime = (isoDate: string) => {
+    if (!isoDate) return "";
+    return formatDistanceToNow(new Date(isoDate), { addSuffix: true, locale });
+  };
+
+  const toFormattedDate = (isoDate: string, dateFormat = "dd MMM yyyy HH:mm") => {
+    if (!isoDate) return "";
+    return format(new Date(isoDate), dateFormat, { locale });
+  };
+
+  return {
+    toRelativeTime,
+    toFormattedDate,
+  };
+};
diff --git a/frontend-vue/src/composables/index.ts b/frontend-vue/src/composables/index.ts
deleted file mode 100644
index e69de29b..00000000