From 87e736d008d17ef933b543cf1a19ab59439458c1 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Tue, 4 Jun 2024 22:33:50 -0700
Subject: [PATCH] implement link content viewer

---
 frontend/src/mixins/navigator.js              |  7 ++-
 frontend/src/pages/public/About.vue           | 43 ++++++++++++++++++-
 frontend/src/pages/public/Blogs.vue           |  6 +--
 .../src/pages/public/LinkContentViewer.vue    | 40 +++++++++++++++++
 ...ContentViewer.vue => PdfContentViewer.vue} |  4 +-
 frontend/src/plugins/router/router.js         | 16 +++++--
 frontend/src/utils/backend/content.js         |  5 +++
 7 files changed, 108 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/pages/public/LinkContentViewer.vue
 rename frontend/src/pages/public/{ContentViewer.vue => PdfContentViewer.vue} (92%)

diff --git a/frontend/src/mixins/navigator.js b/frontend/src/mixins/navigator.js
index 4692825..872c448 100644
--- a/frontend/src/mixins/navigator.js
+++ b/frontend/src/mixins/navigator.js
@@ -14,8 +14,11 @@ export default {
     mnx_navToContact() {
       this.$router.push('/contact')
     },
-    mnx_navToContentViewer(content_id) {
-      this.$router.push('/content-viewer/' + content_id)
+    mnx_navToPdfContentViewer(content_id) {
+      this.$router.push('/pdf-content-viewer/' + content_id)
+    },
+    mnx_navToLinkContentViewer(content_link_based64) {
+      this.$router.push('/link-content-viewer/' + content_link_based64)
     },
 
     //common
diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index 11bcf6a..9aca813 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -1,11 +1,50 @@
 <template>
-  <div class="">About</div>
+  <div class="directories_containter">
+    <div class="directory_container" v-for="(directory, index) in directories" :key="index" @click="view_link(directory)">
+      <p>{{ directory.title_text }}</p>
+      <img :src="directory.cover_picture" />
+      <p>{{ directory.summary_text }}</p>
+    </div>
+  </div>
 </template>
 <script>
+import { ContentApi } from '../../utils/index'
 export default {
   name: 'About',
   components: {},
   computed: {},
-  methods: {}
+  mounted() {
+    this.retrieve_directories()
+  },
+  methods: {
+    retrieve_directories() {
+      ContentApi.retrieve_about_directories()
+        .then((response) => {
+          this.directories = response.data
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    },
+    view_link(directory) {
+      this.mnx_navToLinkContentViewer(btoa(directory.content_link))
+    }
+  },
+  data() {
+    return {
+      directories: null
+    }
+  }
 }
 </script>
+
+<style scoped lang="scss">
+.directories_containter {
+  @extend .container;
+}
+
+.directory_container {
+  @extend .container;
+  cursor: pointer;
+}
+</style>
diff --git a/frontend/src/pages/public/Blogs.vue b/frontend/src/pages/public/Blogs.vue
index f108ade..28bca13 100644
--- a/frontend/src/pages/public/Blogs.vue
+++ b/frontend/src/pages/public/Blogs.vue
@@ -13,7 +13,7 @@
   </div>
 </template>
 <script>
-import { ContentApi, mediaDataHandler } from '../../utils/index'
+import { ContentApi } from '../../utils/index'
 export default {
   name: 'Blogs',
   components: {},
@@ -32,10 +32,10 @@ export default {
         })
     },
     view_blog(blog) {
-      this.mnx_navToContentViewer(blog.content_id)
+      this.mnx_navToPdfContentViewer(blog.content_id)
     },
     retrieve_summary(blog) {
-      return mediaDataHandler.retrieveText(blog.summary_text)
+      return blog.summary_text
     }
   },
   data() {
diff --git a/frontend/src/pages/public/LinkContentViewer.vue b/frontend/src/pages/public/LinkContentViewer.vue
new file mode 100644
index 0000000..c03a98b
--- /dev/null
+++ b/frontend/src/pages/public/LinkContentViewer.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="content_containter"><iframe class="link-iframe" :src="get_link()"
+      frameborder="0" marginheight="0" marginwidth="0" max-width="100%"
+      sandbox="allow-forms allow-modals allow-orientation-lock allow-popups allow-same-origin allow-scripts"
+      scrolling="no" style="border: none; max-width: 100%; max-height: 100vh" allowfullscreen mozallowfullscreen
+      msallowfullscreen webkitallowfullscreen></iframe></div>
+</template>
+<script>
+export default {
+  name: 'LinkContentViewer',
+  props: {
+    content_link_based64: {
+      required: true,
+      type: String
+    }
+  },
+  components: {},
+  computed: {},
+  mounted() { },
+  methods: {
+    get_link() {
+      return atob(this.content_link_based64)
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.content_containter {
+  @extend .container;
+}
+
+.link-iframe {
+  @extend .container;
+  height: 70vh;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/pages/public/ContentViewer.vue b/frontend/src/pages/public/PdfContentViewer.vue
similarity index 92%
rename from frontend/src/pages/public/ContentViewer.vue
rename to frontend/src/pages/public/PdfContentViewer.vue
index 86fc233..e95a3c4 100644
--- a/frontend/src/pages/public/ContentViewer.vue
+++ b/frontend/src/pages/public/PdfContentViewer.vue
@@ -3,10 +3,10 @@
 </template>
 <script>
 import { pdfjsLib } from '../../plugins/index'
-import { ContentApi, mediaDataHandler } from '../../utils/index'
+import { ContentApi } from '../../utils/index'
 import { Buffer } from 'buffer'
 export default {
-  name: 'ContentViewer',
+  name: 'PdfContentViewer',
   props: {
     content_id: {
       required: true,
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index 3257d4e..347e1cb 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -6,7 +6,8 @@ import About from '../../pages/public/About.vue'
 import Blogs from '../../pages/public/Blogs.vue'
 import Career from '../../pages/public/Career.vue'
 import Contact from '../../pages/public/Contact.vue'
-import ContentViewer from '../../pages/public/ContentViewer.vue'
+import PdfContentViewer from '../../pages/public/PdfContentViewer.vue'
+import LinkContentViewer from '../../pages/public/LinkContentViewer.vue'
 
 //guest
 import FrontDoor from '../../pages/guest/FrontDoor.vue'
@@ -110,10 +111,17 @@ const router = createRouter({
     },
 
     {
-      name: 'content-viewer',
-      path: '/content-viewer/:content_id',
+      name: 'pdf-content-viewer',
+      path: '/pdf-content-viewer/:content_id',
       meta: { requiredRoles: [userRoleEnum.NONE] },
-      components: { default: ContentViewer, footer: FooterGuest, header: HeaderGuest },
+      components: { default: PdfContentViewer, footer: FooterGuest, header: HeaderGuest },
+      props: true
+    },
+    {
+      name: 'link-content-viewer',
+      path: '/link-content-viewer/:content_link_based64',
+      meta: { requiredRoles: [userRoleEnum.NONE] },
+      components: { default: LinkContentViewer, footer: FooterGuest, header: HeaderGuest },
       props: true
     },
 
diff --git a/frontend/src/utils/backend/content.js b/frontend/src/utils/backend/content.js
index 32ec5c6..8506d22 100644
--- a/frontend/src/utils/backend/content.js
+++ b/frontend/src/utils/backend/content.js
@@ -14,5 +14,10 @@ class ContentApi {
     )
     return request
   }
+
+  static retrieve_about_directories() {
+    const request = backendAxios.post('/api/content/retrieve-about-directories', {}, {})
+    return request
+  }
 }
 export { ContentApi }