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

<script lang="ts" setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import useStorage from '@/stores/storage'
import FileForm from './FileForm.vue'
import UploadExistDialog from './UploadExistDialog.vue'

const storageStore = useStorage()
const { file, currentInfo } = storeToRefs(storageStore)
const { createFile, updateFile } = storageStore

const fileFormState = ref<boolean>(false)
const fileFormPath = ref<string>('')
const fileFormData = ref<{
  file?: File
  title?: string
  description?: string
  keyword?: string[]
  category?: string[]
}>({})
const fileFormType = ref<'edit' | 'create'>('create')
const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
const fileExistNotification = ref<boolean>(false)
const fileFormComponent = ref<InstanceType<typeof FileForm>>()

function triggerFileCreate() {
  fileFormType.value = 'create'
  fileFormData.value = {}
  fileFormState.value = !fileFormState.value
}

function triggerFileEdit(
  value: {
    title: string
    description: string
    keyword: string[]
    category: string[]
  },
  pathname: string,
) {
  fileFormState.value = true
  fileFormType.value = 'edit'
  fileFormPath.value = pathname
  fileFormData.value = {
    title: value.title,
    description: value.description,
    keyword: value.keyword,
    category: value.category,
  }
}

defineExpose({
  triggerFileCreate,
  triggerFileEdit,
})

const currentParam = ref<Parameters<typeof submitFileForm>[0]>()

function checkFileExist(name: string) {
  return Boolean(
    file.value[currentInfo.value.path].find((v) => v.fileName === name),
  )
}

async function submitFileForm(
  value: {
    mode: 'create' | 'edit'
    file?: File
    title: string
    description: string
    keyword: string[]
    category: string[]
  },
  force = false,
) {
  currentParam.value = value

  if (
    value.file &&
    file.value[currentInfo.value.path].find(
      (v) => v.fileName === value.file?.name,
    ) &&
    !force
  ) {
    fileExistNotification.value = true
    return
  }

  if (value.mode === 'create' && value.file) {
    await createFile(value.file, {
      title: value.title,
      description: value.description,
      keyword: value.keyword,
      category: value.category,
    })
  } else {
    await updateFile(
      fileFormPath.value,
      {
        title: value.title,
        description: value.description,
        keyword: value.keyword,
        category: value.category,
      },
      value.file,
    )
  }
  fileFormData.value = {}
  fileFormState.value = false
  currentParam.value = undefined
  fileFormComponent.value?.reset()
}
</script>

<template>
  <file-form
    ref="fileFormComponent"
    :mode="fileFormType"
    :error="fileFormError"
    v-model:open="fileFormState"
    v-model:title="fileFormData.title"
    v-model:description="fileFormData.description"
    v-model:keyword="fileFormData.keyword"
    v-model:category="fileFormData.category"
    @reset="() => (fileFormError = {})"
    @filechange="
      (name: string) => (fileFormError.fileExist = checkFileExist(name))
    "
    @submit="submitFileForm"
  />
  <upload-exist-dialog
    v-model:notification="fileExistNotification"
    @confirm="() => currentParam && submitFileForm(currentParam, true)"
    @cancel="() => (currentParam = undefined)"
  />
</template>