UI / UX: display dir item time stat; display date / time in local format

Fixes #33 Fixes #136
aleksey-hoffman · Aug 28, 2021 · 05d1786 · 05d1786
1 parent 52cb2a5
commit 05d1786
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/src/components/DirItem.vue b/src/components/DirItem.vue
@@ -133,7 +133,7 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
 
         <!-- card::date-->
         <div class="dir-item-card__date">
-          {{$utils.formatDateTime(source.stat.ctime, 'D MMM YYYY')}}
+          {{getLocalDateTime({stat: 'ctime'})}}
         </div>
 
         <!-- {type: (directory|directory-symlink)} -->
@@ -327,6 +327,12 @@ export default {
     }
   },
   methods: {
+    getLocalDateTime (params) {
+      return this.$utils.getLocalDateTime(
+        this.source.stat[params.stat], 
+        this.$store.state.storageData.settings.dateTime
+      )
+    },
     async loadThumbHandler (path) {
       if (this.source.path === path) {
         await this.loadThumb()

diff --git a/src/store.js b/src/store.js
@@ -400,6 +400,9 @@ export default new Vuex.Store({
         time: {
           lastSearchScan: null
         },
+        dateTime: {
+          month: 'short'
+        },
         lastRecordedAppVersion: null,
         firstTimeActions: {
           appLaunch: true,
@@ -4147,19 +4150,19 @@ export default new Vuex.Store({
         {
           propName: 'dateCreated',
           title: localize.get('text_created'),
-          value: utils.formatDateTime(item.stat.birthtime, 'D MMM YYYY'),
+          value: utils.getLocalDateTime(item.stat.birthtime, store.state.storageData.settings.dateTime),
           tooltip: `${localize.get('tooltip_text_to_copy')}: ${copyShortcut}`
         },
         {
           propName: 'dateModified',
           title: localize.get('text_modified'),
-          value: utils.formatDateTime(item.stat.mtime, 'D MMM YYYY'),
+          value: utils.getLocalDateTime(item.stat.mtime, store.state.storageData.settings.dateTime),
           tooltip: `${localize.get('tooltip_text_to_copy')}: ${copyShortcut}`
         },
         {
           propName: 'dateChanged',
           title: localize.get('text_changed'),
-          value: utils.formatDateTime(item.stat.ctime, 'D MMM YYYY'),
+          value: utils.getLocalDateTime(item.stat.ctime, store.state.storageData.settings.dateTime),
           tooltip: `${localize.get('tooltip_text_to_copy')}: ${copyShortcut}`
         },
         {

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -19,7 +19,7 @@ const electronRemote = require('@electron/remote')
 const getSystemRulesForPaths = require('./systemRules').paths
 const systemRulesForPaths = getSystemRulesForPaths()
 const mainWindow = electronRemote.getCurrentWindow()
-const detectedLocale = electronRemote.app.getLocale().toLowerCase()
+const detectedLocale = electronRemote?.app?.getLocale()?.toLowerCase() || 'en'
 
 const colorUtils = new ColorUtils()
 
@@ -449,6 +449,24 @@ export default {
     if (!date) { return 'unknown' }
     return dayjs(date).locale(detectedLocale).format(format)
   },
+  getLocalDateTime (date, options = {}) {
+    try {
+      return new Intl.DateTimeFormat(detectedLocale, {
+        ...{
+          year: 'numeric',
+          month: 'numeric',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric'
+        },
+        ...options
+      })
+      .format(date)
+    }
+    catch (error) {
+      return 'unknown'
+    }
+  },
   getCSSProperty (property, element = '#app') {
     const node = document.querySelector(element)
     return node.computedStyleMap().get(property)