search_ui/components/search/AdvancedSearch.vue
2025-02-26 16:31:22 +03:30

179 lines
5.4 KiB
Vue

<template>
<div class="advanced-search firefox-scrollbar">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<form>
<component
v-for="(formElement, index) in localFormElements"
:key="index"
:formElement="getValueToFormElement(formElement)"
:inputClass="formElement.inputClass"
:labelClass="formElement.labelClass"
:is="returnComponentName(formElement.type)"
@tribute-on-search="remoteSearch"
@oninput="createQuery($event, index)"
class="inside-advanced-search"
></component>
<div class="d-flex justify-content-end align-items-baseline">
<div class="bottom-close-form ms-3">
<a @click.prevent="closeAdvancedSearch">بستن</a>
</div>
<div class="bottom-save-form">
<button
type="submit"
class="btn btn-primary"
style="font-size: 11px; height: 3em; width: 7em"
@click.prevent="searchStart()"
>
جستجو
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
import { useResearchStore } from "../../../stores/researchStore";
import { mapState } from "pinia";
export default {
data() {
return {
listUpdatedText: {},
localFormElements: [],
value: "",
};
},
computed: {
...mapState(useSearchStore, ["searchActiveTabGetter"]),
...mapState(useResearchStore, ["researchSchemaGetter"]),
},
watch: {
researchSchemaGetter: {
handler: function (newSchema) {
if (newSchema[0].advance)
this.localFormElements = structuredClone(newSchema[0].advance);
},
// deep: true,
immediate: true,
},
},
beforeMount() {
this.httpService = new HttpService(import.meta.env.VITE_BASE_URL);
},
mounted() {
this.localFormElements = structuredClone(
this.researchSchemaGetter[0].advance
);
},
methods: {
closeAdvancedSearch() {
this.$emit("closeAdvancedSearch");
},
remoteSearch({ text, cb, item }) {
// for clearing the query when user remove by keyboard backspace.
if (text == "") this.makeSearchParams(undefined, 1);
let url = item.completion;
text = text.trim();
url = url.replace("{{key}}", this.researchSchemaGetter[0].key);
if (text == "") url = url.replace("/{{query}}", "");
else url = url.replace("{{query}}", text);
this.httpService.getRequest(url).then((response) => {
cb(response.data);
});
},
getValueToFormElement(elements) {
Object.keys(elements).forEach((key, index) => {
elements["value"] = this.researchSchemaGetter[0][elements.key];
});
return elements;
},
saveComponentValue(value, formElement) {
// در صورت تغییر نگهداری می شود تا وقتی کلید ثبت زد، ذخیره شود
if (this.researchSchemaGetter[0][formElement.key] != value) {
this.listUpdatedText[formElement.key] = value;
}
},
returnComponentName(type) {
// if(!this.isEditable(searchActiveTabGetter?.key))
// return "LabelComponent";
if (type == "select") return "SelectComponent";
else if (type == "range_date") return "RangeDateComponent";
else if (type == "completion") return "TributeComponent";
else return "InputComponent";
},
// این لازم نیست و استفاده نداره!!!!!
// saveProperty() {
// let id = this.$route.params.id;
// let key = this.$route.params.key;
// let formData = {
// id: id,
// meta: JSON.stringify(this.listUpdatedText),
// };
// let url = "/public/{{index_key}}/update/{{id}}";
// url = url.replace("{{index_key}}", key).replace("{{id}}", id);
// this.httpService.postRequest(url, formData).then((res) => {
// this.getServerItem();
// });
// },
createQuery(evt, index) {
// evt.target.value => from input component.
//evt => from datetime component.
let value = evt?.target?.value ?? evt;
this.$emit("set-query-advanced", this.makeSearchParams(value, index));
},
makeSearchParams(value, index) {
if (value != undefined) this.localFormElements[index].value = value;
else this.localFormElements[index].value = undefined;
let query = "";
this.localFormElements.forEach((item, rowIndex, array) => {
if (item.value?.length)
query += "#" + item.tag + " " + item.value + " ";
});
return query;
},
searchStart() {
this.$emit("searchStart", this.searchStartValue());
},
searchStartValue() {
let query = "";
this.localFormElements.forEach((item, rowIndex, array) => {
if (item.value?.length)
query += "#" + item.tag + " " + item.value + " ";
});
return myEncodeQuery(query);
},
myEncodeQuery(text) {
let ch1 = encodeURIComponent("#");
let ch2 = encodeURIComponent("/");
let ch3 = encodeURIComponent("\\");
// let ch4 = encodeURIComponent(".");
text = text.replaceAll("#", ch1);
text = text.replaceAll("/", "\\");
text = text.replaceAll("\\", ch3);
// text = text.replaceAll(".", '%2E');
return text;
},
},
};
</script>