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'

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

const { isPreview } = storeToRefs(useFileInfoStore())
const { isSearch } = storeToRefs(useSearchDataStore())
const { data, currentDept } = storeToRefs(useTreeDataStore())
const { getCabinet, gotoParent } = useTreeDataStore()
const viewMode = ref<'view_list' | 'view_module'>('view_list')
const inputSearch = ref<string>()
const props = defineProps<{
  mode: 'admin' | 'user'
}>()

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="isPreview === true"/>
      <div class="bg-white rounded-borders shadow-5 relative" v-if="isPreview === false">
        <search-bar v-if="mode === 'user'" />
        <div class="bg-white q-pa-md">
          <div class="row items-center justify-between">
            <span class="text-h6">
              <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>
              <span v-if="isSearch === false">{{ DEPT_NAME[currentDept] }}</span>
              <span v-if="isSearch === true">ผลการค้นหา</span>
              <q-btn
                v-if="mode === 'admin' && viewMode === 'view_module'"
                class="q-px-md q-ml-md"
                label="สร้างตู้เก็บเอกสาร"
                type="submit"
                color="primary"
                dense
                icon="add"
                @click=""
              />
            </span>
            <q-btn
              flat
              color="blue-grey-2"
              :icon="viewMode"
              @click="
                () => {
                  viewMode =
                    viewMode === 'view_list' ? 'view_module' : 'view_list'
                }
              "
            />
          </div>
          <div>
            <file-searched v-if="isSearch === true" />
            <file-item
              :viewMode="viewMode"
              :action="props.mode === 'admin'"
              v-if="isSearch === false"
            />
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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