From c03a3278da04d250aa4cd249751d7882b4c9b058 Mon Sep 17 00:00:00 2001 From: Yamel Senih Date: Tue, 12 May 2020 03:11:02 -0400 Subject: [PATCH] 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 | 2 +- src/components/ADempiere/DataTable/index.vue | 4 +- .../ADempiere/Field/popover/translated.vue | 2 +- src/filters/ADempiere/index.js | 20 ---- src/filters/index.js | 2 - src/store/getters.js | 4 +- .../modules/ADempiere/languageControl.js | 23 +---- src/store/modules/user.js | 47 ++++++--- src/utils/ADempiere/valueFormat.js | 99 +++++++++++++++++++ src/views/profile/components/RolesNavbar.vue | 4 +- src/views/profile/components/role.vue | 12 +-- 11 files changed, 149 insertions(+), 70 deletions(-) delete mode 100644 src/filters/ADempiere/index.js create mode 100644 src/utils/ADempiere/valueFormat.js diff --git a/src/api/ADempiere/system-core.js b/src/api/ADempiere/system-core.js index 817dd137..a68c3807 100644 --- a/src/api/ADempiere/system-core.js +++ b/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 }) } diff --git a/src/components/ADempiere/DataTable/index.vue b/src/components/ADempiere/DataTable/index.vue index 2d4fa2e7..e4690897 100644 --- a/src/components/ADempiere/DataTable/index.vue +++ b/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 diff --git a/src/components/ADempiere/Field/popover/translated.vue b/src/components/ADempiere/Field/popover/translated.vue index e4e6c114..171e730d 100644 --- a/src/components/ADempiere/Field/popover/translated.vue +++ b/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 }) }, diff --git a/src/filters/ADempiere/index.js b/src/filters/ADempiere/index.js deleted file mode 100644 index cb8b12cb..00000000 --- a/src/filters/ADempiere/index.js +++ /dev/null @@ -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 -} diff --git a/src/filters/index.js b/src/filters/index.js index 380e90b1..f6a28488 100644 --- a/src/filters/index.js +++ b/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/' diff --git a/src/store/getters.js b/src/store/getters.js index b4203a1d..d47cc8f6 100644 --- a/src/store/getters.js +++ b/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 diff --git a/src/store/modules/ADempiere/languageControl.js b/src/store/modules/ADempiere/languageControl.js index 384761af..13864215 100644 --- a/src/store/modules/ADempiere/languageControl.js +++ b/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 => { diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 5109ea57..d8f998bc 100644 --- a/src/store/modules/user.js +++ b/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 }, diff --git a/src/utils/ADempiere/valueFormat.js b/src/utils/ADempiere/valueFormat.js new file mode 100644 index 00000000..8a7fda16 --- /dev/null +++ b/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 + } +} diff --git a/src/views/profile/components/RolesNavbar.vue b/src/views/profile/components/RolesNavbar.vue index 2dd41f28..99654be6 100644 --- a/src/views/profile/components/RolesNavbar.vue +++ b/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') + } } } } diff --git a/src/views/profile/components/role.vue b/src/views/profile/components/role.vue index ec920b40..94df5bdb 100644 --- a/src/views/profile/components/role.vue +++ b/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" >