feat(front): full search form on channels list

front/src/components/audio/ChannelsWidget.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { BackendError, BackendResponse, Channel } from '~/types'
+import type { BackendError, PaginatedChannelList } from '~/types'
+import { type operations } from '~/generated/types.ts'
 
-import { ref, onMounted, watch, reactive } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { clone } from 'lodash-es'
 
 import axios from 'axios'
@@ -14,7 +15,7 @@ import Section from '~/components/ui/Section.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 
 interface Events {
-  (e: 'fetched', channels: BackendResponse<Channel>): void
+  (e: 'fetched', channels: PaginatedChannelList): void
 }
 
 interface Props {
@@ -28,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
   limit: 5,
 })
 
-const channels = reactive([] as Channel[])
+const result = ref<PaginatedChannelList>()
 const errors = ref([] as string[])
 const nextPage = ref()
 const page = usePage()
@@ -39,17 +40,17 @@ const isLoading = ref(false)
 const fetchData = async (url = 'channels/') => {
   isLoading.value = true
 
-  const params = {
+  const params: operations['get_channels_2']['parameters']['query'] = {
     ...clone(props.filters),
     page: page.value,
-    page_size: props.limit
+    page_size: props.limit,
   }
 
   try {
-    const response = await axios.get(url, { params })
+    const response = await axios.get<PaginatedChannelList>(url, { params })
     nextPage.value = response.data.next
     count.value = response.data.count
-    channels.splice(0, channels.length, ...response.data.results)
+    result.value = response.data
     emit('fetched', response.data)
   } catch (error) {
     errors.value = (error as BackendError).backendErrors
@@ -72,11 +73,11 @@ watch([() => props.filters, page],
   <Section
     align-left
     small-items
-    :h2="title"
+    :h2="title || undefined"
   >
     <Loader v-if="isLoading" style="grid-column: 1 / -1;" />
     <template
-      v-if="!isLoading && channels.length === 0"
+      v-if="!isLoading && result?.count === 0"
     >
       <empty-state
         :refresh="true"
@@ -84,13 +85,19 @@ watch([() => props.filters, page],
         style="grid-column: 1 / -1;"
       />
     </template>
+    <Pagination
+      v-if="result && count > limit && limit > 16"
+      v-model:page="page"
+      :pages="Math.ceil((count || 0) / limit)"
+      style="grid-column: 1 / -1;"
+    />
     <channel-card
-      v-for="object in channels"
-      :key="object.uuid"
-      :object="object"
+      v-for="channel in result?.results"
+      :key="channel.uuid"
+      :object="channel"
     />
     <Pagination
-      v-if="channels && count > limit"
+      v-if="result && count > limit"
       v-model:page="page"
       :pages="Math.ceil((count || 0) / limit)"
       style="grid-column: 1 / -1;"

front/src/types.ts

@@ -68,6 +68,7 @@ export type LibraryFollow = components["schemas"]["LibraryFollow"]
 export type Cover = components["schemas"]["CoverField"]
 export type RateLimitStatus = components["schemas"]["RateLimit"]['scopes'][number]
 export type PaginatedAlbumList = components["schemas"]["PaginatedAlbumList"]
+export type PaginatedChannelList = components["schemas"]["PaginatedChannelList"]
 export type SimpleArtist = components["schemas"]["SimpleArtist"]
 
 export type Artist = components['schemas']['SimpleArtist']

front/src/views/channels/List.vue

@@ -1,12 +1,26 @@
 <script setup lang="ts">
-import type { Channel } from '~/types'
+import type { OrderingProps } from '~/composables/navigation/useOrdering'
+import type { PaginatedChannelList } from '~/types'
+import { type operations } from '~/generated/types.ts'
+import type { RouteRecordName } from 'vue-router'
+import type { OrderingField } from '~/store/ui'
 
+import { computed, ref, watch } from 'vue'
+import { useRouteQuery } from '@vueuse/router'
 import { useI18n } from 'vue-i18n'
-import { ref, computed } from 'vue'
+import { syncRef } from '@vueuse/core'
+import { sortedUniq } from 'lodash-es'
 import { useRouter } from 'vue-router'
+import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import usePage from '~/composables/navigation/usePage'
+import useErrorHandler from '~/composables/useErrorHandler'
+import useOrdering from '~/composables/navigation/useOrdering'
+import useLogger from '~/composables/useLogger'
+
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
 import ChannelForm from '~/components/audio/ChannelForm.vue'
@@ -14,19 +28,37 @@ import Layout from '~/components/ui/Layout.vue'
 import Header from '~/components/ui/Header.vue'
 import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
+import Input from '~/components/ui/Input.vue'
+import Pills from '~/components/ui/Pills.vue'
 import Spacer from '~/components/ui/Spacer.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
-import useErrorHandler from '~/composables/useErrorHandler'
+interface Props extends OrderingProps {
+  scope?: 'me' | 'all'
 
-interface Props {
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName?: RouteRecordName
   defaultQuery?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  scope: 'all',
+  orderingConfigName: undefined,
   defaultQuery: ''
 })
 
-const query = ref(props.defaultQuery)
+const subscribedQuery = ref(props.defaultQuery)
+const q = useRouteQuery('query', '')
+const query = ref(q.value ?? '')
+syncRef(q, query, { direction: 'ltr' })
+
+const result = ref<PaginatedChannelList>()
+
+const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
+  ['creation_date', 'creation_date'],
+  ['modification_date', 'modification_date']
+]
+
 const widgetKey = ref(new Date().toLocaleString())
 
 const { t } = useI18n()
@@ -35,35 +67,74 @@ const labels = computed(() => ({
 }))
 
 const router = useRouter()
+const logger = useLogger()
+const sharedLabels = useSharedLabels()
 
 const step = ref(1)
 const submittable = ref(false)
 const category = ref('podcast')
 const modalContent = ref()
 const createForm = ref()
-const previousPage = ref()
-const nextPage = ref()
-const channels = ref([] as Channel[])
+const page = usePage()
+const tags = useRouteQuery<string[]>('tag', [])
+const tagList = computed(() => ({
+  current: [],
+  others: tags.value
+}))
+
+const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props)
+
 const count = ref(0)
 const isLoading = ref(false)
 const fetchData = async () => {
   isLoading.value = true
-
-  try {
-    const response = await axios.get('channels/', { params: { q: query.value } })
-    previousPage.value = response.data.previous
-    nextPage.value = response.data.next
-    channels.value.push(...response.data.results)
-    count.value = response.data.count
-  } catch (error) {
-    useErrorHandler(error as Error)
+  const params : operations['get_channels_2']['parameters']['query'] = {
+    scope: props.scope,
+    page: page.value,
+    page_size: paginateBy.value,
+    q: query.value,
+    ordering: orderingString.value,
+    tag: tags.value,
   }
 
-  isLoading.value = false
+  const measureLoading = logger.time('Fetching channels')
+  try {
+    const response = await axios.get<PaginatedChannelList>('channels/', {
+      params,
+      paramsSerializer: {
+        indexes: null
+      }
+    })
+    count.value = response.data.count
+    result.value = response.data
+  } catch (error) {
+    useErrorHandler(error as Error)
+    result.value = undefined
+  } finally {
+    measureLoading()
+    isLoading.value = false
+  }
 }
-fetchData()
+
+const store = useStore()
+watch(() => store.state.moderation.lastUpdate, fetchData)
 
 const reloadWidget = () => (widgetKey.value = new Date().toLocaleString())
+
+watch([page, tags, q], fetchData)
+
+const search = () => {
+  page.value = 1
+  q.value = query.value
+}
+
+onOrderingUpdate(() => {
+  page.value = 1
+  fetchData()
+})
+
+const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
+
 const showSubscribeModal = ref(false)
 const showCreateModal = ref(false)
 </script>
@@ -83,7 +154,6 @@ const showCreateModal = ref(false)
     <Modal
       v-model="showSubscribeModal"
       :title="t('views.channels.SubscriptionsList.modal.subscription.header')"
-      class="tiny"
     >
       <div
         ref="modalContent"
@@ -116,7 +186,7 @@ const showCreateModal = ref(false)
     </Modal>
 
     <inline-search-bar
-      v-model="query"
+      v-model="subscribedQuery"
       :placeholder="labels.searchPlaceholder"
       @search="reloadWidget"
     />
@@ -124,7 +194,7 @@ const showCreateModal = ref(false)
       :key="widgetKey"
       :limit="4"
       :show-modification-date="true"
-      :filters="{q: query, subscribed: 'true'}"
+      :filters="{q: subscribedQuery, subscribed: 'true'}"
     />
 <!-- TODO: Translations -->
     <Header
@@ -136,17 +206,84 @@ const showCreateModal = ref(false)
       icon="bi-plus"
       primary
     />
-    <inline-search-bar
-      v-model="query"
-      :placeholder="labels.searchPlaceholder"
-      @search="reloadWidget"
-    />
+    <Layout form flex
+      :class="['ui', {'loading': isLoading}, 'form']"
+      @submit.prevent="search"
+    >
+    <!-- TODO: Translations -->
+      <Input search
+        id="artist-search"
+        v-model="query"
+        name="search"
+        :label="t('components.library.Podcasts.label.search')"
+        autofocus
+        :placeholder="labels.searchPlaceholder"
+      >
+      </Input>
+      <Pills
+        v-model="tagList"
+        :label="t('components.library.Podcasts.label.tags')"
+        style="max-width: 150px;"
+      />
+      <Layout stack noGap label for="artist-ordering">
+        <span class="label">
+          {{ t('components.library.Podcasts.ordering.label') }}
+        </span>
+        <select
+          id="artist-ordering"
+          v-model="ordering"
+          class="dropdown"
+        >
+          <option
+            v-for="(option, key) in orderingOptions"
+            :key="key"
+            :value="option[0]"
+          >
+            {{ sharedLabels.filters[option[1]] }}
+          </option>
+        </select>
+      </Layout>
+      <Layout stack noGap label for="artist-ordering-direction">
+        <span class="label">
+          {{ t('components.library.Podcasts.ordering.direction.label') }}
+        </span>
+        <select
+          id="artist-ordering-direction"
+          v-model="orderingDirection"
+          class="dropdown"
+        >
+          <option value="+">
+            {{ t('components.library.Podcasts.ordering.direction.ascending') }}
+          </option>
+          <option value="-">
+            {{ t('components.library.Podcasts.ordering.direction.descending') }}
+          </option>
+        </select>
+      </Layout>
+      <Layout stack noGap label for="artist-results">
+        <span class="label">
+          {{ t('components.library.Podcasts.pagination.results') }}
+        </span>
+        <select
+          id="artist-results"
+          v-model="paginateBy"
+          class="dropdown"
+        >
+          <option
+            v-for="opt in paginateOptions"
+            :key="opt"
+            :value="opt"
+          >
+            {{ opt }}
+          </option>
+        </select>
+      </Layout>
+    </Layout>
     <channels-widget
       :show-modification-date="true"
-      :limit="24"
-      :filters="{ordering: '-creation_date'}"
-    >
-    </channels-widget>
+      :limit="paginateBy"
+      :filters="{q: query, ordering: ordering, tags: tags}"
+    />
 
     <Modal v-model="showCreateModal"
       :title="t(`views.auth.ProfileOverview.modal.createChannel.${