From 22732f2061dea398f7931e05fc2d47450efa067b Mon Sep 17 00:00:00 2001
From: "min.jiang" <min.jiang02@weimob.com>
Date: Sun, 23 Jun 2024 01:21:10 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/user/requests/Home.vue     | 69 ++++++++++++++-----
 frontend/src/pages/user/requests/Propose.vue  | 10 +--
 .../user/workspace/requestIssue/Issue.vue     |  2 +-
 3 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/frontend/src/pages/user/requests/Home.vue b/frontend/src/pages/user/requests/Home.vue
index 99b14d3..b5b7a53 100644
--- a/frontend/src/pages/user/requests/Home.vue
+++ b/frontend/src/pages/user/requests/Home.vue
@@ -75,12 +75,12 @@
                     Propose
                   </button>
                   <div class="request-description-content" v-html="request.content"></div>
-                  <div v-for="(file, index) in request.attached_files" :key="index">
-                    <button @click="previewAttachedFile(request.id, file.document_id)">
-                      Preview{{ file.file_name }}
+                  <div class="preview-btn-container" v-for="(file, index) in request.attached_files" :key="index">
+                    <button class="btn btn-link" data-bs-toggle="modal" data-bs-target="#previewModal" :data-bs-file="file.file_name" :data-bs-rid="request.id" :data-bs-did="file.document_id">
+                      Preview {{ file.file_name }}
                     </button>
-                    <button @click="downloadAttachedFile(request.id, file.document_id)">
-                      Download{{ file.file_name }}
+                    <button class="btn btn-link" @click="downloadAttachedFile(request.id, file.document_id)">
+                      Download {{ file.file_name }}
                     </button>
                   </div>
                 </div>
@@ -177,24 +177,56 @@
       </div>
     </div>
   </div>
+  <div class="modal fade" id="previewModal" ref="previewModal" aria-labelledby="previewModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="previewModalLabel">{{previewModal.filename}}</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <PDFReader :doc="previewModal.doc" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import { RequestHubApi, WorksapceApi, DateUtils, requestHubUtils } from '../../../utils/index'
 import { proposingModelEnum } from '../../../types/index'
+import PDFReader from '@/components/PDFReader.vue'
 export default {
   name: 'RequestHub',
   props: {},
   mounted() {
     this.fetchRequests()
+    this.$refs.previewModal.addEventListener('shown.bs.modal', event => {
+      const relatedTarget = event.relatedTarget
+      const filename = relatedTarget.getAttribute('data-bs-file')
+      this.previewModal = { filename }
+      const requestId =  relatedTarget.getAttribute('data-bs-rid')
+      const documentId =  relatedTarget.getAttribute('data-bs-did')
+      WorksapceApi.fetchAttachedFileAsMediaData(requestId, documentId)
+        .then((response) => {
+          this.previewModal.doc = {url: response.data}
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    })
+    this.$refs.previewModal.addEventListener('hidden.bs.modal', () => {
+      this.previewModal = {}
+    })
   },
   data() {
     return {
       requestGroups: [],
-      message: null
+      message: null,
+      previewModal: {}
     }
   },
-
+  components: { PDFReader },
   methods: {
     fetchRequests() {
       RequestHubApi.fetchRequestForHub()
@@ -212,18 +244,6 @@ export default {
     getDateFromFulltimeString(fulltime) {
       return DateUtils.FromJsonToDateString(fulltime)
     },
-    previewAttachedFile(request_id, document_id) {
-      // !!! SHOULD NOT use PdfContentViewer which is designed for unlogged in users.
-      // !!! Instead, should have a dedicated pdf viewer which should follow the figma design.
-      // WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id)
-      //   .then((response) => {
-      //     let media_data = response.data
-      //     console.log(media_data)
-      //   })
-      //   .catch((error) => {
-      //     this.mnx_backendErrorHandler(error)
-      //   })
-    },
     downloadAttachedFile(request_id, document_id) {
       WorksapceApi.fetchAttachedFileAsDownload(request_id, document_id)
         .then((response) => {
@@ -411,4 +431,15 @@ export default {
   @extend .text-start;
   font-weight: bold;
 }
+
+.preview-btn-container {
+  display: flex;
+  text-align: left;
+  
+  .btn-link {
+    font-weight: bold;
+    margin-right: 15px;
+    text-decoration: underline;
+  }
+}
 </style>
diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index 30cf826..4a68d53 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -33,7 +33,7 @@
                   aria-expanded="false"
                   :aria-controls="'collapse' + index"
                 >
-                  {{ existingProposal.request.title }}
+                  <span class="dashed-container">{{ existingProposal.request.title }}</span>
                 </button>
               </h2>
               <div
@@ -88,7 +88,7 @@
                   aria-expanded="false"
                   :aria-controls="'collapse' + index"
                 >
-                  {{ template.title }}
+                  <span class="dashed-container">{{ template.title }}</span>
                 </button>
               </h2>
               <div
@@ -742,13 +742,15 @@ export default {
 }
 
 .load-template-button {
-  @extend .proceed-button;
+  @extend .btn;
+  @extend .btn-link;
   @extend .float-end;
   width: fit-content;
 }
 
 .copy-existing-button {
-  @extend .proceed-button;
+  @extend .btn;
+  @extend .btn-link;
   @extend .float-end;
   width: fit-content;
 }
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 1ec4c19..18731f2 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -32,7 +32,7 @@
                 aria-expanded="false"
                 :aria-controls="'collapse' + index"
               >
-                {{ existingRequest.title }}
+                <span class="dashed-container">{{ existingRequest.title }}</span>
               </button>
             </h2>
             <div