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

243 lines
7.3 KiB

<template>
<div>
<v-icon color="grey" small>
mdi-open-in-new
</v-icon>
<span class="grey--text caption">
<!-- Shared base link -->
{{ $t('activity.shareBase.link') }}
</span>
<div class="nc-container">
<v-chip v-if="base.enabled" :color="colors[4]" style="" class="rounded pl-1 pr-0 d-100 nc-url-chip pr-3">
<div class="nc-url-wrapper d-flex mx-1 align-center d-100">
<span class="nc-url flex-grow-1 caption ">{{ url }}</span>
<v-spacer />
<v-divider vertical />
<!-- tooltip="reload" -->
<x-icon
:tooltip="$t('general.reload')"
@click="recreate"
>
mdi-reload
</x-icon>
<!-- tooltip="copy URL" -->
<x-icon
:tooltip="$t('activity.copyUrl')"
@click="copyUrl"
>
mdi-content-copy
</x-icon>
<!-- tooltip="open new tab" -->
<x-icon
:tooltip="$t('activity.openTab')"
@click="navigateToSharedBase"
>
mdi-open-in-new
</x-icon>
<!-- tooltip="copy embeddable HTML code" -->
<x-icon
:tooltip="$t('activity.iFrame')"
@click="generateEmbeddableIframe"
>
mdi-xml
</x-icon>
</div>
</v-chip>
<div class="d-flex align-center px-2">
<div>
<v-menu offset-x>
<template #activator="{on}">
<div class="my-2" v-on="on">
<div class="font-weight-bold nc-disable-shared-base">
<span v-if="base.enabled">
<!-- Anyone with the link -->
{{ $t('activity.shareBase.enable') }}
</span>
<span v-else>
<!-- Disable shared base -->
{{ $t('activity.shareBase.disable') }}
</span>
<v-icon small>
mdi-menu-down-outline
</v-icon>
</div>
</div>
</template>
<v-list dense>
<v-list-item dense @click="createSharedBase('viewer')">
<v-list-item-title>
<v-icon small class="mr-1">
mdi-link-variant
</v-icon>
<span class="caption">
<!-- Anyone with the link -->
{{ $t('activity.shareBase.enable') }}
</span>
</v-list-item-title>
</v-list-item>
<v-list-item dense @click="disableSharedBase">
<v-list-item-title>
<v-icon small class="mr-1">
mdi-link-variant-off
</v-icon>
<span class="caption">
<!-- Disable shared base -->
{{ $t('activity.shareBase.link') }}
</span>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<div class=" caption">
<template v-if="base.enabled">
<span v-if="base.roles === 'editor'">
Anyone on the internet with this link can edit
<!-- {{ $t('msg.info.shareBasePrivate') }} -->
</span>
<span v-else-if="base.roles === 'viewer'">
<!-- Anyone on the internet with this link can view -->
{{ $t('msg.info.shareBasePublic') }}
</span>
</template>
<template v-else>
<!-- Generate publicly shareable readonly base -->
{{ $t('msg.info.shareBasePrivate') }}
</template>
</div>
</div>
<v-spacer />
<div class="d-flex justify-center" style="width:120px">
<v-menu v-if="base.enabled" offset-y>
<template #activator="{on}">
<div class="text-capitalize my-2 font-weight-bold backgroundColorDefault py-2 px-4 rounded nc-shared-base-role" v-on="on">
{{ base.roles || 'Viewer' }}
<v-icon small>
mdi-menu-down-outline
</v-icon>
</div>
</template>
<v-list dense>
<v-list-item @click="createSharedBase('editor')">
<v-list-item-title>
<!-- Editor -->
{{ $t('objects.roleType.editor') }}
</v-list-item-title>
</v-list-item>
<v-list-item @click="createSharedBase('viewer')">
<v-list-item-title>
<!-- Viewer -->
{{ $t('objects.roleType.viewer') }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</div>
</div>
</div>
</template>
<script>
import colors from '~/mixins/colors'
import { copyTextToClipboard } from '~/helpers/xutils'
export default {
name: 'ShareBase',
mixins: [colors],
data: () => ({
base: {
enable: false
}
}),
computed: {
url() {
return this.base && this.base.shared_base_id ? `${this.dashboardUrl}#/nc/base/${this.base.shared_base_id}` : null
}
},
mounted() {
this.loadSharedBase()
},
methods: {
async loadSharedBase() {
try {
const sharedBase = await this.$store.dispatch('sqlMgr/ActSqlOp', [
{ dbAlias: 'db' }, 'getSharedBaseLink'])
this.base = sharedBase || {}
} catch (e) {
console.log(e)
}
},
async createSharedBase(roles = 'viewer') {
try {
const sharedBase = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ dbAlias: 'db' }, 'createSharedBaseLink', { roles }])
this.base = sharedBase || {}
} catch (e) {
this.$toast.error(e.message).goAway(3000)
}
},
async disableSharedBase() {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{ dbAlias: 'db' }, 'disableSharedBaseLink'])
this.base = {}
} catch (e) {
this.$toast.error(e.message).goAway(3000)
}
},
async recreate() {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{ dbAlias: 'db' }, 'disableSharedBaseLink'])
const sharedBase = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ dbAlias: 'db' }, 'createSharedBaseLink'])
this.base = sharedBase || {}
} catch (e) {
this.$toast.error(e.message).goAway(3000)
}
},
copyUrl() {
copyTextToClipboard(this.url)
this.$toast.success('Copied shareable base url to clipboard!').goAway(3000)
},
navigateToSharedBase() {
window.open(this.url, '_blank')
},
generateEmbeddableIframe() {
copyTextToClipboard(`<iframe
class="nc-embed"
src="${this.url}?embed"
frameborder="0"
width="100%"
height="700"
style="background: transparent; border: 1px solid #ddd"></iframe>`)
this.$toast.success('Copied embeddable html code!').goAway(3000)
}
}
}
</script>
<style scoped>
.nc-url-wrapper {
column-gap: 15px;
width: 100%
}
.nc-url {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.nc-container {
border-radius: 4px;
border: 2px solid var(--v-backgroundColor-base);
background: var(--v-backgroundColor-base);
padding: 20px 20px;
}
/deep/ .nc-url-chip .v-chip__content{width: 100%}
</style>