refactor: notification on file exist and main view

Services/client/package.json

@@ -17,48 +17,42 @@
     "docs:typedoc": "typedoc && scp -r fe-typedoc projects-doc:~/projects/project-docs/edm/ && rm -r fe-typedoc"
   },
   "dependencies": {
-    "@fullcalendar/core": "^6.1.8",
+    "@quasar/extras": "^1.16.8",
-    "@fullcalendar/daygrid": "^6.1.8",
+    "@tsconfig/node18": "^18.2.2",
-    "@fullcalendar/interaction": "^6.1.8",
-    "@fullcalendar/list": "^6.1.8",
-    "@fullcalendar/timegrid": "^6.1.8",
-    "@fullcalendar/vue3": "^6.1.8",
-    "@mayank1513/vue-tag-input": "^1.2.0",
-    "@quasar/extras": "^1.15.8",
-    "@vuepic/vue-datepicker": "^5.2.1",
     "axios": "^1.6.2",
-    "keycloak-js": "^22.0.5",
+    "keycloak-js": "^23.0.0",
-    "pinia": "^2.1.4",
+    "pinia": "^2.1.7",
-    "quasar": "^2.11.1",
+    "quasar": "^2.14.0",
-    "vite-plugin-pwa": "^0.16.7",
+    "vite-plugin-pwa": "^0.17.2",
-    "vue": "^3.2.45",
+    "vue": "^3.3.9",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@mayank1513/vue-tag-input": "^1.2.0",
     "@quasar/vite-plugin": "^1.6.0",
-    "@rushstack/eslint-patch": "^1.1.4",
+    "@rushstack/eslint-patch": "^1.6.0",
-    "@types/jsdom": "^20.0.1",
+    "@types/jsdom": "^21.1.6",
-    "@types/node": "^18.11.12",
+    "@types/node": "^20.10.0",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.5.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "^2.2.6",
+    "@vue/test-utils": "^2.4.2",
-    "@vue/tsconfig": "^0.1.3",
+    "@vue/tsconfig": "^0.4.0",
-    "cypress": "^12.0.2",
+    "cypress": "^13.6.0",
-    "eslint": "^8.22.0",
+    "eslint": "^8.54.0",
-    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-vue": "^9.3.0",
+    "eslint-plugin-vue": "^9.18.1",
-    "jsdom": "^20.0.3",
+    "jsdom": "^23.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^3.1.0",
-    "sass": "^1.32.12",
+    "sass": "^1.69.5",
-    "start-server-and-test": "^1.15.2",
+    "start-server-and-test": "^2.0.3",
-    "typedoc": "^0.25.3",
+    "typedoc": "^0.25.4",
     "typedoc-plugin-vue": "^1.1.0",
-    "typescript": "~4.7.4",
+    "typescript": "~5.3.2",
-    "vite": "^4.0.0",
+    "vite": "^5.0.2",
-    "vitest": "^0.25.6",
+    "vitest": "^0.34.6",
-    "vue-tsc": "^1.0.12"
+    "vue-tsc": "^1.8.22"
   }
 }

Services/client/src/components/FileForm.vue

