refactor: components edit

Services/client/src/components/FileItem.vue

@@ -3,6 +3,7 @@ import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
 import FileItemAction from '@/components/FileItemAction.vue'
+import FromEdit from '@/components/FromEdit.vue'
 import { useTreeDataStore } from '@/stores/tree-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
 
@@ -14,6 +15,7 @@ const { currentFolder, currentFile, currentDept } = storeToRefs(
   useTreeDataStore()
 )
 const { getFolder, createFolder, editFolder } = useTreeDataStore()
+
 const drawer = ref<boolean>(false)
 const drawerFile = ref<boolean>(false)
 const drawerStatus = ref<'edit' | 'create'>('create')
@@ -29,6 +31,7 @@ const optionsCategory = [
 ]
 const fileKeyword = ref<string>('')
 const editPathname = ref<string>('')
+
 const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
@@ -174,155 +177,9 @@ const props = withDefaults(
     </div>
   </div>
 
-  <q-drawer
+<from-edit :drawer="drawer" :drawerStatus="drawerStatus" :DEPT_NAME="DEPT_NAME" :currentDept="currentDept" :editPathname="editPathname" />
-    class="q-pa-md"
+
-    side="right"
+
-    v-model="drawer"
-    bordered
-    :width="300"
-    :breakpoint="500"
-    overlay
-    behavior="mobile"
-    tabindex="0"
-    @keydown.esc="
-      () => {
-        drawer = false
-        input = ''
-      }
-    "
-    @keyup.enter="
-      () => {
-        drawer = false
-        drawerStatus === 'create'
-          ? createFolder(input)
-          : editFolder(input, editPathname)
-        input = ''
-      }
-    "
-  >
-    <q-toolbar class="q-mb-md q-pa-none" @keydown.esc="() => (drawer = false)">
-      <q-toolbar-title>
-        <span class="text-weight-bold" v-if="drawerStatus == 'edit'"
-          >แก้ไขชื่อ{{ DEPT_NAME[currentDept] }}</span
-        >
-        <span class="text-weight-bold" v-if="drawerStatus == 'create'"
-          >สร้าง{{ DEPT_NAME[currentDept] }}</span
-        >
-      </q-toolbar-title>
-      <q-btn
-        flat
-        round
-        dense
-        icon="close"
-        v-close-popup
-        color="red"
-        @click="() => (drawer = !drawer)"
-      />
-    </q-toolbar>
-    <span class="text-weight-bold">ชื่อ{{ DEPT_NAME[currentDept] }}</span>
-    <q-input
-      class="q-my-md"
-      outlined
-      v-model="input"
-      :placeholder="`กรอกชื่อ${DEPT_NAME[currentDept]}`"
-      dense
-    />
-    <q-btn
-      class="q-px-md"
-      label="บันทึก"
-      type="submit"
-      color="primary"
-      dense
-      @click="
-        () => {
-          drawer = !drawer
-          drawerStatus === 'create'
-            ? createFolder(input)
-            : editFolder(input, editPathname)
-          input = ''
-        }
-      "
-    />
-  </q-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>

Services/client/src/components/FileItemAction.vue

@@ -43,50 +43,4 @@ const editInput = ref<string>()
       </q-list>
     </q-menu>
   </q-btn>
-  <!-- <q-drawer
-    class="q-pa-md"
-    side="left"
-    v-model="editdrawer"
-    bordered
-    :width="300"
-    :breakpoint="500"
-    overlay
-  >
-    <q-toolbar class="q-mb-md q-pa-none">
-      <q-toolbar-title>
-        <span class="text-weight-bold">แก้ไขชื่อ{{ DEPT_NAME[currentDept] }}</span>
-      </q-toolbar-title>
-      <q-btn
-        flat
-        round
-        dense
-        icon="close"
-        v-close-popup
-        color="red"
-        @click="editdrawer = !editdrawer"
-      />
-    </q-toolbar>
-    <span class="text-weight-bold">ชื่อ{{ DEPT_NAME[currentDept] }}</span>
-    <q-input
-      class="q-my-md"
-      outlined
-      v-model="editInput"
-      :placeholder="`กรอกชื่อ${DEPT_NAME[currentDept]}`"
-      dense
-    />
-    <q-btn
-      class="q-px-md"
-      label="บันทึก"
-      type="submit"
-      color="primary"
-      dense
-      @click="
-        () => {
-          editdrawer = !editdrawer
-          editFolder(editname,editInput)
-          editInput = ''
-        }
-      "
-    />
-  </q-drawer> -->
 </template>

Services/client/src/components/FromEdit.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { useTreeDataStore } from '@/stores/tree-data'
+const { createFolder, editFolder } = useTreeDataStore()
+
+const input = ref<string>('')
+const drawerclose = ref<boolean>()
+
+const props = withDefaults(
+  defineProps<{
+    drawer: boolean
+    drawerStatus: 'edit' | 'create'
+    DEPT_NAME: string[]
+    currentDept: number
+    editPathname: string
+  }>(),
+  {
+    drawer: false,
+    drawerStatus: 'create',
+  }
+)
+
+drawerclose.value = props.drawer
+</script>
+
+<template>
+  <q-drawer
+    class="q-pa-md"
+    side="right"
+    v-model="props.drawer"
+    bordered
+    :width="300"
+    :breakpoint="500"
+    overlay
+  >
+    <q-toolbar class="q-mb-md q-pa-none">
+      <q-toolbar-title>
+        <span class="text-weight-bold" v-if="props.drawerStatus == 'edit'"
+          >แก้ไขชื่อ{{ props.DEPT_NAME[props.currentDept] }}</span
+        >
+        <span class="text-weight-bold" v-if="props.drawerStatus == 'create'"
+          >สร้าง{{ props.DEPT_NAME[props.currentDept] }}</span
+        >
+      </q-toolbar-title>
+      <q-btn
+        flat
+        round
+        dense
+        icon="close"
+        v-close-popup
+        color="red"
+        @click="
+          () => {
+            console.log(props.drawer)
+            props.drawer = !props.drawer
+            console.log(props.drawer)
+          }
+        "
+      />
+    </q-toolbar>
+    <span class="text-weight-bold"
+      >ชื่อ{{ props.DEPT_NAME[props.currentDept] }}</span
+    >
+    <q-input
+      class="q-my-md"
+      outlined
+      v-model="input"
+      :placeholder="`กรอกชื่อ${props.DEPT_NAME[props.currentDept]}`"
+      dense
+    />
+    <q-btn
+      class="q-px-md"
+      label="บันทึก"
+      type="submit"
+      color="primary"
+      dense
+      @click="
+        () => {
+          props.drawer = !props.drawer
+          props.drawerStatus === 'create'
+            ? createFolder(input)
+            : editFolder(input, editPathname)
+          input = ''
+        }
+      "
+    />
+  </q-drawer>
+</template>
+
+<style lang="scss"></style>

Services/client/src/components/ListView.vue

@@ -3,7 +3,6 @@ import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import type { QTableProps } from 'quasar'
 import { useTreeDataStore } from '@/stores/tree-data'
-import FileItem from '@/components/FileItem.vue'
 
 const { listDataFile, listDataFolder, currentDept } = storeToRefs(
   useTreeDataStore()
@@ -20,6 +19,8 @@ const currentLevel = computed(() =>
     : 'แฟ้มย่อย'
 )
 
+
+
 const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
@@ -233,8 +234,6 @@ const columnsFile: QTableProps['columns'] = [
       </q-table>
     </div>
   </div>
-
-  <file-item viewMode="view_list" :action="true" />
 </template>
 
 <style lang="scss" scoped>

Services/client/src/components/PageLayout.vue

@@ -84,7 +84,11 @@ onMounted(getCabinet)
               <span v-if="isSearch === false">{{ DEPT_NAME[currentDept] }}</span>
               <span v-if="isSearch === true">ผลการค้นหา</span>
               <q-btn
-                v-if="mode === 'admin' && viewMode === 'view_module' && currentDept === 0"
+                v-if="
+                  mode === 'admin' &&
+                  viewMode === 'view_module' &&
+                  currentDept === 0
+                "
                 class="q-px-md q-ml-md al"
                 label="สร้างตู้เก็บเอกสาร"
                 type="submit"