refactor: mode ListView

Services/client/src/components/ListView.vue

@@ -0,0 +1,246 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import type { QTableProps } from 'quasar'
+import { useTreeDataStore } from '@/stores/tree-data'
+import FileItem from '@/components/FileItem.vue'
+
+const { listDataFile, listDataFolder, currentDept } = storeToRefs(
+  useTreeDataStore()
+)
+const { getFolder } = useTreeDataStore()
+
+const currentLevel = computed(() =>
+  currentDept.value === 0
+    ? 'ตู้จัดเก็บเอกสาร'
+    : currentDept.value === 1
+    ? 'ลิ้นชัก'
+    : currentDept.value === 2
+    ? 'แฟ้ม'
+    : 'แฟ้มย่อย'
+)
+
+const currentIcon = computed(() =>
+  currentDept.value === 0
+    ? 'mdi-file-cabinet'
+    : currentDept.value === 1
+    ? 'inbox'
+    : 'o_folder_open'
+)
+const columnsFolder: QTableProps['columns'] = [
+  {
+    name: 'name',
+    required: true,
+    label: 'ชื่อ',
+    align: 'left',
+    field: (row) => row.name,
+    format: (val) => `${val}`,
+    sortable: true,
+    style: 'width: 1000px',
+  },
+  {
+    name: 'createdBy',
+    align: 'center',
+    label: 'สร้างโดย',
+    field: 'createdBy',
+    style: 'width: 20px',
+
+    sortable: true,
+  },
+  {
+    name: 'createdBy',
+    align: 'center',
+    label: 'วันที่สร้าง',
+    field: 'createdAt',
+    sortable: true,
+    style: 'width: 20px',
+  },
+  {
+    name: 'actions',
+    align: 'center',
+    label: '',
+    field: '',
+    style: 'width: 5px',
+  },
+]
+
+const columnsFile: QTableProps['columns'] = [
+  {
+    name: 'fileName',
+    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-pa-md">
+    <div class="q-gutter-sm">
+      <div
+        class="flex flex-break d justify-between space-between"
+        v-if="currentDept >= 1"
+      >
+        <div>
+          <span class="text-h6">{{ currentLevel }}</span>
+        </div>
+        <div>
+          <q-btn
+            outline
+            push
+            class="q-px-md q-ml-md q-py-sm"
+            :label="'สร้าง' + currentLevel"
+            type="submit"
+            color="primary"
+            dense
+            icon="add"
+            @click=""
+          />
+        </div>
+      </div>
+      <q-table
+        flat
+        bordered
+        :rows="listDataFolder"
+        :columns="columnsFolder"
+        row-key="name"
+        hide-bottom
+        :rows-per-page-options="[0]"
+      >
+        <template v-slot:body-cell-name="nameRow">
+          <q-td
+            @click="
+              () => {
+                getFolder(nameRow.row.pathname)
+              }
+            "
+          >
+            <q-icon :name="currentIcon" size="2em" color="primary" />
+            {{ nameRow.row.name }}
+          </q-td>
+        </template>
+
+        <template v-slot:body-cell-actions="actionsRow">
+          <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]"
+              >
+                {{ actionsRow.row.name }}
+              </q-tooltip>
+            </div>
+            <div>
+              <q-btn flat color="positive" dense icon="edit" @click="" />
+              <q-btn flat color="negative" dense icon="delete" @click="" />
+            </div>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+  </div>
+
+  <div class="q-pa-md" v-if="currentDept >= 3">
+    <div class="q-gutter-sm">
+      <div class="flex flex-break d justify-between space-between">
+        <div>
+          <span class="text-h6">เอกสาร</span>
+        </div>
+        <div>
+          <q-btn
+            outline
+            push
+            class="q-px-md q-ml-md q-py-sm"
+            label="สร้างเอกสาร"
+            type="submit"
+            color="primary"
+            dense
+            icon="add"
+            @click=""
+          />
+        </div>
+      </div>
+      <q-table
+        flat
+        bordered
+        :rows="listDataFile"
+        :columns="columnsFile"
+        row-key="name"
+        hide-bottom
+        :rows-per-page-options="[0]"
+      >
+        <template v-slot:body-cell-name="nameRow">
+          <q-td
+            @click="
+              () => {
+                getFolder(nameRow.row.pathname)
+              }
+            "
+          >
+            <q-icon :name="currentIcon" size="2em" color="primary" />
+            {{ nameRow.row.name }}
+          </q-td>
+        </template>
+
+        <template v-slot:body-cell-actions="actionsRow">
+          <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]"
+              >
+                {{ actionsRow.row.fileSize }}
+              </q-tooltip>
+            </div>
+            <div>
+              <q-btn flat color="positive" dense icon="edit" @click="" />
+              <q-btn flat color="negative" dense icon="delete" @click="" />
+            </div>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+  </div>
+
+  <file-item viewMode="view_list" :action="true" />
+</template>
+
+<style lang="scss" scoped>
+.justify-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

Services/client/src/components/PageLayout.vue

@@ -9,6 +9,7 @@ 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'
+import ListView from '@/components/ListView.vue'
 
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย', 'ไฟล์']
 
@@ -83,8 +84,8 @@ onMounted(getCabinet)
               <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"
+                v-if="mode === 'admin' && viewMode === 'view_module' && currentDept === 0"
+                class="q-px-md q-ml-md al"
                 label="สร้างตู้เก็บเอกสาร"
                 type="submit"
                 color="primary"
@@ -110,8 +111,9 @@ onMounted(getCabinet)
             <file-item
               :viewMode="viewMode"
               :action="props.mode === 'admin'"
-              v-if="isSearch === false"
+              v-if="isSearch === false && viewMode === 'view_list'"
             />
+            <list-view v-if="viewMode === 'view_module'" :mode="mode" />
           </div>
         </div>
       </div>

Services/client/src/services/HttpService.ts

@@ -11,7 +11,6 @@ const HttpMethods = {
 const _axios = axios.create()
 const cb = (config: InternalAxiosRequestConfig) => {
   config.headers.Authorization = `Bearer ${KeyCloakService.GetAccesToken()}`
-  console.log(config.headers)
   return config
 }
 

Services/client/src/stores/tree-data.ts

@@ -47,7 +47,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
   const currentFile = ref<EhrFile[]>([])
   const currentPath = ref<string>('')
   const currentDept = ref<number>(0)
-
+  const listDataFolder = ref<TreeDataFolder[]>()
+  const listDataFile = ref<EhrFile[]>()
   async function getCabinet() {
     const res = await axiosClient.get<EhrFolder[]>(`${apiEndpoint}cabinet`)
 
@@ -56,6 +57,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       status: false,
       folder: [],
     }))
+
+    listDataFolder.value = data.value
   }
 
   async function getFolder(pathname: string, updateStatus = true) {
@@ -129,6 +132,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
 
     await getFile(pathname)
 
+    listDataFolder.value = currentFolder.value
+
     return loader.hide()
   }
 
@@ -150,6 +155,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     const res = await axiosClient.get<EhrFile[]>(`${apiEndpoint}${requestPath}`)
 
     currentFile.value = res.data
+    listDataFile.value = currentFile.value
 
     return loader.hide()
   }
@@ -237,6 +243,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     currentFolder,
     currentFile,
     currentDept,
+    listDataFolder,
+    listDataFile,
     getCabinet,
     getFolder,
     gotoParent,