sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#128154 i18n - Fix none reactive translations in all places

Browse Source 
Fixed:
* translations for the first item in main menu "Start new call"
* fixed not translated page titles and back button in browser history
* fixed route for 404 page
* fixed intermittent issues with history by switching to Meta plugin instead of direc "document.title" call (bug was next: sometimes you can see current page in the history list as a previous route). It's the same solution that we have in AUI

Change-Id: Iea95e11911a76a5778fefe8320fc39f1934f8a6d
(cherry picked from commit 9bfde3e150)
mr9.5.2
Sergii Leonenko 4 years ago committed by Hans-Peter Herzog
parent 991d45858a
commit 4e92b9679a
10 changed files with 242 additions and 117 deletions
Show Stats Download Patch File Download Diff File

3
quasar.conf.js
Unescape View File

@ -115,7 +115,8 @@ module.exports = function (/* ctx */) {
'Dialog', 'Dialog',
'SessionStorage', 'SessionStorage',
'LocalStorage', 'LocalStorage',
'Dark' 'Dark',
'Meta'
] ]
}, },

42
src/App.vue
Unescape View File

@ -4,7 +4,47 @@
</div> </div>
</template> </template>
<script> <script>
import { APP_NAME } from 'src/constants'
import _ from 'lodash'
export default { export default {
name: 'App' name: 'App',
meta () {
return {
title: this.pageTitle,
titleTemplate: title => `${APP_NAME} - ${title}`
}
},
data () {
return {
pageTitle: ''
}
},
watch: {
$route (route) {
this.updateTitle(route)
}
},
mounted () {
this.updateTitle(this.$route)
},
methods: {
updateTitle: function (route) {
if (route) {
const titleElements = []
const title = _.get(route, 'meta.title', '')
const subTitle = _.get(route, 'meta.subtitle', '')
if (title !== '') {
titleElements.push(title)
}
if (subTitle !== '') {
titleElements.push(subTitle)
}
this.pageTitle = titleElements.join(' - ') || route.name || ''
} else {
this.pageTitle = ''
}
}
}
} }
</script> </script>

11
src/boot/routes.js
Unescape View File

@ -1,6 +1,5 @@
import routes from 'src/router/routes' import routes from 'src/router/routes'
import _ from 'lodash'
import { import {
Dark Dark
} from 'quasar' } from 'quasar'
@ -45,16 +44,6 @@ export default ({ app, router, store }) => {
}) })
router.afterEach((to, from) => { router.afterEach((to, from) => {
const mainTitle = app.i18n.t('CSC')
let title = _.get(to, 'meta.title', '')
const subTitle = _.get(to, 'meta.subtitle', '')
if (mainTitle !== '') {
title = mainTitle + ' - ' + title
}
if (subTitle !== '') {
title = title + ' - ' + subTitle
}
document.title = title
store.commit('routeChanged', to) store.commit('routeChanged', to)
}) })

2
src/constants.js
Unescape View File

@ -1,3 +1,5 @@
export const APP_NAME = 'CSC'
export const INTERNAL_DATE_FORMAT_SLASH = 'YYYY/MM/DD' export const INTERNAL_DATE_FORMAT_SLASH = 'YYYY/MM/DD'
export const INTERNAL_DATE_FORMAT_DASH = 'YYYY-MM-DD' export const INTERNAL_DATE_FORMAT_DASH = 'YYYY-MM-DD'

2
src/layouts/CscLayoutConference.vue
Unescape View File

