front/hadith_ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bookmark

Browse Source
This commit is contained in:
Baghi 2025-04-17 17:03:46 +03:30
parent 26f19fb9fc
commit 52760b0150
4 changed files with 110 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
components/haditha/AutoComplation.vue
View File

@ -57,7 +57,7 @@ const search_type = ref("normal");
const type_key = ref("hadith"); const type_key = ref("hadith");
const typeModelValue = ref("normal"); const typeModelValue = ref("normal");
const typeModelValueFa = ref(""); const typeModelValueFa = ref("");
const showclearButton = ref(false); // const showclearButton = ref(false);
// If you want to share state across multiple components, // If you want to share state across multiple components,
// you can use the same key in useState. Nuxt will ensure // you can use the same key in useState. Nuxt will ensure
@ -169,17 +169,17 @@ const clearSimilar = () => {
// const onUpdateModel = (newVal: boolean | InputMenuItem | any) => { // const onUpdateModel = (newVal: boolean | InputMenuItem | any) => {
// console.info("onUpdateModel", newVal); // console.info("onUpdateModel", newVal);
// }; // };
const searchButtonIcon = computed(() => { // const searchButtonIcon = computed(() => {
return showclearButton.value ? "i-lucide-x" : "i-haditha-search"; // return showclearButton.value ? "i-lucide-x" : "i-haditha-search";
}); // });
const handleSearchClearButton = ()=>{ // const handleSearchClearButton = ()=>{
showclearButton.value = true; // showclearButton.value = true;
sendQuery(); // sendQuery();
} // }
const onKeyDown = () => { const onKeyDown = () => {
showclearButton.value = false; // showclearButton.value = false;
// clearTimeout(typingTimer.value); // clearTimeout(typingTimer.value);
}; };
@ -235,6 +235,12 @@ const sendQuery = async (payload = {}) => {
return await httpService return await httpService
.postRequest(url, payload) .postRequest(url, payload)
.then((res) => { .then((res) => {
emit("response-ready", {
res: res,
searchQuery: searchTerm.value,
disableAutoRedirect: true,
});
// pass res and search query to the parent. // pass res and search query to the parent.
loading.value = false; loading.value = false;
@ -244,31 +250,29 @@ const sendQuery = async (payload = {}) => {
// close the history dropdown menu // close the history dropdown menu
open.value = false; open.value = false;
// show clear button // show clear button
if (showclearButton.value) { // if (showclearButton.value) {
searchTerm.value = ""; // searchTerm.value = "";
emit("response-ready", { // emit("response-ready", {
res: { // res: {
hits:{ // hits:{
total:0, // total:0,
hits:[] // hits:[]
} // }
}, // },
searchQuery: searchTerm.value, // searchQuery: searchTerm.value,
disableAutoRedirect: true, // disableAutoRedirect: true,
}); // });
} else { // } else {
emit("response-ready", { // emit("response-ready", {
res: res, // res: res,
searchQuery: searchTerm.value, // searchQuery: searchTerm.value,
disableAutoRedirect: true, // disableAutoRedirect: true,
}); // });
} // }
showclearButton.value = !showclearButton.value; // showclearButton.value = !showclearButton.value;
// store search phrase // store search phrase
useStorage("searchPhrase", searchTerm.value); useStorage("searchPhrase", searchTerm.value);
@ -445,10 +449,10 @@ onMounted(() => {
</div> </div>
<UButton <UButton
class="my-trailing-button" class="my-trailing-button"
:class="{ 'close-mode': showclearButton }" @click.prevent="sendQuery"
@click.prevent="handleSearchClearButton" icon="i-haditha-search"
:icon="searchButtonIcon"
> >
<!-- // @click.prevent="handleSearchClearButton" // :icon="searchButtonIcon" -->
<!-- <UIcon name="i-lucide-search" /> --> <!-- <UIcon name="i-lucide-search" /> -->
</UButton> </UButton>
<!-- </client-only> --> <!-- </client-only> -->
@ -606,7 +610,7 @@ onMounted(() => {
{{ state.phrase.label }} {{ state.phrase.label }}
<UIcon <UIcon
v-if="search_type == 'phrase'" v-if="search_type == 'phrase'"
@click.self="search_type = 'normal'" @click.self="setType('normal')"
name="i-haditha-close-bg-circle" name="i-haditha-close-bg-circle"
size="20px" size="20px"
> >

5
components/haditha/NavigationMenu.vue
View File

@ -126,7 +126,7 @@ const leftItem = computed(() => [
const isMobile = ref(false); const isMobile = ref(false);
const rerenderNavigation = ref(1); const rerenderNavigation = ref(1);
const { isAuthenticatedGetter } = useAuthStore(); const { isAuthenticatedGetter, isRealUserGetter } = useAuthStore();
const setMenu = () => { const setMenu = () => {
if (isAuthenticatedGetter) { if (isAuthenticatedGetter) {
@ -152,6 +152,9 @@ const setMenu = () => {
setMenu(); setMenu();
// if(!(isAuthenticatedGetter && isRealUserGetter))
// items.value = items.value.filter((item) => item.to != "/haditha/favorites");
onMounted(() => { onMounted(() => {
if (window?.outerWidth < 991) { if (window?.outerWidth < 991) {
isMobile.value = true; isMobile.value = true;

42
components/haditha/search-page/SearchList.vue
View File

@ -24,7 +24,10 @@ function openModal(selectedItem) {
// modal.open(SearchShow, { title: "Welcome" }); // modal.open(SearchShow, { title: "Welcome" });
// isModalOpen.value = true; // isModalOpen.value = true;
const slug = selectedItem._source.content.split(' ').filter((v,i)=>i<4).join('-'); const slug = selectedItem._source.content
.split(" ")
.filter((v, i) => i < 4)
.join("-");
router.push({ router.push({
name: "hadithaSearchShow", name: "hadithaSearchShow",
@ -34,7 +37,7 @@ function openModal(selectedItem) {
}, },
query: { query: {
firstPage: 1, firstPage: 1,
page_count:props.total page_count: props.total,
}, },
}); });
} }
@ -68,20 +71,31 @@ function openModal(selectedItem) {
v-for="(item, index) in props.list" v-for="(item, index) in props.list"
:key="index" :key="index"
> >
<p @click="openModal(item)" class="from-person"> <a
:href="`/haditha/search/${item._source.id}/${
item._source.meta.hadith_masoum ?? item?._source?.meta?.hadith_sanad
}`"
@click.prevent="openModal(item)"
class="from-person block"
>
{{ {{
item?._source?.meta?.hadith_masoum ?? item?._source?.meta?.hadith_masoum ??
item?._source?.meta?.hadith_sanad ?? item?._source?.meta?.hadith_sanad
"بدون عنوان"
}} }}
</p> </a>
<p @click="openModal(item)" class="arabic-text"> <a
@click.prevent="openModal(item)"
class="arabic-text block"
:href="`/haditha/search/${item._source.id}/${item._source.content_ar}`"
>
{{ item?._source?.content_ar }} {{ item?._source?.content_ar }}
</p> </a>
<p <a
class="persian-text" @click.prevent="openModal(item)"
:href="`/haditha/search/${item._source.id}/${item._source.content}`"
class="persian-text block"
v-html="item?.highlight?.['content.fa'] ?? item?._source?.content" v-html="item?.highlight?.['content.fa'] ?? item?._source?.content"
></p> ></a>
<div class="flex justify-end"> <div class="flex justify-end">
<p class="reference"> <p class="reference">
{{ item?._source?.address?.vol_title }}، صفحه {{ item?._source?.address?.vol_title }}، صفحه
@ -202,7 +216,7 @@ function openModal(selectedItem) {
.reference { .reference {
height: 24px; height: 24px;
gap: 4px; gap: 4px;
padding-top: 0.25em; /*4px*/ padding-top: 0.25em; /*4px*/
padding-right: 0.5em; /*8px*/ padding-right: 0.5em; /*8px*/
padding-bottom: 0.25em; /*4px*/ padding-bottom: 0.25em; /*4px*/
padding-left: 0.5em; /*8px*/ padding-left: 0.5em; /*8px*/
@ -231,7 +245,7 @@ function openModal(selectedItem) {
font-family: IRANSansX; font-family: IRANSansX;
font-weight: 300; font-weight: 300;
font-size: 1rem; font-size: 1rem;
line-height: 1.5rem; /*24px*/ line-height: 1.5rem; /*24px*/
letter-spacing: 0%; letter-spacing: 0%;
text-align: center; text-align: center;
} }
@ -248,7 +262,7 @@ function openModal(selectedItem) {
box-shadow: 0px 8px 20px 0px #0000001a; box-shadow: 0px 8px 20px 0px #0000001a;
background: #ffffff; background: #ffffff;
width: 100%; width: 100%;
max-width: 720px; /*18px*/ max-width: 720px; /*18px*/
border-radius: 16px; /*18px*/ border-radius: 16px; /*18px*/
gap: 8px; gap: 8px;
border-width: 0.3px; border-width: 0.3px;

51
pages/haditha/search/[id]/[slug]/index.vue
View File

@ -174,7 +174,13 @@ const goToTheChatbot = () => {
}; };
const handleFavorite = async () => { const handleFavorite = async () => {
addToFavorites(state.selectedItem); if (state.selectedItem?._source?.tbookmark) {
await removeFromFavorites(state.selectedItem);
state.selectedItem._source.tbookmark = false;
} else {
await addToFavorites(state.selectedItem);
state.selectedItem._source.tbookmark = true;
}
// // add // // add
// if (!state.selectedItem._source.tbookmark) { // if (!state.selectedItem._source.tbookmark) {
@ -220,8 +226,8 @@ const handlePagination = (prevNextIndicator: string) => {
let url = repoUrl() + hadithaApi.search.prevNextHadith; let url = repoUrl() + hadithaApi.search.prevNextHadith;
url = url.replace("@index_key", "dhparag"); url = url.replace("@index_key", "dhparag");
url = url.replace("@vol_id", state.selectedItem._source.address.vol_id); url = url.replace("@vol_id", state.selectedItem?._source?.address?.vol_id);
url = url.replace("@parag_order", state.selectedItem._source.parag_order); url = url.replace("@parag_order", state.selectedItem?._source?.parag_order);
url = url.replace("@step", prevNextIndicator); url = url.replace("@step", prevNextIndicator);
httpService httpService
@ -305,14 +311,19 @@ const handlePagination = (prevNextIndicator: string) => {
<span class="section-title"> <span class="section-title">
{{ {{
state.selectedItem?._source?.meta?.hadith_masoum ?? state.selectedItem?._source?.meta?.hadith_masoum ??
"بدون عنوان" state.selectedItem?._source?.meta?.hadith_sanad
}} }}
</span> </span>
<UButton <UButton
v-if="
state.selectedItem?._source?.meta?.hadith_masoum
?.length ||
state.selectedItem?._source?.meta?.hadith_sanad
"
@click=" @click="
copyTextToClipboard( copyTextToClipboard(
state.selectedItem?._source?.meta?.hadith_masoum ?? '' state.selectedItem?._source?.content_ar ?? ''
) )
" "
variant="ghost" variant="ghost"
@ -320,8 +331,13 @@ const handlePagination = (prevNextIndicator: string) => {
label="کپی" label="کپی"
/> />
</div> </div>
<div class="arabic-text"> <div
<p>بدون متن عربی</p> v-if="state.selectedItem?._source?.content_ar?.length"
class="arabic-text"
>
<p>
{{ state.selectedItem?._source?.content_ar ?? "" }}
</p>
</div> </div>
</div> </div>
@ -345,7 +361,7 @@ const handlePagination = (prevNextIndicator: string) => {
<p class="from"> <p class="from">
{{ {{
state.selectedItem?._source?.meta?.hadith_masoum ?? state.selectedItem?._source?.meta?.hadith_masoum ??
"بدون عنوان" state.selectedItem?._source?.meta?.hadith_sanad
}}: }}:
</p> </p>
<p <p
@ -356,13 +372,16 @@ const handlePagination = (prevNextIndicator: string) => {
<div class="separator"></div> <div class="separator"></div>
<div class="text-description-section"> <div
v-if="state.selectedItem?._source?.description?.length"
class="text-description-section"
>
<div class="section-header"> <div class="section-header">
<span class="section-title"> شرح </span> <span class="section-title"> شرح </span>
<UButton <UButton
@click=" @click="
copyTextToClipboard( copyTextToClipboard(
state.selectedItem?._source?.content state.selectedItem?._source?.description
) )
" "
variant="ghost" variant="ghost"
@ -372,14 +391,17 @@ const handlePagination = (prevNextIndicator: string) => {
</div> </div>
<p <p
class="description-item" class="description-item"
v-html="state.selectedItem?._source?.content" v-html="state.selectedItem?._source?.description"
></p> ></p>
</div> </div>
<div class="separator"></div> <div class="separator"></div>
<div class="text-description-section"> <div class="text-description-section">
<div class="text-sm mb-1"> <div
v-if="state.selectedItem?._source?.ai_keywords?.length"
class="text-sm mb-1"
>
<span class=""> کلیدواژگان: </span> <span class=""> کلیدواژگان: </span>
<span <span
class="me-1 text-gray-400 font-light" class="me-1 text-gray-400 font-light"
@ -392,7 +414,10 @@ const handlePagination = (prevNextIndicator: string) => {
</span> </span>
</div> </div>
<div class="text-sm"> <div
class="text-sm"
v-if="state.selectedItem?._source?.ai_classes?.length"
>
<span class=""> دسته بندی ها: </span> <span class=""> دسته بندی ها: </span>
<span <span
class="me-1 text-gray-400 font-light" class="me-1 text-gray-400 font-light"