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 '@/components/FileItem.vue'
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'
import FolderForm from './FolderForm.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 inputSearch = ref<string>()
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(getCabinet)
</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>
      <div class="col-3" v-if="mode === 'admin'">
        <q-input
          rounded
          outlined
          dense
          label="ค้นหา"
          bg-color="white"
          v-model="inputSearch"
        >
          <template v-slot:append><q-icon name="search" /></template>
        </q-input>
      </div>
    </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"
          id="container-header"
        >
          <span class="block q-my-sm text-weight-bold">ตู้จัดเก็บเอกสาร</span>
        </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 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="currentDept > 0 && isSearch === false"
                  @click="() => gotoParent()"
                >
                  <q-icon name="arrow_back" size="1rem" color="primary" />
                </q-btn>
                <q-breadcrumbs v-if="isSearch === false" active-color="primary">
                  <q-breadcrumbs-el
                    v-if="currentPath === '/' || !currentPath"
                    label="ตู้เอกสารทั้งหมด"
                  />
                  <q-breadcrumbs-el
                    class="text-black"
                    v-for="fragments in currentPath.split('/').filter(Boolean)"
                    :label="fragments"
                  />
                </q-breadcrumbs>
              </div>
              <span v-if="isSearch === true">ผลการค้นหา</span>
              <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="() => triggerFolderCreate()"
              />
            </span>
            <div>
              <q-btn
                flat
                dense
                color="blue-grey-2"
                icon="refresh"
                class="q-mr-sm"
                @click="() => getFolder(currentPath)"
              />
              <q-btn
                flat
                dense
                color="blue-grey-2"
                :icon="viewMode"
                @click="
                  () => {
                    viewMode =
                      viewMode === 'view_list' ? 'view_module' : 'view_list'
                  }
                "
              />
            </div>
          </div>
          <div>
            <file-searched v-if="isSearch === true" />
            <file-item
              :viewMode="viewMode"
              :action="props.mode === 'admin'"
              v-if="isSearch === false && viewMode === 'view_list'"
            />
            <list-view v-if="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"
  />
</template>

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