From 0511d4285f735b71adf7d95a1199051e8f8c41a1 Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Thu, 30 Nov 2023 16:47:29 +0700
Subject: [PATCH 1/2] fix: check fileName2long? & close after submit

---
 Services/client/src/components/FileForm.vue   | 22 ++++++++++++++-----
 Services/client/src/components/FileItem.vue   | 10 +++++++--
 Services/client/src/components/FolderForm.vue |  2 +-
 Services/client/src/stores/tree-data.ts       | 15 ++++++++-----
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/Services/client/src/components/FileForm.vue b/Services/client/src/components/FileForm.vue
index 9d4bc3e..0d9f495 100644
--- a/Services/client/src/components/FileForm.vue
+++ b/Services/client/src/components/FileForm.vue
@@ -4,7 +4,10 @@ import { onMounted, onUnmounted, ref } from 'vue'
 const props = withDefaults(
   defineProps<{
     open: boolean
-    error: { fileExist?: boolean }
+    error: {
+      fileExist?: boolean
+      fileName2Long?: boolean
+    }
     mode: 'create' | 'edit'
     title?: string
     description?: string
@@ -50,7 +53,7 @@ function submit() {
     keyword: props.keyword ?? '',
     category: props.category ?? '',
   })
-  reset()
+  emit('update:open', !open), reset()
 }
 
 onMounted(() => window.addEventListener('keydown', keydown))
@@ -100,9 +103,13 @@ const file = ref<File | undefined>()
           v-model="file"
           @update:model-value="(v) => $emit('filechange', v.name)"
           :label="file?.name ? undefined : 'เลือกไฟล์'"
-          :error="!!error.fileExist"
+          :error="!!error.fileExist || !!error.fileName2Long"
           :error-message="
-            error.fileExist ? 'พบไฟล์ในระบบ ข้อมูลในระบบจะถูกเขียนทับ' : ''
+            error.fileExist
+              ? 'พบไฟล์ในระบบ ข้อมูลในระบบจะถูกเขียนทับ'
+              : error.fileName2Long
+                ? 'ไม่สามารถเพิ่มไฟล์ที่ชื่อยาวเกิน 85 ตัวอักษรได้'
+                : ''
           "
         >
           <template v-slot:prepend>
@@ -161,7 +168,12 @@ const file = ref<File | undefined>()
       </section>
 
       <section :style="{ display: 'flex', gap: '.5rem' }">
-        <q-btn label="บันทึก" type="submit" color="primary" />
+        <q-btn
+          label="บันทึก"
+          type="submit"
+          color="primary"
+          :disable="error.fileName2Long"
+        />
         <q-btn
           label="ยกเลิก"
           type="reset"
diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 79c76bb..8b17e66 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -30,6 +30,7 @@ const {
   updateFile,
   deleteFile,
   checkFile,
+  checkFileName,
 } = useTreeDataStore()
 
 const currentIcon = computed(() =>
@@ -60,7 +61,7 @@ const fileFormData = ref<{
   category?: string
 }>({})
 const fileFormType = ref<'edit' | 'create'>('create')
-const fileFormError = ref<{ fileExist?: boolean }>({})
+const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
 const fileExistNotification = ref<boolean>(false)
 
 function triggerFolderDelete(pathname: string) {
@@ -368,7 +369,12 @@ async function submitFileForm(
     v-model:description="fileFormData.description"
     v-model:keyword="fileFormData.keyword"
     v-model:category="fileFormData.category"
-    @filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
+    @filechange="
+      (name: string) => (
+        (fileFormError.fileExist = checkFile(name)),
+        (fileFormError.fileName2Long = checkFileName(name))
+      )
+    "
     @submit="submitFileForm"
   />
 
diff --git a/Services/client/src/components/FolderForm.vue b/Services/client/src/components/FolderForm.vue
index 9979f05..6f4cc3c 100644
--- a/Services/client/src/components/FolderForm.vue
+++ b/Services/client/src/components/FolderForm.vue
@@ -31,7 +31,7 @@ function submit() {
     mode: props.mode,
     name: props.name,
   })
-  reset()
+  emit('update:open', !open), reset()
 }
 
 onMounted(() => window.addEventListener('keydown', keydown))
diff --git a/Services/client/src/stores/tree-data.ts b/Services/client/src/stores/tree-data.ts
index ba0f8ea..7cee9f0 100644
--- a/Services/client/src/stores/tree-data.ts
+++ b/Services/client/src/stores/tree-data.ts
@@ -96,7 +96,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     currentPath.value = pathname
 
     const res = await axiosClient.get<EhrFolder[]>(
-      `${apiEndpoint}${requestPath}`
+      `${apiEndpoint}${requestPath}`,
     )
 
     const list = res.data.map((v) => ({
@@ -248,7 +248,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       description: string
       keyword: string
       category: string
-    }
+    },
   ) {
     loader.show()
 
@@ -268,7 +268,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       {
         file: file.name,
         ...metadata,
-      }
+      },
     )
 
     if (res && res.data.upload) {
@@ -297,7 +297,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       keyword: string
       category: string
     },
