hrms-edm/Services/client/src/components/FileForm.vue

<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>