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

<script lang="ts" setup>
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 './FileItem.vue'
import TreeExplorer from './TreeExplorer.vue'
import FileSearched from './FileSearched.vue'
import ListView from './ListView.vue'
import FolderForm from './FolderForm.vue'
import GlobalErrorDialog from './GlobalErrorDialog.vue'

import SearchBar from '@/modules/01_user/components/SearchBar.vue'
import FileDownload from '@/modules/01_user/components/FileDownload.vue'

const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const

const { isFilePreview } = storeToRefs(useFileInfoStore())
const { isSearch } = storeToRefs(useSearchDataStore())
const { data, currentDept, currentPath } = storeToRefs(useTreeDataStore())
const { createFolder, getCabinet, gotoParent, getFolder } = useTreeDataStore()

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

const folderFormState = ref<boolean>(false)
const folderFormType = ref<'edit' | 'create'>('create')
const folderFormData = ref<{
  name?: string
}>({})

function triggerFolderCreate() {
  folderFormType.value = 'create'
  folderFormData.value = {}
  folderFormState.value = !folderFormState.value
}

async function submitFolderForm(value: {
  mode: 'create' | 'edit'
  name: string
}) {
  if (value.mode === 'create') {
    await createFolder(value.name)
  }
}

onMounted(async () => {
  await getCabinet()

  const sessionCurrentPath = sessionStorage.getItem('currentPath')

  if (sessionCurrentPath) await getFolder(sessionCurrentPath)
})
</script>
<template>
  <section id="header" class="q-px-md q-pt-md q-pb-none">
    <div class="q-my-md row items-center">
      <div class="col">
        <h5 class="q-my-none" v-if="mode === 'admin'">จัดเก็บเอกสาร</h5>
        <h5 class="q-my-none" v-else>สืบค้นผลงาน</h5>
      </div>
      <search-bar :mode="mode" v-if="mode === 'admin'" />
    </div>
  </section>
  <section
    class="row q-col-gutter-md q-pa-md"
    :class="{ reverse: props.mode === 'user' }"
    id="cabinet"
  >
    <div class="col-12 col-md-3">
      <div class="bg-white rounded-borders shadow-5">
        <div
          class="q-px-md q-py-sm text-primary bg-grey-1 row justify-between items-center"
          id="container-header"
        >
          <span
            class="block q-my-sm text-weight-bold pointer"
            @click="
              () => {
                currentPath = ''
                getFolder(currentPath)
              }
            "
            >ตู้จัดเก็บเอกสาร</span
          >
          <q-btn
            v-if="mode === 'admin'"
            dense
            flat
            color="primary"
            icon="add"
            @click.stop="() => triggerFolderCreate()"
            data-testid="createFolder"
          />
        </div>
        <q-separator />
        <div class="q-pa-md">
          <tree-explorer :data="data" :level="1" />
        </div>
      </div>
    </div>
    <div class="col">
      <file-download v-if="isFilePreview === true" />
      <div
        class="bg-white rounded-borders shadow-5 relative"
        v-if="isFilePreview === false"
      >
        <search-bar :mode="mode" v-if="mode === 'user'" />
        <div class="bg-white q-pa-md">
          <div class="row items-center justify-between">
            <span class="text-body1">
              <div class="row items-center">
                <q-btn
                  flat
                  dense
                  class="q-mr-sm q-px-sm"
                  v-if="isSearch == true || currentDept > 0"
                  @click="
                    () => {
                      isSearch
                        ? (isSearch = false)
                        : ((folderFormState = false), gotoParent())
                    }
                  "
                >
                  <q-icon name="arrow_back" size="1rem" color="primary" />
                </q-btn>
                <span v-if="isSearch === true">ผลการค้นหา</span>
                <q-breadcrumbs v-if="isSearch === false" active-color="primary">
                  <q-breadcrumbs-el
                    v-if="currentPath === '/' || !currentPath"
                    label="ตู้เอกสารทั้งหมด"
                  />
                  <q-btn
                    v-if="
                      mode === 'admin' &&
                      viewMode === 'view_module' &&
                      currentDept === 0
                    "
                    class="q-px-md q-ml-md al"
                    label="สร้างตู้เก็บเอกสาร"
                    type="submit"
                    color="primary"
                    dense
                    icon="add"
                    @click.stop="() => triggerFolderCreate()"
                    id="createFolder"
                  />
                  <q-breadcrumbs-el
                    class="text-primary pointer"
                    v-for="(fragments, index) in currentPath
                      .split('/')
                      .filter(Boolean)"
                    :label="fragments"
                    @click="
                      () => {
                        currentPath =
                          currentPath
                            .split('/')
                            .filter(Boolean)
                            .slice(0, index + 1)
                            .join('/') + '/'

                        getFolder(currentPath)
                      }
                    "
                  />
                </q-breadcrumbs>
              </div>
            </span>
            <div>
              <q-btn
                flat
                dense
                color="blue-grey-2"
                icon="refresh"
                class="q-mr-sm"
                @click="() => getFolder(currentPath)"
                id="getFolder"
              />
              <q-btn
                flat
                dense
                color="blue-grey-2"
                :icon="viewMode"
                @click="
                  () => {
                    viewMode =
                      viewMode === 'view_list' ? 'view_module' : 'view_list'
                  }
                "
                id="viewMode"
              />
            </div>
          </div>
          <div>
            <file-searched
              :viewMode="viewMode"
              :action="props.mode === 'admin'"
              v-if="isSearch === true"
            />
            <file-item
              :viewMode="viewMode"
              :action="props.mode === 'admin'"
              v-if="isSearch === false && viewMode === 'view_list'"
            />
            <list-view
              v-if="isSearch === false && viewMode === 'view_module'"
              :mode="mode"
            />
          </div>
        </div>
      </div>
    </div>
  </section>

  <folder-form
    :mode="folderFormType"
    :tree="DEPT_NAME[currentDept]"
    v-if="currentDept < 4"
    v-model:open="folderFormState"
    v-model:name="folderFormData.name"
    @submit="submitFolderForm"
  />

  <global-error-dialog />
</template>

<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}
</style>