-    file?: File
+    file?: File,
   ) {
     loader.show()
 
@@ -312,7 +312,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
 
     const res = await axiosClient.patch<{ upload: string }>(
       `${apiEndpoint}${requestPath}`,
-      { file: file?.name, ...metadata }
+      { file: file?.name, ...metadata },
     )
 
     if (res && res.data.upload) {
@@ -362,6 +362,10 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     return currentFile.value.some((element) => element.fileName === fileName)
   }
 
+  function checkFileName(fileName: string) {
+    return fileName.length >= 85
+  }
+
   return {
     data,
     currentFolder,
@@ -380,5 +384,6 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     deleteFolder,
     editFolder,
     checkFile,
+    checkFileName,
   }
 })

From c4f63169684cbb800f0f41e38a8060df4b79f26e Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Thu, 30 Nov 2023 16:49:13 +0700
Subject: [PATCH 2/2] refactor: search result (list view) & clear search

---
 .../client/src/components/FileSearched.vue    | 166 +++++++++++++++---
 Services/client/src/components/PageLayout.vue |   7 +-
 .../modules/01_user/components/SearchBar.vue  |   9 +-
 3 files changed, 152 insertions(+), 30 deletions(-)

diff --git a/Services/client/src/components/FileSearched.vue b/Services/client/src/components/FileSearched.vue
index 1c7ce4d..1453ec3 100644
--- a/Services/client/src/components/FileSearched.vue
+++ b/Services/client/src/components/FileSearched.vue
@@ -3,42 +3,128 @@ import { storeToRefs } from 'pinia'
 import { useSearchDataStore } from '@/stores/searched-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
 import FileIcon from '@/components/FileIcon.vue'
+import type { QTableProps } from 'quasar'
+
+defineProps<{
+  viewMode: 'view_list' | 'view_module'
+}>()
 
 const { foundFile } = storeToRefs(useSearchDataStore())
-const { getFileInfo } = useFileInfoStore()
+const { getFileInfo, getSize, getType, getFileNameFormat } = useFileInfoStore()
+const columns: QTableProps['columns'] = [
+  {
+    name: 'name',
+    required: true,
+    label: 'ชื่อไฟล์',
+    align: 'left',
+    field: (row) => row.fileName,
+    format: (val) => `${val}`,
+    sortable: true,
+    style: 'width: 200px',
+  },
+  {
+    name: 'title',
+    align: 'center',
+    label: 'ชื่อเรื่อง',
+    field: 'title',
+    style: 'width: 200px',
+    sortable: true,
+  },
+  {
+    name: 'fileType',
+    align: 'center',
+    label: 'ประเภทของไฟล์',
+    field: 'fileType',
+    sortable: true,
+    style: 'width: 200px',
+  },
+  {
+    name: 'actions',
+    align: 'center',
+    label: '',
+    field: '',
+    style: 'width: 20px',
+  },
+]
 </script>
 
 <template>
-  <div class="q-mt-md" v-if="foundFile.length > 0">
-    <div class="q-gutter-md">
-      <div
-        v-for="(value, index) in foundFile"
-        :key="value.title"
-        class="inline-block"
-      >
-        <div class="box border-radius-inherit">
-          <q-card
-            flat
-            @click="
-              () => {
-                getFileInfo(foundFile[index])
-              }
-            "
+  <div v-if="viewMode === 'view_list' && foundFile.length > 0">
+    <div class="grid q-mt-md">
+      <div v-for="(value, index) in foundFile" :key="value.title">
+        <div
+          :style="{
+            position: 'relative',
+            display: 'flex',
+            gap: '0.5rem',
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: '1rem',
+            maxWidth: '100%',
+          }"
+          class="box"
+          @click="() => getFileInfo(foundFile[index])"
+        >
+          <div class="q-px-md flex items-center justify-center">
+            <file-icon
+              size="preview"
+              :fileMimeType="value.fileType ? value.fileType : 'unknow'"
+            />
+          </div>
+          <div
+            class="text-overflow-handle block q-px-md text-center"
+            style="max-width: 100%"
           >
