From 84a17652ee4a6e5d2ab56d7c645c09090223c5de Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 15 Apr 2024 21:13:01 +0530
Subject: [PATCH] fix: added translation in Date pickers and fixed filter issue

---
 .../src/components/Controls/DatePicker.vue    | 22 +++++++++++--------
 .../components/Controls/DateRangePicker.vue   | 16 ++++++++------
 .../components/Controls/DatetimePicker.vue    | 16 ++++++++------
 frontend/src/components/Filter.vue            |  6 +++--
 4 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/Controls/DatePicker.vue b/frontend/src/components/Controls/DatePicker.vue
index d455e513..1c080b2e 100644
--- a/frontend/src/components/Controls/DatePicker.vue
+++ b/frontend/src/components/Controls/DatePicker.vue
@@ -40,10 +40,12 @@
             class="text-sm"
             type="text"
             :value="value"
-            @change="selectDate(getDate($event.target.value)) || togglePopover()"
+            @change="
+              selectDate(getDate($event.target.value)) || togglePopover()
+            "
           />
           <Button
-            label="Today"
+            :label="__('Today')"
             class="text-sm"
             @click="selectDate(getDate()) || togglePopover()"
           />
@@ -57,7 +59,7 @@
               v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
               :key="i"
             >
-              {{ d }}
+              {{ __(d) }}
             </div>
           </div>
           <div
@@ -83,13 +85,13 @@
                 }
               "
             >
-              {{ date.getDate() }}
+              {{ __(date.getDate()) }}
             </div>
           </div>
         </div>
         <div class="flex justify-end p-1">
           <Button
-            label="Clear"
+            :label="__('Clear')"
             class="text-sm"
             @click="
               () => {
@@ -166,10 +168,12 @@ export default {
     },
     formatMonth() {
       let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
-      return date.toLocaleString('en-US', {
-        month: 'long',
-        year: 'numeric',
-      })
+      let month = __(
+        date.toLocaleString('en-US', {
+          month: 'long',
+        })
+      )
+      return `${month}, ${date.getFullYear()}`
     },
   },
   methods: {
diff --git a/frontend/src/components/Controls/DateRangePicker.vue b/frontend/src/components/Controls/DateRangePicker.vue
index e78e0667..a2e79898 100644
--- a/frontend/src/components/Controls/DateRangePicker.vue
+++ b/frontend/src/components/Controls/DateRangePicker.vue
@@ -48,7 +48,7 @@
               v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
               :key="i"
             >
-              {{ d }}
+              {{ __(d) }}
             </div>
           </div>
           <div
@@ -79,13 +79,13 @@
         </div>
         <div class="flex justify-end space-x-1 p-1">
           <Button
-            label="Clear"
+            :label="__('Clear')"
             @click="() => clearDates() | togglePopover()"
             :disabled="!fromDate || !toDate"
           />
           <Button
             variant="solid"
-            label="Apply"
+            :label="__('Apply')"
             :disabled="!fromDate || !toDate"
             @click="() => selectDates() | togglePopover()"
           />
@@ -161,10 +161,12 @@ export default {
     },
     formatMonth() {
       let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
-      return date.toLocaleString('en-US', {
-        month: 'long',
-        year: 'numeric',
-      })
+      let month = __(
+        date.toLocaleString('en-US', {
+          month: 'long',
+        })
+      )
+      return `${month}, ${date.getFullYear()}`
     },
   },
   methods: {
diff --git a/frontend/src/components/Controls/DatetimePicker.vue b/frontend/src/components/Controls/DatetimePicker.vue
index 26bf680b..bdae182c 100644
--- a/frontend/src/components/Controls/DatetimePicker.vue
+++ b/frontend/src/components/Controls/DatetimePicker.vue
@@ -41,7 +41,7 @@
             @change="updateDate($event.target.value) || togglePopover()"
           />
           <Button
-            label="Now"
+            :label="__('Now')"
             class="text-sm"
             @click="selectDate(getDate(), false, true) || togglePopover()"
           />
@@ -55,7 +55,7 @@
               v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
               :key="i"
             >
-              {{ d }}
+              {{ __(d) }}
             </div>
           </div>
           <div
@@ -128,7 +128,7 @@
         </div>
         <div class="flex justify-end p-1">
           <Button
-            label="Clear"
+            :label="__('Clear')"
             class="text-sm"
             @click="
               () => {
@@ -208,10 +208,12 @@ export default {
     },
     formatMonth() {
       let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
-      return date.toLocaleString('en-US', {
-        month: 'long',
-        year: 'numeric',
-      })
+      let month = __(
+        date.toLocaleString('en-US', {
+          month: 'long',
+        })
+      )
+      return `${month}, ${date.getFullYear()}`
     },
   },
   methods: {
diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index 41478728..740a02d6 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -331,9 +331,11 @@ function getValSelect(f) {
   } else if (typeNumber.includes(fieldtype)) {
     return h(FormControl, { type: 'number' })
   } else if (typeDate.includes(fieldtype) && operator == 'between') {
-    return h(DateRangePicker)
+    return h(DateRangePicker, { value: f.value })
   } else if (typeDate.includes(fieldtype)) {
-    return h(fieldtype == 'Date' ? DatePicker : DatetimePicker)
+    return h(fieldtype == 'Date' ? DatePicker : DatetimePicker, {
+      value: f.value,
+    })
   } else {
     return h(FormControl, { type: 'text' })
   }