fix(components): pagination works now (for realsies)

This commit is contained in:
parent c562992c26
commit af1b09f55c
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
2 changed files with 32 additions and 42 deletions

@ -10,12 +10,13 @@
const { token } = useToken();
const dark = inject<Ref<boolean>>("dark");
const { data } = useAuth();
let prop = defineProps<{ story: IStory; last?: boolean; showActions?: boolean }>();
const idxo = (prop.last || false ? prop.story.chapters.length : 1) - 1;
const story = defineModel<IStory>("story", { required: true });
let prop = defineProps<{ last?: boolean; showActions?: boolean }>();
const idxo = computed(() => (prop.last || false ? story.value.chapters.length : 1) - 1);
// console.log("idx0->", idxo)
// log.debug("posti->", prop.story.chapters[ prop.story.chapters.length - 1 ]);
const shortDate = format(Date.parse(prop.story.chapters[prop.story.chapters.length - 1]?.posted!.toString()), "yyyy/MM/dd");
const longDate = format(Date.parse(prop.story.chapters[prop.story.chapters.length - 1]?.posted!.toString()), "iiii',' yyyy-MM-dd");
const shortDate = format(Date.parse(story.value.chapters[story.value.chapters.length - 1]?.posted!.toString()), "yyyy/MM/dd");
const longDate = format(Date.parse(story.value.chapters[story.value.chapters.length - 1]?.posted!.toString()), "iiii',' yyyy-MM-dd");
</script>
<template>
<a-card>

@ -4,64 +4,53 @@
const route = useRoute();
let curPage = ref(route.query.page || 1);
const props = defineProps<{
prefix?: string;
items?: IStory[];
prefix: string;
last?: boolean;
}>();
let data;
if (!props.prefix) {
data = props.items;
} else if (!props.items) {
data = (
await useApiFetch<any>(`${props.prefix}`, {
let data = (
await useApiFetch<any>(props.prefix, {
query: {
page: curPage,
page: curPage.value,
},
})
).data;
}
).data.value;
let rdata = ref(data);
const pagiChange = async (page, pageSize) => {
const loading = ref<boolean>(false);
const pagiChange = (page, pageSize) => {
loading.value = true;
curPage.value = page;
// await navigateTo({
// path: useRoute().fullPath,
// query: {
// page
// }
// })
let { data: data } = await useApiFetch(`${props.prefix}`, {
useApiFetch(props.prefix, {
query: {
page: curPage,
page,
},
}).then(({ data }) => {
rdata.value = data.value;
loading.value = false;
navigateTo({
path: useRoute().fullPath,
query: {
page,
},
});
rdata.value = data.value;
});
};
</script>
<template>
<div>
<a-list :data-source="rdata.stories" item-layout="vertical">
<a-list v-model:data-source="rdata.stories" item-layout="vertical" v-model:loading="loading">
<template #renderItem="{ item }">
<!-- {{ item.title }} -->
<single-story :story="item" :last="last" />
<single-story :key="item._id" :story="item" :last="last" />
</template>
</a-list>
<a-pagination
v-model:disabled="loading"
:default-page-size="20"
:total="rdata.total"
:default-current="curPage as number"
@change="pagiChange"
:show-quick-jumper="true"
:show-size-changer="false"
/>
</div>
<!-- {
defaultPageSize: 20,
total: rdata.total,
defaultCurrent: curPage as number,
onChange: pagiChange,
// hideOnSinglePage: true,
showSizeChanger: false,
}-->
</template>
<style scoped>
.ant-list-items > * + * {