@@ -4,6 +4,7 @@ import { onMounted, onUnmounted, ref } from 'vue'
 const props = withDefaults(
   defineProps<{
     open: boolean
+    error: { fileExist?: boolean }
     mode: 'create' | 'edit'
     title?: string
     description?: string
@@ -12,7 +13,7 @@ const props = withDefaults(
   }>(),
   {
     open: false,
-  }
+  },
 )
 
 const emit = defineEmits([
@@ -21,6 +22,7 @@ const emit = defineEmits([
   'update:description',
   'update:keyword',
   'update:category',
+  'filechange',
   'submit',
 ])
 
@@ -96,7 +98,12 @@ const file = ref<File | undefined>()
           dense
           outlined
           v-model="file"
+          @update:model-value="(v) => $emit('filechange', v.name)"
           :label="file?.name ? undefined : 'เลือกไฟล์'"
+          :error="!!error.fileExist"
+          :error-message="
+            error.fileExist ? 'พบไฟล์ในระบบ ข้อมูลในระบบจะถูกเขียนทับ' : ''
+          "
         >
           <template v-slot:prepend>
             <q-icon name="attach_file" />
@@ -168,7 +175,7 @@ const file = ref<File | undefined>()
 </template>
 
 <style scoped>
-.no-resize >>> textarea {
+.no-resize :deep(textarea) {
   resize: none;
 }
 </style>

Services/client/src/components/FileItem.vue

@@ -6,6 +6,7 @@ import FileIcon from '@/components/FileIcon.vue'
 import FileItemAction from '@/components/FileItemAction.vue'
 import FileForm from './FileForm.vue'
 import FolderForm from './FolderForm.vue'
+import UploadExistDialog from './UploadExistDialog.vue'
 import { useTreeDataStore } from '@/stores/tree-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
 
@@ -13,13 +14,12 @@ const props = withDefaults(
   defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
   {
     action: false,
-  }
+  },
 )
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 const { getFileInfo, getFileNameFormat } = useFileInfoStore()
-const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
+const { currentFolder, currentFile, currentDept, currentPath } =
-  useTreeDataStore()
+  storeToRefs(useTreeDataStore())
-)
 const {
   createFolder,
   editFolder,
@@ -28,14 +28,15 @@ const {
   uploadFile,
   updateFile,
   deleteFile,
+  checkFile,
 } = useTreeDataStore()
 
 const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
     : currentDept.value === 1
-    ? 'inbox'
+      ? 'inbox'
-    : 'o_folder_open'
+      : 'o_folder_open',
 )
 
 const folderFormState = ref<boolean>(false)
@@ -54,6 +55,8 @@ const fileFormData = ref<{
   category?: string
 }>({})
 const fileFormType = ref<'edit' | 'create'>('create')
+const fileFormError = ref<{ fileExist?: boolean }>({})
+const fileExistNotification = ref<boolean>(false)
 
 function triggerFolderCreate() {
   folderFormType.value = 'create'
@@ -92,7 +95,7 @@ function triggerFileEdit(
     keyword: string
     category: string
   },
-  pathname: string
+  pathname: string,
 ) {
   fileFormState.value = true
   fileFormType.value = 'edit'
@@ -105,14 +108,26 @@ function triggerFileEdit(
   }
 }
 
-async function submitFileForm(value: {
+const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
-  mode: 'create' | 'edit'
+
-  file: File
+async function submitFileForm(
-  title: string
+  value: {
-  description: string
+    mode: 'create' | 'edit'
-  keyword: string
+    file: File
-  category: string
+    title: string
-}) {
+    description: string
+    keyword: string
+    category: string
+  },
+  force = false,
+) {
+  currentParam.value = value
+
+  if (checkFile(value.file.name) && !force) {
+    fileExistNotification.value = true
+    return
+  }
+
   if (value.mode === 'create') {
     await uploadFile(currentPath.value, value.file, {
       title: value.title,
@@ -129,207 +144,214 @@ async function submitFileForm(value: {
         keyword: value.keyword,
         category: value.category,
       },
-      value.file
+      value.file,
     )
   }
   fileFormData.value = {}
   fileFormState.value = false
+  currentParam.value = undefined
 }
 </script>
 
 <template>
-  <div class="q-my-md">
+  <div class="text-h6 q-mt-md" v-if="currentDept > 2">
-    <span class="text-h6 text-weight-light" v-if="currentDept === 3">
+    {{ DEPT_NAME[currentDept] }}
-      แฟ้มย่อย
+  </div>
-    </span>
+  <div class="grid q-mt-md">
-    <div class="q-gutter-md" v-if="currentDept < 3">
+    <div v-for="value in currentFolder">
       <div
-        :key="value.name"
+        :style="{
-        v-for="value in currentFolder"
+          position: 'relative',
-        class="inline-block"
+          display: 'flex',
+          gap: '0.5rem',
+          flexDirection: currentDept > 2 ? 'row' : 'column',
+          alignItems: 'center',
+          padding: currentDept > 2 ? '.5rem 0' : '.5rem',
+        }"
+        class="box"
+        @click="() => getFolder(value.pathname)"
       >
-        <div class="box border-radius-inherit">
+        <div class="q-px-md flex items-center justify-center">
-          <q-card flat @click="() => getFolder(value.pathname)">
+          <q-icon
-            <q-card-section
+            :name="currentIcon"
-              class="column justify-center relative q-px-xl"
+            :size="currentDept > 2 ? '3em' : '6em'"
-              style="max-width: 225px"
+            color="primary"
-              :title="value.name"
+            class="col"
-            >
+          />
-              <q-icon
-                :name="currentIcon"
-                size="6em"
-                color="primary"
-                class="column justify-center relative q-px-lg"
-              />
-              <div
-                class="absolute"
-                style="top: 0.5rem; right: 0.5rem"
-                v-if="props.action"
-              >
-                <file-item-action
-                  @delete="() => deleteFolder(value.pathname)"
-                  @edit="() => triggerFolderEdit(value.name, value.pathname)"
-                />
-              </div>
-              <span
-                class="text-center q-pt-md text-overflow-handle"
-                style="max-width: 132px"
-              >
-                {{ value.name }}
-              </span>
-            </q-card-section>
-          </q-card>
         </div>
-      </div>
+        <div
-      <div
+          class="absolute flex items-center justify-center"
-        class="inline-block"
+          style="top: 0.5rem; right: 0.5rem"
-        v-if="props.action && currentDept < 4"
+          :style="{ bottom: currentDept > 2 ? '0.5rem' : 'unset' }"
-        tabindex="0"
+          v-if="props.action"
-      >
+        >
-        <div class="dashed border-radius-inherit">
+          <file-item-action
-          <q-card flat @click="() => triggerFolderCreate()">
+            @delete="() => deleteFolder(value.pathname)"
-            <q-card-section class="column justify-center relative q-px-xl">
+            @edit="() => triggerFolderEdit(value.name, value.pathname)"
-              <q-icon
+          />
-                :name="currentIcon"
+        </div>
-                class="column justify-center relative q-px-lg"
+        <div
-                size="6em"
+          class="text-overflow-handle block text-center"
-                color="primary"
+          :class="{
-              />
+            'q-px-md': currentDept < 3,
-              <q-btn round class="add-button" color="white" size="10px">
+            'q-pr-xl': currentDept > 2,
-                <q-icon name="add" color="primary" size="1.5rem"></q-icon>
+          }"
-              </q-btn>
+          style="max-width: 100%"
-              <span class="text-center q-pt-md"
+        >
-                >สร้าง{{ DEPT_NAME[currentDept] }}ใหม่</span
+          {{ value.name }}
-              >
-            </q-card-section>
-          </q-card>
         </div>
       </div>
     </div>
-
+    <div v-if="props.action && currentDept < 4">
-    <div class="q-gutter-md q-mt-sm" v-if="currentDept === 3">
       <div
-        :key="value.name"
+        class="dashed"
-        v-for="value in currentFolder"
+        :style="{
-        class="inline-block"
+          position: 'relative',
+          display: 'flex',
+          gap: '0.5rem',
+          flexDirection: currentDept > 2 ? 'row' : 'column',
+          alignItems: 'center',
+          padding: currentDept > 2 ? '.5rem 0' : '.5rem',
+        }"
+        @click="() => triggerFolderCreate()"
       >
-        <div class="box border-radius-inherit q-px-sm q-py-sm">
+        <div
-          <q-card flat @click="() => getFolder(value.pathname)">
+          class="q-px-md flex items-center justify-center"
-            <q-td>
+          style="position: relative"
-              <q-icon
+        >
-                :name="currentIcon"
+          <q-icon
-                size="3em"
+            :name="currentIcon"
-                color="primary"
+            :size="currentDept > 2 ? '3em' : '6em'"
-                class="col"
+            color="primary"
-              />
+            class="col"
-              <span class="q-mx-md">{{ value.name }}</span>
+          />
-              <file-item-action
+          <q-btn
-                @delete="() => deleteFolder(value.pathname)"
+            round
-                @edit="() => triggerFolderEdit(value.name, value.pathname)"
+            :dense="currentDept > 2"
-              />
+            color="white"
-            </q-td>
+            size="10px"
-          </q-card>
+            style="position: absolute; bottom: 0"
+            :style="{ right: currentDept > 2 ? '.5rem' : '1.75rem' }"
+          >
+            <q-icon name="add" color="primary" size="1.5rem" />
+          </q-btn>
         </div>
-      </div>
+        <div
-      <div
+          class="text-overflow-handle block text-center"
-        class="inline-block"
+          :class="{
-        v-if="props.action && currentDept < 4"
+            'q-px-md': currentDept < 3,
-        tabindex="0"
+            'q-pr-xl': currentDept > 2,
-      >
+          }"
-        <div class="dashed border-radius-inherit q-px-lg q-py-sm">
+          style="max-width: 100%"
-          <q-card flat @click="() => triggerFolderCreate()">
+        >
-            <q-td>
+          สร้าง{{ DEPT_NAME[currentDept] }}ใหม่
-              <q-icon
-                :name="currentIcon"
-                size="3em"
-                color="primary"
-                class="col"
-              />
-              <q-btn
-                round
-                class="add-button-folder-level"
-                color="white"
-                size="6px"
-              >
-                <q-icon name="add" color="primary" size="1.2rem"></q-icon>
-              </q-btn>
-              <span class="q-mx-md">สร้าง{{ DEPT_NAME[currentDept] }}ใหม่</span>
-            </q-td>
-          </q-card>
         </div>
       </div>
     </div>
   </div>
