Fix #670: Use proper locale for date-related/duration strings

changes/changelog.d/670.enhancement

@@ -0,0 +1 @@
+Use proper locale for date-related/duration strings (#670)

front/src/App.vue

@@ -57,11 +57,10 @@ import _ from '@/lodash'
 import {mapState} from 'vuex'
 import { WebSocketBridge } from 'django-channels'
 import GlobalEvents from '@/components/utils/global-events'
-
 import Sidebar from '@/components/Sidebar'
 import AppFooter from '@/components/Footer'
 import ServiceMessages from '@/components/ServiceMessages'
-
+import moment from  'moment'
 import locales from './locales'
 import PlaylistModal from '@/components/playlists/PlaylistModal'
 import ShortcutsModal from '@/components/ShortcutsModal'
@@ -153,14 +152,7 @@ export default {
       } else {
         return
       }
-      import(`./translations/${candidate}.json`).then((response) =>{
-        Vue.$translations[candidate] = response.default[candidate]
-      }).finally(() => {
-        // set current language twice, otherwise we seem to have a cache somewhere
-        // and rendering does not happen
-        self.$language.current = 'noop'
-        self.$language.current = candidate
-      })
+      this.$store.commit('ui/currentLanguage', candidate)
     },
     disconnect () {
       if (!this.bridge) {
@@ -191,7 +183,7 @@ export default {
       bridge.socket.addEventListener('open', function () {
         console.log('Connected to WebSocket')
       })
-    }
+    },
   },
   computed: {
     ...mapState({
@@ -235,8 +227,35 @@ export default {
         this.openWebsocket()
       }
     },
-    '$language.current' (newValue) {
-      this.$store.commit('ui/currentLanguage', newValue)
+    '$store.state.ui.currentLanguage': {
+      immediate: true,
+      handler(newValue) {
+        let self = this
+        import(`./translations/${newValue}.json`).then((response) =>{
+          Vue.$translations[newValue] = response.default[newValue]
+        }).finally(() => {
+          // set current language twice, otherwise we seem to have a cache somewhere
+          // and rendering does not happen
+          self.$language.current = 'noop'
+          self.$language.current = newValue
+        })
+        if (newValue === 'en_US') {
+          return self.$store.commit('ui/momentLocale', 'en')
+        }
+        let momentLocale = newValue.replace('_', '-').toLowerCase()
+        import(`moment/locale/${momentLocale}.js`).then(() => {
+          self.$store.commit('ui/momentLocale', momentLocale)
+        }).catch(() => {
+          console.log('No momentjs locale available for', momentLocale)
+          let shortLocale = momentLocale.split('-')[0]
+          import(`moment/locale/${shortLocale}.js`).then(() => {
+            self.$store.commit('ui/momentLocale', shortLocale)
+          }).catch(() => {
+            console.log('No momentjs locale available for', shortLocale)
+          })
+        })
+        console.log(moment.locales())
+      }
     }
   }
 }

front/src/components/Footer.vue

@@ -20,7 +20,7 @@
           <div class="ui form">
             <div class="ui field">
               <label><translate>Change language</translate></label>
-              <select class="ui dropdown" :value="$language.current" @change="updateLanguage($event.target.value)">
+              <select class="ui dropdown" :value="$language.current" @change="$store.commit('ui/currentLanguage', $event.target.value)">
                 <option v-for="(language, key) in $language.available" :key="key" :value="key">{{ language }}</option>
               </select>
             </div>
@@ -76,14 +76,6 @@ export default {
       if (confirm) {
         this.$store.commit("instance/instanceUrl", null)
       }
-    },
-    updateLanguage(value) {
-      let self = this
-      import(`../translations/${value}.json`).then((response) =>{
-        Vue.$translations[value] = response.default[value]
-      }).finally(() => {
-        self.$language.current = value
-      })
     }
   },
   computed: {

front/src/components/common/HumanDate.vue

@@ -1,5 +1,5 @@
 <template>
-  <time :datetime="date" :title="date | moment">{{ realDate | ago }}</time>
+  <time :datetime="date" :title="date | moment">{{ realDate | ago($store.state.ui.momentLocale) }}</time>
 </template>
 <script>
 import {mapState} from 'vuex'

front/src/filters.js

@@ -13,8 +13,10 @@ export function truncate (str, max, ellipsis) {
 
 Vue.filter('truncate', truncate)
 
-export function ago (date) {
+export function ago (date, locale) {
+  locale = locale || 'en'
   const m = moment(date)
+  m.locale(locale)
   return m.fromNow()
 }
 

front/src/store/index.js

@@ -38,7 +38,7 @@ export default new Vuex.Store({
     }),
     createPersistedState({
       key: 'ui',
-      paths: ['ui.currentLanguage']
+      paths: ['ui.currentLanguage', 'ui.momentLocale']
     }),
     createPersistedState({
       key: 'radios',

front/src/store/ui.js

@@ -1,9 +1,11 @@
 import axios from 'axios'
+import moment from 'moment'
 
 export default {
   namespaced: true,
   state: {
     currentLanguage: 'en_US',
+    momentLocale: 'en',
     lastDate: new Date(),
     maxMessages: 100,
     messageDisplayDuration: 10000,
@@ -26,6 +28,10 @@ export default {
     currentLanguage: (state, value) => {
       state.currentLanguage = value
     },
+    momentLocale: (state, value) => {
+      state.momentLocale = value
+      moment.locale(value)
+    },
     computeLastDate: (state) => {
       state.lastDate = new Date()
     },