diff --git a/Services/client/src/components/DialogDelete.vue b/Services/client/src/components/DialogDelete.vue index ba294ad..32bf935 100644 --- a/Services/client/src/components/DialogDelete.vue +++ b/Services/client/src/components/DialogDelete.vue @@ -1,27 +1,14 @@ - - diff --git a/Services/client/src/components/FileForm.vue b/Services/client/src/components/FileForm.vue new file mode 100644 index 0000000..19adcc3 --- /dev/null +++ b/Services/client/src/components/FileForm.vue @@ -0,0 +1,174 @@ + + + + + diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue index 3aa1322..073b97e 100644 --- a/Services/client/src/components/FileItem.vue +++ b/Services/client/src/components/FileItem.vue @@ -4,24 +4,34 @@ import { storeToRefs } from 'pinia' import FileIcon from '@/components/FileIcon.vue' import FileItemAction from '@/components/FileItemAction.vue' -import FromEdit from '@/components/FromEdit.vue' -import FormUpload from '@/components/FormUpload.vue' +import FileForm from './FileForm.vue' +import FolderForm from './FolderForm.vue' import { useTreeDataStore } from '@/stores/tree-data' import { useFileInfoStore } from '@/stores/file-info-data' +const props = withDefaults( + defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(), + { + action: false, + } +) + +const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const + const { isPreview } = storeToRefs(useFileInfoStore()) const { getFileInfo } = useFileInfoStore() -const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] - const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs( useTreeDataStore() ) -const { getFolder, uploadFile } = useTreeDataStore() - -const drawer = ref(false) -const drawerFile = ref(false) -const drawerStatus = ref<'edit' | 'create'>('create') -const editPathname = ref('') +const { + createFolder, + editFolder, + getFolder, + deleteFolder, + uploadFile, + updateFile, + deleteFile, +} = useTreeDataStore() const currentIcon = computed(() => currentDept.value === 0 @@ -30,19 +40,111 @@ const currentIcon = computed(() => ? 'inbox' : 'o_folder_open' ) -const props = withDefaults( - defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(), - { - action: false, + +const folderFormState = ref(false) +const folderFormPath = ref('') +const folderFormData = ref<{ + name?: string +}>({}) +const folderFormType = ref<'edit' | 'create'>('create') +const fileFormState = ref(false) +const fileFormPath = ref('') +const fileFormData = ref<{ + file?: File + title?: string + description?: string + keyword?: string + category?: string +}>({}) +const fileFormType = ref<'edit' | 'create'>('create') + +function triggerFolderCreate() { + folderFormType.value = 'create' + folderFormData.value = {} + folderFormState.value = !folderFormState.value +} + +function triggerFolderEdit(name: string, pathname: string) { + folderFormType.value = 'edit' + folderFormPath.value = pathname + folderFormData.value.name = name + folderFormState.value = true +} + +async function submitFolderForm(value: { + mode: 'create' | 'edit' + name: string +}) { + if (value.mode === 'create') { + await createFolder(value.name) + } else { + await editFolder(value.name, folderFormPath.value) } -) +} + +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.keyword, + } +} + +async function submitFileForm(value: { + mode: 'create' | 'edit' + file: File + title: string + description: string + keyword: string + category: string +}) { + if (value.mode === 'create') { + await uploadFile(currentPath.value, 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 +} @@ -299,6 +374,7 @@ const props = withDefaults( right: 70px; background-color: white; } + .add-button-folder-level { position: absolute; left: 30px; diff --git a/Services/client/src/components/FileItemAction.vue b/Services/client/src/components/FileItemAction.vue index 26c5aff..729a78a 100644 --- a/Services/client/src/components/FileItemAction.vue +++ b/Services/client/src/components/FileItemAction.vue @@ -1,13 +1,5 @@ diff --git a/Services/client/src/components/FolderForm.vue b/Services/client/src/components/FolderForm.vue new file mode 100644 index 0000000..36d0551 --- /dev/null +++ b/Services/client/src/components/FolderForm.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/Services/client/src/stores/tree-data.ts b/Services/client/src/stores/tree-data.ts index 4046fba..d1fc866 100644 --- a/Services/client/src/stores/tree-data.ts +++ b/Services/client/src/stores/tree-data.ts @@ -244,8 +244,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => { metadata: { title: string description: string - keyword: string[] - category: string[] + keyword: string + category: string } ) { loader.show() @@ -261,35 +261,102 @@ export const useTreeDataStore = defineStore('changeCabinet', () => { if (pathArray.length >= 4) requestPath += `/subfolder/${pathArray[3]}` requestPath += '/file' - const formData = new FormData() + const res = await axiosClient.post( + `${apiEndpoint}${requestPath}`, + { + file: file.name, + ...metadata, + } + ) - formData.append('file', file) - formData.append('title', metadata.title) - formData.append('description', metadata.description) - formData.append('keyword', metadata.keyword.join(',')) - formData.append('category', metadata.category.join(',')) + if (res && res.data.upload) { + await fetch(res.data.upload, { + method: 'PUT', + body: file, + }) - await axiosClient.post(`${apiEndpoint}${requestPath}`, formData) + loader.hide() + } - if (currentDept.value === 0) await getCabinet() - else await getFolder(currentPath.value) + if (currentDept.value === 0) { + await getCabinet() + } else await getFolder(currentPath.value) + + await getFile(currentPath.value) return loader.hide() } - function checkFile(nameFile: string) { - const fileExists = currentFile.value.some((element) => { - if (element.fileName === nameFile) { - console.log(element.fileName + '===' + nameFile) - return true - } - return false - }) + async function updateFile( + pathname: string, + metadata: { + title: string + description: string + keyword: string + category: string + }, + file?: File + ) { + loader.show() - if (fileExists) { - return false + const pathArray: string[] = pathname.split('/').filter(Boolean) + + if (pathArray.length < 4) return loader.hide() + + let requestPath = `cabinet/${pathArray[0]}/drawer/${pathArray[1]}` + if (pathArray.length >= 4) requestPath += `/folder/${pathArray[2]}` + if (pathArray.length >= 5) requestPath += `/subfolder/${pathArray[3]}` + requestPath += `/file/${pathArray.at(-1)}` + + const res = await axiosClient.patch<{ upload: string }>( + `${apiEndpoint}${requestPath}`, + { file: file?.name, ...metadata } + ) + + if (res && res.data.upload) { + await fetch(res.data.upload, { + method: 'PUT', + body: file, + }) + + loader.hide() } - return true + + if (currentDept.value === 0) { + await getCabinet() + } else await getFolder(currentPath.value) + + await getFile(currentPath.value) + + return loader.hide() + } + + async function deleteFile(pathname: string) { + loader.show() + + const pathArray: string[] = pathname.split('/').filter(Boolean) + + if (pathArray.length < 4) return loader.hide() + + let requestPath = `cabinet/${pathArray[0]}/drawer/${pathArray[1]}` + if (pathArray.length >= 4) requestPath += `/folder/${pathArray[2]}` + if (pathArray.length >= 5) requestPath += `/subfolder/${pathArray[3]}` + requestPath += `/file/${pathArray.at(-1)}` + + console.log(requestPath, pathArray) + await axiosClient.delete(`${apiEndpoint}${requestPath}`) + + if (currentDept.value === 0) { + await getCabinet() + } else await getFolder(currentPath.value) + + await getFile(currentPath.value) + + return loader.hide() + } + + function checkFile(fileName: string) { + return currentFile.value.some((element) => element.fileName === fileName) } return { @@ -303,6 +370,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => { getCabinet, getFolder, uploadFile, + updateFile, + deleteFile, gotoParent, createFolder, deleteFolder,