refactor: LivstView Cabinet and Drawer can CRUD

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>