@ -184,13 +184,11 @@ import CscConferenceJoin from 'components/pages/Conference/CscConferenceJoin'
import CscConferenceJoined from 'components/pages/Conference/CscConferenceJoined' import CscConferenceJoined from 'components/pages/Conference/CscConferenceJoined'
import CscMedia from 'components/CscMedia' import CscMedia from 'components/CscMedia'
import CscConfirmDialog from 'components/CscConfirmationDialog' import CscConfirmDialog from 'components/CscConfirmationDialog'
// import CscConferenceLocalParticipant from 'components/pages/Conference/CscConferenceLocalParticipant'
import CscConferenceParticipants from 'components/pages/Conference/CscConferenceParticipants' import CscConferenceParticipants from 'components/pages/Conference/CscConferenceParticipants'
export default { export default {
name: 'CscConferenceLayout', name: 'CscConferenceLayout',
components: { components: {
// CscConferenceLocalParticipant,
CscConferenceParticipants, CscConferenceParticipants,
CscConfirmDialog, CscConfirmDialog,
CscMedia, CscMedia,

30
src/layouts/CscLayoutMain.vue
Unescape View File

@ -305,13 +305,10 @@ export default {
'route' 'route'
]), ]),
...mapGetters([ ...mapGetters([
'pageTitle',
'pageSubtitle',
'isCallForward', 'isCallForward',
'isCallBlocking', 'isCallBlocking',
'isPbxConfiguration', 'isPbxConfiguration',
'isHome', 'isHome'
'title'
]), ]),
...mapGetters('call', [ ...mapGetters('call', [
'isCallEnabled', 'isCallEnabled',
@ -383,20 +380,6 @@ export default {
} }
return classes return classes
}, },
pageTitleExt () {
if (this.isHome) {
return this.callStateTitle
} else {
return this.pageTitle
}
},
pageSubtitleExt () {
if (this.isHome) {
return this.callStateSubtitle
} else {
return this.pageSubtitle
}
},
headerClasses () { headerClasses () {
const classes = ['transition-generic'] const classes = ['transition-generic']
if (this.isMobile) { if (this.isMobile) {
@ -446,14 +429,10 @@ export default {
} else { } else {
this.header = true this.header = true
} }
if (this.isHome) {
this.setCallStateTitle()
}
}, },
isHome (isHome) { isHome (isHome) {
if (isHome) { if (isHome) {
this.$store.commit('call/minimize') this.$store.commit('call/minimize')
this.setCallStateTitle()
} }
}, },
userDataSucceeded (userDataSucceeded) { userDataSucceeded (userDataSucceeded) {
@ -583,13 +562,6 @@ export default {
leftBreakpoint (enabled) { leftBreakpoint (enabled) {
this.mobileMenu = !enabled this.mobileMenu = !enabled
}, },
setCallStateTitle () {
let title = this.callStateTitle
if (this.callStateSubtitle !== '') {
title = title + ' (' + this.callStateSubtitle + ')'
}
document.title = this.title + ' - ' + title
},
toggleMenu () { toggleMenu () {
this.menuMinimized = !this.menuMinimized this.menuMinimized = !this.menuMinimized
}, },

17
src/pages/CscPageHome.vue
Unescape View File

@ -57,6 +57,12 @@ import CscInlineAlertInfo from 'components/CscInlineAlertInfo'
import CscInput from 'components/form/CscInput' import CscInput from 'components/form/CscInput'
export default { export default {
name: 'CscPageHome',
meta () {
return {
title: this.pageTitle
}
},
components: { components: {
CscInput, CscInput,
CscInlineAlertInfo, CscInlineAlertInfo,
@ -79,7 +85,9 @@ export default {
'hasRtcEngineCapabilityEnabled', 'hasRtcEngineCapabilityEnabled',
'desktopSharingInstall', 'desktopSharingInstall',
'isCallEnabled', 'isCallEnabled',
'isCallInitializing' 'isCallInitializing',
'callStateTitle',
'callStateSubtitle'
]), ]),
dialpadOpened () { dialpadOpened () {
return this.callState === 'input' && return this.callState === 'input' &&
@ -97,6 +105,13 @@ export default {
classes.push('csc-call-page-mobile') classes.push('csc-call-page-mobile')
} }
return classes return classes
},
pageTitle () {
let title = this.callStateTitle
if (this.callStateSubtitle !== '') {
title += ' (' + this.callStateSubtitle + ')'
}
return title
} }
}, },
methods: { methods: {

228
src/router/routes.js
Unescape View File

@ -50,15 +50,21 @@ export default function routes (app) {
path: 'home', path: 'home',
component: CscPageHome, component: CscPageHome,
meta: { meta: {
title: i18n.t('Start new call') get title () {
return i18n.t('Start new call')
}
} }
}, },
{ {
path: 'conversations', path: 'conversations',
component: CscPageConversations, component: CscPageConversations,
meta: { meta: {
title: i18n.t('Conversations'), get title () {
subtitle: i18n.t('Calls, Faxes, VoiceMails') return i18n.t('Conversations')
},
get subtitle () {
return i18n.t('Calls, Faxes, VoiceMails')
}
} }
}, },
{ {
@ -69,71 +75,105 @@ export default function routes (app) {
path: 'call-forwarding', path: 'call-forwarding',
component: CscPageCf, component: CscPageCf,
meta: { meta: {
title: i18n.t('Call Forwarding') get title () {
return i18n.t('Call Forwarding')
}
} }
}, },
{ {
path: 'call-forward/always', path: 'call-forward/always',
component: CscPageCallForwardAlways, component: CscPageCallForwardAlways,
meta: { meta: {
title: i18n.t('Call Forwarding'), get title () {
subtitle: i18n.t('Always') return i18n.t('Call Forwarding')
},
get subtitle () {
return i18n.t('Always')
}
} }
}, },
{ {
path: 'call-forward/company-hours', path: 'call-forward/company-hours',
component: CscPageCallForwardCompanyHours, component: CscPageCallForwardCompanyHours,
meta: { meta: {
title: i18n.t('Call Forwarding'), get title () {
subtitle: i18n.t('Company Hours') return i18n.t('Call Forwarding')
},
get subtitle () {
return i18n.t('Company Hours')
}
} }
}, },
{ {
path: 'call-forward/after-hours', path: 'call-forward/after-hours',
component: CscPageCallForwardAfterHours, component: CscPageCallForwardAfterHours,
meta: { meta: {
title: i18n.t('Call Forwarding'), get title () {
subtitle: i18n.t('After Hours') return i18n.t('Call Forwarding')
},
get subtitle () {
return i18n.t('After Hours')
}
} }
}, },
{ {
path: 'call-blocking/incoming', path: 'call-blocking/incoming',
component: CscPageCallBlockingIncoming, component: CscPageCallBlockingIncoming,
meta: { meta: {
title: i18n.t('Call Blocking'), get title () {
subtitle: i18n.t('Incoming') return i18n.t('Call Blocking')
},
get subtitle () {
return i18n.t('Incoming')
}
} }
}, },
{ {
path: 'call-blocking/outgoing', path: 'call-blocking/outgoing',
component: CscPageCallBlockingOutgoing, component: CscPageCallBlockingOutgoing,
meta: { meta: {
title: i18n.t('Call Blocking'), get title () {
subtitle: i18n.t('Outgoing') return i18n.t('Call Blocking')
},
get subtitle () {
return i18n.t('Outgoing')
}
} }
}, },
{ {
path: 'call-blocking/privacy', path: 'call-blocking/privacy',
component: CscPageCallBlockingPrivacy, component: CscPageCallBlockingPrivacy,
meta: { meta: {
title: i18n.t('Call Blocking'), get title () {
subtitle: i18n.t('Privacy') return i18n.t('Call Blocking')
},
get subtitle () {
return i18n.t('Privacy')
}
} }
}, },
{ {
path: 'recordings', path: 'recordings',
component: CscPageCallRecording, component: CscPageCallRecording,
meta: { meta: {
title: i18n.t('Recordings'), get title () {
subtitle: i18n.t('Call recordings') return i18n.t('Recordings')
},
get subtitle () {
return i18n.t('Call recordings')
}
} }
}, },
{ {
path: 'reminder', path: 'reminder',
component: CscPageReminder, component: CscPageReminder,
meta: { meta: {
title: i18n.t('Reminder'), get title () {
subtitle: i18n.t('Set your personal alarm'), return i18n.t('Reminder')
},
get subtitle () {
return i18n.t('Set your personal alarm')
},
profileAttribute: 'reminder' profileAttribute: 'reminder'
} }
}, },
@ -141,8 +181,12 @@ export default function routes (app) {
path: 'speeddial', path: 'speeddial',
component: CscPageSpeedDial, component: CscPageSpeedDial,
meta: { meta: {
title: i18n.t('Speed Dial'), get title () {
subtitle: i18n.t('Set your speed dials'), return i18n.t('Speed Dial')
},
get subtitle () {
return i18n.t('Set your speed dials')
},
profileAttribute: 'speed_dial' profileAttribute: 'speed_dial'
} }
}, },
@ -150,64 +194,96 @@ export default function routes (app) {
path: 'pbx-configuration/groups', path: 'pbx-configuration/groups',
component: CscPagePbxGroups, component: CscPagePbxGroups,
meta: { meta: {
title: i18n.t('PBX Configuration'), get title () {
subtitle: i18n.t('Groups') return i18n.t('PBX Configuration')
},
get subtitle () {
return i18n.t('Groups')
}
} }
}, },
{ {
path: 'pbx-configuration/seats', path: 'pbx-configuration/seats',
component: CscPagePbxSeats, component: CscPagePbxSeats,
meta: { meta: {
title: i18n.t('PBX Configuration'), get title () {
subtitle: i18n.t('Seats') return i18n.t('PBX Configuration')
},
get subtitle () {
return i18n.t('Seats')
}
} }
}, },
{ {
path: 'pbx-configuration/devices', path: 'pbx-configuration/devices',
component: CscPagePbxDevices, component: CscPagePbxDevices,
meta: { meta: {
title: i18n.t('PBX Configuration'), get title () {
subtitle: i18n.t('Devices') return i18n.t('PBX Configuration')
},
get subtitle () {
return i18n.t('Devices')
}
} }
}, },
{ {
path: 'pbx-configuration/call-queues', path: 'pbx-configuration/call-queues',
component: CscPagePbxCallQueues, component: CscPagePbxCallQueues,
meta: { meta: {
title: i18n.t('PBX Configuration'), get title () {
subtitle: i18n.t('Call Queues') return i18n.t('PBX Configuration')
},
get subtitle () {
return i18n.t('Call Queues')
}
} }
}, },
{ {
path: 'pbx-configuration/sound-sets', path: 'pbx-configuration/sound-sets',
component: CscPagePbxSoundSets, component: CscPagePbxSoundSets,
meta: { meta: {
title: i18n.t('PBX Configuration'), get title () {
subtitle: i18n.t('Sound Sets') return i18n.t('PBX Configuration')
},
get subtitle () {
return i18n.t('Sound Sets')
}
} }
}, },
{ {
path: 'pbx-configuration/ms-configs', path: 'pbx-configuration/ms-configs',
component: CscPagePbxMsConfigs, component: CscPagePbxMsConfigs,
meta: { meta: {
title: i18n.t('PBX Configuration'), get title () {
subtitle: i18n.t('Manager Secretary') return i18n.t('PBX Configuration')
},
get subtitle () {
return i18n.t('Manager Secretary')
}
} }
}, },
{ {
path: 'pbx-configuration/auto-attendant', path: 'pbx-configuration/auto-attendant',
component: CscPagePbxAutoAttendant, component: CscPagePbxAutoAttendant,
meta: { meta: {
title: i18n.t('PBX Configuration'), get title () {
subtitle: i18n.t('Auto-attendant') return i18n.t('PBX Configuration')
},
get subtitle () {
return i18n.t('Auto-attendant')
}
} }
}, },
{ {
path: 'voicebox', path: 'voicebox',
component: CscPageVoicebox, component: CscPageVoicebox,
meta: { meta: {
title: i18n.t('Voicebox'), get title () {
subtitle: i18n.t('Set your voicebox settings'), return i18n.t('Voicebox')
},
get subtitle () {
return i18n.t('Set your voicebox settings')
},
profileAttribute: 'voice_mail' profileAttribute: 'voice_mail'
} }
}, },
@ -215,8 +291,12 @@ export default function routes (app) {
path: 'fax-settings', path: 'fax-settings',
component: CscPageFaxSettings, component: CscPageFaxSettings,
meta: { meta: {
title: i18n.t('Fax Settings'), get title () {
subtitle: i18n.t('Set your fax settings'), return i18n.t('Fax Settings')
},
get subtitle () {
return i18n.t('Set your fax settings')
},
profileAttribute: 'fax_server' profileAttribute: 'fax_server'
}, },
async beforeEnter (routeTo, routeFrom, next) { async beforeEnter (routeTo, routeFrom, next) {
@ -231,37 +311,58 @@ export default function routes (app) {
path: 'settings', path: 'settings',
component: CscPageUserSettings, component: CscPageUserSettings,
meta: { meta: {
title: i18n.t('User settings'), get title () {
subtitle: i18n.t('Change password') return i18n.t('User settings')
},
get subtitle () {
return i18n.t('Change password')
}
} }
}, },
{ {
path: 'call-settings', path: 'call-settings',
component: CscPageCallSettings, component: CscPageCallSettings,
meta: { meta: {
title: i18n.t('Call Settings'), get title () {
subtitle: i18n.t('Call Settings') return i18n.t('Call Settings')
},
get subtitle () {
return i18n.t('Call Settings')
}
} }
}, },
{ {
path: 'pbx-settings', path: 'pbx-settings',
component: CscPagePbxSettings, component: CscPagePbxSettings,
meta: { meta: {
title: i18n.t('PBX Settings'), get title () {
subtitle: i18n.t('Set your PBX settings') return i18n.t('PBX Settings')
},
get subtitle () {
return i18n.t('Set your PBX settings')
}
} }
}, },
{ {
path: 'registered-devices', path: 'registered-devices',
component: CscPageRegisteredDevices, component: CscPageRegisteredDevices,
meta: { meta: {
title: i18n.t('Registered Devices'), get title () {
subtitle: i18n.t('List of registered devices for the subscriber') return i18n.t('Registered Devices')
},
get subtitle () {
return i18n.t('List of registered devices for the subscriber')
}
} }
}, },
{ {
path: '*', path: '*',
component: CscPageError404 component: CscPageError404,
meta: {
get title () {
return i18n.t('Page not found')
}
}
} }
] ]
}, },
@ -269,21 +370,27 @@ export default function routes (app) {
path: '/login', path: '/login',
component: CscPageLogin, component: CscPageLogin,
meta: { meta: {
title: i18n.t('Subscriber Sign In') get title () {
return i18n.t('Subscriber Sign In')
}
} }
}, },
{ {
path: '/conference', path: '/conference',
component: CscLayoutConference, component: CscLayoutConference,
meta: { meta: {
title: 'Conference' get title () {
return i18n.t('Conference')
}
} }
}, },
{ {
path: '/conference/:id', path: '/conference/:id',
component: CscLayoutConference, component: CscLayoutConference,
meta: { meta: {
title: 'Conference' get title () {
return i18n.t('Conference')
}
} }
}, },
{ {
@ -295,7 +402,9 @@ export default function routes (app) {
component: CscRecoverPassword, component: CscRecoverPassword,
props: getToken, props: getToken,
meta: { meta: {
title: 'Reset Password', get title () {
return i18n.t('Reset Password')
},
permission: 'public' permission: 'public'
} }
} }
@ -309,7 +418,18 @@ export default function routes (app) {
}, },
{ {
path: '*', path: '*',
component: CscPageError404 component: CscLayoutLogin,
children: [
{
path: '',
component: CscPageError404,
meta: {
get title () {
return i18n.t('Page not found')
}
}
}
]
} }
] ]
} }

