From 540868a029668559647a912994eb475e2e91e54c Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Thu, 30 Nov 2023 15:30:31 +0700
Subject: [PATCH] fix: file download ui

---
 .../01_user/components/FileDownload.vue       | 109 ++++++++++++------
 1 file changed, 71 insertions(+), 38 deletions(-)

diff --git a/Services/client/src/modules/01_user/components/FileDownload.vue b/Services/client/src/modules/01_user/components/FileDownload.vue
index ee5b1af..e616333 100644
--- a/Services/client/src/modules/01_user/components/FileDownload.vue
+++ b/Services/client/src/modules/01_user/components/FileDownload.vue
@@ -9,13 +9,14 @@ import { useFileInfoStore } from '@/stores/file-info-data'
 import FileIcon from '@/components/FileIcon.vue'
 
 const { isFilePreview, fileInfo } = storeToRefs(useFileInfoStore())
-const { getType, getFormatDate, getSize, getFileNameFormat } = useFileInfoStore()
+const { getType, getFormatDate, getSize, getFileNameFormat } =
+  useFileInfoStore()
 
 async function downloadSubmit(path: any) {
   const [cabinet, drawer, folder, file] = path.split('/')
   const formatPath = `/cabinet/${cabinet}/drawer/${drawer}/folder/${folder}/file/${file}`
   const res = await axiosClient.get<EhrFile & { download: string }>(
-    `${import.meta.env.VITE_API_ENDPOINT}${formatPath}`
+    `${import.meta.env.VITE_API_ENDPOINT}${formatPath}`,
   )
   await axios
     .get(res.data.download, {
@@ -36,9 +37,9 @@ async function downloadSubmit(path: any) {
 </script>
 
 <template>
-  <div class="bg-white rounded-borders shadow-5 relative">
+  <div class="bg-white rounded-borders shadow-5 relative q-pb-md">
     <div class="bg-white q-pa-md">
-      <div class="row items-center justify-between">
+      <div class="row items-center">
         <span class="text-h6">
           <q-btn
             flat
@@ -56,37 +57,52 @@ async function downloadSubmit(path: any) {
           {{ getFileNameFormat(fileInfo?.fileName) }}</span
         >
       </div>
-      <div class="row">
-        <div class="q-pa-sm">
-          <div class="col">
-            <div class="box border-radius-inherit">
-              <q-card flat>
-                <q-card-section class="column justify-center relative q-px-xl">
-                  <file-icon
-                    size="preview"
-                    :fileMimeType="fileInfo?.fileType"
-                  />
-                  <span class="text-center q-pt-md text-h6">{{
-                    getFileNameFormat(fileInfo?.fileName)
-                  }}</span>
-                </q-card-section>
-              </q-card>
+
+      <div class="row q-mt-lg justify-center">
+        <div class="column q-pa-sm">
+          <div class="grid">
+            <div
+              :style="{
+                position: 'relative',
+                display: 'flex',
+                gap: '0.5rem',
+                flexDirection: 'column',
+                alignItems: 'center',
+                padding: '1rem',
+                maxWidth: '100%',
+              }"
+              class="box"
+            >
+              <div class="q-px-md flex items-center justify-center">
+                <file-icon
+                  size="preview"
+                  :fileMimeType="
+                    fileInfo?.fileType ? fileInfo?.fileType : 'unknow'
+                  "
+                />
+              </div>
+              <div
+                class="text-overflow-handle block q-px-md text-center"
+                style="max-width: 100%"
+              >
+                {{ getFileNameFormat(fileInfo?.fileName) }}
+              </div>
+            </div>
+            <div class="column q-py-sm">
+              <q-btn
+                color="primary"
+                label="ดาวน์โหลด"
+                icon="mdi-download"
+                class="q-py-sm"
+                @click="() => downloadSubmit(fileInfo?.pathname)"
+              />
             </div>
-          </div>
-          <div class="column q-py-md">
-            <q-btn
-              color="primary"
-              label="ดาวน์โหลด"
-              icon="mdi-download"
-              class="q-py-sm"
-              @click="() => downloadSubmit(fileInfo?.pathname)"
-            />
           </div>
         </div>
 
-        <div class="col q-px-lg q-gutter-md">
+        <div class="col-grow q-px-lg q-gutter-md q-pt-md">
           <div class="row">
-            <div class="col-2">
+            <div class="col-12 col-md-2">
               <span>ชื่อไฟล์</span>
             </div>
             <div class="col-grow">
@@ -95,7 +111,7 @@ async function downloadSubmit(path: any) {
           </div>
           <q-separator />
           <div class="row">
-            <div class="col-2">
+            <div class="col-12 col-md-2">
               <span>ชื่อเรื่อง</span>
             </div>
             <div class="col-grow">
@@ -104,7 +120,7 @@ async function downloadSubmit(path: any) {
           </div>
           <q-separator />
           <div class="row">
-            <div class="col-2">
+            <div class="col-12 col-md-2">
               <span>รายละเอียด</span>
             </div>
             <div class="col-grow">
@@ -113,7 +129,7 @@ async function downloadSubmit(path: any) {
           </div>
           <q-separator />
           <div class="row">
-            <div class="col-2">
+            <div class="col-12 col-md-2">
               <span>กลุ่ม/หมวดหมู่</span>
             </div>
             <div class="col-grow">
@@ -127,7 +143,7 @@ async function downloadSubmit(path: any) {
           </div>
           <q-separator />
           <div class="row">
-            <div class="col-2">
+            <div class="col-12 col-md-2">
               <span>คำสำคัญ</span>
             </div>
             <div class="col-grow">
@@ -141,7 +157,7 @@ async function downloadSubmit(path: any) {
           </div>
           <q-separator />
           <div class="row">
-            <div class="col-2">
+            <div class="col-12 col-md-2">
               <span>ขนาดไฟล์</span>
             </div>
             <div class="col-grow">
@@ -150,7 +166,7 @@ async function downloadSubmit(path: any) {
           </div>
           <q-separator />
           <div class="row">
-            <div class="col-2">
+            <div class="col-12 col-md-2">
               <span>ประเภทไฟล์</span>
             </div>
             <div class="col-grow">
@@ -159,7 +175,7 @@ async function downloadSubmit(path: any) {
           </div>
           <q-separator />
           <div class="row">
-            <div class="col-2">
+            <div class="col-12 col-md-2">
               <span>วันที่อัปโหลด</span>
             </div>
             <div class="col-grow">
@@ -176,7 +192,24 @@ async function downloadSubmit(path: any) {
 
 <style lang="scss" scoped>
 .box {
-  border: 2px solid #f1f2f4;
+  border: 2px solid $separator-color;
   border-radius: 8px;
 }
+
+.text-overflow-handle {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.grid {
+  display: grid;
+  width: 250px;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.grid .box {
+  position: relative;
+}
 </style>