No realtime public view sharing

web-frontend/modules/database/components/view/ShareViewLink.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <a
+      ref="contextLink"
+      class="header__filter-link"
+      :class="{ 'active--primary': view.public }"
+      @click="$refs.context.toggle($refs.contextLink, 'bottom', 'left', 4)"
+    >
+      <i class="header__filter-icon fas fa-share-square"></i>
+      <span class="header__filter-name">{{
+        $t('shareViewLink.shareView', { viewTypeSharingLinkName })
+      }}</span>
+    </a>
+    <Context ref="context">
+      <a
+        v-if="!view.public"
+        class="view-sharing__create-link"
+        :class="{ 'view-sharing__create-link--disabled': readOnly }"
+        @click.stop="!readOnly && updateView({ public: true })"
+      >
+        <i class="fas fa-share-square view-sharing__create-link-icon"></i>
+        {{ $t('shareViewLink.shareViewTitle', { viewTypeSharingLinkName }) }}
+      </a>
+      <div v-else class="view-sharing__shared-link">
+        <div class="view-sharing__shared-link-title">
+          {{ $t('shareViewLink.sharedViewTitle', { viewTypeSharingLinkName }) }}
+        </div>
+        <div class="view-sharing__shared-link-description">
+          {{
+            $t('shareViewLink.sharedViewDescription', {
+              viewTypeSharingLinkName,
+            })
+          }}
+        </div>
+        <div class="view-sharing__shared-link-content">
+          <div class="view-sharing__shared-link-box">
+            {{ shareUrl }}
+          </div>
+          <a
+            v-tooltip="$t('shareViewLink.copyURL')"
+            class="view-sharing__shared-link-action"
+            @click="copyShareUrlToClipboard()"
+          >
+            <i class="fas fa-copy"></i>
+            <Copied ref="copied"></Copied>
+          </a>
+        </div>
+        <div v-if="!readOnly" class="view-sharing__shared-link-foot">
+          <a
+            class="view-sharing__shared-link-disable"
+            @click.stop="updateView({ public: false })"
+          >
+            <i class="fas fa-times"></i>
+            {{ $t('shareViewLink.disableLink') }}
+          </a>
+          <a @click.prevent="$refs.rotateSlugModal.show()">
+            <i class="fas fa-sync"></i>
+            {{ $t('shareViewLink.generateNewUrl') }}
+          </a>
+          <ViewRotateSlugModal
+            ref="rotateSlugModal"
+            :view="view"
+          ></ViewRotateSlugModal>
+        </div>
+      </div>
+    </Context>
+  </div>
+</template>
+
+<script>
+import { copyToClipboard } from '@baserow/modules/database/utils/clipboard'
+import ViewRotateSlugModal from '@baserow/modules/database/components/view/ViewRotateSlugModal'
+import { notifyIf } from '@baserow/modules/core/utils/error'
+
+export default {
+  name: 'ShareViewLink',
+  components: { ViewRotateSlugModal },
+  props: {
+    view: {
+      type: Object,
+      required: true,
+    },
+    readOnly: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      rotateSlugLoading: false,
+    }
+  },
+  computed: {
+    shareUrl() {
+      return (
+        this.$env.PUBLIC_WEB_FRONTEND_URL +
+        this.$nuxt.$router.resolve({
+          name: this.viewType.getPublicRoute(),
+          params: { slug: this.view.slug },
+        }).href
+      )
+    },
+    viewType() {
+      return this.$registry.get('view', this.view.type)
+    },
+    viewTypeSharingLinkName() {
+      return this.viewType.getSharingLinkName()
+    },
+  },
+  methods: {
+    copyShareUrlToClipboard() {
+      copyToClipboard(this.shareUrl)
+      this.$refs.copied.show()
+    },
+    async updateView(values) {
+      const view = this.view
+      this.$store.dispatch('view/setItemLoading', { view, value: true })
+
+      try {
+        await this.$store.dispatch('view/update', {
+          view,
+          values,
+        })
+      } catch (error) {
+        notifyIf(error, 'view')
+      }
+
+      this.$store.dispatch('view/setItemLoading', { view, value: false })
+    },
+  },
+}
+</script>
+
+<i18n>
+{
+  "en": {
+    "shareViewLink": {
+      "shareView": "Share {viewTypeSharingLinkName}",
+      "shareViewTitle": "Create a private shareable link to the {viewTypeSharingLinkName}",
+      "sharedViewTitle": "This {viewTypeSharingLinkName} is currently shared via a private link",
+      "sharedViewDescription": "People who have the link can see the {viewTypeSharingLinkName}.",
+      "disableLink": "disable shared link",
+      "generateNewUrl": "generate new url",
+      "copyURL": "copy URL"
+    }
+  },
+  "fr": {
+    "shareViewLink": {
+      "shareView": "@todo",
+      "shareViewTitle": "@todo",
+      "sharedViewTitle": "@todo",
+      "sharedViewDescription": "@todo",
+      "disableLink": "@todo",
+      "generateNewUrl": "@todo",
+      "copyURL": "@todo"
+    }
+  }
+}
+</i18n>