diff --git a/src/components/topbar/StatusAlerts.unit.ts b/src/components/topbar/StatusAlerts.unit.ts
index b9087a413b..d1f2214a73 100644
--- a/src/components/topbar/StatusAlerts.unit.ts
+++ b/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);
});
});
diff --git a/src/components/topbar/StatusAlerts.vue b/src/components/topbar/StatusAlerts.vue
index c9acbd6063..5573915396 100644
--- a/src/components/topbar/StatusAlerts.vue
+++ b/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) }}
+
+ {{ $t("common.labels.updateAt") }}
+ {{ formatDate(item.timestamp) }} |
+
+ {{ $t("common.labels.createAt") }} {{ formatDate(item.createdAt) }}
@@ -46,7 +47,7 @@
diff --git a/src/plugins/datetime.js b/src/plugins/datetime.js
index 44289abc1c..b8b54e1213 100644
--- a/src/plugins/datetime.js
+++ b/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();
};
diff --git a/src/plugins/datetime.unit.js b/src/plugins/datetime.unit.js
index 66e0060075..5a47baa896 100644
--- a/src/plugins/datetime.unit.js
+++ b/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();