trying to rendering pdf(not succeeded yet)

frontend/package.json

@@ -26,6 +26,7 @@
     "@popperjs/core": "^2.11.8",
     "axios": "^1.4.0",
     "bootstrap": "^5.3.1",
+    "buffer": "^6.0.3",
     "pdfjs-dist": "^4.2.67",
     "pinia": "^2.1.6",
     "quill": "^1.3.7",

frontend/src/mixins/navigator.js

@@ -14,6 +14,9 @@ export default {
     mnx_navToContact() {
       this.$router.push('/contact')
     },
+    mnx_navToContentViewer(content_id) {
+      this.$router.push('/content-viewer/' + content_id)
+    },
 
     //common
     mnx_navToFrontDoor() {

frontend/src/pages/public/Blogs.vue

@@ -1,8 +1,14 @@
 <template>
-  <div class="">Blogs</div>
+  <div v-if="blogs" class="blogs_containter">
+    <div class="blog_containter" v-for="(blog, index) in blogs" :key="index" @click="view_blog(blog)">
+      <h2>{{ blog.blog_name }}</h2>
+      <img :src="blog.cover_picture">
+      <p v-text="retrieve_summary(blog)"> </p>
+    </div>
+  </div>
 </template>
 <script>
-import { ContentApi } from '../../utils/index'
+import { ContentApi, mediaDataHandler } from '../../utils/index'
 export default {
   name: 'Blogs',
   components: {},
@@ -14,12 +20,34 @@ export default {
     retrieve_blogs() {
       ContentApi.retrieve_blogs()
         .then((response) => {
-          response
+          this.blogs = response.data
         })
         .catch((error) => {
           this.mnx_backendErrorHandler(error)
         })
+    },
+    view_blog(blog) {
+      this.mnx_navToContentViewer(blog.content_id)
+    },
+    retrieve_summary(blog) {
+      return mediaDataHandler.retrieveText(blog.summary_text);
+    }
+  },
+  data() {
+    return {
+      blogs: null
     }
   }
+
 }
 </script>
+<style scoped lang="scss">
+.blogs_containter {
+  @extend .container;
+}
+
+.blog_containter {
+  @extend .container;
+  cursor: pointer;
+}
+</style>

frontend/src/pages/public/ContentViewer.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="">ContentViewer</div>
+</template>
+<script>
+import { pdfjsLib } from '../../plugins/index'
+import { ContentApi, mediaDataHandler } from '../../utils/index'
+import { Buffer } from 'buffer';
+export default {
+    name: 'ContentViewer',
+    props: {
+        content_id: {
+            required: true,
+            type: String
+        }
+    },
+    components: {},
+    computed: {},
+    mounted() {
+        this.retrieve_blog_content()
+    },
+    methods: {
+        retrieve_blog_content() {
+            ContentApi.retrieve_blog_content(this.content_id)
+                .then((response) => {
+                    this.content_media_data = response.data
+                    var loadingTask = pdfjsLib.getDocument({ data: Buffer.from(this.content_media_data, 'base64') })
+                    loadingTask.promise.then(function(pdf) {
+                        //
+                        // Fetch the first page
+                        //
+                        pdf.getPage(1).then(function(page) {
+                            //rendering
+                        });
+                    });
+                })
+                .catch((error) => {
+                    this.mnx_backendErrorHandler(error)
+                })
+        },
+    },
+    data() {
+        return {
+            content_media_data: null
+        }
+    }
+}
+</script>
+  

frontend/src/plugins/pdfjs/pdfjs.js

@@ -1,6 +1,7 @@
 import * as pdfjsLib from 'pdfjs-dist'
-
-//pdfjsLib.GlobalWorkerOptions.workerPort = new Worker()
-//new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url)
+//need to set worker before the pdfjs can be used.
+// pdfjsLib.GlobalWorkerOptions.workerPort = new Worker(
+//     new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url)
+// )
 
 export { pdfjsLib }

frontend/src/plugins/router/router.js

@@ -1,10 +1,12 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { store, userRoleEnum } from '../store/index'
+
 //public
 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'
 
 //guest
 import FrontDoor from '../../pages/guest/FrontDoor.vue'
@@ -107,6 +109,14 @@ const router = createRouter({
       components: { default: Contact, footer: FooterGuest, header: HeaderGuest }
     },
 
+    {
+      name: 'content-viewer',
+      path: '/content-viewer/:content_id',
+      meta: { requiredRoles: [userRoleEnum.NONE] },
+      components: { default: ContentViewer, footer: FooterGuest, header: HeaderGuest },
+      props: true
+    },
+
     // guest
     {
       name: 'front-door',

frontend/src/utils/backend/content.js

@@ -11,5 +11,17 @@ class ContentApi {
     )
     return request
   }
+  static retrieve_blog_content(document_id) {
+    const request = backendAxios.post(
+      '/api/content/retrieve-blog-content',
+      {
+        document_id: document_id
+      },
+      {
+
+      }
+    )
+    return request
+  }
 }
 export { ContentApi }

frontend/src/utils/html/index.js

@@ -1,3 +1,4 @@
 export { textAreaAujuster } from './textArea'
 export { tooltip } from './tooltip'
 export { elementHandler } from './element'
+export { mediaDataHandler } from './mediaData'

frontend/src/utils/html/mediaData.js

@@ -0,0 +1,14 @@
+class MediaDataHandler {
+    retrieveText(mediaData) {
+        let prefix = "data:text/plain;base64,"
+        let pos = mediaData.search(prefix);
+        if (pos < 0) return "";
+        return atob(mediaData.substring(pos + prefix.length))
+    }
+}
+
+
+
+const mediaDataHandler = new MediaDataHandler()
+
+export { mediaDataHandler }

frontend/src/utils/index.js

@@ -16,4 +16,4 @@ export { ValueChecker, DateUtils, OIDUtils } from './common/index'
 
 export { userProfileValidator } from './validator/index'
 
-export { textAreaAujuster, tooltip, elementHandler } from './html/index'
+export { textAreaAujuster, tooltip, elementHandler, mediaDataHandler } from './html/index'