You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
247 lines
8.9 KiB
247 lines
8.9 KiB
<template>
|
|
<q-layout ref="layout" view="lHr LpR lFr" :right-breakpoint="1100">
|
|
<q-toolbar slot="header">
|
|
<q-btn flat @click="$refs.layout.toggleLeft()">
|
|
<q-icon name="menu"/>
|
|
</q-btn>
|
|
<q-toolbar-title>
|
|
{{ $t('title') }}
|
|
<span slot="subtitle"></span>
|
|
</q-toolbar-title>
|
|
<q-btn flat @click="" icon-right="fa-user-circle">
|
|
<span id="user-login-as" class="gt-sm">{{ $t('loggedInAs') }}</span>
|
|
<span id="user-name" class="gt-xs">{{ getUsername }}</span>
|
|
<q-popover ref="popover">
|
|
<q-list item-separator link>
|
|
<q-item @click="logout()">
|
|
<q-item-main label="Logout" />
|
|
<q-item-side icon="exit to app"/>
|
|
</q-item>
|
|
</q-list>
|
|
</q-popover>
|
|
</q-btn>
|
|
</q-toolbar>
|
|
<q-list id="main-menu" slot="left" no-border link inset-delimiter>
|
|
<q-side-link item to="/user/conversations">
|
|
<q-item-side icon="question answer"></q-item-side>
|
|
<q-item-main :label="$t('mainNavigation.conversations.title')"
|
|
:sublabel="$t('mainNavigation.conversations.subTitle')"/>
|
|
</q-side-link>
|
|
<q-collapsible :opened="isCallForward" intend icon="fa-angle-double-right"
|
|
:label="$t('mainNavigation.callForward.title')"
|
|
:sublabel="$t('mainNavigation.callForward.subTitle')">
|
|
<q-side-link item to="/user/call-forward/always">
|
|
<q-item-side icon="check circle"/>
|
|
<q-item-main :label="$t('mainNavigation.callForward.always')"/>
|
|
</q-side-link>
|
|
<q-side-link item to="/user/call-forward/company-hours">
|
|
<q-item-side icon="schedule"/>
|
|
<q-item-main :label="$t('mainNavigation.callForward.companyHours')"/>
|
|
</q-side-link>
|
|
<q-side-link item to="/user/call-forward/after-hours">
|
|
<q-item-side icon="watch later"/>
|
|
<q-item-main :label="$t('mainNavigation.callForward.afterHours')"/>
|
|
</q-side-link>
|
|
</q-collapsible>
|
|
<q-collapsible :opened="isCallBlocking" intend icon="fa-ban"
|
|
:label="$t('mainNavigation.callBlocking.title')"
|
|
:sublabel="$t('mainNavigation.callBlocking.subTitle')">
|
|
<q-side-link item to="/user/call-blocking/incoming">
|
|
<q-item-side icon="fa-arrow-circle-o-left"/>
|
|
<q-item-main :label="$t('mainNavigation.callBlocking.incoming')"/>
|
|
</q-side-link>
|
|
<q-side-link item to="/user/call-blocking/outgoing">
|
|
<q-item-side icon="fa-arrow-circle-o-right"/>
|
|
<q-item-main :label="$t('mainNavigation.callBlocking.outgoing')"/>
|
|
</q-side-link>
|
|
<q-side-link item to="/user/call-blocking/privacy">
|
|
<q-item-side icon="fa-user-secret"/>
|
|
<q-item-main :label="$t('mainNavigation.callBlocking.privacy')"/>
|
|
</q-side-link>
|
|
</q-collapsible>
|
|
<q-side-link item to="/user/reminder">
|
|
<q-item-side icon="fa-bell"/>
|
|
<q-item-main
|
|
label="Reminder"
|
|
sublabel="Set your personal alarm"/>
|
|
</q-side-link>
|
|
<q-collapsible v-if="isPbxAdmin" :opened="isPbxConfiguration" intend icon="fa-gear"
|
|
:label="$t('mainNavigation.pbxConfiguration.title')"
|
|
:sublabel="$t('mainNavigation.pbxConfiguration.subTitle')">
|
|
<q-side-link item to="/user/pbx-configuration/groups">
|
|
<q-item-side icon="fa-group"/>
|
|
<q-item-main :label="$t('mainNavigation.pbxConfiguration.groups')"/>
|
|
</q-side-link>
|
|
<q-side-link item to="/user/pbx-configuration/seats">
|
|
<q-item-side icon="fa-home"/>
|
|
<q-item-main :label="$t('mainNavigation.pbxConfiguration.seats')"/>
|
|
</q-side-link>
|
|
<q-side-link item to="/user/pbx-configuration/devices">
|
|
<q-item-side icon="fa-fax"/>
|
|
<q-item-main :label="$t('mainNavigation.pbxConfiguration.devices')"/>
|
|
</q-side-link>
|
|
</q-collapsible>
|
|
</q-list>
|
|
<q-fixed-position corner="top-right" :offset="[60, 16]" class="page-action-button">
|
|
<q-fab color="primary" icon="question answer" active-icon="clear" direction="left" flat>
|
|
<q-fab-action color="primary" @click="" icon="fa-fax" flat>
|
|
<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 15]">{{ $t('sendFax') }}</q-tooltip>
|
|
</q-fab-action>
|
|
<q-fab-action color="primary" @click="" icon="fa-send" flat>
|
|
<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 15]">{{ $t('sendSms') }}</q-tooltip>
|
|
</q-fab-action>
|
|
<q-fab-action v-bind:color="(rtcEngineConnected)?'primary':'light'" @click="startCall" icon="fa-phone" flat>
|
|
<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 15]">{{ $t('startCall') }}</q-tooltip>
|
|
</q-fab-action>
|
|
</q-fab>
|
|
</q-fixed-position>
|
|
<router-view />
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import _ from 'lodash';
|
|
import { startLoading, stopLoading, showGlobalError } from '../../helpers/ui'
|
|
import { mapState, mapGetters } from 'vuex'
|
|
import {
|
|
QLayout,
|
|
QToolbar,
|
|
QToolbarTitle,
|
|
QBtn,
|
|
QIcon,
|
|
QList,
|
|
QListHeader,
|
|
QItem,
|
|
QItemSide,
|
|
QItemMain,
|
|
QPopover,
|
|
QFab,
|
|
QFabAction,
|
|
QFixedPosition,
|
|
QTooltip,
|
|
QSideLink,
|
|
QTransition,
|
|
QCollapsible
|
|
} from 'quasar'
|
|
export default {
|
|
name: 'default',
|
|
mounted: function() {
|
|
this.$refs.layout.showLeft();
|
|
if(!this.$store.getters['user/hasUser']) {
|
|
startLoading();
|
|
this.$store.dispatch('user/initUser').then(()=>{
|
|
stopLoading();
|
|
}).catch(()=>{
|
|
this.logout();
|
|
});
|
|
}
|
|
},
|
|
components: {
|
|
QLayout,
|
|
QToolbar,
|
|
QToolbarTitle,
|
|
QBtn,
|
|
QIcon,
|
|
QList,
|
|
QListHeader,
|
|
QItem,
|
|
QItemSide,
|
|
QItemMain,
|
|
QPopover,
|
|
QFab,
|
|
QFabAction,
|
|
QFixedPosition,
|
|
QTooltip,
|
|
QSideLink,
|
|
QTransition,
|
|
QCollapsible
|
|
},
|
|
computed: {
|
|
...mapGetters('user', ['getUsername', 'isPbxAdmin']),
|
|
...mapState({
|
|
rtcEngineConnected: state => state.rtcEngineConnected,
|
|
isCallForward: state => _.startsWith(state.route.path, '/user/call-forward'),
|
|
isCallBlocking: state => _.startsWith(state.route.path, '/user/call-blocking'),
|
|
isPbxConfiguration: state => _.startsWith(state.route.path, '/user/pbx-configuration')
|
|
})
|
|
},
|
|
methods: {
|
|
logout() {
|
|
startLoading();
|
|
this.$store.dispatch('user/logout').then(()=>{
|
|
stopLoading();
|
|
this.$router.push({path: '/login'});
|
|
})
|
|
},
|
|
startCall() {
|
|
if(!this.$store.state.rtcEngineConnected) {
|
|
showGlobalError(this.$t('rtcEngineDisconnected'));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#main-menu {
|
|
padding-top:60px;
|
|
}
|
|
|
|
#main-menu .q-item-side {
|
|
min-width: 30px;
|
|
}
|
|
|
|
#main-menu .q-item {
|
|
padding: 12px 24px;
|
|
}
|
|
|
|
#main-menu .router-link-active,
|
|
#main-menu .q-item:hover {
|
|
background-color: #475360;
|
|
}
|
|
|
|
#main-menu .q-item .q-item-sublabel {
|
|
color: #5b7086;
|
|
}
|
|
|
|
#main-menu .q-item .q-item-main,
|
|
#main-menu .q-item .q-item-side {
|
|
color: #ADB3B8;
|
|
}
|
|
|
|
#main-menu .q-collapsible-sub-item {
|
|
padding: 0;
|
|
}
|
|
|
|
#main-menu .q-collapsible-sub-item .q-item {
|
|
padding-left: 60px;
|
|
}
|
|
|
|
#user-login-as {
|
|
display: inline-block;
|
|
text-transform: none;
|
|
color: #c5eab4;
|
|
}
|
|
#user-login-as:after {
|
|
content: " ";
|
|
white-space: pre;
|
|
}
|
|
#user-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.q-card {
|
|
margin:15px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.q-card.page {
|
|
padding: 15px;
|
|
margin: 0;
|
|
}
|
|
|
|
.page-action-button {
|
|
z-index: 1001;
|
|
}
|
|
</style>
|