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

<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useTreeDataStore } from '@/stores/tree-data'

const { currentPath } = storeToRefs(useTreeDataStore())
const { uploadFile, checkFile } = useTreeDataStore()

const inputFile = ref<File>()
const fileTitle = ref<string>('')
const fileDesc = ref<string>('')
const fileCategory = ref<string>('')
const fileKeyword = ref<string>('')
const notification = ref<boolean>(false)
const emit = defineEmits(['update:drawerFile'])
const props = withDefaults(defineProps<{ drawerFile: boolean }>(), {
  drawerFile: false,
})

const tag = ref('')
const tagList = ref<Array<string>>([])

function deleteTag(index?: string) {
  console.log(index)

  if (index === undefined) {
    tagList.value.pop()
  } else {
    tagList.value = tagList.value.filter((t) => t !== index)
  }
}

function saveTag() {
  if (!!tag.value?.trim()) {
    tagList.value.push(tag.value)
    tag.value = ''
  }
}

async function handleSubmit(continueUpload: boolean = false) {
  if (!inputFile.value) return
  // getFile(p)
  if (checkFile(inputFile.value.name) || continueUpload) {
    await uploadFile(currentPath.value, inputFile.value, {
      title: fileTitle.value,
      description: fileDesc.value,
      keyword: [fileKeyword.value],
      category: [fileCategory.value],
    })
  } else notification.value = true
}
</script>

<template>
  <q-drawer
    class="q-pa-md"
    side="right"
    v-model="props.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="() => $emit('update:drawerFile')"
      />
    </q-toolbar>
    <span class="text-weight-bold">อัพโหลดไฟล์</span>
    <q-file
      v-model="inputFile"
      class="q-my-md"
      label="Pick files"
      dense
      outlined
    >
      <template v-slot:prepend>
        <q-icon name="attach_file" />
      </template>
    </q-file>
    <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-input
      class="q-my-md"
      outlined
      v-model="fileCategory"
      placeholder="เลือกกลุ่ม/หมวดหมู่"
      dense
    />
    <span class="text-weight-bold">คำสำคัญ</span>
    <!-- <q-input
      class="q-my-md"
      outlined
      v-model="fileKeyword"
      placeholder="กรอกคำสำคัญ"
      dense
    /> -->

    <q-input
      outlined
      v-model="tag"
      @keydown.delete="() => deleteTag()"
      @keydown.space="saveTag"
      label="กด space เพื่อเพิ่ม"
      class="q-mt-md"
    >
      <template #prepend>
        <div class="flex rounded-borders " style="gap: 0.5rem; max-width: 12rem overflow: visible;" >
          <q-badge
            rounded
            color="grey-3"
            class="q-p-px-md q-py-xs text-black"
            v-for="tag in tagList"
            :key="tag"
          >
          <div>
            {{ tag }}
            <q-btn round color="grey-5" size="4.5px">
              <q-icon class="cursor" name="close" @click="deleteTag(tag)" />
            </q-btn>
          </div>
            
            
          </q-badge>
        </div>
      </template>
    </q-input>
    <q-btn
      class="q-px-md"
      label="บันทึก"
      type="submit"
      color="primary"
      dense
      @click="
        () => {
          $emit('update:drawerFile')
          handleSubmit()
        }
      "
    />
  </q-drawer>

  <q-dialog
    v-model="notification"
    persistent
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 400px">
      <q-card-section>
        <div class="text-h6">
          <q-icon
            name="error"
            color="negative"
            size="2.5rem"
          />เตือนพบไฟล์ชื่อซ้ำในระบบ
        </div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        ถ้าดำเนินการต่อจะอัพข้อมูลทับกับอันเก่า
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-primary">
        <q-space />
        <q-btn flat label="ยกเลิก" v-close-popup />

        <q-btn
          flat
          label="ดำเนินการต่อ"
          v-close-popup
          class="text-red"
          @click="() => handleSubmit(true)"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped>
.cursor {
  cursor: pointer;
}
.box {
  display: inline-block;
  border: 2px solid #f1f2f4;
  border-radius: 8px;
  cursor: pointer;
}

.dashed {
  opacity: 0.4;
  display: inline-block;
  border: 2px solid #babdc3;
  border-radius: 8px;
  cursor: pointer;
  border-style: dashed;
}

.add-icon {
  margin: auto auto;
}

.add-button {
  position: absolute;
  top: 75px;
  right: 45px;
  background-color: white;
}
</style>