Skip to content

Commit

Permalink
TT#134305 Create generic Proxy mechanism for extracting detail page s…
Browse files Browse the repository at this point in the history
…ections from v1

Ex: extract sections of Reseller Details' accordion from v1
Additional changes:
* "GoTo old Admin Panel" button extracted to a separate component
* refactored page titles (Meta section). Proxying titles from V1 can be disabled
* removed unnecessary double vertical scrollbar on proxied pages

Change-Id: I6f2112aa5866248a93ae416255f074f04934e93a
  • Loading branch information
svleonenko committed Aug 22, 2021
1 parent a276b9f commit 3b6b0c6
Show file tree
Hide file tree
Showing 10 changed files with 260 additions and 162 deletions.
32 changes: 31 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,37 @@
</template>

<script>
import { APP_NAME } from 'src/constants'
export default {
name: 'App'
name: 'App',
meta () {
return {
title: this.pageTitle,
titleTemplate: title => `${APP_NAME} - ${title}`
}
},
data () {
return {
pageTitle: ''
}
},
watch: {
$route (value) {
this.updateTitle(value)
}
},
mounted () {
this.updateTitle(this.$route)
},
methods: {
updateTitle: function (route) {
if (route) {
this.pageTitle = this.$routeMeta.$label(route) || route.name || ''
} else {
this.pageTitle = ''
}
}
}
}
</script>
60 changes: 4 additions & 56 deletions src/components/CustomFooter.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,79 +5,27 @@
>
<q-toolbar>
<q-toolbar-title />
<q-btn
color="primary"
unelevated
flat
icon-right="logout"
:label="$t('Go to old admin panel')"
@click="goToOldAdminPanel"
>
<q-menu
no-parent-event
persistent
:value="goToOldAdminPanelInfo"
transition-show="flip-up"
transition-hide="flip-down"
>
<q-banner
class="bg-info text-white"
dense
inline-actions
>
{{ $t('You can switch to the old admin panel at anytime') }}
<template v-slot:action>
<q-btn
flat
color="white"
:label="$t('Close')"
@click="closeGoToOldAdminPanelInfo"
/>
</template>
<template v-slot:avatar>
<q-icon
name="info"
color="white"
/>
</template>
</q-banner>
</q-menu>
</q-btn>
<aui-go-to-old-admin-panel />
</q-toolbar>
</q-footer>
</template>

<script>
import {
mapState,
mapActions
mapState
} from 'vuex'
import AuiGoToOldAdminPanel from 'components/buttons/AuiGoToOldAdminPanel'
export default {
name: 'CustomFooter',
components: { AuiGoToOldAdminPanel },
data () {
return {
}
},
computed: {
...mapState('layout', [
'footerVisible'
]),
...mapState('user', [
'goToOldAdminPanelInfo'
])
},
mounted () {
this.loadGoToOldAdminPanelInfo()
},
methods: {
...mapActions('user', [
'goToOldAdminPanel',
'closeGoToOldAdminPanelInfo',
'loadGoToOldAdminPanelInfo'
]),
toggleMenu () {
this.$emit('menu-pinned')
}
}
}
</script>
65 changes: 65 additions & 0 deletions src/components/buttons/AuiGoToOldAdminPanel.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<template>
<q-btn
color="primary"
unelevated
flat
icon-right="logout"
:label="$t('Go to old admin panel')"
@click="goToOldAdminPanel"
>
<q-menu
no-parent-event
persistent
:value="goToOldAdminPanelInfo"
transition-show="flip-up"
transition-hide="flip-down"
>
<q-banner
class="bg-info text-white"
dense
inline-actions
>
{{ $t('You can switch to the old admin panel at anytime') }}
<template v-slot:action>
<q-btn
flat
color="white"
:label="$t('Close')"
@click="closeGoToOldAdminPanelInfo"
/>
</template>
<template v-slot:avatar>
<q-icon
name="info"
color="white"
/>
</template>
</q-banner>
</q-menu>
</q-btn>
</template>

