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

199 lines
6.1 KiB

<template>
<div>
<v-icon color="grey" small>
mdi-open-in-new
</v-icon>
<span class="grey--text caption">Shared base 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 />
<x-icon tooltip="reload" @click="recreate">
mdi-reload
</x-icon>
<x-icon tooltip="copy URL" @click="copyUrl">
mdi-content-copy
</x-icon>
<x-icon tooltip="open new tab" @click="navigateToSharedBase">
mdi-open-in-new
</x-icon>
<x-icon tooltip="copy embeddable HTML code" @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</span>
<span v-else>Disabled shared base</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</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</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</span>
<span v-else-if="base.roles === 'viewer'">Anyone on the internet with this link can view</span>
</template>
<template v-else>
Generate publicly shareable readonly base
</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
</v-list-item-title>
</v-list-item>
<v-list-item @click="createSharedBase('viewer')">
<v-list-item-title>
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>