Add support to default date format from language definition (#494)

* Add support to default date format from language definition

* Add optional format for format field

src/api/ADempiere/system-core.js

@@ -53,6 +53,6 @@ export function getCountryDefinition({ countryUuid, countryId }) {
 }
 
 // Get languages from api
-export function requestLanguages({ pageToken, pageSize }) {
+export function listLanguages({ pageToken, pageSize }) {
   return Instance.call(this).requestListLanguages({ pageToken, pageSize })
 }

src/components/ADempiere/DataTable/index.vue

@@ -248,7 +248,7 @@ import FixedColumns from '@/components/ADempiere/DataTable/fixedColumns'
 import TableContextMenu from '@/components/ADempiere/DataTable/menu/tableContextMenu'
 import TableMainMenu from '@/components/ADempiere/DataTable/menu'
 import IconElement from '@/components/ADempiere/IconElement'
-import { formatDate } from '@/filters/ADempiere'
+import { formatField } from '@/utils/ADempiere/valueFormat'
 import MainPanel from '@/components/ADempiere/Panel'
 import { sortFields } from '@/utils/ADempiere/dictionaryUtils'
 import { FIELDS_DECIMALS, FIELDS_QUANTITY, FIELDS_READ_ONLY_FORM } from '@/utils/ADempiere/references'
@@ -625,7 +625,7 @@ export default {
           cell = cell.getTime()
         }
         // replace number timestamp value for date
-        return formatDate(cell, field.displayType)
+        return formatField(cell, field.displayType)
       } else if (field.componentPath === 'FieldNumber') {
         if (this.isEmptyValue(row[field.columnName])) {
           return undefined

src/components/ADempiere/Field/popover/translated.vue

@@ -84,7 +84,7 @@ export default {
   },
   computed: {
     languageList() {
-      return this.$store.getters.getLanguagesList.filter(itemLanguage => {
+      return this.$store.getters['user/getLanguagesList'].filter(itemLanguage => {
         return !itemLanguage.isBaseLanguage
       })
     },

src/filters/ADempiere/index.js

@@ -1,20 +0,0 @@
-import moment from 'moment'
-
-/**
- *
- * @param {number} value
- * @param {string} type, Date, DateTime, Time
- */
-export function formatDate(value, referenceType = 'DateTime') {
-  if (typeof value === 'number') {
-    var dateTime = moment.utc(value)
-    var format = 'YYYY-MM-DD HH:mm'
-    if (referenceType === 'Time') {
-      format = 'HH:mm'
-    } else if (referenceType === 'Date') {
-      format = 'YYYY-MM-DD'
-    }
-    return dateTime.format(format)
-  }
-  return null
-}

src/filters/index.js

@@ -66,5 +66,3 @@ export function toThousandFilter(num) {
 export function uppercaseFirst(string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
-
-export * from '@/filters/ADempiere/'

src/store/getters.js

@@ -15,6 +15,8 @@ const getters = {
   getRoleUuid: state => state.user.role.uuid,
   roles: state => state.user.roles,
   permission_routes: state => state.permission.routes,
-  errorLogs: state => state.errorLog.logs
+  errorLogs: state => state.errorLog.logs,
+  getLanguagesList: state => state.user.getLanguagesList,
+  getCurrentLanguageDefinition: state => state.user.getCurrentLanguageDefinition
 }
 export default getters

src/store/modules/ADempiere/languageControl.js

@@ -1,17 +1,11 @@
-import { requestLanguages } from '@/api/ADempiere/system-core'
 import { requestTranslations, updateEntity } from '@/api/ADempiere/persistence'
 import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
 
 const languageControl = {
   state: {
-    languagesList: [],
     translationsList: []
   },
   mutations: {
-    setlanguagesList(state, payload) {
-      state.languagesList = payload
-    },
-    // Add data in container
     addTranslationToList(state, payload) {
       state.translationsList.push(payload)
     },
@@ -26,21 +20,11 @@ const languageControl = {
     },
     resetStateTranslations(state) {
       state.translationsList = []
+      state.translationsList = []
+      state.currentLanguage = {}
     }
   },
   actions: {
-    getLanguagesFromServer({ commit }) {
-      return new Promise(resolve => {
-        requestLanguages({ pageToke: undefined, pageSize: undefined })
-          .then(languageResponse => {
-            commit('setlanguagesList', languageResponse.languagesList)
-            resolve(languageResponse.languagesList)
-          })
-          .catch(error => {
-            console.warn(`Error getting Languages List: ${error.message}. Code: ${error.code}.`)
-          })
-      })
-    },
     setTranslation({ state, commit }, {
       containerUuid,
       tableName,
@@ -170,9 +154,6 @@ const languageControl = {
     }
   },
   getters: {
-    getLanguagesList: (state) => {
-      return state.languagesList
-    },
     getLanguageByParameter: (state) => (parameter) => {
       const list = state.languagesList
       list.forEach(language => {

src/store/modules/user.js

@@ -13,11 +13,12 @@ import {
   removeCurrentWarehouse,
   removeCurrentOrganization
 } from '@/utils/auth'
-import { getOrganizationsList, getWarehousesList } from '@/api/ADempiere/system-core'
+import { getOrganizationsList, getWarehousesList, listLanguages } from '@/api/ADempiere/system-core'
 import router, { resetRouter } from '@/router'
 import { showMessage } from '@/utils/ADempiere/notification'
 import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
-import language from '@/lang'
+import { convertDateFormat } from '@/utils/ADempiere/valueFormat'
+import { language, getLanguage } from '@/lang'
 
 const state = {
   token: getToken(),
@@ -31,6 +32,7 @@ const state = {
   organizationsList: [],
   organization: {},
   warehousesList: [],
+  languagesList: [],
   warehouse: {},
   isSession: false,
   sessionInfo: {}
@@ -78,10 +80,32 @@ const mutations = {
   },
   setSessionInfo(state, payload) {
     state.sessionInfo = payload
+  },
+  setLanguagesList: (state, payload) => {
+    state.languagesList = Object.freeze(payload.map(language => {
+      const languageDefinition = {
+        ...language,
+        datePattern: convertDateFormat(language.datePattern),
+        timePattern: convertDateFormat(language.timePattern)
+      }
+      return languageDefinition
+    }))
   }
 }
 
 const actions = {
+  getLanguagesFromServer({ commit }) {
+    return new Promise(resolve => {
+      listLanguages({ pageToke: undefined, pageSize: undefined })
+        .then(languageResponse => {
+          commit('setLanguagesList', languageResponse.languagesList)
+          resolve(languageResponse.languagesList)
+        })
+        .catch(error => {
+          console.warn(`Error getting Languages List: ${error.message}. Code: ${error.code}.`)
+        })
+    })
+  },
   // user login
   login({ commit }, {
     userName,
@@ -382,23 +406,16 @@ const actions = {
             router.addRoutes(response)
           })
       })
-    //  return new Promise(async resolve => {
-    //  const token = role
-    //  commit('SET_TOKEN', token)
-    //  commit('SET_CURRENTROLE',)
-    //  setToken(token)
-    //  const { roles } = await dispatch('getInfo')
-
-    //  generate accessible routes map based on roles
-    //  const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
-
-    //  dynamically add accessible routes
-    //  router.addRoutes(accessRoutes)
-    // })
   }
 }
 
 const getters = {
+  getLanguagesList: (state) => {
+    return state.languagesList
+  },
+  getCurrentLanguageDefinition: (state) => {
+    return state.languagesList.find(definition => definition.languageISO === getLanguage())
+  },
   getRoles: (state) => {
     return state.rolesList
   },

src/utils/ADempiere/valueFormat.js

@@ -0,0 +1,99 @@
+// A util class for handle format for time, date and others values to beused to display information
+// Note that this file use moment library for a easy conversion
+import moment from 'moment'
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+import store from '@/store'
+import { DATE, DATE_PLUS_TIME, TIME } from '@/utils/ADempiere/references'
+
+// This function just convert all java date format to moment format.
+// For know about java format pattern see: https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html
+// Also you can read moment docus: https://momentjs.com/docs/
+export function convertDateFormat(dateFormat) {
+  return dateFormat
+    //	Year
+    .replace(/\byy\b/g, 'YY')
+    .replace(/\byyyy\b/g, 'YYYY')
+    //	Short Day of month
+    .replace(/\bdd\b/g, 'DD')
+    // Week of Year
+    .replace(/\bw\b/g, 'W')
+    // Long Day
+    .replace(/\bEEE\b/g, 'ddd')
+    .replace(/\bu\b/g, 'dddd')
+    // Hour
+    .replace(/\bhh\b/g, 'h')
+    .replace(/\bK\b/g, 'h')
+    .replace(/\baaa\b/g, 'a')
+    // Hour 24
+    .replace(/\bk\b/g, 'HH')
+    // Day of Year
+    .replace(/\bD\b/g, 'DDD')
+    // Day of Week
+    .replace(/\bF\b/g, 'R')
+    // Time zone
+    .replace(/\bz\b/g, 'Z')
+}
+
+// Format a date with specific format, if format is void use default date format for language
+export function formatDate(date, isTime = false) {
+  if (isEmptyValue(date)) {
+    return undefined
+  }
+  //  Format
+  return moment.utc(date).format(getDateFormat({
+    isTime
+  }))
+}
+
+// Return a format for field depending of reference for him
+export function formatField(value, reference, optionalFormat) {
+  if (isEmptyValue(value)) {
+    return undefined
+  }
+  if (!reference) {
+    return value
+  }
+  //  Format
+  let formattedValue
+  switch (reference) {
+    case DATE.id:
+      formattedValue = moment.utc(value).format(getDateFormat({
+        format: optionalFormat
+      }))
+      break
+    case DATE_PLUS_TIME.id:
+      formattedValue = moment.utc(value).format(getDateFormat({
+        isTime: true
+      }))
+      break
+    case TIME.id:
+      formattedValue = moment.utc(value).format(getDateFormat({
+        isTime: true
+      }))
+      break
+    default:
+      formattedValue = value
+  }
+  return formattedValue
+}
+
+// Get default format without format pattern
+export function getDefaultFormat(isTime) {
+  return getDateFormat({
+    isTime
+  })
+}
+// Get default format or optional
+function getDateFormat({
+  format,
+  isTime
+}) {
+  if (format) {
+    return format
+  }
+  //  Else
+  const languageDefinition = store.getters['user/getCurrentLanguageDefinition']
+  if (languageDefinition) {
+    return isTime ? languageDefinition.timePattern : languageDefinition.datePattern
+  }
+}

src/views/profile/components/RolesNavbar.vue

@@ -123,7 +123,9 @@ export default {
       })
     },
     getLanguageData() {
-      this.$store.dispatch('getLanguagesFromServer')
+      if (this.isEmptyValue(this.getLanguageList)) {
+        this.$store.dispatch('user/getLanguagesFromServer')
+      }
     }
   }
 }

src/views/profile/components/role.vue

@@ -34,11 +34,11 @@
         :filterable="true"
         value-key="key"
         :placeholder="$t('profile.changeLanguagePlaceholder')"
-        @visible-change="getLanguageList"
+        @visible-change="loadLanguageList"
         @change="changeLanguage"
       >
         <el-option
-          v-for="item in getterLanguageList"
+          v-for="item in getLanguageList"
           :key="item.value"
           :label="item.languageName"
           :value="item.languageISO"
@@ -68,7 +68,7 @@ export default {
     getRolesList() {
       return this.$store.getters['user/getRoles']
     },
-    getterLanguageList() {
+    getLanguageList() {
       return this.$store.getters.getLanguagesList
     },
     isMobile() {
@@ -102,14 +102,14 @@ export default {
     changeLanguage(languageValue) {
       this.currentLanguage = languageValue
     },
-    getLanguageList(open) {
+    loadLanguageList(open) {
       if (open) {
         this.getLanguageData()
       }
     },
     getLanguageData() {
-      if (this.isEmptyValue(this.getterLanguageList)) {
-        this.$store.dispatch('getLanguagesFromServer')
+      if (this.isEmptyValue(this.getLanguageList)) {
+        this.$store.dispatch('user/getLanguagesFromServer')
       }
     }
   }