Merge pull request #458 from shariquerik/dayjs

fix: Replaced luxon with dayjs

frontend/package.json

@@ -14,7 +14,7 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.89",
+    "frappe-ui": "^0.1.90",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",

frontend/src/App.vue

@@ -9,7 +9,7 @@
 <script setup>
 import { Dialogs } from '@/utils/dialogs'
 import { sessionStore as session } from '@/stores/session'
-import { Toasts } from 'frappe-ui'
+import { Toasts, setConfig } from 'frappe-ui'
 import { computed, defineAsyncComponent } from 'vue'
 
 const MobileLayout = defineAsyncComponent(
@@ -25,4 +25,7 @@ const Layout = computed(() => {
     return DesktopLayout
   }
 })
+
+setConfig('systemTimezone', window.timezone?.system || null)
+setConfig('localTimezone', window.timezone?.user || null)
 </script>

frontend/src/components/Activities/CallArea.vue

@@ -56,7 +56,7 @@
         </div>
       </div>
       <div class="flex items-center flex-wrap gap-2">
-        <Badge :label="formatDate(activity.creation, 'MMM d, EEEE')">
+        <Badge :label="formatDate(activity.creation, 'MMM D, dddd')">
           <template #prefix>
             <CalendarIcon class="size-3" />
           </template>

frontend/src/components/Activities/TaskArea.vue

@@ -19,11 +19,11 @@
             </div>
             <div v-if="task.due_date">
               <Tooltip
-                :text="formatDate(task.due_date, 'EEE, MMM d, yyyy | hh:mm a')"
+                :text="formatDate(task.due_date, 'ddd, MMM D, YYYY | hh:mm a')"
               >
                 <div class="flex gap-2">
                   <CalendarIcon />
-                  <div>{{ formatDate(task.due_date, 'd MMM, hh:mm a') }}</div>
+                  <div>{{ formatDate(task.due_date, 'D MMM, hh:mm a') }}</div>
                 </div>
               </Tooltip>
             </div>

frontend/src/components/Activities/WhatsAppArea.vue

@@ -127,7 +127,7 @@
             />
           </div>
           <div class="-mb-1 flex shrink-0 items-end gap-1 text-ink-gray-5">
-            <Tooltip :text="formatDate(whatsapp.creation, 'EEE, MMM d, yyyy')">
+            <Tooltip :text="formatDate(whatsapp.creation, 'ddd, MMM D, YYYY')">
               <div class="text-2xs">
                 {{ formatDate(whatsapp.creation, 'hh:mm a') }}
               </div>

frontend/src/components/FilesUploader/FilesUploaderArea.vue

@@ -242,7 +242,7 @@ function captureImage() {
 }
 
 function uploadViaCamera() {
-  const nowDatetime = formatDate(new Date(), 'yyyy_MM_dd_HH_mm_ss')
+  const nowDatetime = formatDate(new Date(), 'YYYY_MM_DD_HH_mm_ss')
   let filename = `capture_${nowDatetime}.png`
   urlToFile(cameraImage.value, filename, 'image/png').then((file) => {
     addFiles([file])

frontend/src/components/ListViews/TasksListView.vue

@@ -40,12 +40,12 @@
       >
         <div v-if="column.key === 'due_date'">
           <Tooltip
-            :text="item && formatDate(item, 'EEE, MMM d, yyyy | hh:mm a')"
+            :text="item && formatDate(item, 'ddd, MMM D, YYYY | hh:mm a')"
           >
             <div class="flex items-center gap-2 truncate text-base">
               <div><CalendarIcon /></div>
               <div v-if="item" class="truncate">
-                {{ formatDate(item, 'd MMM, hh:mm a') }}
+                {{ formatDate(item, 'D MMM, hh:mm a') }}
               </div>
             </div>
           </Tooltip>

frontend/src/pages/Tasks.vue

@@ -266,7 +266,7 @@ function parseRows(rows, columns = []) {
       if (
         fieldType &&
         ['Date', 'Datetime'].includes(fieldType) &&
-        !['modified', 'creation'].includes(row)
+        !['modified', 'creation', 'due_date'].includes(row)
       ) {
         _rows[row] = formatDate(task[row], '', true, fieldType == 'Datetime')
       }

frontend/src/utils/index.js

@@ -3,7 +3,7 @@ import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import { usersStore } from '@/stores/users'
 import { gemoji } from 'gemoji'
 import { useTimeAgo } from '@vueuse/core'
-import { toast, convertToUserTimezone, luxonDate } from 'frappe-ui'
+import { toast, dayjsLocal, dayjs } from 'frappe-ui'
 import { h } from 'vue'
 
 export function createToast(options) {
@@ -39,8 +39,9 @@ export function formatTime(seconds) {
 }
 
 export function formatDate(date, format, onlyDate = false, onlyTime = false) {
+  if (!date) return ''
   format = getFormat(date, format, onlyDate, onlyTime, false)
-  return convertToUserTimezone(date, format)
+  return dayjsLocal(date).format(format)
 }
 
 export function getFormat(
@@ -52,16 +53,19 @@ export function getFormat(
 ) {
   if (!date) return ''
   let dateFormat =
-    window.sysdefaults.date_format.replace('mm', 'MM') || 'yyyy-MM-dd'
+    window.sysdefaults.date_format
+      .replace('mm', 'MM')
+      .replace('yyyy', 'YYYY')
+      .replace('dd', 'DD') || 'YYYY-MM-DD'
   let timeFormat = window.sysdefaults.time_format || 'HH:mm:ss'
-  format = format || 'EEE, MMM d, yyyy h:mm a'
+  format = format || 'ddd, MMM d, YYYY h:mm a'
 
   if (onlyDate) format = dateFormat
   if (onlyTime) format = timeFormat
   if (onlyTime && onlyDate) format = `${dateFormat} ${timeFormat}`
 
   if (withDate) {
-    return luxonDate(date).toFormat(format)
+    return dayjs(date).format(format)
   }
   return format
 }