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

271 lines
7.8 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.uuid"
: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.uuid">
<!-- 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
v-if="!base.uuid"
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 v-if="base.uuid" 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.disable") }}
</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.uuid" 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.uuid
? `${this.dashboardUrl}#/nc/base/${this.base.uuid}`
: null;
},
},
mounted() {
this.loadSharedBase();
},
methods: {
async loadSharedBase() {
try {
// const sharedBase = await this.$store.dispatch('sqlMgr/ActSqlOp', [
// { dbAlias: 'db' }, 'getSharedBaseLink'])
const sharedBase = await this.$api.project.sharedBaseGet(
this.$store.state.project.projectId
);
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 }])
const sharedBase = await this.$api.project.sharedBaseUpdate(
this.$store.state.project.projectId,
{ roles }
);
this.base = sharedBase || {};
} catch (e) {
this.$toast.error(e.message).goAway(3000);
}
this.$e("a:shared-base:enable", { role: roles });
},
async disableSharedBase() {
try {
await this.$api.project.sharedBaseDisable(
this.$store.state.project.projectId
);
this.base = {};
} catch (e) {
this.$toast.error(e.message).goAway(3000);
}
this.$e("a:shared-base:disable");
},
async recreate() {
try {
const sharedBase = await this.$api.project.sharedBaseCreate(
this.$store.state.project.projectId,
{ roles: this.base.roles || "viewer" }
);
this.base = sharedBase || {};
} catch (e) {
this.$toast.error(e.message).goAway(3000);
}
this.$e("a:shared-base:recreate");
},
copyUrl() {
copyTextToClipboard(this.url);
this.$toast
.success("Copied shareable base url to clipboard!")
.goAway(3000);
this.$e("c:shared-base:copy-url");
},
navigateToSharedBase() {
window.open(this.url, "_blank");
this.$e("c:shared-base:open-url");
},
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);
this.$e("c:shared-base:copy-embed-frame");
},
},
};
</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>