From 89f5de4e9ca416ca66240f19de807f5a624f6cdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milo=C5=A1=20Paunovi=C4=87?= <paun992@hotmail.com>
Date: Fri, 6 Dec 2024 09:14:32 +0100
Subject: [PATCH] chore(ui): respect date format form setting inside filter
 label (#6335)

---
 ui/src/components/filter/components/Label.vue | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/filter/components/Label.vue b/ui/src/components/filter/components/Label.vue
index 7fbc4e9cada..b1a1b493e7e 100644
--- a/ui/src/components/filter/components/Label.vue
+++ b/ui/src/components/filter/components/Label.vue
@@ -1,8 +1,7 @@
 <template>
     <span v-if="label">{{ $t("filters.options." + label) }}</span>
     <span v-if="comparator" class="comparator">{{ comparator }}</span>
-    <!-- TODO: Amend line below after merging issue: https://github.com/kestra-io/kestra/issues/5955 -->
-    <span v-if="value">{{ !comparator ? ":" : "" }}{{ value }}</span>
+    <span v-if="value">{{ value }}</span>
 </template>
 
 <script setup lang="ts">
@@ -10,8 +9,10 @@
 
     const props = defineProps({option: {type: Object, required: true}});
 
-    const DATE_FORMATS: Intl.DateTimeFormatOptions = {timeStyle: "short", dateStyle: "short"};
-    const formatter = new Intl.DateTimeFormat("en-US", DATE_FORMATS);
+    import moment from "moment";
+    const DATE_FORMAT = localStorage.getItem("dateFormat") || "llll";
+
+    const formatter = (date) => moment(date).format(DATE_FORMAT);
 
     const label = computed(() => props.option?.label);
     const comparator = computed(() => props.option?.comparator?.label);
@@ -25,15 +26,15 @@
         }
 
         const {startDate, endDate} = value[0];
-        return `${startDate ? formatter.format(new Date(startDate)) : "unknown"}:and:${endDate ? formatter.format(new Date(endDate)) : "unknown"}`;
+        return `${startDate ? formatter(new Date(startDate)) : "unknown"}:and:${endDate ? formatter(new Date(endDate)) : "unknown"}`;
     });
 </script>
 
 <style lang="scss" scoped>
-    .comparator {
-        background: var(--bs-gray-500);
-        padding: 0.30rem 0.35rem;
-        margin: 0 0.5rem;
-        display: inline-block;
-    }
+.comparator {
+    background: var(--bs-gray-500);
+    padding: 0.3rem 0.35rem;
+    margin: 0 0.5rem;
+    display: inline-block;
+}
 </style>