hadith_ui/pages/haditha/library/index.vue
2025-04-12 07:04:15 +03:30

99 lines
2.2 KiB
Vue

<script setup>
import hadithaApi from "@haditha/apis/hadithaApi";
definePageMeta({
layout: false,
name: "hadithaLibrary",
});
useHead({
name: "hadithaLibrary",
title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | کتابخانه`,
meta: [
{ name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
],
bodyAttrs: {
class: import.meta.env.VITE_HADITH_SYSTEM,
},
});
// #region refs
const loading = ref(false);
const httpService = useNuxtApp()["$http"];
// #endregion refs
// #region reactive
const state = reactive({
list: [],
counts: [],
totalCounts: [],
libraryList: new Array(20).fill(0),
});
// #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", "book_title");
url = url.replace("@offset", 0);
url = url.replace("@limit", 20);
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));
};
// #endregion methods
// #region hooks
onMounted(() => {
getLibraryList();
});
// #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>
<card-list
no-data-text="هنوز چیزی ذخیره نکرده‌اید!"
no-data-icon="/img/haditha/no-data.png"
:list="state.libraryList"
></card-list>
</div>
</HadithaLayout>
</template>
<style scoped>
.search-box-container {
padding-top: 8.3em;
background: #f7fffd;
}
</style>