hrms-edm/Services/client/src/components/ListView.vue

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import type { QTableProps } from 'quasar'
import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
import { useFileInfoStore } from '@/stores/file-info-data'
import FromEdit from '@/components/FromEdit.vue'
import FileIcon from '@/components/FileIcon.vue'
import FormUpload from '@/components/FormUpload.vue'

const { deleteFolder } = useTreeDataStore()
const { getFormatDate, getSize, getType } = useFileInfoStore()
const { listDataFile, listDataFolder, currentDept } = storeToRefs(
  useTreeDataStore()
)
const { getFolder } = useTreeDataStore()
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
const drawer = ref<boolean>(false)
const drawerFile = ref<boolean>(false)
const drawerStatus = ref<'edit' | 'create'>('create')
const editPathname = ref<string>('')

const props = defineProps<{
  mode: 'admin' | 'user'
}>()

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: 'createdAt',
    align: 'center',
    label: 'วันที่สร้าง',
    field: 'createdAt',
    sortable: true,
    style: 'width: 20px',
  },
  {
    name: 'actions',
    align: 'center',
    label: '',
    field: '',
    style: 'width: 5px',
  },
]

const columnsFile: 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',
  },
]

const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
  getFolder(row.pathname)
}
</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
            v-if="props.mode == 'admin' && currentDept != 4"
            outline
            push
            class="q-px-md q-ml-md q-py-sm"
            :label="'สร้าง' + currentLevel"
            type="submit"
            color="primary"
            dense
            icon="add"
            @click="
              () => {
                drawer = !drawer
                drawerStatus = 'create'
                drawerFile = false
              }
            "
          />
        </div>
      </div>
      <q-table
        flat
        bordered
        :rows="listDataFolder"
        :columns="columnsFolder"
        row-key="name"
        hide-bottom
        :rows-per-page-options="[0]"
        @row-click="onRowClick"
        class="cursor"
      >
        <template v-slot:body-cell-name="nameRow">
          <q-td>
            <q-icon :name="currentIcon" size="2em" color="primary" />
            {{ nameRow.row.name }}
          </q-td>
        </template>
        <template v-slot:body-cell-createdAt="createdAtRow">
          <q-td>
            <div class="justify-center">
              {{ getFormatDate(createdAtRow.row.createdAt) }}
            </div>
          </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 v-if="props.mode === 'admin'">
              <q-btn
                flat
                color="positive"
                dense
                icon="edit"
                @click.stop="
                  () => {
                    drawer = !drawer
                    drawerStatus = 'edit'
                    editPathname = actionsRow.row.pathname
                  }
                "
              />
              <q-btn
                flat
                color="negative"
                dense
                icon="delete"
                @click.stop="() => deleteFolder(actionsRow.row.pathname)"
              />
            </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
            v-if="props.mode == 'admin'"
            outline
            push
            class="q-px-md q-ml-md q-py-sm"
            label="สร้างเอกสาร"
            type="submit"
            color="primary"
            dense
            icon="add"
            @click="
              () => {
                drawerFile = !drawerFile
                drawer = false
              }
            "
          />
        </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)
              }
            "
          >
            <file-icon size="list" :fileMimeType="nameRow.row.fileType" />
            {{ nameRow.row.fileName }}
          </q-td>
        </template>

        <template v-slot:body-cell-fileType="fileTypeRow">
          <q-td>
            <div class="justify-center">
              {{ getType(fileTypeRow.row.fileType) }}
            </div>
          </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]"
              >
                {{ getSize(actionsRow.row.fileSize) }}
              </q-tooltip>
            </div>
            <div v-if="props.mode === 'admin'">
              <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>

  <from-edit
    v-if="drawer"
    :drawer="drawer"
    :drawerStatus="drawerStatus"
    :DEPT_NAME="DEPT_NAME"
    :currentDept="currentDept"
    :editPathname="editPathname"
    @update:drawer="() => (drawer = false)"
  />
  <form-upload
    :drawerFile="drawerFile"
    @update:drawerFile="() => (drawerFile = false)"
  />
</template>

<style lang="scss" scoped>
.justify-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cursor {
  cursor: pointer;
}
</style>