updated kpi list & detail

src/modules/14_KPI/components/Tab/05_File.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import axios from "axios";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const $q = useQuasar();
+const route = useRoute();
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  dialogRemove,
+} = useCounterMixin();
+interface ArrayFileList {
+  id: string;
+  pathName: string;
+  fileName: string;
+}
+
+const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
+
+const documentFile = ref<any>(null);
+const fileList = ref<ArrayFileList[]>([]);
+
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.KpiFile + `/KPI/ไฟล์เอกสาร/${id.value}`)
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", documentFile.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then((res) => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      documentFile.value = null;
+    });
+}
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}`, {
+          replace: false,
+          fileList: fileName,
+        })
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey &&
+            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ * ดาวน์โหลดลิงค์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบไฟล์
+ * @param fileName file name
+ */
+function deleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
+
+      .then((res) => {
+        success($q, `ลบไฟล์สำเร็จ`);
+        setTimeout(() => {
+          getData();
+          hideLoader();
+        }, 1000);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="q-pa-md">
+    <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+      <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+        อัปโหลดไฟล์เอกสารหลักฐาน
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+        <div class="col-12 row" v-if="!isReadonly">
+          <q-file
+            for="inputFiles"
+            class="col-12"
+            outlined
+            dense
+            v-model="documentFile"
+            label="ไฟล์เอกสารหลักฐาน"
+            hide-bottom-space
+            accept=".pdf,.xlsx,.docx,.png,.jpg"
+            clearable
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+            <template v-slot:after>
+              <q-btn
+                size="14px"
+                v-if="documentFile"
+                flat
+                round
+                dense
+                color="add"
+                icon="mdi-upload"
+                @click="clickUpload(documentFile)"
+                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+              >
+            </template>
+          </q-file>
+
+          <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
+        </div>
+
+        <div v-if="fileList.length > 0" class="col-xs-12 row">
+          <q-list class="full-width rounded-borders" bordered separator>
+            <q-item
+              clickable
+              v-ripple
+              v-for="data in fileList"
+              :key="data.id"
+              class="items-center"
+            >
+              <q-item-section>{{ data.fileName }}</q-item-section>
+              <q-space />
+              <div>
+                <q-btn
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="blue"
+                  icon="mdi-download"
+                  @click="downloadFile(data.fileName)"
+                  ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                >
+
+                <q-btn
+                  v-if="!isReadonly"
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="red"
+                  class="q-ml-sm"
+                  icon="mdi-delete-outline"
+                  @click="deleteFile(data.fileName)"
+                  ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </q-item>
+          </q-list>
+        </div>
+
+        <div class="col-12" v-else>
+          <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>