2021-02-08 11:08:35 +00:00
|
|
|
<template>
|
|
|
|
<transition name="menu-slide">
|
|
|
|
<div
|
|
|
|
v-if="show"
|
2021-12-01 07:15:39 +00:00
|
|
|
v-on-clickaway="onClickAway"
|
|
|
|
class="dropdown-pane"
|
|
|
|
:class="{ 'dropdown-pane--open': show }"
|
2021-02-08 11:08:35 +00:00
|
|
|
>
|
2021-12-01 07:15:39 +00:00
|
|
|
<availability-status />
|
|
|
|
<li class="divider" />
|
2021-03-20 07:38:56 +00:00
|
|
|
<woot-dropdown-menu>
|
|
|
|
<woot-dropdown-item v-if="showChangeAccountOption">
|
2021-05-20 08:21:46 +00:00
|
|
|
<woot-button
|
|
|
|
variant="clear"
|
2021-12-01 07:15:39 +00:00
|
|
|
color-scheme="secondary"
|
2021-05-20 08:21:46 +00:00
|
|
|
size="small"
|
2021-12-01 07:15:39 +00:00
|
|
|
icon="arrow-swap"
|
2021-02-08 11:08:35 +00:00
|
|
|
@click="$emit('toggle-accounts')"
|
|
|
|
>
|
|
|
|
{{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
|
2021-05-20 08:21:46 +00:00
|
|
|
</woot-button>
|
2021-03-20 07:38:56 +00:00
|
|
|
</woot-dropdown-item>
|
|
|
|
<woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
|
2021-05-20 08:21:46 +00:00
|
|
|
<woot-button
|
|
|
|
variant="clear"
|
2021-12-01 07:15:39 +00:00
|
|
|
color-scheme="secondary"
|
2021-05-20 08:21:46 +00:00
|
|
|
size="small"
|
2021-12-02 05:32:43 +00:00
|
|
|
icon="chat-help"
|
2021-02-08 11:08:35 +00:00
|
|
|
@click="$emit('show-support-chat-window')"
|
|
|
|
>
|
2021-12-01 07:15:39 +00:00
|
|
|
{{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
|
2021-05-20 08:21:46 +00:00
|
|
|
</woot-button>
|
2021-03-20 07:38:56 +00:00
|
|
|
</woot-dropdown-item>
|
2021-08-10 04:23:40 +00:00
|
|
|
<woot-dropdown-item>
|
|
|
|
<woot-button
|
|
|
|
variant="clear"
|
2021-12-01 07:15:39 +00:00
|
|
|
color-scheme="secondary"
|
2021-08-10 04:23:40 +00:00
|
|
|
size="small"
|
2021-12-01 07:15:39 +00:00
|
|
|
icon="keyboard"
|
|
|
|
@click="handleKeyboardHelpClick"
|
2021-08-10 04:23:40 +00:00
|
|
|
>
|
|
|
|
{{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
|
|
|
|
</woot-button>
|
|
|
|
</woot-dropdown-item>
|
2021-03-20 07:38:56 +00:00
|
|
|
<woot-dropdown-item>
|
2021-05-20 08:21:46 +00:00
|
|
|
<router-link
|
2021-12-01 07:15:39 +00:00
|
|
|
v-slot="{ href, isActive, navigate }"
|
2021-05-20 08:21:46 +00:00
|
|
|
:to="`/app/accounts/${accountId}/profile/settings`"
|
2021-12-01 07:15:39 +00:00
|
|
|
custom
|
2021-05-20 08:21:46 +00:00
|
|
|
>
|
2021-12-01 07:15:39 +00:00
|
|
|
<a
|
|
|
|
:href="href"
|
|
|
|
class="button small clear secondary"
|
|
|
|
:class="{ 'is-active': isActive }"
|
|
|
|
@click="e => handleProfileSettingClick(e, navigate)"
|
|
|
|
>
|
2021-12-29 16:54:11 +00:00
|
|
|
<fluent-icon icon="person" size="14" class="icon icon--font" />
|
2021-12-01 07:15:39 +00:00
|
|
|
<span class="button__content">
|
|
|
|
{{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
|
|
|
|
</span>
|
|
|
|
</a>
|
2021-02-08 11:08:35 +00:00
|
|
|
</router-link>
|
2021-03-20 07:38:56 +00:00
|
|
|
</woot-dropdown-item>
|
|
|
|
<woot-dropdown-item>
|
2021-05-20 08:21:46 +00:00
|
|
|
<woot-button
|
|
|
|
variant="clear"
|
2021-12-01 07:15:39 +00:00
|
|
|
color-scheme="secondary"
|
2021-05-20 08:21:46 +00:00
|
|
|
size="small"
|
2021-12-01 07:15:39 +00:00
|
|
|
icon="power"
|
2021-05-20 08:21:46 +00:00
|
|
|
@click="logout"
|
|
|
|
>
|
2021-02-08 11:08:35 +00:00
|
|
|
{{ $t('SIDEBAR_ITEMS.LOGOUT') }}
|
2021-05-20 08:21:46 +00:00
|
|
|
</woot-button>
|
2021-03-20 07:38:56 +00:00
|
|
|
</woot-dropdown-item>
|
|
|
|
</woot-dropdown-menu>
|
2021-02-08 11:08:35 +00:00
|
|
|
</div>
|
|
|
|
</transition>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { mixin as clickaway } from 'vue-clickaway';
|
|
|
|
import { mapGetters } from 'vuex';
|
|
|
|
import Auth from '../../../api/auth';
|
2021-12-01 07:15:39 +00:00
|
|
|
import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
|
|
|
|
import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
|
|
|
|
import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus';
|
2021-02-08 11:08:35 +00:00
|
|
|
|
|
|
|
export default {
|
2021-03-20 07:38:56 +00:00
|
|
|
components: {
|
|
|
|
WootDropdownMenu,
|
|
|
|
WootDropdownItem,
|
2021-12-01 07:15:39 +00:00
|
|
|
AvailabilityStatus,
|
2021-03-20 07:38:56 +00:00
|
|
|
},
|
2021-02-08 11:08:35 +00:00
|
|
|
mixins: [clickaway],
|
|
|
|
props: {
|
|
|
|
show: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapGetters({
|
|
|
|
currentUser: 'getCurrentUser',
|
|
|
|
globalConfig: 'globalConfig/get',
|
|
|
|
accountId: 'getCurrentAccountId',
|
|
|
|
}),
|
|
|
|
showChangeAccountOption() {
|
|
|
|
if (this.globalConfig.createNewAccountFromDashboard) {
|
|
|
|
return true;
|
|
|
|
}
|
2021-12-01 07:15:39 +00:00
|
|
|
|
|
|
|
const { accounts = [] } = this.currentUser;
|
|
|
|
return accounts.length > 1;
|
2021-02-08 11:08:35 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
2021-12-01 07:15:39 +00:00
|
|
|
handleProfileSettingClick(e, navigate) {
|
|
|
|
this.$emit('close');
|
|
|
|
navigate(e);
|
|
|
|
},
|
|
|
|
handleKeyboardHelpClick() {
|
|
|
|
this.$emit('key-shortcut-modal');
|
|
|
|
this.$emit('close');
|
|
|
|
},
|
2021-02-08 11:08:35 +00:00
|
|
|
logout() {
|
|
|
|
Auth.logout();
|
|
|
|
},
|
2021-12-01 07:15:39 +00:00
|
|
|
onClickAway() {
|
|
|
|
if (this.show) this.$emit('close');
|
|
|
|
},
|
2021-02-08 11:08:35 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
2021-04-08 14:12:38 +00:00
|
|
|
<style lang="scss" scoped>
|
|
|
|
.dropdown-pane {
|
2021-12-01 07:15:39 +00:00
|
|
|
left: var(--space-slab);
|
|
|
|
bottom: var(--space-larger);
|
2022-12-16 19:59:27 +00:00
|
|
|
min-width: 22rem;
|
|
|
|
z-index: var(--z-index-low);
|
2021-04-08 14:12:38 +00:00
|
|
|
}
|
|
|
|
</style>
|