hadith_ui/pages/haditha/library/index.vue

<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,
  name: "hadithaLibrary",
});
useHead({
  name: "hadithaLibrary",
  title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | کتابخانه`,
  meta: [
    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
    ...headMetas,
  ],
  bodyAttrs: {
    class: import.meta.env.VITE_HADITH_SYSTEM,
  },
  link: headLinks,
});

// #region refs
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({
  pagination: {
    offset: 0,
    limit: 10,
    page: 1,
    pages: 1,
  },
});

// #region methods

const getLibraryList = async (dataType = "bookmark") => {
  let url = repoUrl() + hadithaApi.library.list;
  url = url.replace("@field_collapsed", "normal");
  url = url.replace("@offset", state.pagination.offset);
  url = url.replace("@limit", state.pagination.limit);
  url = url.replace("@q", "none");

  return await httpService.postRequest(url);
};

// 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 NavigationMenu = defineAsyncComponent(
  () => import("@haditha/components/haditha/NavigationMenu.vue")
);
const CardList = defineAsyncComponent(
  () => import("@haditha/components/haditha/CardList.vue")
);
</script>

<template>
  <HadithaLayout>
    <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="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>

<style scoped>
.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) {
  .search-box-container {
  padding-top: 0em;
}
}
</style>