BC-4623-Creation time and update time of status messages

src/components/topbar/StatusAlerts.unit.ts

@@ -4,6 +4,8 @@ import setupStores from "@@/tests/test-utils/setupStores";
 import { mockStatusAlerts } from "@@/tests/test-utils/mockStatusAlerts";
 import Vue from "vue";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import dayjs from "dayjs";
+import { formatDateForAlerts } from "@/plugins/datetime";
 
 const testProps = {
 	statusAlerts: mockStatusAlerts,
@@ -59,18 +61,17 @@ describe("@/components/topbar/StatusAlerts", () => {
 	});
 });
 
-describe("getCreatedDate", () => {
-	it("should be getCreatedDate function on the template", () => {
-		const wrapper = getWrapper(testProps);
-		const expectedDate = "05.05.2023 12:34";
-		const alertElement = wrapper.find(".alert-date");
-		expect(alertElement.element.innerHTML).toContain(expectedDate);
+describe("formatDate", () => {
+	const wrapper = getWrapper(testProps);
+	it("returns 'vor ein paar Sekunden' for seconds difference", () => {
+		const fewSecondsAgo = dayjs().subtract(30, "seconds");
+		const expectedOutput = "vor ein paar Sekunden";
+		const result = formatDateForAlerts(fewSecondsAgo);
+		expect(result).toBe(expectedOutput);
 	});
-
-	it("should returns expected result", () => {
-		const wrapper = getWrapper(testProps);
-		const expectedDate = "05.05.2023 12:34";
-		const dateTime = "May 5, 2023 12:34 PM";
-		expect(wrapper.vm.getCreatedDate(dateTime)).toEqual(expectedDate);
+	it("returns European format after 7 days", () => {
+		const pastDate = dayjs.utc().subtract(8, "days").toISOString();
+		const expectedDate = dayjs.utc(pastDate).format("DD.MM.YYYY");
+		expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate);
 	});
 });

src/components/topbar/StatusAlerts.vue

@@ -34,10 +34,11 @@
 					class="text-left text-caption d-flex flex-row alert-date text--secondary mt-0 mt-2"
 					:data-testid="`alert-date-${index}`"
 				>
-					{{ $t("common.labels.updateAt") }}
-					{{ getDate(item.timestamp) }} |
-					{{ $t("common.labels.createAt") }}
-					{{ getCreatedDate(item.createdAt) }}
+					<template v-if="item.timestamp !== item.createdAt">
+						{{ $t("common.labels.updateAt") }}
+						{{ formatDate(item.timestamp) }} |
+					</template>
+					{{ $t("common.labels.createAt") }} {{ formatDate(item.createdAt) }}
 				</v-list-item-subtitle>
 			</v-list-item-content>
 		</v-list-item>
@@ -46,7 +47,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import { printDateTime, fromNow } from "../../plugins/datetime";
+import { formatDateForAlerts } from "../../plugins/datetime";
 import { mdiAlertCircle, mdiInformation } from "@mdi/js";
 import { StatusAlert } from "@/store/types/status-alert";
 
@@ -65,14 +66,11 @@ export default defineComponent({
 				: { icon: mdiInformation, color: "info" };
 		};
 
-		const getDate = (date: string) => {
-			return fromNow(date, true);
-		};
-		const getCreatedDate = (dateTime: string) => {
-			return printDateTime(dateTime);
+		const formatDate = (dateTime: any) => {
+			return formatDateForAlerts(dateTime, true);
 		};
 
-		return { getIconTag, getDate, getCreatedDate };
+		return { getIconTag, formatDate };
 	},
 });
 </script>

src/plugins/datetime.js

@@ -252,6 +252,29 @@ export const fromNow = (date, isLocalTimeZone) => {
 	return fromUTC(date).fromNow();
 };
 
+export const formatDateForAlerts = (date, isLocalTimeZone = false) => {
+	const time = isLocalTimeZone ? dayjs(date) : dayjs.tz(date, "UTC");
+	const current = isLocalTimeZone ? dayjs() : dayjs.utc();
+
+	setDayjsLocale();
+
+	const totalDaysDiff = Math.abs(current.diff(time, "day"));
+	const MAX_DAYS_BEFORE_SHOWING_FULL_DATE = 7;
+
+	if (totalDaysDiff < MAX_DAYS_BEFORE_SHOWING_FULL_DATE) {
+		// If it is less than 7 days, we use fromNow
+		return fromNow(date, isLocalTimeZone);
+	} else {
+		// If it is 7 days or more, we return in European format.
+		return time.format("DD.MM.YYYY");
+	}
+};
+
+export const setDayjsLocale = () => {
+	const locale = authModule?.getLocale || "de";
+	dayjs.locale(locale);
+};
+
 /**
  * Returns future date difference to current local time
  * @param {String} date
@@ -289,6 +312,5 @@ export default ({ app, store }) => {
 	initDefaultTimezone(app, store);
 	setDefaultFormats(app);
 
-	const locale = authModule.getLocale || "de";
-	dayjs.locale(locale);
+	setDayjsLocale();
 };

src/plugins/datetime.unit.js

@@ -3,6 +3,7 @@ import {
 	currentDate,
 	fromInputDateTime,
 	fromNow,
+	formatDateForAlerts,
 	fromNowToFuture,
 	createInputDateTime,
 	inputRangeDate,
@@ -154,6 +155,13 @@ describe("@/plugins/datetime", () => {
 		expect(result).toBe("in 7 days");
 	});
 
+	it("formatDateForAlerts", () => {
+		const sevenDaysAgo = dayjs().subtract(7, "days");
+		const expectedDate = sevenDaysAgo.format("DD.MM.YYYY");
+		const result = formatDateForAlerts(sevenDaysAgo);
+		expect(result).toBe(expectedDate);
+	});
+
 	it("fromNowToFuture", () => {
 		const past = dateUTC.toISOString();
 		const future = dateNow.add(230, "minute").toISOString();