多维表格
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.

168 lines
4.6 KiB

<template>
<div>
<v-menu offset-y>
<template #activator="{on}">
<v-btn
v-show="isDashboard && _isUIAllowed('previewAs')"
small
light
color="#fff3"
class="white--text nc-btn-preview"
v-on="on"
>
<v-icon small class="mr-1">
mdi-play-circle
</v-icon>
Preview
<v-icon small>
mdi-menu-down
</v-icon>
</v-btn>
</template>
<v-list dense>
<template v-for="(role) in rolesList">
<v-list-item
:key="role.title"
:class="`pointer nc-preview-${role.title}`"
@click="setPreviewUser(role.title)"
>
<v-list-item-title>
<v-icon
small
class="mr-1"
:color="role.title === previewAs ? 'x-active' : ''"
>
{{ roleIcon[role.title] }}
</v-icon>
<span
class="caption text-capitalize"
:class="{ 'x-active--text': role.title === previewAs }"
>{{ role.title }}</span>
</v-list-item-title>
</v-list-item>
</template>
<template v-if="previewAs">
<!-- <v-divider></v-divider>-->
<v-list-item @click="setPreviewUser(null)">
<v-icon small class="mr-1">
mdi-close
</v-icon>
<!-- Reset Preview -->
<span class="caption nc-preview-reset">{{ $t('activity.resetReview') }}</span>
</v-list-item>
</template>
</v-list>
</v-menu>
<v-menu
:position-x="position.x"
:position-y="position.y"
:value="previewAs"
activator=""
:close-on-click="false"
:close-on-content-click="false"
>
<div class="floating-reset-btn white py-1 pr-3 caption primary lighten-2 white--text font-weight-bold d-flex align-center nc-floating-preview-btn" style="overflow-y: hidden">
<v-icon style="cursor: move" color="white" @mousedown="mouseDown">
mdi-drag
</v-icon>
<v-divider vertical class="mr-2" />
<div class="d-inline pointer d-flex align-center">
<span>Preview as :</span>
<v-radio-group
:value="previewAs"
dense
row
class="mt-0 pt-0"
hide-details
@change="setPreviewUser($event)"
>
<v-radio
v-for="(role) in rolesList"
:key="role.title"
:value="role.title"
color="white"
dark
:class="`ml-1 nc-floating-preview-${role.title}`"
>
<template #label>
<span class="white--text caption text-capitalize">{{ role.title }}</span>
</template>
</v-radio>
</v-radio-group>
<v-divider vertical class="mr-2" />
<span class="pointer" @click="setPreviewUser(null)"> <v-icon small color="white">mdi-exit-to-app</v-icon> Exit</span>
</div>
</div>
</v-menu>
</div>
</template>
<script>
export default {
name: 'PreviewAs',
data: () => ({
roleIcon: {
owner: 'mdi-account-star',
creator: 'mdi-account-hard-hat',
editor: 'mdi-account-edit',
viewer: 'mdi-eye-outline',
commenter: 'mdi-comment-account-outline'
},
rolesList: [{ title: 'editor' }, { title: 'commenter' }, { title: 'viewer' }],
position: {
x: 9999, y: 9999
}
}),
computed: {
previewAs: {
get() {
return this.$store.state.users.previewAs
},
set(previewAs) {
this.$store.commit('users/MutPreviewAs', previewAs)
}
}
},
mounted() {
this.position = {
y: window.innerHeight - 100,
x: window.innerWidth / 2 - 250
}
window.addEventListener('mouseup', this.mouseUp, false)
},
beforeDestroy() {
window.removeEventListener('mousemove', this.divMove, true)
window.removeEventListener('mouseup', this.mouseUp, false)
},
methods: {
setPreviewUser(previewAs) {
this.$tele.emit(`preview-as:${previewAs}`)
if (!process.env.EE) {
this.$toast.info('Available in Enterprise edition').goAway(3000)
} else {
this.previewAs = previewAs
window.location.reload()
}
},
mouseUp() {
window.removeEventListener('mousemove', this.divMove, true)
},
mouseDown(e) {
window.addEventListener('mousemove', this.divMove, true)
},
divMove(e) {
this.position = { y: e.clientY - 10, x: e.clientX - 18 }
}
}
}
</script>
<style scoped>
</style>