feat: upload, edit & delete file, folder

Services/client/src/components/FileForm.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean
+    mode: 'create' | 'edit'
+    title?: string
+    description?: string
+    keyword?: string
+    category?: string
+  }>(),
+  {
+    open: false,
+  }
+)
+
+const emit = defineEmits([
+  'update:open',
+  'update:title',
+  'update:description',
+  'update:keyword',
+  'update:category',
+  'submit',
+])
+
+function keydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && props.open === true) {
+    emit('update:open', false)
+    reset()
+  }
+}
+
+function reset() {
+  file.value = undefined
+  emit('update:title', '')
+  emit('update:description', '')
+  emit('update:keyword', '')
+  emit('update:category', '')
+}
+
+function submit() {
+  emit('submit', {
+    mode: props.mode,
+    file: file.value,
+    title: props.title ?? '',
+    description: props.description ?? '',
+    keyword: props.keyword ?? '',
+    category: props.category ?? '',
+  })
+  reset()
+}
+
+onMounted(() => window.addEventListener('keydown', keydown))
+onUnmounted(() => window.addEventListener('keydown', keydown))
+
+const file = ref<File | undefined>()
+</script>
+
+<template>
+  <q-drawer
+    overlay
+    bordered
+    class="q-pa-md"
+    side="right"
+    tabindex="0"
+    :width="300"
+    :breakpoint="500"
+    :model-value="open"
+    @update:model-value="(v) => $emit('update:open', v)"
+  >
+    <q-form @submit.prevent="submit">
+      <q-toolbar class="q-mb-md q-pa-none">
+        <q-toolbar-title>
+          <span class="text-weight-bold" v-if="mode === 'create'">
+            สร้างเอกสาร
+          </span>
+          <span class="text-weight-bold" v-if="mode === 'edit'">
+            แก้ไขเอกสาร
+          </span>
+        </q-toolbar-title>
+        <q-btn
+          v-close-popup
+          flat
+          round
+          dense
+          icon="close"
+          color="red"
+          @click="() => ($emit('update:open', !open), reset())"
+        />
+      </q-toolbar>
+
+      <section class="q-mb-md">
+        <span class="text-weight-bold q-mb-sm block">อัพโหลดไฟล์</span>
+        <q-file
+          dense
+          outlined
+          v-model="file"
+          :label="file?.name ? undefined : 'เลือกไฟล์'"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" />
+          </template>
+        </q-file>
+      </section>
+
+      <section class="q-mb-md">
+        <span class="text-weight-bold">ชื่อเรื่อง</span>
+        <q-input
+          outlined
+          dense
+          class="q-my-sm"
+          placeholder="กรอกชื่อเรื่อง"
+          :model-value="title"
+          @update:model-value="(v) => $emit('update:title', v)"
+        />
+      </section>
+
+      <section class="q-mb-md">
+        <span class="text-weight-bold">รายละเอียดของเอกสาร</span>
+        <q-input
+          outlined
+          dense
+          class="q-mt-sm no-resize"
+          type="textarea"
+          placeholder="กรอกรายละเอียด"
+          :model-value="description"
+          @update:model-value="(v) => $emit('update:description', v)"
+        />
+      </section>
+
+      <section class="q-mb-md">
+        <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
+        <q-input
+          outlined
+          dense
+          class="q-mt-sm"
+          placeholder="เลือกกลุ่ม/หมวดหมู่"
+          :model-value="category"
+          @update:model-value="(v) => $emit('update:category', v)"
+        />
+      </section>
+
+      <section class="q-mb-md">
+        <span class="text-weight-bold">คำสำคัญ</span>
+        <q-input
+          outlined
+          dense
+          class="q-mt-sm"
+          placeholder="คำสำคัญ"
+          :model-value="keyword"
+          @update:model-value="(v) => $emit('update:keyword', v)"
+        />
+      </section>
+
+      <section :style="{ display: 'flex', gap: '.5rem' }">
+        <q-btn label="บันทึก" type="submit" color="primary" />
+        <q-btn
+          label="ยกเลิก"
+          type="reset"
+          color="primary"
+          flat
+          @click="() => ($emit('update:open', false), reset())"
+        />
+      </section>
+    </q-form>
+  </q-drawer>
+</template>
+
+<style scoped>
+.no-resize >>> textarea {
+  resize: none;
+}
+</style>