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
-    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>
+<from-edit :drawer="drawer" :drawerStatus="drawerStatus" :DEPT_NAME="DEPT_NAME" :currentDept="currentDept" :editPathname="editPathname" />
+
+
 </template>
 
 <style lang="scss" scoped>