mirror of https://github.com/nocodb/nocodb
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.
134 lines
5.1 KiB
134 lines
5.1 KiB
<script lang="ts" setup> |
|
import { useClipboard } from '@vueuse/core' |
|
import { ViewTypes } from 'nocodb-sdk' |
|
import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore' |
|
import MdiOpenInNewIcon from '~icons/mdi/open-in-new' |
|
import MdiCopyIcon from '~icons/mdi/content-copy' |
|
|
|
const { isUIAllowed } = useUIPermission() |
|
const { view, $api } = useSmartsheetStoreOrThrow() |
|
|
|
const { copy } = useClipboard() |
|
|
|
let showShareModel = $ref(false) |
|
const shared = ref() |
|
|
|
const source = ref('Hello') |
|
|
|
const genShareLink = async () => { |
|
shared.value = await $api.dbViewShare.create(view.value.id as string) |
|
// shared.meta = shared.meta && typeof shared.meta === 'string' ? JSON.parse(shared.meta) : shared.meta; |
|
// // todo: url |
|
// this.shareLink = shared; |
|
// this.passwordProtect = shared.password !== null; |
|
// this.allowCSVDownload = shared.meta.allowCSVDownload; |
|
showShareModel = true |
|
} |
|
|
|
const sharedViewUrl = computed(() => { |
|
if (!shared.value) return |
|
let viewType |
|
|
|
switch (shared.value.type) { |
|
case ViewTypes.FORM: |
|
viewType = 'form' |
|
break |
|
case ViewTypes.KANBAN: |
|
viewType = 'kanban' |
|
break |
|
default: |
|
viewType = 'view' |
|
} |
|
|
|
// todo: get dashboard url |
|
return `#/nc/${viewType}/${shared.value.uuid}` |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div> |
|
<a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn" size="small"> |
|
<div class="flex align-center gap-1" @click="genShareLink"> |
|
<MdiOpenInNewIcon class="text-grey" /> |
|
<!-- Share View --> |
|
{{ $t('activity.shareView') }} |
|
</div> |
|
</a-button> |
|
|
|
<!-- This view is shared via a private link --> |
|
<a-modal v-model:visible="showShareModel" size="small" :title="$t('msg.info.privateLink')"> |
|
<div class="share-link-box nc-share-link-box"> |
|
<div class="flex-1 h-min">{{ sharedViewUrl }}</div> |
|
<!-- <v-spacer /> --> |
|
<a v-t="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank"> |
|
<MdiOpenInNewIcon class="text-sm text-grey mt-1" /> |
|
</a> |
|
<MdiCopyIcon class="text-grey text-sm cursor-pointer" @click="copy(sharedViewUrl)" /> |
|
</div> |
|
<!-- |
|
<v-expansion-panels v-model="advanceOptionsPanel" class="mx-auto" flat> |
|
<v-expansion-panel> |
|
<v-expansion-panel-header hide-actions> |
|
<v-spacer /> |
|
<span class="grey--text caption" |
|
>More Options |
|
<v-icon color="grey" small> mdi-chevron-{{ advanceOptionsPanel === 0 ? 'up' : 'down' }} </v-icon></span |
|
> |
|
</v-expansion-panel-header> |
|
<v-expansion-panel-content> |
|
<v-checkbox |
|
v-model="passwordProtect" |
|
class="caption" |
|
:label="$t('msg.info.beforeEnablePwd')" |
|
hide-details |
|
dense |
|
@change="onPasswordProtectChange" |
|
/> |
|
<div v-if="passwordProtect" class="d-flex flex-column align-center justify-center"> |
|
<v-text-field |
|
v-model="shareLink.password" |
|
autocomplete="new-password" |
|
browser-autocomplete="new-password" |
|
class="password-field mr-2 caption" |
|
style="max-width: 230px" |
|
:type="showShareLinkPassword ? 'text' : 'password'" |
|
:hint="$t('placeholder.password.enter')" |
|
persistent-hint |
|
dense |
|
solo |
|
flat |
|
> |
|
<template #append> |
|
<v-icon small @click="showShareLinkPassword = !showShareLinkPassword"> |
|
{{ showShareLinkPassword ? 'visibility_off' : 'visibility' }} |
|
</v-icon> |
|
</template> |
|
</v-text-field> |
|
<v-btn color="primary" class="caption" small @click="saveShareLinkPassword"> |
|
<!– Save password –> |
|
{{ $t('placeholder.password.save') }} |
|
</v-btn> |
|
</div> |
|
<v-checkbox |
|
v-if="selectedView && selectedView.type === viewTypes.GRID" |
|
v-model="allowCSVDownload" |
|
class="caption" |
|
label="Allow Download" |
|
hide-details |
|
dense |
|
@change="onAllowCSVDownloadChange" |
|
/> |
|
</v-expansion-panel-content> |
|
</v-expansion-panel> |
|
</v-expansion-panels> --> |
|
<!-- </v-container> --> |
|
<!-- </v-card> --> |
|
</a-modal> |
|
</div> |
|
</template> |
|
|
|
<style scoped> |
|
.share-link-box { |
|
@apply flex p-2 w-full items-center align-center gap-1 bg-gray-100 rounded; |
|
} |
|
</style>
|
|
|