119 lines
2.8 KiB
Vue
119 lines
2.8 KiB
Vue
<template>
|
|
|
|
<div>
|
|
|
|
<v-infinite-scroll :items="contents"
|
|
:onLoad="fetchContents">
|
|
|
|
<!-- TODO: the -mt-4 is necessary because the v-infinite-scroll has some 'top' panel offsetting the list -->
|
|
<div class="flex flex-column gap-4 -mt-4">
|
|
<template v-for="content in contents" :key="content.id">
|
|
<component
|
|
:is="isSmallScreen ? ContentCardSm : ContentCardNormal"
|
|
:content="content"
|
|
@content-deleted="onContentDeleted"
|
|
></component>
|
|
</template>
|
|
</div>
|
|
|
|
<template v-slot:empty>
|
|
Il n'y a pas plus de contenus
|
|
</template>
|
|
|
|
<template v-slot:error>
|
|
<v-alert type="error">{{ errorMessage }}</v-alert>
|
|
</template>
|
|
|
|
</v-infinite-scroll>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style>
|
|
|
|
</style>
|
|
|
|
<script setup>
|
|
import {useClient} from '@/plugins/api.js';
|
|
import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
|
|
import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
|
|
import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";
|
|
|
|
const props = defineProps({
|
|
creatorId: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const client = useClient()
|
|
const contents = ref([])
|
|
const errorMessage = ref()
|
|
let last_id = null
|
|
|
|
const isSmallScreen = ref(false);
|
|
|
|
const updateScreenSize = () => {
|
|
isSmallScreen.value = window.matchMedia('(max-width: 600px)').matches;
|
|
};
|
|
|
|
onMounted(() => {
|
|
updateScreenSize();
|
|
window.addEventListener('resize', updateScreenSize);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', updateScreenSize);
|
|
});
|
|
|
|
async function onContentDeleted(contentId) {
|
|
contents.value = contents.value.filter(c => c.id !== contentId)
|
|
}
|
|
|
|
const creatorIdWatcher = watch(
|
|
() => props.creatorId,
|
|
(newCreatorId) => {
|
|
if (newCreatorId) {
|
|
contents.value = []
|
|
last_id = null
|
|
fetchContents({
|
|
done: () => {
|
|
}
|
|
});
|
|
}
|
|
})
|
|
|
|
async function fetchContents({done, page_size = 10}) {
|
|
if (props.creatorId == null) return
|
|
|
|
try {
|
|
let uri = `/api/contents/creator/${props.creatorId}?page_size=${page_size}`
|
|
if (last_id !== null) uri = uri + `&last_id=${last_id}`
|
|
|
|
const response = await client.get(uri)
|
|
|
|
if (response.status >= 200 && response.status < 300) {
|
|
|
|
const contentCount = response.data.length
|
|
|
|
if (contentCount > 0) {
|
|
contents.value.push(...response.data)
|
|
const [last_content] = response.data.slice(-1)
|
|
last_id = last_content.id
|
|
}
|
|
|
|
if (contentCount < page_size)
|
|
done('empty')
|
|
else
|
|
done('ok')
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch posts", error);
|
|
errorMessage.value = error.message || "Failed to fetch contents";
|
|
done('error')
|
|
}
|
|
}
|
|
|
|
</script>
|