.

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<HadithResponseModel>(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;