...
This commit is contained in:
Mehdi104797
commit
c4495245b2
|
|
@ -1,7 +1,7 @@
|
|||
export default {
|
||||
search: {
|
||||
list: "repo/monir/search/@index_key/@search_type/@type_key/@listkey/@field_collapsed/@offset/@limit/@q=none",
|
||||
show: "repo/public/get/byid/@index_key/@id",
|
||||
show: "repo/public/get/byid/@index_key/@id/tbookmark",
|
||||
synonym: "synonym/get/words",
|
||||
prevNextHadith: "monir/next/@index_key/@vol_id/@parag_order/@step",
|
||||
getDataTree: "@appname/book/tree/@offset/@limit/@vol_id/@q"
|
||||
|
|
|
|||
5
assets/haditha/font-icons/close-circle.svg
Normal file
5
assets/haditha/font-icons/close-circle.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 441 B |
|
|
@ -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();
|
||||
|
|
@ -224,13 +235,14 @@ const sendQuery = async (payload = {}) => {
|
|||
return await httpService
|
||||
.postRequest(url, payload)
|
||||
.then((res) => {
|
||||
// pass res and search query to the parent.
|
||||
emit("response-ready", {
|
||||
res: res,
|
||||
searchQuery: searchTerm.value,
|
||||
disableAutoRedirect: true,
|
||||
});
|
||||
|
||||
// pass res and search query to the parent.
|
||||
|
||||
loading.value = false;
|
||||
// check if search term is not empty
|
||||
if (searchTerm.value) userSearchHistory.value.add(searchTerm.value); // Add the value to the Set
|
||||
|
|
@ -238,6 +250,30 @@ 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 +441,6 @@ onMounted(() => {
|
|||
@blur="open = false"
|
||||
@change="sendQuery"
|
||||
@keydown="onKeyDown"
|
||||
@keyup="onKeyUp"
|
||||
@keydown.enter="sendQuery"
|
||||
>
|
||||
<!-- @update:modelValue="onUpdateModel" -->
|
||||
|
|
@ -417,6 +452,7 @@ onMounted(() => {
|
|||
@click.prevent="sendQuery"
|
||||
icon="i-haditha-search"
|
||||
>
|
||||
<!-- // @click.prevent="handleSearchClearButton" // :icon="searchButtonIcon" -->
|
||||
<!-- <UIcon name="i-lucide-search" /> -->
|
||||
</UButton>
|
||||
<!-- </client-only> -->
|
||||
|
|
@ -574,7 +610,7 @@ onMounted(() => {
|
|||
{{ state.phrase.label }}
|
||||
<UIcon
|
||||
v-if="search_type == 'phrase'"
|
||||
@click.self="search_type = 'normal'"
|
||||
@click.self="setType('normal')"
|
||||
name="i-haditha-close-bg-circle"
|
||||
size="20px"
|
||||
>
|
||||
|
|
@ -765,6 +801,13 @@ onMounted(() => {
|
|||
); */
|
||||
}
|
||||
}
|
||||
.close-mode {
|
||||
background: #f0f1f4;
|
||||
color: #000; /* رنگ خاکستری */
|
||||
&:hover {
|
||||
background: #e0e0e0; /* رنگ خاکستری */
|
||||
}
|
||||
}
|
||||
.haditha-search-input {
|
||||
z-index: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -30,23 +30,8 @@ const goToLibraryShow = (item) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="library-list-contianer">
|
||||
<div class="page-header flex items-center">
|
||||
<span class="title">کتابخانه</span>
|
||||
<img
|
||||
fit="auto"
|
||||
quality="80"
|
||||
placeholder
|
||||
src="/img/haditha/haditha-title.svg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="library-list grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-5 md:gap-x-28 md:gap-y-12 mx-6"
|
||||
>
|
||||
<UCard
|
||||
class="mx-auto"
|
||||
v-if="props.list.length"
|
||||
v-if="props.list?.length"
|
||||
v-for="(item, index) in props.list"
|
||||
:key="index"
|
||||
variant="solid"
|
||||
|
|
@ -101,42 +86,10 @@ const goToLibraryShow = (item) => {
|
|||
<img fit="auto" quality="80" placeholder :src="props.noDataIcon" />
|
||||
<p class="no-data-text">{{ props.noDataText }}</p>
|
||||
</no-data>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.library-list-contianer {
|
||||
margin-top: 10em;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 1em;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
height: 100%;
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 2em;
|
||||
.title {
|
||||
margin-left: 0.4em;
|
||||
font-family: IRANSansX;
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
|
||||
color: var(--ui-color-two);
|
||||
}
|
||||
}
|
||||
|
||||
.library-list {
|
||||
/* padding: 1em 1.3em; */
|
||||
height: calc(100dvh - 13.5em);
|
||||
overflow-y: auto;
|
||||
/* margin: 0 24px; */
|
||||
|
||||
.library-list-item {
|
||||
.library-list-item {
|
||||
width: 140;
|
||||
height: 200;
|
||||
border-radius: 8px;
|
||||
|
|
@ -161,16 +114,6 @@ const goToLibraryShow = (item) => {
|
|||
text-align: right;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-data-text {
|
||||
font-family: IRANSansX;
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
}
|
||||
@media screen and (max-width: 719.99px) {
|
||||
.library-list {
|
||||
height: calc(100dvh - 13em);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { useAuthStore } from "@stores/authStore";
|
||||
|
||||
// {
|
||||
// label: "چت بات",
|
||||
// icon: "i-haditha-chat-bot",
|
||||
// to: "/haditha/chat-bot",
|
||||
// slot: "chat-bot",
|
||||
// class: "flex flex-col lg:flex-row justify-center items-center",
|
||||
// },
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: "حانه",
|
||||
|
|
@ -16,13 +24,7 @@ const items = ref([
|
|||
slot: "search",
|
||||
class: "flex flex-col lg:flex-row justify-center items-center",
|
||||
},
|
||||
{
|
||||
label: "چت بات",
|
||||
icon: "i-haditha-chat-bot",
|
||||
to: "/haditha/chat-bot",
|
||||
slot: "chat-bot",
|
||||
class: "flex flex-col lg:flex-row justify-center items-center",
|
||||
},
|
||||
|
||||
{
|
||||
label: "کتابخانه",
|
||||
icon: "i-haditha-library",
|
||||
|
|
@ -124,7 +126,7 @@ const leftItem = computed(() => [
|
|||
|
||||
const isMobile = ref(false);
|
||||
const rerenderNavigation = ref(1);
|
||||
const { isAuthenticatedGetter } = useAuthStore();
|
||||
const { isAuthenticatedGetter, isRealUserGetter } = useAuthStore();
|
||||
|
||||
const setMenu = () => {
|
||||
if (isAuthenticatedGetter) {
|
||||
|
|
@ -150,6 +152,9 @@ const setMenu = () => {
|
|||
|
||||
setMenu();
|
||||
|
||||
// if(!(isAuthenticatedGetter && isRealUserGetter))
|
||||
// items.value = items.value.filter((item) => item.to != "/haditha/favorites");
|
||||
|
||||
onMounted(() => {
|
||||
if (window?.outerWidth < 991) {
|
||||
isMobile.value = true;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script setup>
|
||||
import hadithaApi from "@haditha/apis/hadithaApi";
|
||||
const httpService = useNuxtApp()["$http"];
|
||||
const props = defineProps({
|
||||
list: {
|
||||
default() {
|
||||
|
|
@ -16,6 +18,7 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
// const modal = useModal();
|
||||
// const isModalOpen = ref(false);
|
||||
|
|
@ -23,11 +26,21 @@ 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,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -45,6 +58,20 @@ function openModal(selectedItem) {
|
|||
// const SearchShow = defineAsyncComponent(() =>
|
||||
// import("@haditha/components/haditha/search-page/SearchShow.vue")
|
||||
// );
|
||||
const removeFromFavorites = async (item = {}, index = 0) => {
|
||||
let url = repoUrl() + hadithaApi.favorite.deleteByRefid;
|
||||
url = url.replace("{{data_type}}", "bookmark");
|
||||
url = url.replace("{{index_key}}", "dhparag");
|
||||
url = url.replace("{{ref_id}}", item._id);
|
||||
|
||||
const formData = {
|
||||
ref_id: item._id,
|
||||
title: item?._source?.title,
|
||||
};
|
||||
httpService.postRequest(url, formData).then((res) => {
|
||||
// this.updateListAnswer(index, "tbookmark", 0);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -61,20 +88,43 @@ function openModal(selectedItem) {
|
|||
v-for="(item, index) in props.list"
|
||||
:key="index"
|
||||
>
|
||||
<p @click="openModal(item)" class="from-person">
|
||||
<div class="flex justify-between mt-4 mb-2">
|
||||
<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_sanad ??
|
||||
"بدون عنوان"
|
||||
item?._source?.meta?.hadith_sanad
|
||||
}}
|
||||
</p>
|
||||
<p @click="openModal(item)" class="arabic-text">
|
||||
</a>
|
||||
<UButton
|
||||
v-if="route.name == 'hadithaFavorites'"
|
||||
@click="removeFromFavorites(item)"
|
||||
variant="ghost"
|
||||
color="error"
|
||||
class="copy-btn"
|
||||
label="حذف"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a
|
||||
@click.prevent="openModal(item)"
|
||||
class="arabic-text block"
|
||||
:href="`/haditha/search/${item?._source?.id}/${item?._source?.content_ar}`"
|
||||
>
|
||||
{{ item?._source?.content_ar }}
|
||||
</p>
|
||||
<p
|
||||
class="persian-text"
|
||||
</a>
|
||||
<a
|
||||
@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"
|
||||
></p>
|
||||
></a>
|
||||
<div class="flex justify-end">
|
||||
<p class="reference">
|
||||
{{ item?._source?.address?.vol_title }}، صفحه
|
||||
|
|
@ -304,4 +354,28 @@ function openModal(selectedItem) {
|
|||
.modal-overlay {
|
||||
background: #00000033;
|
||||
}
|
||||
.copy-btn {
|
||||
padding: 0.2em 1em;
|
||||
|
||||
/* width: 44px; */
|
||||
/* height: 24px; */
|
||||
gap: 4px;
|
||||
border-radius: 6px;
|
||||
border-width: 0.5px;
|
||||
padding-top: 4px;
|
||||
padding-right: 12px;
|
||||
padding-bottom: 4px;
|
||||
padding-left: 12px;
|
||||
/* background: #ffffff; */
|
||||
/* border: 0.5px solid #d9d9d9; */
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0%;
|
||||
text-align: right;
|
||||
|
||||
/* color: #a71111; */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import hadithaApi from "@haditha/apis/hadithaApi";
|
||||
import headLinks from "@haditha/json/haditha/headLinks";
|
||||
import headMetas from "@haditha/json/haditha/headMetas";
|
||||
import { useInfiniteScroll } from "@vueuse/core";
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
|
|
@ -10,153 +13,99 @@ useHead({
|
|||
title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | کتابخانه`,
|
||||
meta: [
|
||||
{ name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
|
||||
{
|
||||
name: "msapplication-TileImage",
|
||||
content: "/img/haditha/fav-icons/ms-icon-144x144.png",
|
||||
},
|
||||
{ name: "theme-color", content: "#ffffff" },
|
||||
...headMetas,
|
||||
],
|
||||
bodyAttrs: {
|
||||
class: import.meta.env.VITE_HADITH_SYSTEM,
|
||||
},
|
||||
link: [
|
||||
{
|
||||
rel: "icon",
|
||||
type: "image/x-icon",
|
||||
href: "/img/haditha/fav-icons/favicon.ico",
|
||||
},
|
||||
{ rel: "manifest", href: "/img/haditha/fav-icons/manifest.json" },
|
||||
// rel: icon
|
||||
{
|
||||
rel: "icon",
|
||||
type: "image/png",
|
||||
sizes: "16x16",
|
||||
href: "/img/haditha/fav-icons/favicon-16x16.png",
|
||||
},
|
||||
{
|
||||
rel: "icon",
|
||||
type: "image/png",
|
||||
sizes: "32x32",
|
||||
href: "/img/haditha/fav-icons/favicon-32x32.png",
|
||||
},
|
||||
{
|
||||
rel: "icon",
|
||||
type: "image/png",
|
||||
sizes: "96x96",
|
||||
href: "/img/haditha/fav-icons/favicon-96x96.png",
|
||||
},
|
||||
{
|
||||
rel: "icon",
|
||||
sizes: "192x192",
|
||||
type: "image/png",
|
||||
href: "/img/haditha/fav-icons/android-icon-192x192.png",
|
||||
},
|
||||
// rel: apple
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "57x57",
|
||||
href: "/img/haditha/fav-icons/apple-icon-57x57.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "60x60",
|
||||
href: "/img/haditha/fav-icons/android-icon-60x60.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "72x72",
|
||||
href: "/img/haditha/fav-icons/android-icon-72x72.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "76x76",
|
||||
href: "/img/haditha/fav-icons/android-icon-76x76.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "114x114",
|
||||
href: "/img/haditha/fav-icons/android-icon-114x114.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "120x120",
|
||||
href: "/img/haditha/fav-icons/android-icon-120x120.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "144x144",
|
||||
href: "/img/haditha/fav-icons/android-icon-144x144.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "152x152",
|
||||
href: "/img/haditha/fav-icons/android-icon-152x152.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "180x180",
|
||||
href: "/img/haditha/fav-icons/android-icon-180x180.png",
|
||||
},
|
||||
],
|
||||
link: headLinks,
|
||||
});
|
||||
|
||||
// #region refs
|
||||
const loading = ref(false);
|
||||
const el = useTemplateRef<HTMLElement>("el");
|
||||
const httpService = useNuxtApp()["$http"];
|
||||
|
||||
const route = useRoute();
|
||||
const page = ref(Number(route.query.page) || 1);
|
||||
// #endregion refs
|
||||
|
||||
// #region reactive
|
||||
const state = reactive({
|
||||
list: [],
|
||||
counts: [],
|
||||
totalCounts: [],
|
||||
libraryList: new Array(20).fill(0),
|
||||
pagination: {
|
||||
offset: 0,
|
||||
limit: 10,
|
||||
page: 1,
|
||||
pages: 1,
|
||||
},
|
||||
});
|
||||
// #endregion reactive
|
||||
|
||||
// #region methods
|
||||
|
||||
const getLibraryList = async (dataType = "bookmark") => {
|
||||
if (loading.value) return;
|
||||
|
||||
loading.value = true;
|
||||
|
||||
let url = repoUrl() + hadithaApi.library.list;
|
||||
url = url.replace("@field_collapsed", "normal");
|
||||
url = url.replace("@offset", 0);
|
||||
url = url.replace("@limit", 20);
|
||||
url = url.replace("@offset", state.pagination.offset);
|
||||
url = url.replace("@limit", state.pagination.limit);
|
||||
url = url.replace("@q", "none");
|
||||
|
||||
return await httpService
|
||||
.postRequest(url)
|
||||
.then((res) => {
|
||||
state.libraryList = res.hits.hits;
|
||||
console.info(state.libraryList)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.info(err);
|
||||
loading.value = false;
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
return await httpService.postRequest(url);
|
||||
};
|
||||
// #endregion methods
|
||||
|
||||
// #region hooks
|
||||
onMounted(() => {
|
||||
getLibraryList();
|
||||
});
|
||||
// Server-side initial load
|
||||
const { data: initialItems } = await useAsyncData(
|
||||
"libraryList",
|
||||
() => getLibraryList(),
|
||||
{
|
||||
transform: (data) => data.hits.hits,
|
||||
getCachedData: (key) => {
|
||||
return useNuxtApp().payload.data[key] || useNuxtApp().static.data[key];
|
||||
},
|
||||
watch: [page],
|
||||
}
|
||||
);
|
||||
|
||||
// Client-side state
|
||||
const loadedItems = ref([]);
|
||||
const loading = ref(false);
|
||||
const hasMore = ref(true);
|
||||
const loader = ref(null);
|
||||
const totalPages = ref(10); // Set based on your API response
|
||||
|
||||
// Client-side infinite scroll
|
||||
useInfiniteScroll(
|
||||
el,
|
||||
async () => {
|
||||
if (!hasMore.value || loading.value) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
// const nextPage = page.value + 1;
|
||||
await getLibraryList().then((res) => {
|
||||
const hits = res.hits.hits;
|
||||
|
||||
if (hits.length) {
|
||||
loadedItems.value.push(...hits);
|
||||
state.pagination.offset += state.pagination.limit;
|
||||
} else {
|
||||
hasMore.value = false;
|
||||
}
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
},
|
||||
{ distance: 100 }
|
||||
);
|
||||
// #endregion methods
|
||||
|
||||
// components declaration
|
||||
const HadithaLayout = defineAsyncComponent(() =>
|
||||
import("@haditha/layouts/HadithaLayout.vue")
|
||||
const HadithaLayout = defineAsyncComponent(
|
||||
() => import("@haditha/layouts/HadithaLayout.vue")
|
||||
);
|
||||
const NavigationMenu = defineAsyncComponent(() =>
|
||||
import("@haditha/components/haditha/NavigationMenu.vue")
|
||||
const NavigationMenu = defineAsyncComponent(
|
||||
() => import("@haditha/components/haditha/NavigationMenu.vue")
|
||||
);
|
||||
const CardList = defineAsyncComponent(() =>
|
||||
import("@haditha/components/haditha/CardList.vue")
|
||||
const CardList = defineAsyncComponent(
|
||||
() => import("@haditha/components/haditha/CardList.vue")
|
||||
);
|
||||
</script>
|
||||
|
||||
|
|
@ -165,11 +114,30 @@ const CardList = defineAsyncComponent(() =>
|
|||
<div class="search-box-container h-full flex flex-col justify-center">
|
||||
<navigation-menu></navigation-menu>
|
||||
|
||||
<div class="library-list-contianer">
|
||||
<div class="page-header flex items-center">
|
||||
<span class="title">کتابخانه</span>
|
||||
<img fit="auto" quality="80" src="/img/haditha/haditha-title.svg" />
|
||||
</div>
|
||||
|
||||
<div ref="el" class="library-list grid grid-cols-5 gap-x-28 gap-y-12">
|
||||
<!-- Client-side loaded content -->
|
||||
<card-list
|
||||
v-if="loadedItems.length"
|
||||
no-data-text="هنوز چیزی ذخیره نکردهاید!"
|
||||
no-data-icon="/img/haditha/no-data.png"
|
||||
:list="state.libraryList"
|
||||
:list="loadedItems"
|
||||
></card-list>
|
||||
|
||||
<!-- Server-rendered initial content -->
|
||||
<card-list
|
||||
v-else
|
||||
no-data-text="هنوز چیزی ذخیره نکردهاید!"
|
||||
no-data-icon="/img/haditha/no-data.png"
|
||||
:list="initialItems"
|
||||
></card-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HadithaLayout>
|
||||
</template>
|
||||
|
|
@ -178,6 +146,44 @@ const CardList = defineAsyncComponent(() =>
|
|||
.search-box-container {
|
||||
padding-top: 8.3em;
|
||||
background: #f7fffd;
|
||||
|
||||
.library-list-contianer {
|
||||
margin-top: 10em;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 1em;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 2em;
|
||||
.title {
|
||||
margin-left: 0.4em;
|
||||
font-family: IRANSansX;
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
|
||||
color: var(--ui-color-two);
|
||||
}
|
||||
}
|
||||
|
||||
.library-list {
|
||||
/* padding: 1em 1.3em; */
|
||||
height: calc(100dvh - 13.5em);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.no-data-text {
|
||||
font-family: IRANSansX;
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 719.99px) {
|
||||
|
|
|
|||
|
|
@ -132,6 +132,7 @@ const route = useRoute();
|
|||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const httpService = useNuxtApp()["$http"];
|
||||
const toast = useToast();
|
||||
|
||||
const state = reactive({
|
||||
selectedItem: {} as HadithResponseShowModel,
|
||||
|
|
@ -174,7 +175,13 @@ const goToTheChatbot = () => {
|
|||
};
|
||||
|
||||
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
|
||||
// if (!state.selectedItem._source.tbookmark) {
|
||||
|
|
@ -196,6 +203,21 @@ const addToFavorites = async (item = {}) => {
|
|||
};
|
||||
httpService.postRequest(url, formData).then((res) => {
|
||||
// this.updateListAnswer(index, "tbookmark", 1);
|
||||
|
||||
try {
|
||||
toast.add({
|
||||
title: "انجام شد.",
|
||||
description: "به نشان شده ها افزوده شد",
|
||||
color: "success",
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err.message);
|
||||
toast.add({
|
||||
title: "انجام شد.",
|
||||
description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
|
||||
color: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -211,6 +233,21 @@ const removeFromFavorites = async (item = {}, index = 0) => {
|
|||
};
|
||||
httpService.postRequest(url, formData).then((res) => {
|
||||
// this.updateListAnswer(index, "tbookmark", 0);
|
||||
|
||||
try {
|
||||
toast.add({
|
||||
title: "انجام شد.",
|
||||
description: "از لیست نشان شده ها حذف شد",
|
||||
color: "success",
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err.message);
|
||||
toast.add({
|
||||
title: "انجام شد.",
|
||||
description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
|
||||
color: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -220,8 +257,8 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
|
||||
let url = repoUrl() + hadithaApi.search.prevNextHadith;
|
||||
url = url.replace("@index_key", "dhparag");
|
||||
url = url.replace("@vol_id", state.selectedItem._source.address.vol_id);
|
||||
url = url.replace("@parag_order", state.selectedItem._source.parag_order);
|
||||
url = url.replace("@vol_id", state.selectedItem?._source?.address?.vol_id);
|
||||
url = url.replace("@parag_order", state.selectedItem?._source?.parag_order);
|
||||
url = url.replace("@step", prevNextIndicator);
|
||||
|
||||
httpService
|
||||
|
|
@ -305,14 +342,19 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
<span class="section-title">
|
||||
{{
|
||||
state.selectedItem?._source?.meta?.hadith_masoum ??
|
||||
"بدون عنوان"
|
||||
state.selectedItem?._source?.meta?.hadith_sanad
|
||||
}}
|
||||
</span>
|
||||
|
||||
<UButton
|
||||
v-if="
|
||||
state.selectedItem?._source?.meta?.hadith_masoum
|
||||
?.length ||
|
||||
state.selectedItem?._source?.meta?.hadith_sanad
|
||||
"
|
||||
@click="
|
||||
copyTextToClipboard(
|
||||
state.selectedItem?._source?.meta?.hadith_masoum ?? ''
|
||||
state.selectedItem?._source?.content_ar ?? ''
|
||||
)
|
||||
"
|
||||
variant="ghost"
|
||||
|
|
@ -320,8 +362,13 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
label="کپی"
|
||||
/>
|
||||
</div>
|
||||
<div class="arabic-text">
|
||||
<p>بدون متن عربی</p>
|
||||
<div
|
||||
v-if="state.selectedItem?._source?.content_ar?.length"
|
||||
class="arabic-text"
|
||||
>
|
||||
<p>
|
||||
{{ state.selectedItem?._source?.content_ar ?? "" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -345,7 +392,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
<p class="from">
|
||||
{{
|
||||
state.selectedItem?._source?.meta?.hadith_masoum ??
|
||||
"بدون عنوان"
|
||||
state.selectedItem?._source?.meta?.hadith_sanad
|
||||
}}:
|
||||
</p>
|
||||
<p
|
||||
|
|
@ -356,13 +403,16 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
|
||||
<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">
|
||||
<span class="section-title"> شرح </span>
|
||||
<UButton
|
||||
@click="
|
||||
copyTextToClipboard(
|
||||
state.selectedItem?._source?.content
|
||||
state.selectedItem?._source?.description
|
||||
)
|
||||
"
|
||||
variant="ghost"
|
||||
|
|
@ -372,14 +422,17 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
</div>
|
||||
<p
|
||||
class="description-item"
|
||||
v-html="state.selectedItem?._source?.content"
|
||||
v-html="state.selectedItem?._source?.description"
|
||||
></p>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<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="me-1 text-gray-400 font-light"
|
||||
|
|
@ -392,7 +445,10 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-sm">
|
||||
<div
|
||||
class="text-sm"
|
||||
v-if="state.selectedItem?._source?.ai_classes?.length"
|
||||
>
|
||||
<span class=""> دسته بندی ها: </span>
|
||||
<span
|
||||
class="me-1 text-gray-400 font-light"
|
||||
|
|
@ -413,7 +469,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
|
||||
<div class="body-footer">
|
||||
<div class="mt-5 z-2">
|
||||
<div class="flex justify-between actions">
|
||||
<!-- <div class="flex justify-between actions">
|
||||
<UButton
|
||||
disabled
|
||||
class="similar-btn"
|
||||
|
|
@ -421,8 +477,8 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
label="مشابه"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
@click.prevent="goToTheSearch('similar')"
|
||||
/>
|
||||
<!-- @click.prevent="goToTheSearch('similar')" -->
|
||||
<UButton
|
||||
class="explore-btn"
|
||||
trailing-icon="i-haditha-explore"
|
||||
|
|
@ -430,7 +486,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
variant="solid"
|
||||
@click.prevent="goToTheChatbot"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="flex justify-between pagination">
|
||||
<UButton
|
||||
@click="handlePagination('-1')"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user