-  <span class="text-h6 text-weight-light" v-if="currentDept > 2">เอกสาร</span>
+  <div
-  <div class="q-gutter-md q-mt-xs">
+    style="grid-column: 1 / span 5"
-    <div
+    class="text-h6 q-mt-md"
-      v-for="(value, index) in currentFile"
+    v-if="currentDept > 2"
-      :key="value.title"
+  >
-      class="inline-block"
+    เอกสาร
-    >
+  </div>
-      <div class="box border-radius-inherit">
+  <div class="grid q-mt-md">
-        <q-card flat @click="() => getFileInfo(currentFile[index])">
+    <div v-for="value in currentFile">
-          <q-card-section class="column justify-center relative q-px-xl">
+      <div
-            <file-icon
+        :style="{
-              size="preview"
+          position: 'relative',
-              :fileMimeType="value.fileType ? value.fileType : 'unknow'"
+          display: 'flex',
-              ref="fileIconComp"
+          gap: '0.5rem',
-            />
+          flexDirection: 'column',
-            <div
+          alignItems: 'center',
-              class="absolute"
+          padding: '1rem',
-              style="top: 0.5rem; right: 0.5rem"
+          maxWidth: '100%',
-              v-if="props.action"
+        }"
-            >
+        class="box"
-              <file-item-action
+        @click="() => getFileInfo(value)"
-                @edit="
+      >
-                  () =>
+        <div class="q-px-md flex items-center justify-center">
-                    triggerFileEdit(
+          <file-icon
-                      {
+            size="preview"
-                        title: value.title,
+            :fileMimeType="value.fileType ? value.fileType : 'unknow'"
-                        description: value.description,
+          />
-                        keyword: value.keyword.join(','),
+        </div>
-                        category: value.category.join(','),
+        <div
-                      },
+          class="absolute"
-                      value.pathname
+          style="top: 0.5rem; right: 0.5rem"
-                    )
+          v-if="props.action"
-                "
+        >
-                @delete="() => deleteFile(value.pathname)"
+          <file-item-action
-              />
+            @edit="
-            </div>
+              () =>
-            <span class="text-center q-pt-md">{{
+                triggerFileEdit(
-              getFileNameFormat(value.fileName)
+                  {
-            }}</span>
+                    title: value.title,
-          </q-card-section>
+                    description: value.description,
-        </q-card>
+                    keyword: value.keyword.join(','),
+                    category: value.category.join(','),
+                  },
+                  value.pathname,
+                )
+            "
+            @delete="() => deleteFile(value.pathname)"
+          />
+        </div>
+        <div
+          class="text-overflow-handle block q-px-md text-center"
+          style="max-width: 100%"
+        >
+          {{ getFileNameFormat(value.fileName) }}
+        </div>
       </div>
     </div>
