refactor: admin search, opt categ & conten, add id
This commit is contained in:
puri-ph4tt
parent
eca5430f27
commit
cab92bd911
3 changed files with 123 additions and 99 deletions
|
|
@ -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() {
|
|||
</div>
|
||||
<div class="col-4 col-md-2">
|
||||
<q-select
|
||||
id="advSearchOp"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
|
|
@ -136,6 +139,7 @@ function clearAdvSearchData() {
|
|||
</div>
|
||||
<div class="col-grow col-md-3">
|
||||
<q-select
|
||||
id="advSearchField"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
|
|
@ -146,6 +150,7 @@ function clearAdvSearchData() {
|
|||
</div>
|
||||
<div class="col-grow">
|
||||
<q-input
|
||||
id="advSearchValue"
|
||||
dense
|
||||
outlined
|
||||
v-model="item.value"
|
||||
|
|
@ -186,18 +191,20 @@ function clearAdvSearchData() {
|
|||
<div class="row q-col-gutter-md q-pb-md">
|
||||
<div class="col-12 col-md-5">
|
||||
<q-input
|
||||
id="advSearchKeyword"
|
||||
dense
|
||||
outlined
|
||||
placeholder="คำสำคัญ:"
|
||||
placeholder="คำสำคัญ"
|
||||
@keydown.enter.prevent="searchSubmit()"
|
||||
v-model="advSearchDataField.keyword"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-grow">
|
||||
<q-input
|
||||
id="advSearchDes"
|
||||
dense
|
||||
outlined
|
||||
placeholder="รายละเอียด:"
|
||||
placeholder="รายละเอียด"
|
||||
@keydown.enter.prevent="searchSubmit()"
|
||||
v-model="advSearchDataField.description"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ const advSearchComp = ref<InstanceType<typeof AdvancedSearch>>()
|
|||
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<EhrFile[]>(
|
||||
`${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() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="q-pa-md bg-grey-1">
|
||||
<div class="row items-center q-col-gutter-md">
|
||||
<div class="col-12 col-md-3">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
class="bg-white"
|
||||
v-model="searchData.field"
|
||||
:options="optionsField"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-grow">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
dense
|
||||
outlined
|
||||
v-model="searchData.value"
|
||||
placeholder="เอกสาร"
|
||||
@keydown.enter.prevent="searchSubmit"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
name="close"
|
||||
@click="() => (searchData.value = '', isSearch = false)"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="row items-center justify-between q-gutter-y-md q-pt-sm">
|
||||
<div class="column col-grow">
|
||||
<advanced-search
|
||||
ref="advSearchComp"
|
||||
:searchSubmit="searchSubmit"
|
||||
:submit-search-data="submitSearchData"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isAdvSearchCall === false">
|
||||
<q-btn
|
||||
style="width: 150px"
|
||||
color="primary"
|
||||
label="ค้นหา"
|
||||
icon="mdi-magnify"
|
||||
@click="searchSubmit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3" v-if="mode === 'admin'">
|
||||
<q-input
|
||||
rounded
|
||||
outlined
|
||||
dense
|
||||
label="ค้นหา"
|
||||
bg-color="white"
|
||||
v-model="searchData.value"
|
||||
id="inputSearch"
|
||||
@keydown.enter.prevent="searchSubmit"
|
||||
>
|
||||
<template v-slot:append><q-icon name="search" /></template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div v-if="mode === 'user'">
|
||||
<div class="q-pa-md bg-grey-1">
|
||||
<div class="row items-center q-col-gutter-md">
|
||||
<div class="col-12 col-md-3">
|
||||
<q-select
|
||||
id="searchField"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
class="bg-white"
|
||||
v-model="searchData.field"
|
||||
:options="optionsField"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-grow">
|
||||
<q-input
|
||||
id="searchValue"
|
||||
class="bg-white"
|
||||
dense
|
||||
outlined
|
||||
v-model="searchData.value"
|
||||
placeholder="เอกสาร"
|
||||
@keydown.enter.prevent="searchSubmit"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
name="close"
|
||||
@click="() => ((searchData.value = ''), (isSearch = false))"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="row items-center justify-between q-gutter-y-md q-pt-sm">
|
||||
<div class="column col-grow">
|
||||
<advanced-search
|
||||
ref="advSearchComp"
|
||||
:searchSubmit="searchSubmit"
|
||||
:submit-search-data="submitSearchData"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isAdvSearchCall === false">
|
||||
<q-btn
|
||||
style="width: 150px"
|
||||
color="primary"
|
||||
label="ค้นหา"
|
||||
icon="mdi-magnify"
|
||||
@click="searchSubmit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
</div>
|
||||
<q-separator />
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue