client initial commit

Services/client/src/components/PageLayout.vue

@@ -0,0 +1,122 @@
+<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 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'
+
+const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย', 'ไฟล์']
+
+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 /> -->
+      <div class="bg-white rounded-borders shadow-5 relative">
+        <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"
+                @click="() => gotoParent()"
+              >
+                <q-icon name="arrow_back" size="1rem" color="primary"
+              /></q-btn>
+              <span>{{ DEPT_NAME[currentDept] }}</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>