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>