Event log UX improvements

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 = { 

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",

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);
 

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>

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,
+  };
+};