<script>
import {
mapState,
mapActions
} from 'vuex'
export default {
name: 'AuiGoToOldAdminPanel',
computed: {
...mapState('user', [
'goToOldAdminPanelInfo'
])
},
mounted () {
this.loadGoToOldAdminPanelInfo()
},
methods: {
...mapActions('user', [
'goToOldAdminPanel',
'closeGoToOldAdminPanelInfo',
'loadGoToOldAdminPanelInfo'
])
}
}
</script>
29 changes: 0 additions & 29 deletions src/layouts/Login.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,40 +18,11 @@
<script>
import CustomFooter from '../components/CustomFooter'
import AuiSelectionLanguage from '../components/AuiSelectionLanguage'
import { APP_NAME } from 'src/constants'
export default {
name: 'Login',
meta () {
return {
title: this.pageTitle,
titleTemplate: title => `${APP_NAME} - ${title}`
}
},
components: {
CustomFooter,
AuiSelectionLanguage
},
data () {
return {
pageTitle: ''
}
},
watch: {
$route (value) {
this.updateTitle(value)
}
},
mounted () {
this.updateTitle(this.$route)
},
methods: {
updateTitle: function (route) {
if (route) {
this.pageTitle = this.$routeMeta.$label(route) || route.name || ''
} else {
this.pageTitle = ''
}
}
}
}
</script>
19 changes: 0 additions & 19 deletions src/layouts/MainLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -149,15 +149,8 @@ import CustomFooter from '../components/CustomFooter'
import EntityListMenuItem from '../components/EntityListMenuItem'
import ChangePasswordDialog from '../components/dialog/ChangePasswordDialog'
import { showGlobalErrorMessage, showGlobalSuccessMessage } from 'src/helpers/ui'
import { APP_NAME } from 'src/constants'
export default {
name: 'MainLayout',
meta () {
return {
title: this.pageTitle,
titleTemplate: title => `${APP_NAME} - ${title}`
}
},
components: {
ChangePasswordDialog,
EntityListMenuItem,
Expand All @@ -169,7 +162,6 @@ export default {
data () {
return {
changePasswordDialog: false,
pageTitle: '',
showMaintenanceButton: false
}
},
Expand Down Expand Up @@ -213,9 +205,6 @@ export default {
}
},
watch: {
$route (value) {
this.updateTitle(value)
},
hasDialogSucceeded (value) {
if (value === true) {
this.changePasswordDialog = false
Expand All @@ -230,7 +219,6 @@ export default {
},
mounted () {
this.loadMenuState()
this.updateTitle(this.$route)
},
methods: {
...mapMutations('layout', [
Expand All @@ -252,13 +240,6 @@ export default {
...mapActions('administrators', [
'changeAdministratorPassword'
]),
updateTitle: function (route) {
if (route) {
this.pageTitle = this.$routeMeta.$label(route) || route.name || ''
} else {
this.pageTitle = ''
}
},
checkWindowSize () {
const divElement = this.$refs?.maintenanceMessage
this.showMaintenanceButton = divElement.scrollWidth -
Expand Down
2 changes: 1 addition & 1 deletion src/pages/AuiDetailsPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default {
// Note: We cannot use "redirect" option in router config for automatic redirection because of current
// implementation "Vue.prototype.$routeMeta" helpers
if (this.$route.name === this.detailsPageRouteName) {
this.$router.push(this.redirectToSubpageRoute)
this.$router.replace(this.redirectToSubpageRoute)
}
}
}
Expand Down
50 changes: 50 additions & 0 deletions src/pages/AuiDetailsPageProxy.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<proxy
:proxy-page-title="false"
@loaded="pageLoaded"
/>
</template>

<script>
import Proxy from 'pages/Proxy'
export default {
name: 'AuiDetailsPageProxy',
components: { Proxy },
methods: {
pageLoaded ({ iframeWindow, route, url }) {
const navigationInsideIFrame = route.path.indexOf(url) === -1
// skip manipulation with DetailsPage section if there was navigation inside IFrame and we are on another page
if (!navigationInsideIFrame) {
const accordionSectionId = route?.meta?.proxyDetailsSectionId
const $ = iframeWindow?.$
if (typeof $ === 'function') {
// hide (remove) "expand groups" button
$('#toggle-accordions').remove()
$('#content .ngcp-separator:first').remove()
// hide (remove) all sections except required one
$('.accordion-group').filter(function () {
return $(`.accordion-body[id="${accordionSectionId}"]`, this).length !== 1
}).remove()
// auto-expand accordion section
iframeWindow.localStorage.setItem('lastTab', accordionSectionId)
$(`#${accordionSectionId}`).addClass('in')
.parent().addClass('open')
.find('.accordion-heading').remove().end()
.find('.accordion-toggle').removeClass('collapsed').end()
.find('.accordion-inner').css('border', 'none')
}
}
}
}
}
</script>
<style lang="sass" rel="stylesheet/sass" scoped>
.proxy-iframe-wrapper::v-deep
height: calc(100vh - 150px)
.proxy-iframe
height: calc(100vh - 150px)
</style>
Loading

0 comments on commit 3b6b0c6

Please sign in to comment.