12
src/store/call.js
Unescape View File

@ -20,12 +20,12 @@ export var CallState = {
ended: 'ended' ended: 'ended'
} }
export var CallStateTitle = { export var CallStateTitle = {
input: i18n.t('Start new call'), get input () { return i18n.t('Start new call') },
initiating: i18n.t('Calling'), get initiating () { return i18n.t('Calling') },
ringing: i18n.t('Ringing at'), get ringing () { return i18n.t('Ringing at') },
incoming: i18n.t('Incoming call from'), get incoming () { return i18n.t('Incoming call from') },
established: i18n.t('In call with'), get established () { return i18n.t('In call with') },
ended: i18n.t('Call ended') get ended () { return i18n.t('Call ended') }
} }
export var MediaType = { export var MediaType = {

12
src/store/index.js
Unescape View File

@ -1,8 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import {
i18n
} from 'src/boot/i18n'
import _ from 'lodash' import _ from 'lodash'
import { date } from 'quasar' import { date } from 'quasar'
@ -94,12 +91,6 @@ export default function (/* { ssrContext } */) {
hasConferenceId (state, getters) { hasConferenceId (state, getters) {
return getters.conferenceId !== null && getters.conferenceId !== undefined return getters.conferenceId !== null && getters.conferenceId !== undefined
}, },
pageTitle (state) {
return _.get(state, 'route.meta.title', 'Not defined')
},
pageSubtitle (state) {
return _.get(state, 'route.meta.subtitle', '')
},
isCallForward (state) { isCallForward (state) {
return _.startsWith(_.get(state, 'route.path', ''), '/user/call-forward') return _.startsWith(_.get(state, 'route.path', ''), '/user/call-forward')
}, },
@ -112,9 +103,6 @@ export default function (/* { ssrContext } */) {
isHome (state) { isHome (state) {
return _.get(state, 'route.path', '') === '/user/home' return _.get(state, 'route.path', '') === '/user/home'
}, },
title () {
return i18n.t('CSC')
},
getCurrentFormattedDateWithDash () { getCurrentFormattedDateWithDash () {
const currentDate = Date.now() const currentDate = Date.now()
return date.formatDate(currentDate, INTERNAL_DATE_FORMAT_DASH) return date.formatDate(currentDate, INTERNAL_DATE_FORMAT_DASH)

Write Preview
Loading…
Cancel
Save