From 1d71a994772bd650f742031178420d5561334f47 Mon Sep 17 00:00:00 2001
From: James Chang <jc4095@nyu.edu>
Date: Thu, 11 Nov 2021 18:28:08 -0500
Subject: [PATCH] Resolve #28: Add embeddable iframe for sharing PB Cards

---
 .../interface/viewPbCardInterface.vue         |  26 +++++
 frontend/layouts/lite.vue                     |  78 +++++++++++++
 frontend/pages/pb-card.vue                    | 105 ++++++++++++++++++
 3 files changed, 209 insertions(+)
 create mode 100644 frontend/layouts/lite.vue
 create mode 100644 frontend/pages/pb-card.vue

diff --git a/frontend/components/interface/viewPbCardInterface.vue b/frontend/components/interface/viewPbCardInterface.vue
index 963caf6..3b4ed25 100644
--- a/frontend/components/interface/viewPbCardInterface.vue
+++ b/frontend/components/interface/viewPbCardInterface.vue
@@ -13,6 +13,13 @@
       >
         <v-icon>mdi-share-variant</v-icon>
       </v-btn>
+      <v-btn
+        v-if="recordInfo.shareOptions && editable"
+        icon
+        @click="copyEmbedLink()"
+      >
+        <v-icon>mdi-code-tags</v-icon>
+      </v-btn>
       <v-btn icon @click="reset()">
         <v-icon>mdi-refresh</v-icon>
       </v-btn>
@@ -312,6 +319,25 @@ export default {
       copyToClipboard(this, shareUrl)
     },
 
+    // links to a version of the page that can be embedded in an iframe
+    copyEmbedLink() {
+      const createdById = this.lockedFilters.find(
+        (ele) => ele.field === 'createdBy.id'
+      )?.value
+
+      if (!createdById) return
+
+      const embedUrl =
+        window.location.origin +
+        this.$router.resolve({
+          name: 'pb-card',
+          query: {
+            id: createdById,
+          },
+        }).href
+      copyToClipboard(this, embedUrl)
+    },
+
     openAddRecordDialog(eventId, key) {
       const initializedRecord = {
         'event.id': eventId,
diff --git a/frontend/layouts/lite.vue b/frontend/layouts/lite.vue
new file mode 100644
index 0000000..49cf7d3
--- /dev/null
+++ b/frontend/layouts/lite.vue
@@ -0,0 +1,78 @@
+<template>
+  <v-app dark>
+    <v-main>
+      <nuxt />
+    </v-main>
+    <Snackbar />
+  </v-app>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Snackbar from '~/components/snackbar/snackbar.vue'
+import VersionCheckText from '~/components/common/versionCheckText.vue'
+import { goToWcaAuth, handleLogout } from '~/services/auth'
+import { copyToClipboard, openLink, handleError } from '~/services/base'
+import AdminNavRoutes from '~/components/navigation/adminNavRoutes.vue'
+
+export default {
+  components: {
+    Snackbar,
+    VersionCheckText,
+    AdminNavRoutes,
+  },
+  data() {
+    return {
+      clipped: true,
+      drawer: false,
+      fixed: true,
+      miniVariant: false,
+    }
+  },
+
+  computed: {
+    ...mapGetters({
+      user: 'auth/user',
+    }),
+    isAdmin() {
+      return this.$store.getters['auth/user']?.role === 'ADMIN'
+    },
+  },
+
+  mounted() {
+    this.drawer = this.$vuetify.breakpoint.name !== 'xs'
+  },
+
+  methods: {
+    copyToClipboard(content) {
+      return copyToClipboard(this, content)
+    },
+    goToWcaAuth,
+    openLink,
+
+    toggleTheme() {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+      localStorage.setItem('theme', this.$vuetify.theme.dark ? 'dark' : 'light')
+    },
+
+    canSee(allowedRoles, allowedPermissions) {
+      return (
+        allowedRoles.includes(this.$store.getters['auth/user']?.role) ||
+        allowedPermissions.some((ele) =>
+          this.$store.getters['auth/user']?.allPermissions.includes(ele)
+        )
+      )
+    },
+
+    logout() {
+      try {
+        this.$router.push('/')
+
+        handleLogout(this)
+      } catch (err) {
+        handleError(this, err)
+      }
+    },
+  },
+}
+</script>
diff --git a/frontend/pages/pb-card.vue b/frontend/pages/pb-card.vue
new file mode 100644
index 0000000..f9cf140
--- /dev/null
+++ b/frontend/pages/pb-card.vue
@@ -0,0 +1,105 @@
+<template>
+  <v-container fluid fill-height>
+    <v-layout align-center justify-center>
+      <v-row>
+        <v-col cols="12">
+          <div v-if="errorMessage" class="text-center">
+            <span class="display-1 pl-2">{{ errorMessage }} </span>
+          </div>
+          <div v-else-if="loading.verifyUser">
+            <span class="display-1 pl-2"
+              >Verifying WCA Code...
+              <v-progress-circular indeterminate></v-progress-circular>
+            </span>
+          </div>
+          <ViewPbCardInterface
+            v-else-if="userId"
+            icon="mdi-card-text"
+            :title="title"
+            :record-info="recordInfo"
+            :locked-filters="lockedFilters"
+          ></ViewPbCardInterface>
+        </v-col>
+      </v-row>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+import ViewPbCardInterface from '~/components/interface/viewPbCardInterface.vue'
+import { PublicPbs } from '~/models/special'
+import { executeGiraffeql } from '~/services/giraffeql'
+import { handleError } from '~/services/base'
+
+export default {
+  layout: 'lite',
+  components: {
+    ViewPbCardInterface,
+  },
+
+  data() {
+    return {
+      recordInfo: PublicPbs,
+      title: 'PB Card',
+      hiddenFilters: ['createdBy.id', 'isCurrent'],
+      hiddenHeaders: ['createdBy.name+createdBy.avatar'],
+
+      errorMessage: null,
+
+      loading: {
+        verifyUser: false,
+      },
+
+      userId: null,
+    }
+  },
+
+  computed: {
+    lockedFilters() {
+      return [
+        {
+          field: 'createdBy.id',
+          operator: 'eq',
+          value: this.$route.query.id,
+        },
+      ]
+    },
+  },
+
+  mounted() {
+    this.verifyUserExists()
+  },
+
+  methods: {
+    async verifyUserExists() {
+      this.loading.verifyUser = true
+      try {
+        if (!this.$route.query.id) {
+          throw new Error('Missing user ID')
+        }
+
+        const data = await executeGiraffeql(this, {
+          getUser: {
+            id: true,
+            __args: {
+              id: this.$route.query.id,
+            },
+          },
+        })
+
+        this.userId = data.id
+      } catch (err) {
+        handleError(this, err)
+        this.errorMessage = err.message
+      }
+      this.loading.verifyUser = false
+    },
+  },
+
+  head() {
+    return {
+      title: this.title,
+    }
+  },
+}
+</script>