Added functionalities to display dateTime.

src/components/topbar/StatusAlerts.vue

@@ -34,8 +34,10 @@
 					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) }} |
+					<template v-if="item.timestamp && item.timestamp !== item.createdAt">
+						{{ $t("common.labels.updateAt") }}
+						{{ getDate(item.timestamp) }} |
+					</template>
 					{{ $t("common.labels.createAt") }}
 					{{ getCreatedDate(item.createdAt) }}
 				</v-list-item-subtitle>
@@ -46,7 +48,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import { printDateTime, fromNow } from "../../plugins/datetime";
+import { fromNow } from "../../plugins/datetime";
 import { mdiAlertCircle, mdiInformation } from "@mdi/js";
 import { StatusAlert } from "@/store/types/status-alert";
 
@@ -64,12 +66,15 @@ export default defineComponent({
 				? { icon: mdiAlertCircle, color: "error" }
 				: { icon: mdiInformation, color: "info" };
 		};
-
-		const getDate = (date: string) => {
-			return fromNow(date, true);
+		const getDate = (updateTime: string, creationTime: string) => {
+			if (updateTime && updateTime !== creationTime) {
+				return fromNow(updateTime, true);
+			}
+			return "";
 		};
-		const getCreatedDate = (dateTime: string) => {
-			return printDateTime(dateTime);
+
+		const getCreatedDate = (creationTime: string) => {
+			return fromNow(creationTime, true);
 		};
 
 		return { getIconTag, getDate, getCreatedDate };

src/plugins/datetime.js

@@ -237,17 +237,48 @@ export const createInputDateTime = (date) => {
 	];
 };
 
+const getPlural = (count, singular, plural) => {
+	return count === 1 ? singular : plural;
+};
+
 /**
  * Returns date difference to current local time
  * @param {String} date
  * @param {boolean} isLocalTimeZone set true if input date is to be handled in local time zone instead of utc
  * @return {String} Date difference based on current timezone
  */
 export const fromNow = (date, isLocalTimeZone) => {
-	if (isLocalTimeZone == true) {
-		return dayjs(date).fromNow();
+	const time = isLocalTimeZone ? dayjs(date) : dayjs.tz(date, "UTC");
+	const current = dayjs.tz();
+	const totalMinutesDiff = Math.floor(current.diff(time, "minute"));
+
+	// Para los minutos:
+	if (totalMinutesDiff < 60) {
+		return `${totalMinutesDiff} ${getPlural(
+			totalMinutesDiff,
+			"minute",
+			"minutes"
+		)} ago`;
+	}
+
+	// Para las horas:
+	const totalHoursDiff = Math.floor(totalMinutesDiff / 60);
+	if (totalHoursDiff < 24) {
+		return `${totalHoursDiff} ${getPlural(
+			totalHoursDiff,
+			"hour",
+			"hours"
+		)} ago`;
+	}
+
+	// Para los días:
+	const totalDaysDiff = Math.floor(totalHoursDiff / 24);
+	if (totalDaysDiff < 7) {
+		return `${totalDaysDiff} ${getPlural(totalDaysDiff, "day", "days")} ago`;
 	}
-	return fromUTC(date).fromNow();
+
+	// Para 7 días o más:
+	return time.format(DATETIME_FORMAT.date);
 };
 
 /**