From 3553164a8aaf8651a32a88fae30819b9f33a1099 Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Tue, 28 Nov 2023 09:22:44 +0700
Subject: [PATCH] refactor: LivstView Cabinet and Drawer can CRUD

---
 Services/client/src/components/FileItem.vue   | 95 ++++++++++++++++++-
 .../client/src/components/FileItemAction.vue  | 13 +--
 Services/client/src/components/FromEdit.vue   | 14 +--
 Services/client/src/components/ListView.vue   | 56 +++++++++--
 Services/client/src/components/PageLayout.vue | 35 ++++++-
 Services/client/src/router/index.ts           | 12 +--
 6 files changed, 183 insertions(+), 42 deletions(-)

diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 9a1cfe4..e06fdfb 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -85,7 +85,11 @@ const props = withDefaults(
         class="inline-block"
         v-if="props.action && currentDept < 4"
         tabindex="0"
-        @keydown.esc="() => (drawer = false)"
+        @keydown.esc="
+          () => {
+            drawer = false
+          }
+        "
       >
         <div class="dashed border-radius-inherit">
           <q-card
@@ -177,9 +181,94 @@ const props = withDefaults(
     </div>
   </div>
 
-<from-edit :drawer="drawer" :drawerStatus="drawerStatus" :DEPT_NAME="DEPT_NAME" :currentDept="currentDept" :editPathname="editPathname" />
-
+  <from-edit
+    :drawer="drawer"
+    :drawerStatus="drawerStatus"
+    :DEPT_NAME="DEPT_NAME"
+    :currentDept="currentDept"
+    :editPathname="editPathname"
+    @update:drawer="() => (drawer = !drawer)"
+  />
 
+  <q-drawer
+    class="q-pa-md"
+    side="right"
+    v-model="drawerFile"
+    bordered
+    :width="300"
+    :breakpoint="500"
+    overlay
+  >
+    <q-toolbar class="q-mb-md q-pa-none">
+      <q-toolbar-title>
+        <span class="text-weight-bold">สร้างเอกสาร</span>
+      </q-toolbar-title>
+      <q-btn
+        flat
+        round
+        dense
+        icon="close"
+        v-close-popup
+        color="red"
+        @click="() => (drawerFile = !drawerFile)"
+      />
+    </q-toolbar>
+    <span class="text-weight-bold">อัพโหลดไฟล์</span>
+    <q-input
+      model-value="inputfile"
+      class="q-my-md"
+      outlined
+      type="file"
+      :placeholder="`กรอกชื่อ${DEPT_NAME[currentDept]}`"
+      dense
+    />
+    <span class="text-weight-bold">ชื่อเรื่อง</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      v-model="fileTitle"
+      placeholder="กรอกชื่อเรื่อง"
+      dense
+    />
+    <span class="text-weight-bold">รายละเอียดของเอกสาร</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      type="textarea"
+      v-model="fileDesc"
+      placeholder="กรอกรายละเอียด"
+      dense
+    />
+    <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
+    <q-select
+      class="q-my-md"
+      outlined
+      :options="optionsCategory"
+      v-model="fileCategory"
+      placeholder="เลือกกลุ่ม/หมวดหมู่"
+      dense
+    />
+    <span class="text-weight-bold">คำสำคัญ</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      v-model="fileKeyword"
+      placeholder="กรอกคำสำคัญ"
+      dense
+    />
+    <q-btn
+      class="q-px-md"
+      label="บันทึก"
+      type="submit"
+      color="primary"
+      dense
+      @click="
+        () => {
+          drawerFile = !drawerFile
+        }
+      "
+    />
+  </q-drawer>
 </template>
 
 <style lang="scss" scoped>
diff --git a/Services/client/src/components/FileItemAction.vue b/Services/client/src/components/FileItemAction.vue
index 467666a..87ab35f 100644
--- a/Services/client/src/components/FileItemAction.vue
+++ b/Services/client/src/components/FileItemAction.vue
@@ -8,14 +8,7 @@ defineProps<{
   pathname: string
   editname: string
 }>()
-defineEmits([
-  'editname',
-  'deletename',
-])
-
-const editdrawer = ref(false)
-const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
-const editInput = ref<string>()
+defineEmits(['editname', 'deletename'])
 </script>
 
 <template>
@@ -23,9 +16,7 @@ const editInput = ref<string>()
     <q-menu auto-close>
       <q-list dense>
         <q-item clickable>
-          <q-item-section @click="() => ( 
-             $emit('editname')
-            )">
+          <q-item-section @click="() => $emit('editname')">
             <div class="row items-center">
               <q-icon name="edit" color="positive" />
               <span class="q-ml-sm">แก้ไข</span>
diff --git a/Services/client/src/components/FromEdit.vue b/Services/client/src/components/FromEdit.vue
index d5dedfa..a39d92b 100644
--- a/Services/client/src/components/FromEdit.vue
+++ b/Services/client/src/components/FromEdit.vue
@@ -5,7 +5,6 @@ import { useTreeDataStore } from '@/stores/tree-data'
 const { createFolder, editFolder } = useTreeDataStore()
 
 const input = ref<string>('')
-const drawerclose = ref<boolean>()
 
 const props = withDefaults(
   defineProps<{
@@ -20,8 +19,7 @@ const props = withDefaults(
     drawerStatus: 'create',
   }
 )
-
-drawerclose.value = props.drawer
+defineEmits(['update:drawer'])
 </script>
 
 <template>
@@ -50,13 +48,7 @@ drawerclose.value = props.drawer
         icon="close"
         v-close-popup
         color="red"
-        @click="
-          () => {
-            console.log(props.drawer)
-            props.drawer = !props.drawer
-            console.log(props.drawer)
-          }
-        "
+        @click="() => $emit('update:drawer')"
       />
     </q-toolbar>
     <span class="text-weight-bold"
@@ -77,7 +69,7 @@ drawerclose.value = props.drawer
       dense
       @click="
         () => {
-          props.drawer = !props.drawer
+          $emit('update:drawer')
           props.drawerStatus === 'create'
             ? createFolder(input)
             : editFolder(input, editPathname)
diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index f859437..00523b8 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -3,11 +3,22 @@ import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import type { QTableProps } from 'quasar'
 import { useTreeDataStore } from '@/stores/tree-data'
+import FromEdit from '@/components/FromEdit.vue'
 
+const { deleteFolder } = useTreeDataStore()
 const { listDataFile, listDataFolder, currentDept } = storeToRefs(
   useTreeDataStore()
 )
 const { getFolder } = useTreeDataStore()
+const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
+const drawer = ref<boolean>(false)
+const drawerFile = ref<boolean>(false)
+const drawerStatus = ref<'edit' | 'create'>('create')
+const editPathname = ref<string>('')
+
+const props = defineProps<{
+  mode: 'admin' | 'user'
+}>()
 
 const currentLevel = computed(() =>
   currentDept.value === 0
@@ -19,8 +30,6 @@ const currentLevel = computed(() =>
     : 'แฟ้มย่อย'
 )
 
-
-
 const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
@@ -123,7 +132,13 @@ const columnsFile: QTableProps['columns'] = [
             color="primary"
             dense
             icon="add"
-            @click=""
+            @click="
+              () => {
+                drawer = !drawer
+                drawerStatus = 'create'
+                drawerFile = false
+              }
+            "
           />
         </div>
       </div>
@@ -161,9 +176,27 @@ const columnsFile: QTableProps['columns'] = [
                 {{ actionsRow.row.name }}
               </q-tooltip>
             </div>
-            <div>
-              <q-btn flat color="positive" dense icon="edit" @click="" />
-              <q-btn flat color="negative" dense icon="delete" @click="" />
+            <div v-if="props.mode === 'admin'">
+              <q-btn
+                flat
+                color="positive"
+                dense
+                icon="edit"
+                @click="
+                  () => {
+                    drawer = !drawer
+                    drawerStatus = 'edit'
+                    editPathname = actionsRow.row.pathname
+                  }
+                "
+              />
+              <q-btn
+                flat
+                color="negative"
+                dense
+                icon="delete"
+                @click="() => deleteFolder(actionsRow.row.pathname)"
+              />
             </div>
           </q-td>
         </template>
@@ -225,7 +258,7 @@ const columnsFile: QTableProps['columns'] = [
                 {{ actionsRow.row.fileSize }}
               </q-tooltip>
             </div>
-            <div>
+            <div v-if="props.mode === 'admin'">
               <q-btn flat color="positive" dense icon="edit" @click="" />
               <q-btn flat color="negative" dense icon="delete" @click="" />
             </div>
@@ -234,6 +267,15 @@ const columnsFile: QTableProps['columns'] = [
       </q-table>
     </div>
   </div>
+
+  <from-edit
+    :drawer="drawer"
+    :drawerStatus="drawerStatus"
+    :DEPT_NAME="DEPT_NAME"
+    :currentDept="currentDept"
+    :editPathname="editPathname"
+    @update:drawer="() => (drawer = !drawer)"
+  />
 </template>
 
 <style lang="scss" scoped>
diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue
index 039b8b3..e9114d2 100644
--- a/Services/client/src/components/PageLayout.vue
+++ b/Services/client/src/components/PageLayout.vue
@@ -10,6 +10,7 @@ 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 FromEdit from '@/components/FromEdit.vue'
 
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย', 'ไฟล์']
 
@@ -17,6 +18,11 @@ const { isPreview } = storeToRefs(useFileInfoStore())
 const { isSearch } = storeToRefs(useSearchDataStore())
 const { data, currentDept } = storeToRefs(useTreeDataStore())
 const { getCabinet, gotoParent } = useTreeDataStore()
+
+const drawer = ref<boolean>(false)
+const drawerFile = ref<boolean>(false)
+const drawerStatus = ref<'create'>('create')
+
 const viewMode = ref<'view_list' | 'view_module'>('view_list')
 const inputSearch = ref<string>()
 const props = defineProps<{
@@ -66,8 +72,11 @@ onMounted(getCabinet)
       </div>
     </div>
     <div class="col">
-      <file-download v-if="isPreview === true"/>
-      <div class="bg-white rounded-borders shadow-5 relative" v-if="isPreview === false">
+      <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">
@@ -81,7 +90,9 @@ onMounted(getCabinet)
               >
                 <q-icon name="arrow_back" size="1rem" color="primary"
               /></q-btn>
-              <span v-if="isSearch === false">{{ DEPT_NAME[currentDept] }}</span>
+              <span v-if="isSearch === false">{{
+                DEPT_NAME[currentDept]
+              }}</span>
               <span v-if="isSearch === true">ผลการค้นหา</span>
               <q-btn
                 v-if="
@@ -95,7 +106,13 @@ onMounted(getCabinet)
                 color="primary"
                 dense
                 icon="add"
-                @click=""
+                @click="
+                  () => {
+                    drawer = !drawer
+                    drawerStatus = 'create'
+                    drawerFile = false
+                  }
+                "
               />
             </span>
             <q-btn
@@ -123,6 +140,16 @@ onMounted(getCabinet)
       </div>
     </div>
   </section>
+
+  <from-edit
+    v-if="currentDept === 0"
+    :drawer="drawer"
+    :drawerStatus="drawerStatus"
+    :DEPT_NAME="DEPT_NAME"
+    :currentDept="currentDept"
+    editPathname=""
+    @update:drawer="() => (drawer = !drawer)"
+  />
 </template>
 
 <style lang="scss" scoped>
diff --git a/Services/client/src/router/index.ts b/Services/client/src/router/index.ts
index a5fd5d4..89c820d 100644
--- a/Services/client/src/router/index.ts
+++ b/Services/client/src/router/index.ts
@@ -18,10 +18,11 @@ const router = createRouter({
           KeyCloakService.CallLogin(() => {
             const tokenAfterLogin = KeyCloakService.GetAccesToken()
             const roles = KeyCloakService.GetUserRoles()
-            console.log(roles);
-            
 
-            if (tokenAfterLogin && (roles.includes('user') || roles.includes('admin')) ) {
+            if (
+              tokenAfterLogin &&
+              (roles.includes('user') || roles.includes('admin'))
+            ) {
               next()
             } else {
               console.error('ไม่สามารถดึง Token หลังจากล็อกอินได้')
@@ -47,10 +48,9 @@ const router = createRouter({
           KeyCloakService.CallLogin(() => {
             const tokenAfterLogin = KeyCloakService.GetAccesToken()
             const roles = KeyCloakService.GetUserRoles()
-            console.log(roles);
-            
+            console.log(roles)
 
-            if (tokenAfterLogin && roles.includes('admin') ) {
+            if (tokenAfterLogin && roles.includes('admin')) {
               next()
             } else {
               console.error('ไม่สามารถดึง Token หลังจากล็อกอินได้')