-    <div class="inline-block" v-if="props.action && currentDept > 2">
+    <div v-if="props.action && currentDept > 2">
-      <div class="dashed border-radius-inherit">
+      <div
-        <q-card flat @click="() => triggerFileCreate()">
+        :style="{
-          <q-card-section class="column justify-center relative q-px-xl">
+          display: 'flex',
-            <q-icon
+          gap: '0.5rem',
-              name="mdi-file"
+          flexDirection: 'column',
-              class="add-icon"
+          alignItems: 'center',
-              size="6em"
+          padding: '1rem',
-              color="primary"
+          maxWidth: '100%',
-            />
+        }"
-            <q-btn round class="add-button" color="white" size="10px">
+        class="dashed"
-              <q-icon name="add" color="primary" size="1.5rem"></q-icon>
+        @click="() => triggerFileCreate()"
-            </q-btn>
+      >
-            <span class="text-center q-pt-md">สร้างไฟล์ใหม่</span>
+        <div
-          </q-card-section>
+          class="q-px-md flex items-center justify-center"
-        </q-card>
+          style="position: relative"
+        >
+          <q-icon name="mdi-file" class="add-icon" size="6em" color="primary" />
+          <q-btn
+            round
+            color="white"
+            size="10px"
+            style="position: absolute; right: 1.75rem; bottom: 0"
+          >
+            <q-icon name="add" color="primary" size="1.5rem" />
+          </q-btn>
+        </div>
+        <div
+          class="text-overflow-handle block q-px-md text-center"
+          style="max-width: 100%"
+        >
+          สร้างไฟล์ใหม่
+        </div>
       </div>
     </div>
   </div>
 
   <file-form
     :mode="fileFormType"
