fix: alert fileExists upload

Services/client/src/components/FormUpload.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useTreeDataStore } from '@/stores/tree-data'
+
+const { currentPath } = storeToRefs(useTreeDataStore())
+const { uploadFile, checkFile } = useTreeDataStore()
+
+const inputFile = ref<File>()
+const fileTitle = ref<string>('')
+const fileDesc = ref<string>('')
+const fileCategory = ref<string>('')
+const fileKeyword = ref<string>('')
+const notification = ref<boolean>(false)
+const emit = defineEmits(['update:drawerFile'])
+const props = withDefaults(defineProps<{ drawerFile: boolean }>(), {
+  drawerFile: false,
+})
+
+async function handleSubmit(continueUpload:boolean = false) {
+  if (!inputFile.value) return
+  // getFile(p)
+  if (checkFile(inputFile.value.name) || continueUpload ) {
+    await uploadFile(currentPath.value, inputFile.value, {
+      title: fileTitle.value,
+      description: fileDesc.value,
+      keyword: [fileKeyword.value],
+      category: [fileCategory.value],
+    })
+  } else notification.value = true
+}
+</script>
+
+<template>
+  <q-drawer
+    class="q-pa-md"
+    side="right"
+    v-model="props.drawerFile"
+    bordered
+    :width="300"
+    :breakpoint="500"
+    overlay
+  >
+    <q-toolbar class="q-mb-md q-pa-none">
+      <q-toolbar-title>
+        <span class="text-weight-bold">สร้างเอกสาร</span>
+      </q-toolbar-title>
+      <q-btn
+        flat
+        round
+        dense
+        icon="close"
+        v-close-popup
+        color="red"
+        @click="() => $emit('update:drawerFile')"
+      />
+    </q-toolbar>
+    <span class="text-weight-bold">อัพโหลดไฟล์</span>
+    <q-file
+      v-model="inputFile"
+      class="q-my-md"
+      label="Pick files"
+      dense
+      outlined
+    >
+      <template v-slot:prepend>
+        <q-icon name="attach_file" />
+      </template>
+    </q-file>
+    <span class="text-weight-bold">ชื่อเรื่อง</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      v-model="fileTitle"
+      placeholder="กรอกชื่อเรื่อง"
+      dense
+    />
+    <span class="text-weight-bold">รายละเอียดของเอกสาร</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      type="textarea"
+      v-model="fileDesc"
+      placeholder="กรอกรายละเอียด"
+      dense
+    />
+    <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      v-model="fileCategory"
+      placeholder="เลือกกลุ่ม/หมวดหมู่"
+      dense
+    />
+    <span class="text-weight-bold">คำสำคัญ</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      v-model="fileKeyword"
+      placeholder="กรอกคำสำคัญ"
+      dense
+    />
+    <q-btn
+      class="q-px-md"
+      label="บันทึก"
+      type="submit"
+      color="primary"
+      dense
+      @click="
+        () => {
+          $emit('update:drawerFile')
+          handleSubmit()
+        }
+      "
+    />
+  </q-drawer>
+
+  <q-btn label="Click me" color="primary" @click="notification = true" />
+
+  <q-dialog
+    v-model="notification"
+    persistent
+    transition-show="scale"
+    transition-hide="scale"
+  >
+    <q-card style="width: 400px">
+      <q-card-section>
+        <div class="text-h6">เตือนพบไฟล์ชื่อซ้ำในระบบ</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        ถ้าดำเนินการต่อจะอัพข้อมูลทับกับอันเก่า
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-red">
+        <q-space />
+        <q-btn flat label="ยกเลิก" v-close-popup />
+
+        <q-btn
+          flat
+          label="ดำเนินการต่อ"
+          v-close-popup
+          class="text-teal"
+          @click="()=> handleSubmit(true)"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.box {
+  display: inline-block;
+  border: 2px solid #f1f2f4;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.dashed {
+  opacity: 0.4;
+  display: inline-block;
+  border: 2px solid #babdc3;
+  border-radius: 8px;
+  cursor: pointer;
+  border-style: dashed;
+}
+
+.add-icon {
+  margin: auto auto;
+}
+
+.add-button {
+  position: absolute;
+  top: 75px;
+  right: 45px;
+  background-color: white;
+}
+</style>