Browse Source

wip(gui-v2): share view

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2860/head
Pranav C 2 years ago
parent
commit
91b0ddbbd5
  1. 131
      packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue

131
packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue

@ -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&#45;&#45;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">
&lt;!&ndash; Save password &ndash;&gt;
{{ $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…
Cancel
Save