Migrate Albums and move pagination component

front/src/components/audio/podcast/Table.vue

@@ -77,7 +77,7 @@
 <script>
 import PodcastRow from '~/components/audio/podcast/Row.vue'
 import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 
 export default {
   components: {

front/src/components/audio/track/Table.vue

@@ -158,7 +158,7 @@ import { clone, uniqBy } from 'lodash-es'
 import axios from 'axios'
 import TrackRow from '~/components/audio/track/Row.vue'
 import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 
 export default {
   components: {

front/src/components/common/AttachmentInput.vue

@@ -162,7 +162,7 @@ const getAttachmentUrl = (uuid: string) => {
           <button
             v-if="value"
             class="ui basic tiny button"
-            @click.stop.prevent="remove(value)"
+            @click.stop.prevent="remove(value as string)"
           >
             <translate translate-context="Content/Radio/Button.Label/Verb">
               Remove

front/src/components/favorites/List.vue

@@ -2,7 +2,7 @@
 import axios from 'axios'
 import $ from 'jquery'
 import RadioButton from '~/components/radios/Button.vue'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import { checkRedirectToLogin } from '~/utils'
 import TrackTable from '~/components/audio/track/Table.vue'
 import useLogger from '~/composables/useLogger'
@@ -17,7 +17,7 @@ import { OrderingField, RouteWithPreferences } from '~/store/ui'
 
 interface Props {
   orderingConfigName: RouteWithPreferences | null
-  defaultPage?: number,
+  defaultPage?: number
   defaultPaginateBy?: number
 }
 
@@ -54,6 +54,9 @@ const updateQueryString = () => router.replace({
   }
 })
 
+watch(page, updateQueryString)
+onOrderingUpdate(updateQueryString)
+
 const results = reactive<Track[]>([])
 const nextLink = ref()
 const previousLink = ref()
@@ -92,8 +95,6 @@ const fetchFavorites = async () => {
   }
 }
 
-watch(page, updateQueryString)
-onOrderingUpdate(updateQueryString)
 onBeforeRouteUpdate(fetchFavorites)
 fetchFavorites()
 
@@ -107,37 +108,59 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <main v-title="labels.title" class="main pusher">
+  <main
+    v-title="labels.title"
+    class="main pusher"
+  >
     <section class="ui vertical center aligned stripe segment">
       <div :class="['ui', { 'active': isLoading }, 'inverted', 'dimmer']">
         <div class="ui text loader">
-          <translate translate-context="Content/Favorites/Message">Loading your favorites…</translate>
+          <translate translate-context="Content/Favorites/Message">
+            Loading your favorites…
+          </translate>
         </div>
       </div>
-      <h2 v-if="results" class="ui center aligned icon header">
+      <h2
+        v-if="results"
+        class="ui center aligned icon header"
+      >
         <i class="circular inverted heart pink icon" />
         <translate
           translate-plural="%{ count } favorites"
           :translate-n="$store.state.favorites.count"
           :translate-params="{ count }"
           translate-context="Content/Favorites/Title"
-        >%{ count } favorite</translate>
+        >
+          %{ count } favorite
+        </translate>
       </h2>
-      <radio-button v-if="$store.state.favorites.count > 0" type="favorites" />
+      <radio-button
+        v-if="$store.state.favorites.count > 0"
+        type="favorites"
+      />
     </section>
-    <section v-if="$store.state.favorites.count > 0" class="ui vertical stripe segment">
+    <section
+      v-if="$store.state.favorites.count > 0"
+      class="ui vertical stripe segment"
+    >
       <div :class="['ui', { 'loading': isLoading }, 'form']">
         <div class="fields">
           <div class="field">
             <label for="favorites-ordering">
               <translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate>
             </label>
-            <select id="favorites-ordering" v-model="ordering" class="ui dropdown">
+            <select
+              id="favorites-ordering"
+              v-model="ordering"
+              class="ui dropdown"
+            >
               <option
                 v-for="option in orderingOptions"
                 :key="option[0]"
                 :value="option[0]"
-              >{{ sharedLabels.filters[option[1]] }}</option>
+              >
+                {{ sharedLabels.filters[option[1]] }}
+              </option>
             </select>
           </div>
           <div class="field">
@@ -150,10 +173,14 @@ const labels = computed(() => ({
               class="ui dropdown"
             >
               <option value="+">
-                <translate translate-context="Content/Search/Dropdown">Ascending</translate>
+                <translate translate-context="Content/Search/Dropdown">
+                  Ascending
+                </translate>
               </option>
               <option value="-">
-                <translate translate-context="Content/Search/Dropdown">Descending</translate>
+                <translate translate-context="Content/Search/Dropdown">
+                  Descending
+                </translate>
               </option>
             </select>
           </div>
@@ -161,15 +188,30 @@ const labels = computed(() => ({
             <label for="favorites-results">
               <translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate>
             </label>
-            <select id="favorites-results" v-model="paginateBy" class="ui dropdown">
+            <select
-              <option :value="12">12</option>
+              id="favorites-results"
-              <option :value="25">25</option>
+              v-model="paginateBy"
-              <option :value="50">50</option>
+              class="ui dropdown"
+            >
+              <option :value="12">
+                12
+              </option>
+              <option :value="25">
+                25
+              </option>
+              <option :value="50">
+                50
+              </option>
             </select>
           </div>
         </div>
       </div>
-      <track-table v-if="results" :show-artist="true" :show-album="true" :tracks="results" />
+      <track-table
+        v-if="results"
+        :show-artist="true"
+        :show-album="true"
+        :tracks="results"
+      />
       <div class="ui center aligned basic segment">
         <pagination
           v-if="results && count > paginateBy"
@@ -179,16 +221,26 @@ const labels = computed(() => ({
         />
       </div>
     </section>
-    <div v-else class="ui placeholder segment">
+    <div
+      v-else
+      class="ui placeholder segment"
+    >
       <div class="ui icon header">
         <i class="broken heart icon" />
         <translate
           translate-context="Content/Home/Placeholder"
-        >No tracks have been added to your favorites yet</translate>
+        >
+          No tracks have been added to your favorites yet
+        </translate>
       </div>
-      <router-link :to="'/library'" class="ui success labeled icon button">
+      <router-link
+        :to="'/library'"
+        class="ui success labeled icon button"
+      >
         <i class="headphones icon" />
-        <translate translate-context="Content/*/Verb">Browse the library</translate>
+        <translate translate-context="Content/*/Verb">
+          Browse the library
+        </translate>
       </router-link>
     </div>
   </main>

front/src/components/library/Albums.vue

@@ -1,3 +1,124 @@
+<script setup lang="ts">
+import qs from 'qs'
+import axios from 'axios'
+import $ from 'jquery'
+import { onBeforeRouteUpdate, useRouter } from 'vue-router'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { OrderingField, RouteWithPreferences } from '~/store/ui'
+
+import AlbumCard from '~/components/audio/album/Card.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+import TagsSelector from '~/components/library/TagsSelector.vue'
+import useLogger from '~/composables/useLogger'
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useOrdering from '~/composables/useOrdering'
+import { useStore } from '~/store'
+
+interface Props {
+  orderingConfigName: RouteWithPreferences | null
+  defaultPage?: number
+  defaultPaginateBy?: number
+  defaultQuery?: string
+  defaultTags?: string[]
+  scope?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultPage: 1,
+  defaultPaginateBy: 1,
+  defaultQuery: '',
+  defaultTags: () => [],
+  scope: 'all'
+})
+
+// TODO (wvffle): Make sure everything is it's own type
+const page = ref(+props.defaultPage)
+type ResponseType = { count: number, results: any[] }
+const result = ref<null | ResponseType>(null)
+const query = ref('')
+const tags = reactive(props.defaultTags.slice())
+
+const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
+  ['creation_date', 'creation_date'],
+  ['title', 'album_title'],
+  ['release_date', 'release_date']
+]
+
+const logger = useLogger()
+
+const sharedLabels = useSharedLabels()
+
+const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props.orderingConfigName)
+
+const router = useRouter()
+const updateQueryString = () => router.replace({
+  query: {
+    query: query.value,
+    page: page.value,
+    tag: tags,
+    paginateBy: paginateBy.value,
+    ordering: orderingString.value
+  }
+})
+
+const search = () => {
+  page.value = 1
+  updateQueryString()
+}
+
+watch(page, updateQueryString)
+onOrderingUpdate(updateQueryString)
+
+const isLoading = ref(false)
+const fetchData = async () => {
+  isLoading.value = true
+  const params = {
+    scope: props.scope,
+    page: page.value,
+    page_size: paginateBy.value,
+    q: query.value,
+    ordering: orderingString.value,
+    playable: 'true',
+    tag: tags,
+    include_channels: 'true',
+    content_category: 'music'
+  }
+
+  logger.time('Fetching albums')
+  try {
+    const response = await axios.get('albums/', {
+      params,
+      paramsSerializer: function (params) {
+        return qs.stringify(params, { indices: false })
+      }
+    })
+
+    result.value = response.data
+  } catch (error) {
+    // TODO (wvffle): Handle error
+    result.value = null
+  } finally {
+    logger.timeEnd('Fetching albums')
+    isLoading.value = false
+  }
+}
+
+const store = useStore()
+watch(store.state.moderation.lastUpdate, fetchData)
+onBeforeRouteUpdate(fetchData)
+fetchData()
+
+// @ts-expect-error semantic ui
+onMounted(() => $('.ui.dropdown').dropdown())
+
+const { $pgettext } = useGettext()
+const labels = computed(() => ({
+  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Enter album title…'),
+  title: $pgettext('*/*/*', 'Albums')
+}))
+</script>
+
 <template>
   <main v-title="labels.title">
     <section class="ui vertical stripe segment">
@@ -8,7 +129,7 @@
       </h2>
       <form
         :class="['ui', {'loading': isLoading}, 'form']"
-        @submit.prevent="updatePage();updateQueryString();fetchData()"
+        @submit.prevent="search"
       >
         <div class="fields">
           <div class="field">
@@ -78,13 +199,13 @@
               v-model="paginateBy"
               class="ui dropdown"
             >
-              <option :value="parseInt(12)">
+              <option :value="12">
                 12
               </option>
-              <option :value="parseInt(25)">
+              <option :value="25">
                 25
               </option>
-              <option :value="parseInt(50)">
+              <option :value="50">
                 50
               </option>
             </select>
@@ -136,137 +257,11 @@
       <div class="ui center aligned basic segment">
         <pagination
           v-if="result && result.count > paginateBy"
-          :current="page"
+          v-model:current="page"
           :paginate-by="paginateBy"
           :total="result.count"
-          @page-changed="selectPage"
         />
       </div>
     </section>
   </main>
 </template>
-
-<script>
-import qs from 'qs'
-import axios from 'axios'
-import $ from 'jquery'
-
-import OrderingMixin from '~/components/mixins/Ordering.vue'
-import PaginationMixin from '~/components/mixins/Pagination.vue'
-import AlbumCard from '~/components/audio/album/Card.vue'
-import Pagination from '~/components/Pagination.vue'
-import TagsSelector from '~/components/library/TagsSelector.vue'
-import useLogger from '~/composables/useLogger'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-
-const logger = useLogger()
-
-const FETCH_URL = 'albums/'
-
-export default {
-  components: {
-    AlbumCard,
-    Pagination,
-    TagsSelector
-  },
-  mixins: [OrderingMixin, PaginationMixin],
-  props: {
-    defaultQuery: { type: String, required: false, default: '' },
-    defaultTags: { type: Array, required: false, default: () => { return [] } },
-    scope: { type: String, required: false, default: 'all' }
-  },
-  setup () {
-    const sharedLabels = useSharedLabels()
-    return { sharedLabels }
-  },
-  data () {
-    return {
-      isLoading: true,
-      result: null,
-      page: parseInt(this.defaultPage),
-      query: this.defaultQuery,
-      tags: (this.defaultTags || []).filter((t) => { return t.length > 0 }),
-      orderingOptions: [['creation_date', 'creation_date'], ['title', 'album_title'], ['release_date', 'release_date']]
-    }
-  },
-  computed: {
-    labels () {
-      const searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', 'Enter album title…')
-      const title = this.$pgettext('*/*/*', 'Albums')
-      return {
-        searchPlaceholder,
-        title
-      }
-    }
-  },
-  watch: {
-    page () {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    '$store.state.moderation.lastUpdate': function () {
-      this.fetchData()
-    }
-  },
-  created () {
-    this.fetchData()
-  },
-  mounted () {
-    $('.ui.dropdown').dropdown()
-  },
-  methods: {
-    updateQueryString: function () {
-      history.pushState(
-        {},
-        null,
-        this.$route.path + '?' + new URLSearchParams(
-          {
-            query: this.query,
-            page: this.page,
-            tag: this.tags,
-            paginateBy: this.paginateBy,
-            ordering: this.getOrderingAsString()
-          }).toString()
-      )
-    },
-    fetchData: function () {
-      const self = this
-      this.isLoading = true
-      const url = FETCH_URL
-      const params = {
-        scope: this.scope,
-        page: this.page,
-        page_size: this.paginateBy,
-        q: this.query,
-        ordering: this.getOrderingAsString(),
-        playable: 'true',
-        tag: this.tags,
-        include_channels: 'true',
-        content_category: 'music'
-      }
-      logger.debug('Fetching albums')
-      axios.get(
-        url,
-        {
-          params: params,
-          paramsSerializer: function (params) {
-            return qs.stringify(params, { indices: false })
-          }
-        }
-      ).then(response => {
-        self.result = response.data
-        self.isLoading = false
-      }, () => {
-        self.result = null
-        self.isLoading = false
-      })
-    },
-    selectPage: function (page) {
-      this.page = page
-    },
-    updatePage () {
-      this.page = this.defaultPage
-    }
-  }
-}
-</script>

front/src/components/library/Artists.vue

@@ -170,7 +170,7 @@ import $ from 'jquery'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import useLogger from '~/composables/useLogger'
 import useSharedLabels from '~/composables/locale/useSharedLabels'

front/src/components/library/Podcasts.vue

@@ -202,7 +202,7 @@ import $ from 'jquery'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import Modal from '~/components/semantic/Modal.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'

front/src/components/library/Radios.vue

@@ -180,7 +180,7 @@ import $ from 'jquery'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
 import RadioCard from '~/components/radios/Card.vue'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import useLogger from '~/composables/useLogger'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 

front/src/components/manage/ChannelsTable.vue

@@ -203,7 +203,7 @@ import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
 import { normalizeQuery, parseTokens } from '~/utils/search'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'

front/src/components/manage/library/AlbumsTable.vue

@@ -188,7 +188,7 @@ import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
 import { normalizeQuery, parseTokens } from '~/utils/search'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'

front/src/components/manage/library/ArtistsTable.vue

@@ -187,7 +187,7 @@ import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
 import { normalizeQuery, parseTokens } from '~/utils/search'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'

front/src/components/manage/library/EditsCardList.vue

@@ -133,7 +133,7 @@
 import axios from 'axios'
 import { uniq, merge } from 'lodash-es'
 import time from '~/utils/time'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import EditCard from '~/components/library/EditCard.vue'
 import { normalizeQuery, parseTokens } from '~/utils/search'

front/src/components/manage/library/LibrariesTable.vue

@@ -218,7 +218,7 @@ import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
 import { normalizeQuery, parseTokens } from '~/utils/search'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'

front/src/components/manage/library/TagsTable.vue

@@ -149,7 +149,7 @@ import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
 import { normalizeQuery, parseTokens } from '~/utils/search'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'

front/src/components/manage/library/TracksTable.vue

@@ -201,7 +201,7 @@ import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
 import { normalizeQuery, parseTokens } from '~/utils/search'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'

front/src/components/manage/library/UploadsTable.vue

@@ -310,7 +310,7 @@ import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
 import { normalizeQuery, parseTokens } from '~/utils/search'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'

front/src/components/manage/moderation/AccountsTable.vue

@@ -174,7 +174,7 @@ import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
 import { normalizeQuery, parseTokens } from '~/utils/search'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'

front/src/components/manage/moderation/DomainsTable.vue

@@ -184,7 +184,7 @@
 import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import useSharedLabels from '~/composables/locale/useSharedLabels'

front/src/components/manage/users/InvitationsTable.vue

@@ -158,7 +158,7 @@
 import axios from 'axios'
 import moment from 'moment'
 import { merge } from 'lodash-es'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import useSharedLabels from '~/composables/locale/useSharedLabels'

front/src/components/manage/users/UsersTable.vue

@@ -201,7 +201,7 @@
 import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import useSharedLabels from '~/composables/locale/useSharedLabels'

front/src/components/moderation/FilterModal.vue

@@ -138,7 +138,7 @@ export default {
       return axios.post('moderation/content-filters/', payload).then(response => {
         logger.info('Successfully added track to playlist')
         self.update(false)
-        self.$store.commit('moderation/lastUpdate', new Date())
+        self.$store.moderation.state.lastUpdate = new Date()
         self.isLoading = false
         const msg = this.$pgettext('*/Moderation/Message', 'Content filter successfully added')
         self.$store.commit('moderation/contentFilter', response.data)

front/src/components/vui/Pagination.vue

@@ -23,14 +23,12 @@ const current = useVModel(props, 'current', emit)
 const RANGE = 2
 const pages = computed(() => {
   const start = range(1, 1 + RANGE)
-  const end = range(maxPage.value - RANGE, maxPage.value)
+  const end = range(maxPage.value - RANGE + 1, maxPage.value + 1)
   const middle = range(
     clamp(props.current - RANGE + 1, 1, maxPage.value),
     clamp(props.current + RANGE, 1, maxPage.value)
   ).filter(i => !start.includes(i) && !end.includes(i))
 
-  console.log(middle, end)
-
   return [
     ...start,
     middle.length === 0 && 'skip',
@@ -80,16 +78,26 @@ const labels = computed(() => ({
     </a>
 
     <template v-if="!compact">
-      <a
+      <template
         v-for="page in pages"
         :key="page"
-        href="#"
-        :class="[{ active: page === current, disabled: page === 'skip' }, 'item']"
-        @click.prevent.stop="page !== 'skip' && setPage(page)"
       >
-        <span v-if="page !== 'skip'">{{ page }}</span>
+        <a
-        <span v-else>…</span>
+          v-if="page === 'skip'"
-      </a>
+          href="#"
+          class="item disabled"
+        >
+          <span>…</span>
+        </a>
+        <a
+          v-else
+          href="#"
+          :class="[{ active: page === current }, 'item']"
+          @click.prevent.stop="setPage(page as number)"
+        >
+          <span>{{ page }}</span>
+        </a>
+      </template>
     </template>
 
     <a

front/src/store/moderation.ts

@@ -55,9 +55,6 @@ const store: Module<State, RootState> = {
     empty (state) {
       state.filters = []
     },
-    lastUpdate (state, value) {
-      state.lastUpdate = value
-    },
     contentFilter (state, value) {
       state.filters.push(value)
     },

front/src/store/ui.ts

@@ -18,7 +18,7 @@ export type RouteWithPreferences = 'library.artists.browse' | 'library.podcasts.
 export type WebSocketEventName = 'inbox.item_added' | 'import.status_updated' | 'mutation.created' | 'mutation.updated'
   | 'report.created' | 'user_request.created' | 'Listen'
 
-export type OrderingField = 'creation_date' | 'title' | 'album__title' | 'artist__name'
+export type OrderingField = 'creation_date' | 'title' | 'album__title' | 'artist__name' | 'release_date'
 export type OrderingDirection = '-' | '+'
 interface RoutePreferences {
   paginateBy: number

front/src/views/Search.vue

@@ -153,7 +153,7 @@ import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
 import AlbumCard from '~/components/audio/album/Card.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import PlaylistCardList from '~/components/playlists/CardList.vue'
 import RadioCard from '~/components/radios/Card.vue'
 import TagsList from '~/components/tags/List.vue'

front/src/views/admin/moderation/ReportsList.vue

@@ -129,7 +129,7 @@
 import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import ReportCard from '~/components/manage/moderation/ReportCard.vue'
 import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'

front/src/views/admin/moderation/RequestsList.vue

@@ -127,7 +127,7 @@
 import axios from 'axios'
 import { merge } from 'lodash-es'
 import time from '~/utils/time'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import UserRequestCard from '~/components/manage/moderation/UserRequestCard.vue'
 import { normalizeQuery, parseTokens } from '~/utils/search'

front/src/views/content/libraries/FilesTable.vue

@@ -270,7 +270,7 @@ import { merge } from 'lodash-es'
 import time from '~/utils/time'
 import { normalizeQuery, parseTokens } from '~/utils/search'
 
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'

front/src/views/playlists/List.vue

@@ -143,7 +143,7 @@ import $ from 'jquery'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
 import PlaylistCardList from '~/components/playlists/CardList.vue'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 
 const FETCH_URL = 'playlists/'

front/src/views/radios/Detail.vue

@@ -116,7 +116,7 @@
 import axios from 'axios'
 import TrackTable from '~/components/audio/track/Table.vue'
 import RadioButton from '~/components/radios/Button.vue'
-import Pagination from '~/components/Pagination.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 
 export default {
   components: {