refactor: click file 2 preview & clean search comp

Services/client/src/components/FileItem.vue

@@ -4,7 +4,10 @@ import { storeToRefs } from 'pinia'
 
 import FileItemAction from '@/components/FileItemAction.vue'
 import { useTreeDataStore } from '@/stores/tree-data'
+import { useFileInfoStore } from '@/stores/file-info-data'
 
+const { isPreview } = storeToRefs(useFileInfoStore())
+const { getFileInfo } = useFileInfoStore()
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
 
 const { currentFolder, currentFile, currentDept } = storeToRefs(
@@ -113,9 +116,21 @@ const props = withDefaults(
   </div>
   <div class="q-mt-md">
     <div class="q-gutter-md">
-      <div v-for="value in currentFile" :key="value.title" class="inline-block">
+      <div
+        v-for="(value, index) in currentFile"
+        :key="value.title"
+        class="inline-block"
+      >
         <div class="box border-radius-inherit">
-          <q-card flat @click="">
+          <q-card
+            flat
+            @click="
+              () => {
+                getFileInfo(currentFile[index])
+                isPreview = true
+              }
+            "
+          >
             <q-card-section class="column justify-center relative q-px-xl">
               <q-icon name="description" size="6em" color="primary" />
               <div

Services/client/src/components/FileSearched.vue

@@ -1,16 +1,31 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useSearchDataStore } from '@/stores/searched-data'
+import { useFileInfoStore } from '@/stores/file-info-data'
 
 const { foundFile } = storeToRefs(useSearchDataStore())
+const { isPreview } = storeToRefs(useFileInfoStore())
+const { getFileInfo } = useFileInfoStore()
 </script>
 
 <template>
   <div class="q-mt-md" v-if="foundFile.length > 0">
     <div class="q-gutter-md">
-      <div v-for="value in foundFile" :key="value.title" class="inline-block">
+      <div
+        v-for="(value, index) in foundFile"
+        :key="value.title"
+        class="inline-block"
+      >
         <div class="box border-radius-inherit">
-          <q-card flat @click="">
+          <q-card
+            flat
+            @click="
+              () => {
+                getFileInfo(foundFile[index])
+                isPreview = true
+              }
+            "
+          >
             <q-card-section class="column justify-center relative q-px-xl">
               <q-icon name="description" size="6em" color="primary" />
               <span class="text-center q-pt-md">{{ value.title }}</span>

Services/client/src/components/PageLayout.vue

@@ -3,13 +3,16 @@ import { onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useTreeDataStore } from '@/stores/tree-data'
 import { useSearchDataStore } from '@/stores/searched-data'
+import { useFileInfoStore } from '@/stores/file-info-data'
 import FileItem from '@/components/FileItem.vue'
 import TreeExplorer from '@/components/TreeExplorer.vue'
 import SearchBar from '@/modules/01_user/components/SearchBar.vue'
 import FileSearched from '@/components/FileSearched.vue'
+import FileDownload from '@/modules/01_user/components/FileDownload.vue'
 
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย', 'ไฟล์']
 
+const { isPreview } = storeToRefs(useFileInfoStore())
 const { isSearch } = storeToRefs(useSearchDataStore())
 const { data, currentDept } = storeToRefs(useTreeDataStore())
 const { getCabinet, gotoParent } = useTreeDataStore()
@@ -62,8 +65,8 @@ onMounted(getCabinet)
       </div>
     </div>
     <div class="col">
-      <!-- <file-download /> -->
-      <div class="bg-white rounded-borders shadow-5 relative">
+      <file-download v-if="isPreview === true"/>
+      <div class="bg-white rounded-borders shadow-5 relative" v-if="isPreview === false">
         <search-bar v-if="mode === 'user'" />
         <div class="bg-white q-pa-md">
           <div class="row items-center justify-between">
@@ -72,12 +75,13 @@ onMounted(getCabinet)
                 flat
                 dense
                 class="q-mr-sm q-px-sm"
-                v-if="currentDept > 0"
+                v-if="currentDept > 0 && isSearch === false"
                 @click="() => gotoParent()"
               >
                 <q-icon name="arrow_back" size="1rem" color="primary"
               /></q-btn>
-              <span>{{ DEPT_NAME[currentDept] }}</span>
+              <span v-if="isSearch === false">{{ DEPT_NAME[currentDept] }}</span>
+              <span v-if="isSearch === true">ผลการค้นหา</span>
               <q-btn
                 v-if="mode === 'admin' && viewMode === 'view_module'"
                 class="q-px-md q-ml-md"