ปรับ UI

src/modules/12_evaluatePersonal/components/Detail/step/step5.vue

@@ -1,5 +1,20 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import axios from "axios";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, showLoader, hideLoader, messageError, success } = mixin;
+const AnnouncementDate = ref<string | null>(date2Thai(new Date()));
+const id = ref<string>(route.params.id as string);
+
 
 const fileEvaluation5 = ref<any>();
 const status = ref<string>("ANNOUNCE_WEB");
@@ -7,17 +22,17 @@ const website = ref<string>("https://bma-ehr.frappet.com/");
 
 const files = [
   {
-    id: "x1",
+    id: "file1",
     fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
     pathName: "12",
   },
   {
-    id: "x2",
+    id: "file2",
     fileName: "ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
     pathName: "12",
   },
   {
-    id: "x3",
+    id: "file3",
     fileName: "เอกสารแสดงผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
     pathName: "12",
   },
@@ -47,14 +62,73 @@ function deleteFile(name: string) {
 function save() {
   console.log("save");
 }
+
+function upLoadFile() {
+  showLoader();
+  http
+    .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
+      fileList: {
+        fileName: "บันทึกแจ้งผลการประกาศคัดเลือก",
+        metadata: {
+          tag: "value",
+        },
+      },
+    })
+    .then((res) => {
+      const foundKey: any = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      const link = res.data[foundKey]?.uploadUrl;
+      fileUpLoad(link);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fileUpLoad(url: string) {
+  axios
+    .put(url, fileEvaluation5.value, {
+      headers: { "Content-Type": fileEvaluation5.value?.type },
+      onUploadProgress: (e) => console.log(e),
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fileEvaluation5.value = null;
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    });
+}
+
+function copyLink(link: string) {
+  navigator.clipboard
+    .writeText(link)
+    .then(() => {
+      console.log(`Copied link for file: ${link}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      success($q, "คัดลอกสำเร็จ");
+    });
+}
 </script>
 
 <template>
   <div class="row q-gutter-sm">
     <div class="col-12">
-      <q-banner inline-actions bordered class="bg-red-1 text-red border-red">
-        <q-icon name="mdi-information-outline" size="20px" />
-        ประกาศเมื่อวันที่ 20 พ.ค. 2566 ถึงวันที่ 20 ธ.ค. 2566
+      <q-banner class="text-weight-bold text-red-14 bg-red-2 text-center">
+        <div class="text-weight-bold">
+          <q-icon name="info_outline" color="red-14" size="24px" />
+          ประกาศเมื่อวันที่ {{ AnnouncementDate }}
+        </div>
       </q-banner>
     </div>
 
@@ -78,15 +152,13 @@ function save() {
               <div class="row">
                 <div>
                   <q-btn
-                    dense
                     flat
                     round
-                    size="12px"
-                    color="blue"
-                    icon="mdi-download-outline"
-                    @click="downloadFile(file.pathName)"
+                    color="primary"
+                    icon="mdi-clipboard-outline"
+                    @click="copyLink(file.fileName)"
                   >
-                    <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                    <q-tooltip>คัดลอกลิ้งค์</q-tooltip>
                   </q-btn>
                 </div>
               </div>
@@ -121,7 +193,13 @@ function save() {
                 </q-file>
               </div>
               <div class="col-1 self-center text-center q-pl-none">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
+                <q-btn
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="upLoadFile"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </div>
@@ -168,8 +246,8 @@ function save() {
               </q-list>
             </div>
             <div class="col-12" v-else>
-                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-              </div>
+              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+            </div>
           </div>
         </div>
       </q-card>