nocodb/packages/nc-gui/components/base/ShareBase.vue

<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>