-            <q-card-section class="column justify-center relative q-px-xl">
-              <file-icon
-                size="preview"
-                :fileMimeType="value.fileType"
-                ref="fileIconComp"
-              />
-              <span class="text-center q-pt-md">{{ value.title }}</span>
-            </q-card-section>
-          </q-card>
+            {{ getFileNameFormat(value.fileName) }}
+          </div>
         </div>
       </div>
     </div>
   </div>
 
+  <div v-if="viewMode === 'view_module' && foundFile.length > 0">
+    <q-table
+      flat
+      bordered
+      :rows="foundFile"
+      :columns="columns"
+      row-key="name"
+      hide-bottom
+      :rows-per-page-options="[0]"
+      class="cursor"
+    >
+      <template v-slot:body-cell-name="nameData">
+        <q-td style="width: 50%" @click="() => getFileInfo(nameData.row)">
+          <file-icon size="list" :fileMimeType="nameData.row.fileType" />
+          {{ nameData.row.fileName }}
+        </q-td>
+      </template>
+
+      <template v-slot:body-cell-fileType="typeData">
+        <q-td>
+          <div class="justify-center">
+            {{ getType(typeData.row.fileType) }}
+          </div>
+        </q-td>
+      </template>
+
+      <template v-slot:body-cell-actions="sizeData">
+        <q-td class="justify-center">
+          <div>
+            <q-icon class="q-ma-sm" name="info" size="2em" color="primary" />
+            <q-tooltip
+              anchor="center left"
+              self="center right"
+              :offset="[5, 1]"
+            >
+              {{ getSize(sizeData.row.fileSize) }}
+            </q-tooltip>
+          </div>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+
   <div class="q-mt-md" v-if="foundFile.length == 0">
     <span>ไม่พบรายการที่ค้นหา</span>
   </div>
@@ -46,9 +132,35 @@ const { getFileInfo } = useFileInfoStore()
 
 <style scoped lang="scss">
 .box {
-  display: inline-block;
-  border: 2px solid #f1f2f4;
+  border: 2px solid $separator-color;
   border-radius: 8px;
   cursor: pointer;
 }
+
+.cursor {
+  cursor: pointer;
+}
+
+.text-overflow-handle {
+  overflow: hidden;
+  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>
diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue
index 0b18f17..6623aa7 100644
--- a/Services/client/src/components/PageLayout.vue
+++ b/Services/client/src/components/PageLayout.vue
@@ -163,13 +163,16 @@ onMounted(getCabinet)
             </div>
           </div>
           <div>
-            <file-searched v-if="isSearch === true" />
+            <file-searched :viewMode="viewMode" v-if="isSearch === true" />
             <file-item
               :viewMode="viewMode"
               :action="props.mode === 'admin'"
               v-if="isSearch === false && viewMode === 'view_list'"
             />
-            <list-view v-if="viewMode === 'view_module'" :mode="mode" />
+            <list-view
+              v-if="isSearch === false && viewMode === 'view_module'"
+              :mode="mode"
+            />
           </div>
         </div>
       </div>
diff --git a/Services/client/src/modules/01_user/components/SearchBar.vue b/Services/client/src/modules/01_user/components/SearchBar.vue
index 13db20d..71e1a7b 100644
--- a/Services/client/src/modules/01_user/components/SearchBar.vue
+++ b/Services/client/src/modules/01_user/components/SearchBar.vue
@@ -40,6 +40,10 @@ async function searchSubmit() {
       field: searchData.value.field,
       value: searchData.value.value,
     })
+    submitSearchData.value.AND.push({
+      field: 'fileName',
+      value: searchData.value.value,
+    })
 
     if (isAdvSearchCall.value && advSearchComp.value) {
       const advField = advSearchComp.value.advSearchDataField
@@ -71,6 +75,9 @@ async function searchSubmit() {
         `${import.meta.env.VITE_API_ENDPOINT}/search`,
         submitSearchData.value
       )
+      console.log(submitSearchData.value);
+      console.log(res.data);
+      
       getFoundFile(res.data)
       isSearch.value = true
     } catch (error) {
@@ -108,7 +115,7 @@ async function searchSubmit() {
           <template v-slot:append>
             <q-icon
               name="close"
-              @click="() => (searchData.value = '')"
+              @click="() => (searchData.value = '', isSearch = false)"
               class="cursor-pointer"
             />
           </template>