From ee55e0e6c60b859dbe8fccc3f473a45cac0954fb Mon Sep 17 00:00:00 2001
From: sadnub <josh@torchlake.com>
Date: Sat, 2 Apr 2022 12:43:13 -0400
Subject: [PATCH] add date formatting helper icon that opens to quasar's site

---
 .../modals/coresettings/EditCoreSettings.vue  | 19 ++++++++++++++++++-
 .../modals/coresettings/UserPreferences.vue   | 19 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/modals/coresettings/EditCoreSettings.vue b/src/components/modals/coresettings/EditCoreSettings.vue
index f22fedf..7eeddef 100644
--- a/src/components/modals/coresettings/EditCoreSettings.vue
+++ b/src/components/modals/coresettings/EditCoreSettings.vue
@@ -47,7 +47,20 @@
                 <q-card-section class="row">
                   <div class="col-4">Default date format:</div>
                   <div class="col-2"></div>
-                  <q-input outlined dense v-model="settings.date_format" class="col-6" />
+                  <q-input outlined dense v-model="settings.date_format" class="col-6">
+                    <template v-slot:after>
+                      <q-btn
+                        round
+                        dense
+                        flat
+                        size="sm"
+                        icon="info"
+                        @click="openURL('https://quasar.dev/quasar-utils/date-utils#format-for-display')"
+                      >
+                        <q-tooltip>Click to see formatting options</q-tooltip>
+                      </q-btn>
+                    </template>
+                  </q-input>
                 </q-card-section>
                 <q-card-section class="row">
                   <div class="col-4">Default server policy:</div>
@@ -440,6 +453,7 @@
 </template>
 
 <script>
+import { openURL } from "quasar";
 import mixins from "@/mixins/mixins";
 import ResetPatchPolicy from "@/components/modals/coresettings/ResetPatchPolicy";
 import CustomFields from "@/components/modals/coresettings/CustomFields";
@@ -486,6 +500,9 @@ export default {
     };
   },
   methods: {
+    openURL(url) {
+      openURL(url);
+    },
     getCoreSettings() {
       this.$axios
         .get("/core/settings/")
diff --git a/src/components/modals/coresettings/UserPreferences.vue b/src/components/modals/coresettings/UserPreferences.vue
index 31ab7e0..99330ab 100644
--- a/src/components/modals/coresettings/UserPreferences.vue
+++ b/src/components/modals/coresettings/UserPreferences.vue
@@ -91,7 +91,20 @@
                 <q-card-section class="row">
                   <div class="col-2">Date Format:</div>
                   <div class="col-2"></div>
-                  <q-input outlined dense v-model="date_format" class="col-8" />
+                  <q-input outlined dense v-model="date_format" class="col-8">
+                    <template v-slot:after>
+                      <q-btn
+                        round
+                        dense
+                        flat
+                        size="sm"
+                        icon="info"
+                        @click="openURL('https://quasar.dev/quasar-utils/date-utils#format-for-display')"
+                      >
+                        <q-tooltip>Click to see formatting options</q-tooltip>
+                      </q-btn>
+                    </template>
+                  </q-input>
                 </q-card-section>
                 <q-card-section class="row">
                   <q-checkbox
@@ -113,6 +126,7 @@
 </template>
 
 <script>
+import { openURL } from "quasar";
 import { loadingBarColors } from "@/mixins/data";
 import mixins from "@/mixins/mixins";
 
@@ -185,6 +199,9 @@ export default {
     },
   },
   methods: {
+    openURL(url) {
+      openURL(url);
+    },
     getURLActions() {
       this.$axios
         .get("/core/urlaction/")