rockfic/next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
✑ ☙◦❀ The Tablet ☯ GamerGirlandCo ❀◦❧ 2024-01-04 20:46:12 -05:00
parent c562992c26
commit af1b09f55c
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
2 changed files with 32 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/listings/singleStory.vue
View File

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

55
components/listings/stories.vue
View File

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