feat(front): use pagination component and title prop in channels widget

front/src/components/audio/ChannelsWidget.vue

@@ -3,15 +3,15 @@ import type { BackendError, BackendResponse, Channel } from '~/types'
 
 import { ref, onMounted, watch, reactive } from 'vue'
 import { clone } from 'lodash-es'
-import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
+import usePage from '~/composables/navigation/usePage'
+
 import ChannelCard from '~/components/audio/ChannelCard.vue'
-import Layout from '~/components/ui/Layout.vue'
 import Loader from '~/components/ui/Loader.vue'
-import Button from '~/components/ui/Button.vue'
-import Spacer from '../ui/Spacer.vue'
+import Section from '~/components/ui/Section.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
 interface Events {
   (e: 'fetched', channels: BackendResponse<Channel>): void
@@ -19,19 +19,19 @@ interface Events {
 
 interface Props {
   filters: object
-  limit?: number
+  limit?: number,
+  title?: string,
 }
 
-const { t } = useI18n()
-
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
-  limit: 5
+  limit: 5,
 })
 
 const channels = reactive([] as Channel[])
 const errors = ref([] as string[])
 const nextPage = ref()
+const page = usePage()
 const count = ref(0)
 
 const isLoading = ref(false)
@@ -41,8 +41,8 @@ const fetchData = async (url = 'channels/') => {
 
   const params = {
     ...clone(props.filters),
-    page_size: props.limit,
-    include_channels: true
+    page: page.value,
+    page_size: props.limit
   }
 
   try {
@@ -62,41 +62,30 @@ onMounted(() => {
   fetchData()
 })
 
-watch(() => props.filters, () => {
+watch(() => [props.filters, page], () => {
   fetchData()
 }, { deep: true })
 </script>
 
 <template>
-  <div class="channel-widget">
-    <h2
-      v-if="!!$slots.title"
-    >
-      <slot name="title" />
-    </h2>
+  <Section aling-left :h2="title" class="channel-widget">
     <slot />
-    <Layout flex>
     <Loader v-if="isLoading" />
     <channel-card
       v-for="object in channels"
       :key="object.uuid"
       :object="object"
     />
-    </Layout>
-    <template v-if="nextPage">
-      <Spacer />
-      <Button
-        v-if="nextPage"
-        @click="fetchData(nextPage)"
-      >
-        {{ t('components.audio.ChannelsWidget.button.showMore') }}
-      </Button>
-    </template>
+  </Section>
   <template v-if="!isLoading && channels.length === 0">
     <empty-state
       :refresh="true"
       @refresh="fetchData('channels/')"
     />
   </template>
-  </div>
+  <Pagination
+    v-if="channels && count > limit"
+    v-model:page="page"
+    :pages="Math.ceil((count || 0) / limit)"
+  />
 </template>

front/src/components/library/Home.vue

@@ -81,10 +81,8 @@ fetchData()
     :show-modification-date="true"
     :filters="{ordering: '-creation_date'}"
     :limit="12"
+    :title="t('components.library.Home.header.newChannels')"
   >
-    <template #title>
-      {{ t('components.library.Home.header.newChannels') }}
-    </template>
   </channels-widget>
 
   <track-widget

front/src/views/channels/List.vue

@@ -122,7 +122,7 @@ const showCreateModal = ref(false)
     />
     <channels-widget
       :key="widgetKey"
-      :limit="50"
+      :limit="4"
       :show-modification-date="true"
       :filters="{q: query, subscribed: 'true'}"
     />
@@ -143,7 +143,7 @@ const showCreateModal = ref(false)
     />
     <channels-widget
       :show-modification-date="true"
-      :limit="12"
+      :limit="24"
       :filters="{ordering: '-creation_date'}"
     >
     </channels-widget>