refactor: search result (list view) & clear search

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 v-if="viewMode === 'view_list' && foundFile.length > 0">
-    <div class="q-gutter-md">
+    <div class="grid q-mt-md">
-      <div
+      <div v-for="(value, index) in foundFile" :key="value.title">
-        v-for="(value, index) in foundFile"
+        <div
-        :key="value.title"
+          :style="{
-        class="inline-block"
+            position: 'relative',
-      >
+            display: 'flex',
-        <div class="box border-radius-inherit">
+            gap: '0.5rem',
-          <q-card
+            flexDirection: 'column',
-            flat
+            alignItems: 'center',
-            @click="
+            padding: '1rem',
-              () => {
+            maxWidth: '100%',
-                getFileInfo(foundFile[index])
+          }"
-              }
+          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">
+            {{ getFileNameFormat(value.fileName) }}
-              <file-icon
+          </div>
-                size="preview"
-                :fileMimeType="value.fileType"
-                ref="fileIconComp"
-              />
-              <span class="text-center q-pt-md">{{ value.title }}</span>
-            </q-card-section>
-          </q-card>
         </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 $separator-color;
-  border: 2px solid #f1f2f4;
   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>

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>

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>