+    :error="fileFormError"
     v-model:open="fileFormState"
     v-model:title="fileFormData.title"
     v-model:description="fileFormData.description"
     v-model:keyword="fileFormData.keyword"
     v-model:category="fileFormData.category"
+    @filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
     @submit="submitFileForm"
   />
 
@@ -341,11 +363,16 @@ async function submitFileForm(value: {
     v-model:name="folderFormData.name"
     @submit="submitFolderForm"
   />
+
+  <upload-exist-dialog
+    v-model:notification="fileExistNotification"
+    @confirm="() => currentParam && submitFileForm(currentParam, true)"
+    @cancel="() => (currentParam = undefined)"
+  />
 </template>
 
 <style lang="scss" scoped>
 .box {
-  display: inline-block;
   border: 2px solid $separator-color;
   border-radius: 8px;
   cursor: pointer;
@@ -366,8 +393,8 @@ async function submitFileForm(value: {
 
 .add-button {
   position: absolute;
-  top: 75px;
+  top: 50%;
-  right: 70px;
+  right: 40%;
   background-color: white;
 }
 
@@ -383,4 +410,21 @@ async function submitFileForm(value: {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+@media (min-width: $breakpoint-md-min) {
+  .grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.grid .box {
+  position: relative;
+}
 </style>

Services/client/src/components/FileItemAction.vue

@@ -7,7 +7,7 @@ defineEmits(['edit', 'delete'])
     <q-menu auto-close>
       <q-list dense>
         <q-item clickable>
-          <q-item-section @click="() => $emit('edit')">
+          <q-item-section @click.prevent.stop="() => $emit('edit')">
             <div class="row items-center">
               <q-icon name="edit" color="positive" />
               <span class="q-ml-sm">แก้ไข</span>
@@ -15,7 +15,7 @@ defineEmits(['edit', 'delete'])
           </q-item-section>
         </q-item>
         <q-item clickable>
-          <q-item-section @click="() => $emit('delete')">
+          <q-item-section @click.prevent.stop="() => $emit('delete')">
             <div class="row items-center">
               <q-icon name="delete" color="negative" />
               <span class="q-ml-sm">ลบ</span>

Services/client/src/components/FormUpload.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useTreeDataStore } from '@/stores/tree-data'
 import TagInput from '@/components/TagInput.vue'
+
 const { currentPath } = storeToRefs(useTreeDataStore())
 const { uploadFile, checkFile } = useTreeDataStore()
 
@@ -39,7 +40,7 @@ function saveTag() {
 
 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,
@@ -118,7 +119,6 @@ async function handleSubmit(continueUpload: boolean = false) {
 
   <q-dialog
     v-model="notification"
-    persistent
     transition-show="scale"
     transition-hide="scale"
   >

Services/client/src/main.ts

@@ -10,7 +10,6 @@ import quasarUserOptions from './quasar-user-options'
 import router from './router'
 
 import 'quasar/src/css/index.sass'
-import '@vuepic/vue-datepicker/dist/main.css'
 
 const app = createApp(App)
 const pinia = createPinia()
@@ -32,13 +31,6 @@ app.component(
   defineAsyncComponent(() => import('@/components/FullLoader.vue'))
 )
 
-app.component(
-  'datepicker',
-  defineAsyncComponent(() => import('@vuepic/vue-datepicker'))
-)
-
 app.mount('#app')
 
 HttpService.configureAxiosKeycloak()
-
-console.log(import.meta.env)

Services/client/tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {

Services/client/tsconfig.config.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "extends": ["@tsconfig/node18/tsconfig.json", "@vue/tsconfig/tsconfig.json"],
   "include": [
     "vite.config.*",
     "vitest.config.*",