From 2d6cbe2dc45311ba1cd701295b1b79db6a5cd1f6 Mon Sep 17 00:00:00 2001 From: puri-ph4tt Date: Wed, 6 Dec 2023 09:05:43 +0700 Subject: [PATCH] refactor: admin search to edit, delete --- .../client/src/components/FileSearched.vue | 199 +++++++++++++++++- Services/client/src/components/PageLayout.vue | 20 +- .../modules/01_user/components/SearchBar.vue | 50 +++-- 3 files changed, 233 insertions(+), 36 deletions(-) diff --git a/Services/client/src/components/FileSearched.vue b/Services/client/src/components/FileSearched.vue index 9ef0ead..4fb2121 100644 --- a/Services/client/src/components/FileSearched.vue +++ b/Services/client/src/components/FileSearched.vue @@ -2,21 +2,52 @@ import { storeToRefs } from 'pinia' import { useSearchDataStore } from '@/stores/searched-data' import { useFileInfoStore } from '@/stores/file-info-data' +import { useTreeDataStore } from '@/stores/tree-data' + +import DialogDelete from './DialogDelete.vue' +import UploadExistDialog from './UploadExistDialog.vue' +import FileForm from './FileForm.vue' +import FileItemAction from '@/components/FileItemAction.vue' import FileIcon from '@/components/FileIcon.vue' + import type { QTableProps } from 'quasar' import { onMounted, ref, watch } from 'vue' -defineProps<{ - viewMode: 'view_list' | 'view_module' -}>() - -const { foundFile } = storeToRefs(useSearchDataStore()) +const props = withDefaults( + defineProps<{ + action: boolean + viewMode: 'view_list' | 'view_module' + }>(), + { + action: false, + }, +) +const { foundFile, isActFoundFile } = storeToRefs(useSearchDataStore()) const { getFileInfo, getSize, getType } = useFileInfoStore() +const { updateFile, deleteFile, checkFile } = useTreeDataStore() const keywordList = ref([]) const categoryList = ref([]) const selectKeyword = ref([]) const selectCategory = ref([]) const filterFoundFile = ref() + +const fileExistNotification = ref(false) +const fileFormError = ref<{ fileExist?: boolean }>({}) +const deleteFormType = ref<'deleteFile'>('deleteFile') +const dialogDeleteState = ref(false) +const deleteFormPath = ref('') + +const fileFormType = ref<'edit'>('edit') +const fileFormState = ref(false) +const fileFormPath = ref('') +const fileFormData = ref<{ + file?: File + title?: string + description?: string + keyword?: string[] + category?: string[] +}>({}) + const columns: QTableProps['columns'] = [ { name: 'name', @@ -53,6 +84,82 @@ const columns: QTableProps['columns'] = [ }, ] +const currentParam = ref[0]>() + +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 && checkFile(value.file.name) && !force) { + fileExistNotification.value = true + return + } + + if (value.mode === 'edit') { + await updateFile( + fileFormPath.value, + { + title: value.title, + description: value.description, + keyword: value.keyword, + category: value.category, + }, + value.file, + ) + setTimeout(() => { + isActFoundFile.value = true + }, 300) + } + + fileFormData.value = {} + fileFormState.value = false + currentParam.value = undefined +} + +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, + } +} + +function triggerFileDelete(pathname: string) { + deleteFormType.value = 'deleteFile' + deleteFormPath.value = pathname + dialogDeleteState.value = !dialogDeleteState.value +} + +function confirmDelete() { + if (deleteFormType) { + deleteFile(deleteFormPath.value) + + setTimeout(() => { + isActFoundFile.value = true + }, 300) + } +} + function filterSearch() { function updateList() { keywordList.value = [] @@ -101,7 +208,7 @@ onMounted(() => { - diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue index 4b87b4c..ed84c84 100644 --- a/Services/client/src/components/PageLayout.vue +++ b/Services/client/src/components/PageLayout.vue @@ -23,7 +23,6 @@ const { data, currentDept, currentPath } = storeToRefs(useTreeDataStore()) const { createFolder, getCabinet, gotoParent, getFolder } = useTreeDataStore() const viewMode = ref<'view_list' | 'view_module'>('view_list') -const inputSearch = ref() const props = defineProps<{ mode: 'admin' | 'user' }>() @@ -71,10 +70,12 @@ onMounted(getCabinet)
ตู้จัดเก็บเอกสาร
@@ -110,6 +111,7 @@ onMounted(getCabinet) > + ผลการค้นหา - ผลการค้นหา + + -import { ref } from 'vue' +import { ref, watch } from 'vue' import { storeToRefs } from 'pinia' import axiosClient from '@/services/HttpService' @@ -10,22 +10,21 @@ import { useLoader } from '@/stores/loader' import AdvancedSearch from '@/modules/01_user/components/AdvancedSearch.vue' const loaderStore = useLoader() -const { isSearch, isAdvSearchCall } = storeToRefs(useSearchDataStore()) +const { + isSearch, + isAdvSearchCall, + isActFoundFile, + searchData, + advSearchDataField, + advSearchDataRow, +} = storeToRefs(useSearchDataStore()) const { getFoundFile } = useSearchDataStore() -const advSearchComp = ref>() const optionsField = [ { label: 'ชื่อเรื่อง (title)', value: 'title' }, { label: 'คำสำคัญ (keyword)', value: 'keyword' }, { label: 'หมวดหมู่ (category)', value: 'category' }, { label: 'เนื้อหาในไฟล์ (content)', value: 'attachment.content' }, ] -const searchData = ref<{ - field: string - value: string -}>({ - field: 'title', - value: '', -}) const submitSearchData = ref<{ AND: { field: string; value: string }[] OR: { field: string; value: string }[] @@ -53,9 +52,9 @@ async function searchSubmit() { value: searchData.value.value, }) - if (isAdvSearchCall.value && advSearchComp.value) { - const advField = advSearchComp.value.advSearchDataField - const advRow = advSearchComp.value.advSearchDataRow + if (isAdvSearchCall.value) { + let advField = advSearchDataField.value + let advRow = advSearchDataRow.value advRow.forEach((d: { field: string; value: string; op: string }) => { if (d.field && d.value.trim() !== '') { @@ -63,11 +62,13 @@ async function searchSubmit() { submitSearchData.value[op].push({ field: d.field, value: d.value }) } }) - if (advField.keyword.trim() !== '') { - submitSearchData.value.AND.push({ - field: 'keyword', - value: advField.keyword, - }) + if (advField.keyword.length > 0) { + for (let i = 0; i < advField.keyword.length; i++) { + submitSearchData.value.AND.push({ + field: 'keyword', + value: advField.keyword[i], + }) + } } if (advField.description.trim() !== '') { submitSearchData.value.AND.push({ @@ -93,6 +94,18 @@ async function searchSubmit() { } } } + +watch( + () => isActFoundFile.value, + (edited) => { + if (edited === true) { + searchSubmit() + setTimeout(() => { + isActFoundFile.value = false + }, 300) + } + }, +)