fix: alert fileExists upload

2023-11-28 09:24:20 +07:00 · 2023-11-28 09:24:20 +07:00 · 002b1aff67
commit 002b1aff67
parent 917312f9f8
5 changed files with 214 additions and 102 deletions
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia'
 import FileIcon from '@/components/FileIcon.vue'
 import FileItemAction from '@/components/FileItemAction.vue'
 import FromEdit from '@/components/FromEdit.vue'
+import FormUpload from '@/components/FormUpload.vue'
 import { useTreeDataStore } from '@/stores/tree-data'
 import { useFileInfoStore } from '@/stores/file-info-data'

@ -15,16 +16,11 @@ const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แ
 const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
  useTreeDataStore()
 )
-const { getFolder, createFolder, editFolder, uploadFile } = useTreeDataStore()
+const { getFolder, uploadFile } = useTreeDataStore()

 const drawer = ref<boolean>(false)
 const drawerFile = ref<boolean>(false)
 const drawerStatus = ref<'edit' | 'create'>('create')
-const inputFile = ref<File>()
-const fileTitle = ref<string>('')
-const fileDesc = ref<string>('')
-const fileCategory = ref<string>('')
-const fileKeyword = ref<string>('')
 const editPathname = ref<string>('')

 const currentIcon = computed(() =>
@ -40,17 +36,6 @@ const props = withDefaults(
    action: false,
  }
 )
-
-async function handleSubmit() {
-  if (!inputFile.value) return
-
-  await uploadFile(currentPath.value, inputFile.value, {
-    title: fileTitle.value,
-    description: fileDesc.value,
-    keyword: [fileKeyword.value],
-    category: [fileCategory.value],
-  })
-}
 </script>

 <template>
@ -266,88 +251,10 @@ async function handleSubmit() {
    @update:drawer="() => (drawer = false)"
  />

-  <q-drawer
-    class="q-pa-md"
-    side="right"
-    v-model="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="() => (drawerFile = !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="
-        () => {
-          drawerFile = !drawerFile
-          handleSubmit()
-        }
-      "
-    />
-  </q-drawer>
+  <form-upload
+    :drawerFile="drawerFile"
+    @update:drawerFile="() => (drawerFile = false)"
+  />
 </template>

 <style lang="scss" scoped>
--- a/Services/client/src/components/FormUpload.vue
+++ b/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>
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@ -6,6 +6,7 @@ import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
 import FromEdit from '@/components/FromEdit.vue'
 import FileIcon from '@/components/FileIcon.vue'
+import FormUpload from '@/components/FormUpload.vue'

 const { deleteFolder } = useTreeDataStore()
 const { getFormatDate, getSize, getType } = useFileInfoStore()
@ -231,7 +232,12 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
            color="primary"
            dense
            icon="add"
-            @click=""
+            @click="
+              () => {
+                drawerFile = !drawerFile
+                drawer = false
+              }
+            "
          />
        </div>
      </div>
@ -294,7 +300,11 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
    :DEPT_NAME="DEPT_NAME"
    :currentDept="currentDept"
    :editPathname="editPathname"
-    @update:drawer="() => (drawer = false )"
+    @update:drawer="() => (drawer = false)"
+  />
+  <form-upload
+    :drawerFile="drawerFile"
+    @update:drawerFile="() => (drawerFile = false)"
  />
 </template>

--- a/Services/client/src/components/PageLayout.vue
+++ b/Services/client/src/components/PageLayout.vue
@ -12,6 +12,7 @@ import FileDownload from '@/modules/01_user/components/FileDownload.vue'
 import ListView from '@/components/ListView.vue'
 import FromEdit from '@/components/FromEdit.vue'

+
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย', 'ไฟล์']

 const { isPreview } = storeToRefs(useFileInfoStore())
@ -150,7 +151,7 @@ onMounted(getCabinet)
    :DEPT_NAME="DEPT_NAME"
    :currentDept="currentDept"
    editPathname=""
-    @update:drawer="() => (drawer = !drawer)"
+    @update:drawer="() => (drawer = false)"
  />
 </template>

--- a/Services/client/src/stores/tree-data.ts
+++ b/Services/client/src/stores/tree-data.ts
@ -277,6 +277,21 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
    return loader.hide()
  }

+  function checkFile(nameFile: string) {
+    const fileExists = currentFile.value.some((element) => {
+      if (element.fileName === nameFile) {
+        console.log(element.fileName + '===' + nameFile)
+        return true
+      }
+      return false
+    })
+
+    if (fileExists) {
+      return false
+    }
+    return true
+  }
+
  return {
    data,
    currentFolder,
@ -292,5 +307,6 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
    createFolder,
    deleteFolder,
    editFolder,
+    checkFile,
  }
 })