From cab92bd91197d4b89de3411e779976b9e16b9346 Mon Sep 17 00:00:00 2001 From: puri-ph4tt Date: Sat, 2 Dec 2023 17:07:24 +0700 Subject: [PATCH 1/2] refactor: admin search, opt categ & conten, add id --- Services/client/src/components/PageLayout.vue | 16 +- .../01_user/components/AdvancedSearch.vue | 11 +- .../modules/01_user/components/SearchBar.vue | 195 ++++++++++-------- 3 files changed, 123 insertions(+), 99 deletions(-) diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue index fe40086..5024fb5 100644 --- a/Services/client/src/components/PageLayout.vue +++ b/Services/client/src/components/PageLayout.vue @@ -58,19 +58,7 @@ onMounted(getCabinet)
จัดเก็บเอกสาร
สืบค้นเอกสาร
-
- - - -
+
- +
diff --git a/Services/client/src/modules/01_user/components/AdvancedSearch.vue b/Services/client/src/modules/01_user/components/AdvancedSearch.vue index 4e0390c..7181c36 100644 --- a/Services/client/src/modules/01_user/components/AdvancedSearch.vue +++ b/Services/client/src/modules/01_user/components/AdvancedSearch.vue @@ -9,6 +9,8 @@ const { isAdvSearchCall } = storeToRefs(useSearchDataStore()) const optionsField = [ { label: 'ชื่อเรื่อง (title)', value: 'title' }, { label: 'คำสำคัญ (keyword)', value: 'keyword' }, + { label: 'หมวดหมู่ (category)', value: 'category' }, + { label: 'เนื้อหาในไฟล์ (content)', value: 'attachment.content' }, ] const optionsOp = [ { label: 'และ', value: 'AND' }, @@ -126,6 +128,7 @@ function clearAdvSearchData() {
diff --git a/Services/client/src/modules/01_user/components/SearchBar.vue b/Services/client/src/modules/01_user/components/SearchBar.vue index 58d979d..aab8c48 100644 --- a/Services/client/src/modules/01_user/components/SearchBar.vue +++ b/Services/client/src/modules/01_user/components/SearchBar.vue @@ -16,6 +16,8 @@ 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 @@ -31,37 +33,48 @@ const submitSearchData = ref<{ AND: [], OR: [], }) +const props = defineProps<{ + mode: 'admin' | 'user' +}>() async function searchSubmit() { if (searchData.value.value.trim() !== '') { submitSearchData.value = { AND: [], OR: [] } - - submitSearchData.value.OR.push({ - field: searchData.value.field, - value: searchData.value.value, - }) - - if (isAdvSearchCall.value && advSearchComp.value) { - const advField = advSearchComp.value.advSearchDataField - const advRow = advSearchComp.value.advSearchDataRow - - advRow.forEach((d: { field: string; value: string; op: string }) => { - if (d.field && d.value.trim() !== '') { - const op = d.op === 'AND' ? 'AND' : 'OR' - submitSearchData.value[op].push({ field: d.field, value: d.value }) - } + if (props.mode === 'admin') { + optionsField.forEach((option) => { + submitSearchData.value.OR.push({ + field: option.value, + value: searchData.value.value, + }) }) - if (advField.keyword.trim() !== '') { - submitSearchData.value.AND.push({ - field: 'keyword', - value: advField.keyword, - }) - } - if (advField.description.trim() !== '') { - submitSearchData.value.AND.push({ - field: 'description', - value: advField.description, + } else { + submitSearchData.value.OR.push({ + field: searchData.value.field, + value: searchData.value.value, + }) + + if (isAdvSearchCall.value && advSearchComp.value) { + const advField = advSearchComp.value.advSearchDataField + const advRow = advSearchComp.value.advSearchDataRow + + advRow.forEach((d: { field: string; value: string; op: string }) => { + if (d.field && d.value.trim() !== '') { + const op = d.op === 'AND' ? 'AND' : 'OR' + 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.description.trim() !== '') { + submitSearchData.value.AND.push({ + field: 'description', + value: advField.description, + }) + } } } @@ -69,11 +82,8 @@ async function searchSubmit() { loaderStore.show() const res = await axiosClient.post( `${import.meta.env.VITE_API_ENDPOINT}/search`, - submitSearchData.value + submitSearchData.value, ) - console.log(submitSearchData.value); - console.log(res.data); - getFoundFile(res.data) isSearch.value = true } catch (error) { @@ -86,59 +96,78 @@ async function searchSubmit() { From 48dc16780401ea2c872f1f9e56fc1c98d2cff819 Mon Sep 17 00:00:00 2001 From: puri-ph4tt Date: Sat, 2 Dec 2023 17:09:05 +0700 Subject: [PATCH 2/2] refactor: filter by keyword or categ after search --- .../client/src/components/FileSearched.vue | 85 +++++++++++++++++-- 1 file changed, 80 insertions(+), 5 deletions(-) diff --git a/Services/client/src/components/FileSearched.vue b/Services/client/src/components/FileSearched.vue index 1453ec3..10a73c6 100644 --- a/Services/client/src/components/FileSearched.vue +++ b/Services/client/src/components/FileSearched.vue @@ -4,13 +4,19 @@ import { useSearchDataStore } from '@/stores/searched-data' import { useFileInfoStore } from '@/stores/file-info-data' 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 { getFileInfo, getSize, getType, getFileNameFormat } = useFileInfoStore() +const { getFileInfo, getSize, getType } = useFileInfoStore() +const keywordList = ref([]) +const categoryList = ref([]) +const selectKeyword = ref([]) +const selectCategory = ref([]) +const filterFoundFile = ref() const columns: QTableProps['columns'] = [ { name: 'name', @@ -46,12 +52,81 @@ const columns: QTableProps['columns'] = [ style: 'width: 20px', }, ] + +function filterSearch() { + function updateList() { + keywordList.value = [] + categoryList.value = [] + foundFile.value.forEach((obj) => { + obj.keyword.forEach((keyword) => { + if (!keywordList.value.includes(keyword)) { + keywordList.value.push(keyword) + } + }) + obj.category.forEach((category) => { + if (!categoryList.value.includes(category)) { + categoryList.value.push(category) + } + }) + }) + } + + function filterArray() { + if (!(selectKeyword.value.length || selectCategory.value.length)) { + filterFoundFile.value = foundFile.value + } else { + filterFoundFile.value = foundFile.value.filter( + (entry) => + entry.keyword.some((kw) => selectKeyword.value.includes(kw)) || + entry.category.some((kw) => selectCategory.value.includes(kw)), + ) + } + } + updateList() + filterArray() +} + +watch( + [ + () => foundFile.value, + () => selectKeyword.value, + () => selectCategory.value, + ], + filterSearch, +) + +onMounted(() => { + filterSearch() +})