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