Add useSmartSearch composable

front/src/components/library/Radios.vue

@@ -1,3 +1,110 @@
+<script setup lang="ts">
+import axios from 'axios'
+import $ from 'jquery'
+
+import RadioCard from '~/components/radios/Card.vue'
+import Pagination from '~/components/vui/Pagination.vue'
+import useLogger from '~/composables/useLogger'
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import { OrderingField } from '~/store/ui'
+import { computed, ref, watch } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { useStore } from '~/store'
+import { onBeforeRouteUpdate, useRouter } from 'vue-router'
+import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+
+interface Props extends OrderingProps {
+  defaultPage?: number
+  defaultPaginateBy?: number
+
+  defaultQuery?: string
+  scope?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultPage: 1,
+  defaultPaginateBy: 1,
+  defaultQuery: '',
+  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(props.defaultQuery)
+
+const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
+  ['creation_date', 'creation_date'],
+  ['name', 'name']
+]
+
+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,
+    paginateBy: paginateBy.value,
+    ordering: orderingString.value
+  }
+})
+
+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,
+    name__icontains: query.value,
+    ordering: orderingString.value
+  }
+
+  logger.time('Fetching radios')
+  try {
+    const response = await axios.get('radios/radios/', {
+      params
+      // TODO (wvffle): Check if params should be serialized. In other similar components (Podcasts, Artists) they are
+      // 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 radios')
+    isLoading.value = false
+  }
+}
+
+const store = useStore()
+const isAuthenticated = computed(() => store.state.auth.authenticated)
+const hasFavorites = computed(() => store.state.favorites.count > 0)
+
+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 a radio name…'),
+  title: $pgettext('*/*/*', 'Radios')
+}))
+</script>
+
 <template>
   <main v-title="labels.title">
     <section class="ui vertical stripe segment">
@@ -50,7 +157,7 @@
       <div class="ui hidden divider" />
       <form
         :class="['ui', {'loading': isLoading}, 'form']"
-        @submit.prevent="updateQueryString();fetchData()"
+        @submit.prevent="page = props.defaultPage"
       >
         <div class="fields">
           <div class="field">
@@ -114,13 +221,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>
@@ -163,116 +270,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 axios from 'axios'
-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/vui/Pagination.vue'
-import useLogger from '~/composables/useLogger'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-
-const logger = useLogger()
-
-const FETCH_URL = 'radios/radios/'
-
-export default {
-  components: {
-    RadioCard,
-    Pagination
-  },
-  mixins: [OrderingMixin, PaginationMixin],
-  props: {
-    defaultQuery: { type: String, required: false, default: '' },
-    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,
-      orderingOptions: [['creation_date', 'creation_date'], ['name', 'name']]
-    }
-  },
-  computed: {
-    labels () {
-      const searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', 'Enter a radio name…')
-      const title = this.$pgettext('*/*/*', 'Radios')
-      return {
-        searchPlaceholder,
-        title
-      }
-    },
-    isAuthenticated () {
-      return this.$store.state.auth.authenticated
-    },
-    hasFavorites () {
-      return this.$store.state.favorites.count > 0
-    }
-  },
-  watch: {
-    page () {
-      this.updateQueryString()
-      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,
-            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,
-        name__icontains: this.query,
-        ordering: this.getOrderingAsString()
-      }
-      logger.debug('Fetching radios')
-      axios.get(url, { params: params }).then(response => {
-        self.result = response.data
-        self.isLoading = false
-      })
-    },
-    selectPage: function (page) {
-      this.page = page
-    }
-  }
-}
-</script>