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

<script lang="ts" setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
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 FolderFormWrapper from './FolderFormWrapper.vue'
import GlobalErrorDialog from './GlobalErrorDialog.vue'

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

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

const { isFilePreview } = storeToRefs(useFileInfoStore())
const { isSearch } = storeToRefs(useSearchDataStore())

const storageStore = useStorage()
const { tree, currentInfo } = storeToRefs(storageStore)
const { goto, gotoParent } = storageStore

const viewMode = ref<'view_list' | 'view_module'>('view_list')

const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
</script>
<template>
  <folder-form-wrapper ref="folderFormComponent" />
  <global-error-dialog />

  <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="
              () => {
                goto()
                isSearch = false
                isFilePreview = false
              }
            "
            >ตู้จัดเก็บเอกสาร</span
          >
          <q-btn
            v-if="mode === 'admin'"
            dense
            flat
            color="primary"
            icon="add"
            data-testid="createFolder"
            @click.stop="() => folderFormComponent?.triggerFolderCreate()"
          />
        </div>
        <q-separator />
        <div class="q-pa-md">
          <tree-explorer :data="tree" />
        </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 || currentInfo.dept > 0"
                  @click="
                    () => {
                      isSearch ? (isSearch = false) : gotoParent()
                    }
                  "
                >
                  <q-icon name="arrow_back" size="1rem" color="primary" />
                </q-btn>
                <span v-if="isSearch">ผลการค้นหา</span>
                <q-breadcrumbs
                  v-if="!isSearch"
                  active-color="grey"
                  separator-color="grey"
                >
                  <q-breadcrumbs-el
                    v-if="currentInfo.path === '/' || !currentInfo.path"
                    label="ตู้เอกสารทั้งหมด"
                  />
                  <q-btn
                    dense
                    id="createFolder"
                    class="q-px-md q-ml-md al"
                    label="สร้างตู้เก็บเอกสาร"
                    type="submit"
                    color="primary"
                    icon="add"
                    v-if="
                      mode === 'admin' &&
                      viewMode === 'view_module' &&
                      currentInfo.dept === 0
                    "
                    @click.stop="
                      () => folderFormComponent?.triggerFolderCreate()
                    "
                  />
                  <q-breadcrumbs-el
                    class="pointer"
                    v-for="(fragments, index) in currentInfo.path
                      .split('/')
                      .filter(Boolean)"
                    :label="fragments"
                    @click="
                      () => {
                        goto(
                          currentInfo.path
                            .split('/')
                            .filter(Boolean)
                            .slice(0, index + 1)
                            .join('/') + '/',
                        )
                      }
                    "
                  />
                </q-breadcrumbs>
              </div>
            </span>
            <div>
              <q-btn
                flat
                dense
                id="getFolder"
                color="blue-grey-2"
                icon="refresh"
                class="q-mr-sm"
                @click="() => goto(currentInfo.path, true)"
              />
              <q-btn
                flat
                dense
                id="viewMode"
                color="blue-grey-2"
                :icon="viewMode"
                @click="
                  () => {
                    viewMode =
                      viewMode === 'view_list' ? 'view_module' : 'view_list'
                  }
                "
              />
            </div>
          </div>
          <div>
            <file-searched
              :viewMode="viewMode"
              :action="props.mode === 'admin'"
              v-if="isSearch"
            />
            <file-item
              :viewMode="viewMode"
              :action="props.mode === 'admin'"
              v-if="!isSearch && viewMode === 'view_list'"
            />
            <list-view
              v-if="!isSearch && viewMode === 'view_module'"
              :mode="mode"
            />
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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