diff --git a/pages/haditha/library/[id]/[slug]/index.vue b/pages/haditha/library/[id]/[slug]/index.vue index 063f863..e92e5c2 100644 --- a/pages/haditha/library/[id]/[slug]/index.vue +++ b/pages/haditha/library/[id]/[slug]/index.vue @@ -15,6 +15,9 @@ const router = useRouter(); import hadithaApi from "@haditha/apis/hadithaApi"; import type { HadithResponseModel, Hits } from "@haditha/types/hadithType"; import type { Hit } from "~/systems/hadith_ui/types/hadithType"; +import headLinks from "@haditha/json/haditha/headLinks"; +import headMetas from "@haditha/json/haditha/headMetas"; + // #endregion imports // #region meta @@ -28,94 +31,12 @@ useHead({ title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | ${route.params.slug}`, 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, }); // #endregion imports // #region props @@ -155,6 +76,7 @@ const props = defineProps({ const isModalOpen = ref(false); const loading = ref(false); const httpService = useNuxtApp()["$http"]; +const page_num = ref(1); const state = reactive({ selectedItem: [] as Hit[], @@ -214,27 +136,13 @@ const state = reactive({ const pageIsLessThanOne = computed(() => { console.info("pageIsLessThanOne"); - let isDisabled = true; - if (state.selectedItem.length) - return state.selectedItem[0]._source.address.page_num <= 1; - return isDisabled; + return page_num.value <= 1; }); const pageIsBiggerThanTotal = computed(() => { console.info("pageIsBiggerThanTotal"); - - let isDisabled = true; - if ( - state.selectedItem.length && - state.selectedItem[0]._source.address.page_num - ) - return ( - state.selectedItem?.[0]._source.address.page_num + 1 >= - +route.query.page_count - ); - - return isDisabled; + const page_count = +route.query.page_count; + return page_num.value + 1 >= page_count; }); -const page_num = ref(1); // #endregion refs and reactives // #region methods @@ -242,12 +150,16 @@ const fetchData = async () => { if (loading.value) return; loading.value = true; + let page_first = +route.query.page_first; + const volId = route.params.id; + let url = repoUrl() + hadithaApi.library.show; url = url.replace("@appname", "monir"); - url = url.replace("@page_start", route.query.page_first); - url = url.replace("@page_end", +route.query.page_first + 1); - url = url.replace("@vol_id", route.params.id.toString()); + url = url.replace("@page_start", 0); + url = url.replace("@page_end", 1); + url = url.replace("@vol_id", volId); + console.info("urlurlurlurl", url); // fetch search list from backend(ssr) const { data, status, error, refresh, clear } = await useHadithaSearchComposable(url, { @@ -292,45 +204,41 @@ const handlePagination = ( if (loading.value) return; loading.value = true; - if (state.selectedItem?.length) { - const isPageBiggerThanOne = - state.selectedItem[0]._source.address.page_num + prevNextIndicator > 0; - const isPageLessThanTotal = - state.selectedItem[0]._source.address.page_num + prevNextIndicator < - +route.query.page_count; + const volId = route.params.id; + const page_count = +route.query.page_count; + const page_first = +route.query.page_first; + const isPageBiggerThanOne = +page_num.value + prevNextIndicator > 0; + const isPageLessThanTotal = +page_num.value + prevNextIndicator < page_count; - if (!(isPageBiggerThanOne && isPageLessThanTotal)) return; - } + if (!(isPageBiggerThanOne && isPageLessThanTotal)) return; let url = repoUrl() + hadithaApi.library.prevNextHadith; url = url.replace("@index_key", "dhparag"); - url = url.replace("@vol_id", state.selectedItem?.[0]._source.address.vol_id); - url = url.replace( - "@page_num", - (pageNumber ?? state.selectedItem?.[0]._source.address.page_num).toString() - ); + url = url.replace("@vol_id", volId); + url = url.replace("@page_num", (pageNumber ?? page_num.value).toString()); url = url.replace("@step", prevNextIndicator.toString()); + page_num.value += prevNextIndicator; + httpService .getRequest(url) .then((res: HadithResponseModel) => { state.selectedItem = res.hits.hits; - page_num.value = res.hits.hits[0]._source.address.page_num ?? 1; }) .finally(() => (loading.value = false)); }; const handlePageChange = () => { - handlePagination(1, page_num.value); + handlePagination(1, +page_num.value); }; const getDataTree = () => { - let id = route.params.id; + const volId = route.params.id; let url = repoUrl() + hadithaApi.search.getDataTree; url = url.replace("@appname", "monir"); url = url.replace("@offset", 0); url = url.replace("@limit", 10000); - url = url.replace("@vol_id", id); + url = url.replace("@vol_id", volId); url = url.replace("@q", "none"); httpService.getRequest(url).then((res) => { @@ -350,6 +258,9 @@ const prepareTreeData = (data) => { getDataTree(); +onMounted(() => { + page_num.value = +route.query.page_first; +}); // #endregion methods // components declaration @@ -684,7 +595,7 @@ const UTree = defineAsyncComponent( display: flex; justify-content: center; align-items: center; - width: 3em /*36px*/; + width: 4em /*36px*/; height: 3em /*36px*/; gap: 4px; border-radius: 12px;