Work on library show page.
This commit is contained in:
mustafa-rezae
parent
55f39c3721
commit
237b9b6da9
|
|
@ -30,141 +30,89 @@ const goToLibraryShow = (item) => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="library-list-contianer">
|
<UCard
|
||||||
<div class="page-header flex items-center">
|
v-if="props.list?.length"
|
||||||
<span class="title">کتابخانه</span>
|
v-for="(item, index) in props.list"
|
||||||
|
:key="index"
|
||||||
|
variant="solid"
|
||||||
|
:ui="{
|
||||||
|
root: 'ring ring-[white] divide-y divide-[var(--ui-border)] rounded-0 shadow-none bg-transparent library-list-item',
|
||||||
|
header: 'header',
|
||||||
|
body: 'sm:p-0 p-0 bg-transparent',
|
||||||
|
footer: 'footer',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- <template #header></template> -->
|
||||||
|
|
||||||
|
<ULink
|
||||||
|
v-if="item?._source?.id"
|
||||||
|
:to="{
|
||||||
|
name: 'hadithaLibraryShow',
|
||||||
|
params: {
|
||||||
|
id: item?._source?.id,
|
||||||
|
slug: item?._source?.title,
|
||||||
|
},
|
||||||
|
query: {
|
||||||
|
page_first: item._source.page_first,
|
||||||
|
page_last: item._source.page_last,
|
||||||
|
page_count: item._source.page_count,
|
||||||
|
},
|
||||||
|
}"
|
||||||
|
color="neutral"
|
||||||
|
variant="outline"
|
||||||
|
:ui="{
|
||||||
|
leadingIcon: 'text-(--ui-primary)',
|
||||||
|
}"
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
fit="auto"
|
fit="auto"
|
||||||
quality="80"
|
quality="80"
|
||||||
placeholder
|
placeholder
|
||||||
src="/img/haditha/haditha-title.svg"
|
src="/img/haditha/sample-bgi.svg"
|
||||||
/>
|
/>
|
||||||
</div>
|
<p class="title">{{ item?._source?.title }}</p>
|
||||||
|
<p class="version">
|
||||||
|
{{ item?._source?.vol_title + item?._source?.vol_num }}
|
||||||
|
</p>
|
||||||
|
</ULink>
|
||||||
|
|
||||||
<div class="library-list grid grid-cols-5 gap-x-28 gap-y-12">
|
<!-- <template #footer> </template> -->
|
||||||
<UCard
|
</UCard>
|
||||||
v-if="props.list.length"
|
|
||||||
v-for="(item, index) in props.list"
|
|
||||||
:key="index"
|
|
||||||
variant="solid"
|
|
||||||
:ui="{
|
|
||||||
root: 'ring ring-[white] divide-y divide-[var(--ui-border)] rounded-0 shadow-none bg-transparent library-list-item',
|
|
||||||
header: 'header',
|
|
||||||
body: 'sm:p-0 p-0 bg-transparent',
|
|
||||||
footer: 'footer',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<!-- <template #header></template> -->
|
|
||||||
|
|
||||||
<ULink
|
<no-data
|
||||||
v-if="item?._source?.id"
|
class="h-full w-full flex flex-col justify-center items-center"
|
||||||
:to="{
|
v-else
|
||||||
name: 'hadithaLibraryShow',
|
>
|
||||||
params: {
|
<img fit="auto" quality="80" placeholder :src="props.noDataIcon" />
|
||||||
id: item?._source?.id,
|
<p class="no-data-text">{{ props.noDataText }}</p>
|
||||||
slug: item?._source?.title,
|
</no-data>
|
||||||
},
|
|
||||||
query: {
|
|
||||||
page_first: item._source.page_first,
|
|
||||||
page_last: item._source.page_last,
|
|
||||||
page_count: item._source.page_count,
|
|
||||||
},
|
|
||||||
}"
|
|
||||||
color="neutral"
|
|
||||||
variant="outline"
|
|
||||||
:ui="{
|
|
||||||
leadingIcon: 'text-(--ui-primary)',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
fit="auto"
|
|
||||||
quality="80"
|
|
||||||
placeholder
|
|
||||||
src="/img/haditha/sample-bgi.svg"
|
|
||||||
/>
|
|
||||||
<p class="title">{{ item?._source?.title }}</p>
|
|
||||||
<p class="version">
|
|
||||||
{{ item?._source?.vol_title + item?._source?.vol_num }}
|
|
||||||
</p>
|
|
||||||
</ULink>
|
|
||||||
|
|
||||||
<!-- <template #footer> </template> -->
|
|
||||||
</UCard>
|
|
||||||
|
|
||||||
<no-data
|
|
||||||
class="h-full w-full flex flex-col justify-center items-center"
|
|
||||||
v-else
|
|
||||||
>
|
|
||||||
<img fit="auto" quality="80" placeholder :src="props.noDataIcon" />
|
|
||||||
<p class="no-data-text">{{ props.noDataText }}</p>
|
|
||||||
</no-data>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.library-list-contianer {
|
.library-list-item {
|
||||||
margin-top: 10em;
|
width: 140;
|
||||||
max-width: 1200px;
|
height: 200;
|
||||||
width: 100%;
|
border-radius: 8px;
|
||||||
margin: 0 1em;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
.page-header {
|
.title {
|
||||||
margin-bottom: 2em;
|
margin-top: 0.7em;
|
||||||
.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;
|
|
||||||
|
|
||||||
.library-list-item {
|
|
||||||
width: 140;
|
|
||||||
height: 200;
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-top: 0.7em;
|
|
||||||
font-family: IRANSansX;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 19.5px;
|
|
||||||
letter-spacing: 0%;
|
|
||||||
text-align: right;
|
|
||||||
color: #444444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.version {
|
|
||||||
font-family: IRANSansX;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 15px;
|
|
||||||
letter-spacing: 0%;
|
|
||||||
text-align: right;
|
|
||||||
color: #444444;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.no-data-text {
|
|
||||||
font-family: IRANSansX;
|
font-family: IRANSansX;
|
||||||
font-weight: 300;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 13px;
|
||||||
line-height: 24px;
|
line-height: 19.5px;
|
||||||
letter-spacing: 0%;
|
letter-spacing: 0%;
|
||||||
text-align: center;
|
text-align: right;
|
||||||
|
color: #444444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version {
|
||||||
|
font-family: IRANSansX;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 15px;
|
||||||
|
letter-spacing: 0%;
|
||||||
|
text-align: right;
|
||||||
|
color: #444444;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
<script setup>
|
<script setup lang="ts">
|
||||||
import hadithaApi from "@haditha/apis/hadithaApi";
|
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({
|
definePageMeta({
|
||||||
layout: false,
|
layout: false,
|
||||||
|
|
@ -10,153 +13,99 @@ useHead({
|
||||||
title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | کتابخانه`,
|
title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | کتابخانه`,
|
||||||
meta: [
|
meta: [
|
||||||
{ name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
|
{ name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
|
||||||
{
|
...headMetas,
|
||||||
name: "msapplication-TileImage",
|
|
||||||
content: "/img/haditha/fav-icons/ms-icon-144x144.png",
|
|
||||||
},
|
|
||||||
{ name: "theme-color", content: "#ffffff" },
|
|
||||||
],
|
],
|
||||||
bodyAttrs: {
|
bodyAttrs: {
|
||||||
class: import.meta.env.VITE_HADITH_SYSTEM,
|
class: import.meta.env.VITE_HADITH_SYSTEM,
|
||||||
},
|
},
|
||||||
link: [
|
link: headLinks,
|
||||||
{
|
|
||||||
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",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// #region refs
|
// #region refs
|
||||||
const loading = ref(false);
|
const el = useTemplateRef<HTMLElement>("el");
|
||||||
const httpService = useNuxtApp()["$http"];
|
const httpService = useNuxtApp()["$http"];
|
||||||
|
const route = useRoute();
|
||||||
|
const page = ref(Number(route.query.page) || 1);
|
||||||
// #endregion refs
|
// #endregion refs
|
||||||
|
|
||||||
// #region reactive
|
// #region reactive
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
list: [],
|
pagination: {
|
||||||
counts: [],
|
offset: 0,
|
||||||
totalCounts: [],
|
limit: 10,
|
||||||
libraryList: new Array(20).fill(0),
|
page: 1,
|
||||||
|
pages: 1,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
// #endregion reactive
|
|
||||||
|
|
||||||
// #region methods
|
// #region methods
|
||||||
|
|
||||||
const getLibraryList = async (dataType = "bookmark") => {
|
const getLibraryList = async (dataType = "bookmark") => {
|
||||||
if (loading.value) return;
|
|
||||||
|
|
||||||
loading.value = true;
|
|
||||||
|
|
||||||
let url = repoUrl() + hadithaApi.library.list;
|
let url = repoUrl() + hadithaApi.library.list;
|
||||||
url = url.replace("@field_collapsed", "normal");
|
url = url.replace("@field_collapsed", "normal");
|
||||||
url = url.replace("@offset", 0);
|
url = url.replace("@offset", state.pagination.offset);
|
||||||
url = url.replace("@limit", 20);
|
url = url.replace("@limit", state.pagination.limit);
|
||||||
url = url.replace("@q", "none");
|
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
|
return await httpService.postRequest(url);
|
||||||
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
|
// #endregion methods
|
||||||
|
|
||||||
// components declaration
|
// components declaration
|
||||||
const HadithaLayout = defineAsyncComponent(() =>
|
const HadithaLayout = defineAsyncComponent(
|
||||||
import("@haditha/layouts/HadithaLayout.vue")
|
() => import("@haditha/layouts/HadithaLayout.vue")
|
||||||
);
|
);
|
||||||
const NavigationMenu = defineAsyncComponent(() =>
|
const NavigationMenu = defineAsyncComponent(
|
||||||
import("@haditha/components/haditha/NavigationMenu.vue")
|
() => import("@haditha/components/haditha/NavigationMenu.vue")
|
||||||
);
|
);
|
||||||
const CardList = defineAsyncComponent(() =>
|
const CardList = defineAsyncComponent(
|
||||||
import("@haditha/components/haditha/CardList.vue")
|
() => import("@haditha/components/haditha/CardList.vue")
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -165,11 +114,30 @@ const CardList = defineAsyncComponent(() =>
|
||||||
<div class="search-box-container h-full flex flex-col justify-center">
|
<div class="search-box-container h-full flex flex-col justify-center">
|
||||||
<navigation-menu></navigation-menu>
|
<navigation-menu></navigation-menu>
|
||||||
|
|
||||||
<card-list
|
<div class="library-list-contianer">
|
||||||
no-data-text="هنوز چیزی ذخیره نکردهاید!"
|
<div class="page-header flex items-center">
|
||||||
no-data-icon="/img/haditha/no-data.png"
|
<span class="title">کتابخانه</span>
|
||||||
:list="state.libraryList"
|
<img fit="auto" quality="80" src="/img/haditha/haditha-title.svg" />
|
||||||
></card-list>
|
</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>
|
</div>
|
||||||
</HadithaLayout>
|
</HadithaLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -178,5 +146,43 @@ const CardList = defineAsyncComponent(() =>
|
||||||
.search-box-container {
|
.search-box-container {
|
||||||
padding-top: 8.3em;
|
padding-top: 8.3em;
|
||||||
background: #f7fffd;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user