diff --git a/assets/haditha/font-icons/close-circle.svg b/assets/haditha/font-icons/close-circle.svg
new file mode 100644
index 0000000..a92e4d6
--- /dev/null
+++ b/assets/haditha/font-icons/close-circle.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.7158C0 7.87926 7.16344 0.71582 16 0.71582C24.8366 0.71582 32 7.87926 32 16.7158C32 25.5524 24.8366 32.7158 16 32.7158C7.16344 32.7158 0 25.5524 0 16.7158Z" fill="#F0F1F4"/>
+<path d="M11 21.7158L21 11.7158" stroke="#1B2132" stroke-linecap="round"/>
+<path d="M11 11.7158L21 21.7158" stroke="#1B2132" stroke-linecap="round"/>
+</svg>
diff --git a/components/haditha/AutoComplation.vue b/components/haditha/AutoComplation.vue
index c184877..f43c75f 100644
--- a/components/haditha/AutoComplation.vue
+++ b/components/haditha/AutoComplation.vue
@@ -57,6 +57,7 @@ const search_type = ref("normal");
const type_key = ref("hadith");
const typeModelValue = ref("normal");
const typeModelValueFa = ref("");
+const showclearButton = ref(false);
// If you want to share state across multiple components,
// you can use the same key in useState. Nuxt will ensure
@@ -168,17 +169,27 @@ const clearSimilar = () => {
// const onUpdateModel = (newVal: boolean | InputMenuItem | any) => {
// console.info("onUpdateModel", newVal);
// };
+const searchButtonIcon = computed(() => {
+ return showclearButton.value ? "i-lucide-x" : "i-haditha-search";
+});
+
+const handleSearchClearButton = ()=>{
+ showclearButton.value = true;
+ sendQuery();
+}
const onKeyDown = () => {
- clearTimeout(typingTimer.value);
-};
-const onKeyUp = () => {
- clearTimeout(typingTimer.value);
- typingTimer.value = setTimeout(() => {
- if (props.autoRedirection) sendQuery();
- }, doneTypingInterval.value);
+ showclearButton.value = false;
+ // clearTimeout(typingTimer.value);
};
+// const onKeyUp = () => {
+// clearTimeout(typingTimer.value);
+// typingTimer.value = setTimeout(() => {
+// if (props.autoRedirection) sendQuery();
+// }, doneTypingInterval.value);
+// };
+
const setType = (type: string) => {
search_type.value = type;
sendQuery();
@@ -225,11 +236,6 @@ const sendQuery = async (payload = {}) => {
.postRequest(url, payload)
.then((res) => {
// pass res and search query to the parent.
- emit("response-ready", {
- res: res,
- searchQuery: searchTerm.value,
- disableAutoRedirect: true,
- });
loading.value = false;
// check if search term is not empty
@@ -238,6 +244,32 @@ const sendQuery = async (payload = {}) => {
// close the history dropdown menu
open.value = false;
+
+
+ // show clear button
+ if (showclearButton.value) {
+ searchTerm.value = "";
+
+ emit("response-ready", {
+ res: {
+ hits:{
+ total:0,
+ hits:[]
+ }
+ },
+ searchQuery: searchTerm.value,
+ disableAutoRedirect: true,
+ });
+ } else {
+ emit("response-ready", {
+ res: res,
+ searchQuery: searchTerm.value,
+ disableAutoRedirect: true,
+ });
+ }
+
+ showclearButton.value = !showclearButton.value;
+
// store search phrase
useStorage("searchPhrase", searchTerm.value);
})
@@ -405,7 +437,6 @@ onMounted(() => {
@blur="open = false"
@change="sendQuery"
@keydown="onKeyDown"
- @keyup="onKeyUp"
@keydown.enter="sendQuery"
>
<!-- @update:modelValue="onUpdateModel" -->
@@ -414,8 +445,9 @@ onMounted(() => {
</div>
<UButton
class="my-trailing-button"
- @click.prevent="sendQuery"
- icon="i-haditha-search"
+ :class="{ 'close-mode': showclearButton }"
+ @click.prevent="handleSearchClearButton"
+ :icon="searchButtonIcon"
>
<!-- <UIcon name="i-lucide-search" /> -->
</UButton>
@@ -765,6 +797,13 @@ onMounted(() => {
); */
}
}
+ .close-mode {
+ background: #f0f1f4;
+ color: #000; /* رنگ خاکستری */
+ &:hover {
+ background: #e0e0e0; /* رنگ خاکستری */
+ }
+ }
.haditha-search-input {
z-index: 0;
diff --git a/components/haditha/search-page/SearchList.vue b/components/haditha/search-page/SearchList.vue
index d909a49..10241d1 100644
--- a/components/haditha/search-page/SearchList.vue
+++ b/components/haditha/search-page/SearchList.vue
@@ -23,11 +23,18 @@ const router = useRouter();
function openModal(selectedItem) {
// modal.open(SearchShow, { title: "Welcome" });
// isModalOpen.value = true;
+
+ const slug = selectedItem._source.content.split(' ').filter((v,i)=>i<4).join('-');
+
router.push({
name: "hadithaSearchShow",
params: {
- id: selectedItem._id,
- slug: "no-slug",
+ id: selectedItem._source.id,
+ slug: slug,
+ },
+ query: {
+ firstPage: 1,
+ page_count:props.total
},
});
}
diff --git a/pages/haditha/search/[id]/[slug]/index.vue b/pages/haditha/search/[id]/[slug]/index.vue
index 952f81d..f0ec899 100644
--- a/pages/haditha/search/[id]/[slug]/index.vue
+++ b/pages/haditha/search/[id]/[slug]/index.vue
@@ -228,10 +228,14 @@ const handlePagination = (prevNextIndicator: string) => {
.getRequest(url)
.then((res) => {
state.selectedItem = res.hits.hits?.[0];
+ page_num.value = res.hits.hits[0]._source.address.page_num ?? 1;
})
.finally(() => (loading.value = false));
};
-
+const page_num = ref(1);
+const handlePageChange = () => {
+ handlePagination(1, page_num.value);
+};
// const localCopyTextToClipboard = (text: string) => {
// copyTextToClipboard(text);
// };
@@ -413,24 +417,24 @@ const handlePagination = (prevNextIndicator: string) => {
<div class="body-footer">
<div class="mt-5 z-2">
- <div class="flex justify-between actions">
- <UButton
+ <!-- <div class="flex justify-between actions"> -->
+ <!-- <UButton
disabled
class="similar-btn"
icon="i-haditha-search-3"
label="مشابه"
color="neutral"
variant="outline"
- />
- <!-- @click.prevent="goToTheSearch('similar')" -->
- <UButton
+ /> -->
+ <!-- @click.prevent="goToTheSearch('similar')" -->
+ <!-- <UButton
class="explore-btn"
trailing-icon="i-haditha-explore"
label="کاوش"
variant="solid"
@click.prevent="goToTheChatbot"
- />
- </div>
+ /> -->
+ <!-- </div> -->
<div class="flex justify-between pagination">
<UButton
@click="handlePagination('-1')"
@@ -440,6 +444,27 @@ const handlePagination = (prevNextIndicator: string) => {
variant="soft"
icon="i-haditha-chevron-right"
/>
+ <div class="flex items-center">
+ <span class="total-pages">{{ route.query.page_count }}</span>
+ <span class="mx-2">/</span>
+ <UInput
+ :disabled="loading"
+ color="neutral"
+ variant="outline"
+ v-model="page_num"
+ @change="handlePageChange"
+ :ui="{
+ root: 'root ',
+ base: 'base page-number-input',
+ leading: 'leading',
+ leadingIcon: 'leadingIcon',
+ leadingAvatar: 'leadingAvatar',
+ leadingAvatarSize: 'leadingAvatarSize',
+ trailing: 'trailing',
+ trailingIcon: 'trailingIcon',
+ }"
+ />
+ </div>
<UButton
@click="handlePagination('1')"
class="next-haditha"
@@ -778,6 +803,15 @@ const handlePagination = (prevNextIndicator: string) => {
text-align: right;
color: var(--ui-color-two);
}
+ .total-pages {
+ font-family: IRANSansX;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 100%;
+ letter-spacing: 0%;
+ text-align: right;
+ color: #8a92a8;
+ }
}
}
}
diff --git a/pages/haditha/search/index.vue b/pages/haditha/search/index.vue
index e4b7efa..a25b7a4 100644
--- a/pages/haditha/search/index.vue
+++ b/pages/haditha/search/index.vue
@@ -90,7 +90,7 @@ const SearchList = defineAsyncComponent(() =>
</div>
<div
v-if="searchQuery?.length == 0"
- class="flex justify-center flex-col items-center"
+ class="flex justify-center flex-col items-center mt-10"
>
<img
fit="auto"
@@ -100,7 +100,7 @@ const SearchList = defineAsyncComponent(() =>
/>
<div class="title">
کاوش با
- <span class="badge-style"> هوش مصنوعی </span>
+ <span class="badge-style mx-1">هوش مصنوعی</span>
در احادیث اسلامی
</div>
</div>