mirror of https://github.com/nocodb/nocodb
1 changed files with 126 additions and 5 deletions
@ -1,13 +1,134 @@ |
|||||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||||
import MdiOpenInNew from '~icons/mdi/open-in-new' |
import { useClipboard } from '@vueuse/core' |
||||||
import { useUIPermission } from '#imports' |
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 { 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> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<div v-t="['c:view:share']" class="nc-sidebar-right-item hover:after:bg-secondary/75 group"> |
<div> |
||||||
<MdiOpenInNew class="group-hover:(!text-white)" /> |
<a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn" size="small"> |
||||||
{{ $t('activity.shareView') }} |
<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> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.share-link-box { |
||||||
|
@apply flex p-2 w-full items-center align-center gap-1 bg-gray-100 rounded; |
||||||
|
} |
||||||
|
</style> |
||||||
|
Loading…
Reference in new issue