feat(ui): date format settings

closes #1166
kestra-io · Aug 2, 2023 · e12d949 · e12d949
1 parent e4678a5
commit e12d949
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 10 deletions.
diff --git a/ui/src/components/layout/DateAgo.vue b/ui/src/components/layout/DateAgo.vue
@@ -15,8 +15,7 @@
                 default: false
             },
             format: {
-                type: String,
-                default: "LLLL"
+                type: String
             },
             className: {
                 type: String,
@@ -28,7 +27,7 @@
                 return this.$moment(this.date).fromNow();
             },
             full() {
-                return this.$moment(this.date).format(this.format);
+                return this.$filters.date(this.date, this.format);
             }
         }
     };

diff --git a/ui/src/components/settings/Settings.vue b/ui/src/components/settings/Settings.vue
@@ -23,6 +23,17 @@
                 </el-select>
             </el-form-item>
 
+            <el-form-item :label="$t('date format')">
+                <el-select :model-value="dateFormat" @update:model-value="onDateFormat">
+                    <el-option
+                        v-for="item in dateFormats"
+                        :key="item.value"
+                        :label="now.format(item.value)"
+                        :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+
             <el-form-item :label="$t('Editor theme')">
                 <el-select :model-value="editorTheme" @update:model-value="onEditorTheme">
                     <el-option
@@ -104,6 +115,7 @@
     import action from "../../models/action";
     import {logDisplayTypes} from "../../utils/constants";
 
+    export const DATE_FORMAT_STORAGE_KEY = "dateFormat";
     export default {
         mixins: [RouteContext],
         components: {
@@ -117,11 +129,13 @@
                 lang: undefined,
                 theme: undefined,
                 editorTheme: undefined,
+                dateFormat: undefined,
                 autofoldTextEditor: undefined,
                 guidedTour: undefined,
                 logDisplay: undefined,
                 editorFontSize: undefined,
-                editorFontFamily: undefined
+                editorFontFamily: undefined,
+                now: this.$moment()
             };
         },
         created() {
@@ -132,6 +146,7 @@
             this.lang = localStorage.getItem("lang") || "en";
             this.theme = localStorage.getItem("theme") || "light";
             this.editorTheme = localStorage.getItem("editorTheme") || (darkTheme ? "dark" : "vs");
+            this.dateFormat = localStorage.getItem(DATE_FORMAT_STORAGE_KEY) || "LLLL";
             this.autofoldTextEditor = localStorage.getItem("autofoldTextEditor") === "true";
             this.guidedTour = localStorage.getItem("tourDoneOrSkip") === "true";
             this.logDisplay = localStorage.getItem("logDisplay") || logDisplayTypes.DEFAULT;
@@ -171,6 +186,11 @@
                 this.theme = value;
                 this.$toast().saved();
             },
+            onDateFormat(value) {
+                localStorage.setItem(DATE_FORMAT_STORAGE_KEY, value);
+                this.dateFormat = value;
+                this.$toast().saved();
+            },
             onEditorTheme(value) {
                 localStorage.setItem("editorTheme", value);
                 this.editorTheme = value;
@@ -237,6 +257,17 @@
                     {value: "dark", text: "Dark"}
                 ]
             },
+            dateFormats() {
+                return  [
+                    {value: "YYYY-MM-DD"},
+                    {value: "YYYY-MM-DDThh:mm:ssZ"},
+                    {value: "MM/DD/YYYY"},
+                    {value: "DD/MM/YYYY"},
+                    {value: "YYYY/MM/DD"},
+                    {value: "MM/DD/YY"},
+                    {value: "LLLL"}
+                ]
+            },
             canReadFlows() {
                 return this.user && this.user.isAllowed(permission.FLOW, action.READ);
             },

diff --git a/ui/src/translations.json b/ui/src/translations.json
@@ -474,7 +474,8 @@
       "confirmation": "Are you sure you want to unlock the trigger ?",
       "warning": "It could lead to concurrent executions for the same trigger and should be considered as a last resort option.",
       "button": "Unlock trigger"
-    }
+    },
+    "date format": "Date format"
   },
   "fr": {
     "id": "Identifiant",
@@ -953,6 +954,7 @@
       "confirmation": "Êtes vous sûr(e) de vouloir débloquer le déclencheur ?",
       "warning": "Cela pourrait amener à de multiples exécutions concurrentes pour le même déclencheur et devrait être considéré comme une solution de dernier recours.",
       "button": "Débloquer le déclencheur"
-    }
+    },
+    "date format": "Format de date"
   }
 }
diff --git a/ui/src/utils/filters.js b/ui/src/utils/filters.js
@@ -1,5 +1,6 @@
 import Utils from "./utils";
 import {getCurrentInstance} from "vue";
+import {DATE_FORMAT_STORAGE_KEY} from "../components/settings/Settings.vue";
 
 export default {
     invisibleSpace: (value) => {
@@ -15,12 +16,10 @@ export default {
     lower: value => value ? value.toString().toLowerCase() : "",
     date: (dateString, format) => {
         let f;
-        if (format === undefined) {
-            f = "LLLL"
-        } else if (format === "iso") {
+        if (format === "iso") {
             f = "YYYY-MM-DD HH:mm:ss.SSS"
         } else {
-            f = format
+            f = format ?? localStorage.getItem(DATE_FORMAT_STORAGE_KEY) ?? "LLLL";
         }
         return getCurrentInstance().appContext.config.globalProperties.$moment(dateString).format(f)
     }