Add useSmartSearch composable

front/src/components/favorites/List.vue

@@ -7,16 +7,15 @@ import { checkRedirectToLogin } from '~/utils'
 import TrackTable from '~/components/audio/track/Table.vue'
 import useLogger from '~/composables/useLogger'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useOrdering from '~/composables/useOrdering'
+import useOrdering, { OrderingProps } from '~/composables/useOrdering'
 import { onBeforeRouteUpdate, useRouter } from 'vue-router'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useStore } from '~/store'
 import { Track } from '~/types'
 import { useGettext } from 'vue3-gettext'
-import { OrderingField, RouteWithPreferences } from '~/store/ui'
+import { OrderingField } from '~/store/ui'
 
-interface Props {
+interface Props extends OrderingProps {
-  orderingConfigName: RouteWithPreferences | null
   defaultPage?: number
   defaultPaginateBy?: number
 }

front/src/components/library/Albums.vue

@@ -5,18 +5,17 @@ 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 { OrderingField } 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 useOrdering, { OrderingProps } from '~/composables/useOrdering'
 import { useStore } from '~/store'
 
-interface Props {
+interface Props extends OrderingProps {
-  orderingConfigName: RouteWithPreferences | null
   defaultPage?: number
   defaultPaginateBy?: number
   defaultQuery?: string
@@ -61,11 +60,6 @@ const updateQueryString = () => router.replace({
   }
 })
 
-const search = () => {
-  page.value = props.defaultPage
-  updateQueryString()
-}
-
 watch(page, updateQueryString)
 onOrderingUpdate(updateQueryString)
 
@@ -128,7 +122,7 @@ const labels = computed(() => ({
       </h2>
       <form
         :class="['ui', {'loading': isLoading}, 'form']"
-        @submit.prevent="search"
+        @submit.prevent="page = props.defaultPage"
       >
         <div class="fields">
           <div class="field">

front/src/components/library/Artists.vue

@@ -8,15 +8,14 @@ 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 { RouteWithPreferences } from '~/store/ui'
+import { OrderingField } from '~/store/ui'
 import { computed, reactive, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
-import useOrdering from '~/composables/useOrdering'
+import useOrdering, { OrderingProps } from '~/composables/useOrdering'
 import { onBeforeRouteUpdate, useRouter } from 'vue-router'
 
-interface Props {
+interface Props extends OrderingProps {
-  orderingConfigName: RouteWithPreferences | null
   defaultPage?: number
   defaultPaginateBy?: number
   defaultQuery?: string
@@ -40,6 +39,11 @@ const query = ref(props.defaultQuery)
 const tags = reactive(props.defaultTags.slice())
 const excludeCompilation = ref(true)
 
+const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
+  ['creation_date', 'creation_date'],
+  ['name', 'name']
+]
+
 const logger = useLogger()
 const sharedLabels = useSharedLabels()
 
@@ -58,11 +62,6 @@ const updateQueryString = () => router.replace({
   }
 })
 
-const search = () => { 
-  page.value = props.defaultPage
-  updateQueryString()
-}
-
 watch(page, updateQueryString)
 onOrderingUpdate(updateQueryString)
 
@@ -126,7 +125,7 @@ const labels = computed(() => ({
       </h2>
       <form
         :class="['ui', {'loading': isLoading}, 'form']"
-        @submit.prevent="search"
+        @submit.prevent="page = props.defaultPage"
       >
         <div class="fields">
           <div class="field">
@@ -196,13 +195,13 @@ const labels = computed(() => ({
               v-model="paginateBy"
               class="ui dropdown"
             >
-              <option :value="parseInt(12)">
+              <option :value="12">
                 12
               </option>
-              <option :value="parseInt(30)">
+              <option :value="30">
                 30
               </option>
-              <option :value="parseInt(50)">
+              <option :value="50">
                 50
               </option>
             </select>

front/src/components/library/Library.vue

@@ -3,21 +3,3 @@
     <router-view :key="$router.currentRoute.value.fullPath" />
   </div>
 </template>
-
-<script>
-export default {
-  computed: {
-    showImports () {
-      return (
-        this.$store.state.auth.availablePermissions.upload ||
-        this.$store.state.auth.availablePermissions.library
-      )
-    },
-    labels () {
-      return {
-        secondaryMenu: this.$pgettext('Menu/*/Hidden text', 'Secondary menu')
-      }
-    }
-  }
-}
-</script>

front/src/components/library/Podcasts.vue

@@ -1,3 +1,122 @@
+<script setup lang="ts">
+import qs from 'qs'
+import axios from 'axios'
+import $ from 'jquery'
+
+import ArtistCard from '~/components/audio/artist/Card.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'
+import useLogger from '~/composables/useLogger'
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import { OrderingField } from '~/store/ui'
+import { computed, reactive, ref, watch } from 'vue'
+import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import { useGettext } from 'vue3-gettext'
+import { useStore } from '~/store'
+import { onBeforeRouteUpdate, useRouter } from 'vue-router'
+
+interface Props extends OrderingProps {
+  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(props.defaultQuery)
+const tags = reactive(props.defaultTags.slice())
+const showSubscribeModal = ref(false)
+
+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,
+    tag: tags,
+    paginateBy: paginateBy.value,
+    ordering: orderingString.value,
+    content_category: 'podcast',
+    include_channels: 'true'
+  }
+})
+
+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: 'podcast'
+  }
+
+  logger.time('Fetching podcasts')
+  try {
+    const response = await axios.get('artists/', {
+      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 podcasts')
+    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', 'Search…'),
+  title: $pgettext('*/*/*/Noun', 'Podcasts')
+}))
+</script>
+
 <template>
   <main v-title="labels.title">
     <section class="ui vertical stripe segment">
@@ -8,7 +127,7 @@
       </h2>
       <form
         :class="['ui', {'loading': isLoading}, 'form']"
-        @submit.prevent="updatePage();updateQueryString();fetchData()"
+        @submit.prevent="page = props.defaultPage"
       >
         <div class="fields">
           <div class="field">
@@ -78,13 +197,13 @@
               v-model="paginateBy"
               class="ui dropdown"
             >
-              <option :value="parseInt(12)">
+              <option :value="12">
                 12
               </option>
-              <option :value="parseInt(30)">
+              <option :value="30">
                 30
               </option>
-              <option :value="parseInt(50)">
+              <option :value="50">
                 50
               </option>
             </select>
@@ -144,10 +263,9 @@
       <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>
@@ -193,139 +311,3 @@
     </modal>
   </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 ArtistCard from '~/components/audio/artist/Card.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'
-import useLogger from '~/composables/useLogger'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-
-const logger = useLogger()
-
-const FETCH_URL = 'artists/'
-
-export default {
-  components: {
-    ArtistCard,
-    Pagination,
-    TagsSelector,
-    RemoteSearchForm,
-    Modal
-  },
-  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'], ['name', 'name']],
-      showSubscribeModal: false
-    }
-  },
-  computed: {
-    labels () {
-      const searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', 'Search…')
-      const title = this.$pgettext('*/*/*/Noun', 'Podcasts')
-      return {
-        searchPlaceholder,
-        title
-      }
-    }
-  },
-  watch: {
-    page () {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    '$store.state.moderation.lastUpdate': function () {
-      this.fetchData()
-    },
-    excludeCompilation () {
-      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(),
-            include_channels: true,
-            content_category: 'podcast'
-          }).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,
-        has_albums: this.excludeCompilation,
-        q: this.query,
-        ordering: this.getOrderingAsString(),
-        playable: 'true',
-        tag: this.tags,
-        include_channels: 'true',
-        content_category: 'podcast'
-      }
-      logger.debug('Fetching artists')
-      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/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>

front/src/components/manage/ChannelsTable.vue

@@ -1,16 +1,100 @@
+<script setup lang="ts">
+import axios from 'axios'
+import Pagination from '~/components/vui/Pagination.vue'
+import ActionTable from '~/components/common/ActionTable.vue'
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import { OrderingField } from '~/store/ui'
+import { computed, ref, watch } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
+import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+
+interface Props extends SmartSearchProps, OrderingProps {
+  // TODO (wvffle): find object type
+  filters?: object
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultQuery: '',
+  updateUrl: false,
+  filters: () => ({})
+})
+
+// TODO (wvffle): Make sure everything is it's own type
+const page = ref(1)
+type ResponseType = { count: number, results: any[] }
+const result = ref<null | ResponseType>(null)
+
+const { onSearch, query, addSearchToken, getTokenValue } = useSmartSearch(props.defaultQuery, props.updateUrl)
+const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props.orderingConfigName)
+
+const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
+  ['creation_date', 'creation_date'],
+  ['name', 'name']
+]
+
+const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
+const actions = () => []
+
+const isLoading = ref(false)
+const fetchData = async () => {
+  isLoading.value = true
+  const params = {
+    page: page.value,
+    page_size: paginateBy.value,
+    q: query.value,
+    ordering: orderingString.value,
+    ...props.filters
+  }
+
+  try {
+    const response = await axios.get('/manage/channels/', {
+      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 {
+    isLoading.value = false
+  }
+}
+
+onSearch(() => {
+  page.value = 1
+  fetchData()
+})
+
+watch(page, fetchData)
+onOrderingUpdate(fetchData)
+fetchData()
+
+const sharedLabels = useSharedLabels()
+const { $pgettext } = useGettext()
+const labels = computed(() => ({
+  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, name, account…'),
+  openModeration: $pgettext('Content/Moderation/Verb', 'Open in moderation interface')
+}))
+</script>
+
 <template>
   <div>
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
           <label for="channel-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
-          <form @submit.prevent="search.query = $refs.search.value">
+          <form @submit.prevent="query = $refs.search.value">
             <input
               id="channel-search"
               ref="search"
               name="search"
               type="text"
-              :value="search.query"
+              :value="query"
               :placeholder="labels.searchPlaceholder"
             >
           </form>
@@ -21,7 +105,7 @@
             id="channel-category"
             class="ui dropdown"
             :value="getTokenValue('category', '')"
-            @change="addSearchToken('category', $event.target.value)"
+            @change="addSearchToken('category', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
               <translate translate-context="Content/*/Dropdown">
@@ -179,11 +263,10 @@
     <div>
       <pagination
         v-if="result && result.count > paginateBy"
+        v-model:current="page"
         :compact="true"
-        :current="page"
         :paginate-by="paginateBy"
         :total="result.count"
-        @page-changed="selectPage"
       />
 
       <span v-if="result && result.results.length > 0">
@@ -197,119 +280,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import axios from 'axios'
-import { merge } from 'lodash-es'
-import time from '~/utils/time'
-import { normalizeQuery, parseTokens } from '~/utils/search'
-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'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-
-export default {
-  components: {
-    Pagination,
-    ActionTable
-  },
-  mixins: [OrderingMixin, SmartSearchMixin],
-  props: {
-    filters: { type: Object, required: false, default: () => { return {} } }
-  },
-  setup () {
-    const sharedLabels = useSharedLabels()
-    return { sharedLabels }
-  },
-  data () {
-    return {
-      time,
-      isLoading: false,
-      result: null,
-      page: 1,
-      search: {
-        query: this.defaultQuery,
-        tokens: parseTokens(normalizeQuery(this.defaultQuery))
-      },
-      orderingOptions: [
-        ['creation_date', 'creation_date'],
-        ['name', 'name']
-      ]
-    }
-  },
-  computed: {
-    labels () {
-      return {
-        searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by domain, name, account…'),
-        openModeration: this.$pgettext('Content/Moderation/Verb', 'Open in moderation interface')
-      }
-    },
-    actionFilters () {
-      const currentFilters = {
-        q: this.search.query
-      }
-      if (this.filters) {
-        return merge(currentFilters, this.filters)
-      } else {
-        return currentFilters
-      }
-    },
-    actions () {
-      // let deleteLabel = this.$pgettext('*/*/*/Verb', 'Delete')
-      // let confirmationMessage = this.$pgettext('Popup/*/Paragraph', 'The selected artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.')
-      return [
-        // {
-        //   name: 'delete',
-        //   label: deleteLabel,
-        //   confirmationMessage: confirmationMessage,
-        //   isDangerous: true,
-        //   allowAll: false,
-        //   confirmColor: 'danger',
-        // },
-      ]
-    }
-  },
-  watch: {
-    search (newValue) {
-      this.page = 1
-      this.fetchData()
-    },
-    page () {
-      this.fetchData()
-    },
-    ordering () {
-      this.fetchData()
-    },
-    orderingDirection () {
-      this.fetchData()
-    }
-  },
-  created () {
-    this.fetchData()
-  },
-  methods: {
-    fetchData () {
-      const params = merge({
-        page: this.page,
-        page_size: this.paginateBy,
-        q: this.search.query,
-        ordering: this.getOrderingAsString()
-      }, this.filters)
-      const self = this
-      self.isLoading = true
-      self.checked = []
-      axios.get('/manage/channels/', { params: params }).then((response) => {
-        self.result = response.data
-        self.isLoading = false
-      }, error => {
-        self.isLoading = false
-        self.errors = error.backendErrors
-      })
-    },
-    selectPage: function (page) {
-      this.page = page
-    }
-  }
-}
-</script>

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

@@ -1,16 +1,114 @@
+<script setup lang="ts">
+import axios from 'axios'
+import Pagination from '~/components/vui/Pagination.vue'
+import ActionTable from '~/components/common/ActionTable.vue'
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
+import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import { OrderingField } from '~/store/ui'
+import { computed, ref, watch } from 'vue'
+import { useGettext } from 'vue3-gettext'
+
+interface Props extends SmartSearchProps, OrderingProps {
+  // TODO (wvffle): find object type
+  filters?: object
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultQuery: '',
+  updateUrl: false,
+  filters: () => ({})
+})
+
+// TODO (wvffle): Make sure everything is it's own type
+const page = ref(1)
+type ResponseType = { count: number, results: any[] }
+const result = ref<null | ResponseType>(null)
+
+const { onSearch, query, addSearchToken } = useSmartSearch(props.defaultQuery, props.updateUrl)
+const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props.orderingConfigName)
+
+const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
+  ['creation_date', 'creation_date'],
+  ['release_date', 'release_date'],
+  ['name', 'name']
+]
+
+const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
+const actions = () => {
+  const deleteLabel = $pgettext('*/*/*/Verb', 'Delete')
+  const confirmationMessage = $pgettext('Popup/*/Paragraph', 'The selected albums will be removed, as well as associated tracks, uploads, favorites and listening history. This action is irreversible.')
+  return [
+    {
+      name: 'delete',
+      label: deleteLabel,
+      confirmationMessage: confirmationMessage,
+      isDangerous: true,
+      allowAll: false,
+      confirmColor: 'danger'
+    }
+  ]
+}
+
+const isLoading = ref(false)
+const fetchData = async () => {
+  isLoading.value = true
+  const params = {
+    page: page.value,
+    page_size: paginateBy.value,
+    q: query.value,
+    ordering: orderingString.value,
+    ...props.filters
+  }
+
+  try {
+    const response = await axios.get('/manage/library/albums/', {
+      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 {
+    isLoading.value = false
+  }
+}
+
+onSearch(() => {
+  page.value = 1
+  fetchData()
+})
+
+watch(page, fetchData)
+onOrderingUpdate(fetchData)
+fetchData()
+
+const sharedLabels = useSharedLabels()
+const { $pgettext } = useGettext()
+const labels = computed(() => ({
+  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, title, artist, MusicBrainz ID…'),
+  openModeration: $pgettext('Content/Moderation/Verb', 'Open in moderation interface')
+}))
+</script>
+
 <template>
   <div>
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
           <label for="albums-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
-          <form @submit.prevent="search.query = $refs.search.value">
+          <form @submit.prevent="query = $refs.search.value">
             <input
               id="albums-search"
               ref="search"
               name="search"
               type="text"
-              :value="search.query"
+              :value="query"
               :placeholder="labels.searchPlaceholder"
             >
           </form>
@@ -164,11 +262,10 @@
     <div>
       <pagination
         v-if="result && result.count > paginateBy"
+        v-model:current="page"
         :compact="true"
-        :current="page"
         :paginate-by="paginateBy"
         :total="result.count"
-        @page-changed="selectPage"
       />
 
       <span v-if="result && result.results.length > 0">
@@ -182,120 +279,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import axios from 'axios'
-import { merge } from 'lodash-es'
-import time from '~/utils/time'
-import { normalizeQuery, parseTokens } from '~/utils/search'
-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'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-
-export default {
-  components: {
-    Pagination,
-    ActionTable
-  },
-  mixins: [OrderingMixin, SmartSearchMixin],
-  props: {
-    filters: { type: Object, required: false, default: () => { return {} } }
-  },
-  setup () {
-    const sharedLabels = useSharedLabels()
-    return { sharedLabels }
-  },
-  data () {
-    return {
-      time,
-      isLoading: false,
-      result: null,
-      page: 1,
-      search: {
-        query: this.defaultQuery,
-        tokens: parseTokens(normalizeQuery(this.defaultQuery))
-      },
-      orderingOptions: [
-        ['creation_date', 'creation_date'],
-        ['release_date', 'release_date'],
-        ['name', 'name']
-      ]
-    }
-  },
-  computed: {
-    labels () {
-      return {
-        searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by domain, title, artist, MusicBrainz ID…'),
-        openModeration: this.$pgettext('Content/Moderation/Verb', 'Open in moderation interface')
-      }
-    },
-    actionFilters () {
-      const currentFilters = {
-        q: this.search.query
-      }
-      if (this.filters) {
-        return merge(currentFilters, this.filters)
-      } else {
-        return currentFilters
-      }
-    },
-    actions () {
-      const deleteLabel = this.$pgettext('*/*/*/Verb', 'Delete')
-      const confirmationMessage = this.$pgettext('Popup/*/Paragraph', 'The selected albums will be removed, as well as associated tracks, uploads, favorites and listening history. This action is irreversible.')
-      return [
-        {
-          name: 'delete',
-          label: deleteLabel,
-          confirmationMessage: confirmationMessage,
-          isDangerous: true,
-          allowAll: false,
-          confirmColor: 'danger'
-        }
-      ]
-    }
-  },
-  watch: {
-    search (newValue) {
-      this.page = 1
-      this.fetchData()
-    },
-    page () {
-      this.fetchData()
-    },
-    ordering () {
-      this.fetchData()
-    },
-    orderingDirection () {
-      this.fetchData()
-    }
-  },
-  created () {
-    this.fetchData()
-  },
-  methods: {
-    fetchData () {
-      const params = merge({
-        page: this.page,
-        page_size: this.paginateBy,
-        q: this.search.query,
-        ordering: this.getOrderingAsString()
-      }, this.filters)
-      const self = this
-      self.isLoading = true
-      self.checked = []
-      axios.get('/manage/library/albums/', { params: params }).then((response) => {
-        self.result = response.data
-        self.isLoading = false
-      }, error => {
-        self.isLoading = false
-        self.errors = error.backendErrors
-      })
-    },
-    selectPage: function (page) {
-      this.page = page
-    }
-  }
-}
-</script>

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

@@ -1,16 +1,118 @@
+<script setup lang="ts">
+import axios from 'axios'
+import Pagination from '~/components/vui/Pagination.vue'
+import ActionTable from '~/components/common/ActionTable.vue'
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import { ref, computed, watch } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
+import { OrderingField } from '~/store/ui'
+
+interface Props extends SmartSearchProps, OrderingProps {
+  // TODO (wvffle): find object type
+  filters?: object
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultQuery: '',
+  updateUrl: false,
+  filters: () => ({})
+})
+
+// TODO (wvffle): Make sure everything is it's own type
+const page = ref(1)
+type ResponseType = { count: number, results: any[] }
+const result = ref<null | ResponseType>(null)
+
+const { onSearch, query, addSearchToken, getTokenValue } = useSmartSearch(props.defaultQuery, props.updateUrl)
+const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props.orderingConfigName)
+
+const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
+  ['creation_date', 'creation_date'],
+  ['name', 'name']
+]
+
+const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
+const actions = () => {
+  const deleteLabel = $pgettext('*/*/*/Verb', 'Delete')
+  const confirmationMessage = $pgettext('Popup/*/Paragraph', 'The selected artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.')
+  return [
+    {
+      name: 'delete',
+      label: deleteLabel,
+      confirmationMessage: confirmationMessage,
+      isDangerous: true,
+      allowAll: false,
+      confirmColor: 'danger'
+    }
+  ]
+}
+
+const isLoading = ref(false)
+const fetchData = async () => {
+  isLoading.value = true
+  const params = {
+    page: page.value,
+    page_size: paginateBy.value,
+    q: query.value,
+    ordering: orderingString.value,
+    ...props.filters
+  }
+
+  try {
+    const response = await axios.get('/manage/library/artists/', {
+      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 {
+    isLoading.value = false
+  }
+}
+
+onSearch(() => {
+  page.value = 1
+  fetchData()
+})
+
+watch(page, fetchData)
+onOrderingUpdate(fetchData)
+fetchData()
+
+const sharedLabels = useSharedLabels()
+const { $pgettext } = useGettext()
+const labels = computed(() => ({
+  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, name, MusicBrainz ID…')
+}))
+
+const getUrl = (artist: { channel?: number; id: number }) => {
+  return artist.channel
+    ? { name: 'manage.channels.detail', params: { id: artist.channel } }
+    : { name: 'manage.library.artists.detail', params: { id: artist.id } }
+}
+</script>
+
 <template>
   <div>
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
           <label for="artists-serarch"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
-          <form @submit.prevent="search.query = $refs.search.value">
+          <form @submit.prevent="query = $refs.search.value">
             <input
               id="artists-search"
               ref="search"
               name="search"
               type="text"
-              :value="search.query"
+              :value="query"
               :placeholder="labels.searchPlaceholder"
             >
           </form>
@@ -21,7 +123,7 @@
             id="artists-category"
             class="ui dropdown"
             :value="getTokenValue('category', '')"
-            @change="addSearchToken('category', $event.target.value)"
+            @change="addSearchToken('category', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
               <translate translate-context="Content/*/Dropdown">
@@ -163,11 +265,10 @@
     <div>
       <pagination
         v-if="result && result.count > paginateBy"
+        v-model:current="page"
         :compact="true"
-        :current="page"
         :paginate-by="paginateBy"
         :total="result.count"
-        @page-changed="selectPage"
       />
 
       <span v-if="result && result.results.length > 0">
@@ -181,124 +282,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import axios from 'axios'
-import { merge } from 'lodash-es'
-import time from '~/utils/time'
-import { normalizeQuery, parseTokens } from '~/utils/search'
-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'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-
-export default {
-  components: {
-    Pagination,
-    ActionTable
-  },
-  mixins: [OrderingMixin, SmartSearchMixin],
-  props: {
-    filters: { type: Object, required: false, default: () => { return {} } }
-  },
-  setup () {
-    const sharedLabels = useSharedLabels()
-    return { sharedLabels }
-  },
-  data () {
-    return {
-      time,
-      isLoading: false,
-      result: null,
-      page: 1,
-      search: {
-        query: this.defaultQuery,
-        tokens: parseTokens(normalizeQuery(this.defaultQuery))
-      },
-      orderingOptions: [
-        ['creation_date', 'creation_date'],
-        ['name', 'name']
-      ]
-    }
-  },
-  computed: {
-    labels () {
-      return {
-        searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by domain, name, MusicBrainz ID…')
-      }
-    },
-    actionFilters () {
-      const currentFilters = {
-        q: this.search.query
-      }
-      if (this.filters) {
-        return merge(currentFilters, this.filters)
-      } else {
-        return currentFilters
-      }
-    },
-    actions () {
-      const deleteLabel = this.$pgettext('*/*/*/Verb', 'Delete')
-      const confirmationMessage = this.$pgettext('Popup/*/Paragraph', 'The selected artist will be removed, as well as associated uploads, tracks, albums, favorites and listening history. This action is irreversible.')
-      return [
-        {
-          name: 'delete',
-          label: deleteLabel,
-          confirmationMessage: confirmationMessage,
-          isDangerous: true,
-          allowAll: false,
-          confirmColor: 'danger'
-        }
-      ]
-    }
-  },
-  watch: {
-    search (newValue) {
-      this.page = 1
-      this.fetchData()
-    },
-    page () {
-      this.fetchData()
-    },
-    ordering () {
-      this.fetchData()
-    },
-    orderingDirection () {
-      this.fetchData()
-    }
-  },
-  created () {
-    this.fetchData()
-  },
-  methods: {
-    getUrl (artist) {
-      if (artist.channel) {
-        return { name: 'manage.channels.detail', params: { id: artist.channel } }
-      }
-      return { name: 'manage.library.artists.detail', params: { id: artist.id } }
-    },
-    fetchData () {
-      const params = merge({
-        page: this.page,
-        page_size: this.paginateBy,
-        q: this.search.query,
-        ordering: this.getOrderingAsString()
-      }, this.filters)
-      const self = this
-      self.isLoading = true
-      self.checked = []
-      axios.get('/manage/library/artists/', { params: params }).then((response) => {
-        self.result = response.data
-        self.isLoading = false
-      }, error => {
-        self.isLoading = false
-        self.errors = error.backendErrors
-      })
-    },
-    selectPage: function (page) {
-      this.page = page
-    }
-  }
-}
-</script>

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

@@ -1,3 +1,158 @@
+<script setup lang="ts">
+import axios from 'axios'
+import { uniq, merge } from 'lodash-es'
+import Pagination from '~/components/vui/Pagination.vue'
+import EditCard from '~/components/library/EditCard.vue'
+import { normalizeQuery, parseTokens } from '~/utils/search'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import { ref, reactive, watch } from 'vue'
+import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
+import { OrderingField } from '~/store/ui'
+import useEditConfigs from '~/composables/moderation/useEditConfigs'
+
+interface Props extends SmartSearchProps, OrderingProps {
+  // TODO (wvffle): find object type
+  filters?: object
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultQuery: '',
+  updateUrl: false,
+  filters: () => ({})
+})
+
+const configs = useEditConfigs()
+
+// TODO (wvffle): Make sure everything is it's own type
+const page = ref(1)
+type ResponseType = { count: number, results: { target?: { type: string, id: number } }[] }
+const result = ref<null | ResponseType>(null)
+
+const { onSearch, query, addSearchToken, getTokenValue } = useSmartSearch(props.defaultQuery, props.updateUrl)
+const { onOrderingUpdate, orderingString, paginateBy, ordering, orderingDirection } = useOrdering(props.orderingConfigName)
+
+const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
+  ['creation_date', 'creation_date'],
+  ['applied_date', 'applied_date']
+]
+
+const targets = reactive({
+  track: {}
+})
+
+const fetchTargets = async () => {
+  // we request target data via the API so we can display previous state
+  // additionnal data next to the edit card
+  const typesAndIds = {
+    track: { url: 'tracks/', ids: [] as number[] }
+  }
+
+  for (const res of result.value?.results ?? []) {
+    const typeAndId = typesAndIds[result.target?.type as keyof typeof typesAndIds]
+    typeAndId?.ids.push(result.target.id)
+  }
+
+  for (const [key, config] of Object.entries(typesAndIds)) {
+    if (config.ids.length === 0) {
+      continue
+    }
+
+    const response = await axios.get(config.url, {
+      params: {
+        id: uniq(config.ids),
+        hidden: 'null'
+      }
+    }).catch(() => {
+      // TODO (wvffle): Handle error
+    })
+
+    for (const payload of response.data.results) {
+      targets[key][payload.id] = { 
+        payload,
+        currentState: configs[key].fields.reduce((state, field) => {
+          state[field.id] = { value: field.getValue(payload) }
+          return state
+        })
+      }
+    }
+  }
+}
+
+const isLoading = ref(false)
+const fetchData = async () => {
+  isLoading.value = true
+  const params = {
+    page: page.value,
+    page_size: paginateBy.value,
+    q: query.value,
+    ordering: orderingString.value,
+    ...props.filters
+  }
+
+  try {
+    const response = await axios.get('mutations/', {
+      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
+    fetchTargets()
+  } catch (error) {
+    // TODO (wvffle): Handle error
+    result.value = null
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onSearch(() => {
+  page.value = 1
+  fetchData()
+})
+
+watch(page, fetchData)
+onOrderingUpdate(fetchData)
+fetchData()
+
+const sharedLabels = useSharedLabels()
+const { $pgettext } = useGettext()
+const labels = computed(() => ({
+  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by account, summary, domain…')
+}))
+export default {
+  methods: {
+    selectPage: function (page) {
+      this.page = page
+    },
+    handle (type, id, value) {
+      if (type === 'delete') {
+        this.exclude.push(id)
+      }
+
+      this.result.results.forEach((e) => {
+        if (e.uuid === id) {
+          e.is_approved = value
+        }
+      })
+    },
+    getCurrentState (target) {
+      if (!target) {
+        return {}
+      }
+      if (this.targets[target.type] && this.targets[target.type][String(target.id)]) {
+        return this.targets[target.type][String(target.id)].currentState
+      }
+      return {}
+    }
+  }
+}
+</script>
+
 <template>
   <div class="ui text container">
     <slot />
@@ -128,157 +283,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import axios from 'axios'
-import { uniq, merge } from 'lodash-es'
-import time from '~/utils/time'
-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'
-import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
-
-import useEditConfigs from '~/composables/useEditConfigs'
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-
-export default {
-  components: {
-    Pagination,
-    EditCard
-  },
-  mixins: [OrderingMixin, SmartSearchMixin],
-  props: {
-    filters: { type: Object, required: false, default: () => { return {} } }
-  },
-  setup () {
-    const sharedLabels = useSharedLabels()
-    const configs = useEditConfigs()
-    return { sharedLabels, configs }
-  },
-  data () {
-    return {
-      time,
-      isLoading: false,
-      result: null,
-      page: 1,
-      search: {
-        query: this.defaultQuery,
-        tokens: parseTokens(normalizeQuery(this.defaultQuery))
-      },
-      orderingOptions: [
-        ['creation_date', 'creation_date'],
-        ['applied_date', 'applied_date']
-      ],
-      targets: {
-        track: {}
-      }
-    }
-  },
-  computed: {
-    labels () {
-      return {
-        searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by account, summary, domain…')
-      }
-    }
-  },
-  watch: {
-    search (newValue) {
-      this.page = 1
-      this.fetchData()
-    },
-    page () {
-      this.fetchData()
-    },
-    ordering () {
-      this.fetchData()
-    },
-    orderingDirection () {
-      this.fetchData()
-    }
-  },
-  created () {
-    this.fetchData()
-  },
-  methods: {
-    fetchData () {
-      const params = merge({
-        page: this.page,
-        page_size: this.paginateBy,
-        q: this.search.query,
-        ordering: this.getOrderingAsString()
-      }, this.filters)
-      const self = this
-      self.isLoading = true
-      this.result = null
-      axios.get('mutations/', { params: params }).then((response) => {
-        self.result = response.data
-        self.isLoading = false
-        self.fetchTargets()
-      }, error => {
-        self.isLoading = false
-        self.errors = error.backendErrors
-      })
-    },
-    fetchTargets () {
-      // we request target data via the API so we can display previous state
-      // additionnal data next to the edit card
-      const self = this
-      const typesAndIds = {
-        track: {
-          url: 'tracks/',
-          ids: []
-        }
-      }
-      this.result.results.forEach((m) => {
-        if (!m.target || !typesAndIds[m.target.type]) {
-          return
-        }
-        typesAndIds[m.target.type].ids.push(m.target.id)
-      })
-      Object.keys(typesAndIds).forEach((k) => {
-        const config = typesAndIds[k]
-        if (config.ids.length === 0) {
-          return
-        }
-        axios.get(config.url, { params: { id: uniq(config.ids), hidden: 'null' } }).then((response) => {
-          response.data.results.forEach((e) => {
-            self.targets[k][e.id] = {
-              payload: e,
-              currentState: configs[k].fields.reduce((state/*: Record<string, unknown> */, field) => {
-                state[field.id] = { value: field.getValue(e) }
-                return state
-              }, {})
-            }
-          })
-        }, error => {
-          self.errors = error.backendErrors
-        })
-      })
-    },
-    selectPage: function (page) {
-      this.page = page
-    },
-    handle (type, id, value) {
-      if (type === 'delete') {
-        this.exclude.push(id)
-      }
-
-      this.result.results.forEach((e) => {
-        if (e.uuid === id) {
-          e.is_approved = value
-        }
-      })
-    },
-    getCurrentState (target) {
-      if (!target) {
-        return {}
-      }
-      if (this.targets[target.type] && this.targets[target.type][String(target.id)]) {
-        return this.targets[target.type][String(target.id)].currentState
-      }
-      return {}
-    }
-  }
-}
-</script>

front/src/composables/locale/useSharedLabels.ts

@@ -69,6 +69,7 @@ export default () => ({
     creation_date: $pgettext('Content/*/*/Noun', 'Creation date'),
     release_date: $pgettext('Content/*/*/Noun', 'Release date'),
     accessed_date: $pgettext('Content/*/*/Noun', 'Accessed date'),
+    applied_date: $pgettext('Content/*/*/Noun', 'Applied date'),
     first_seen: $pgettext('Content/Moderation/Dropdown/Noun', 'First seen date'),
     last_seen: $pgettext('Content/Moderation/Dropdown/Noun', 'Last seen date'),
     modification_date: $pgettext('Content/Playlist/Dropdown/Noun', 'Modification date'),

front/src/composables/useOrdering.ts

@@ -4,6 +4,10 @@ import { useRoute } from 'vue-router'
 import { useStore } from '~/store'
 import { OrderingDirection, OrderingField, RouteWithPreferences } from '~/store/ui'
 
+export interface OrderingProps {
+  orderingConfigName: RouteWithPreferences | null
+}
+
 export default (orderingConfigName: MaybeRef<RouteWithPreferences | null>) => {
   const store = useStore()
   const route = useRoute()

front/src/composables/useSmartSearch.ts

@@ -0,0 +1,83 @@
+import { MaybeRef, refWithControl } from '@vueuse/core'
+import { computed, ref, unref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { compileTokens, normalizeQuery, parseTokens, Token } from '~/utils/search'
+
+export interface SmartSearchProps {
+  defaultQuery?: string
+  updateUrl?: boolean
+}
+
+export default (defaultQuery: MaybeRef<string>, updateUrl: MaybeRef<boolean>) => {
+  const query = refWithControl(unref(defaultQuery))
+  const tokens = ref([] as Token[])
+
+  watch(query, (value) => {
+    // TODO (wvffle): Move normalizeQuery and parseTokens into the composable file
+    tokens.value = parseTokens(normalizeQuery(value))
+  }, { immediate: true })
+
+  const updateHandlers = new Set<() => void>()
+  const onSearch = (fn: () => void) => {
+    updateHandlers.add(fn)
+    return () => updateHandlers.delete(fn)
+  }
+
+  const router = useRouter()
+  watch(tokens, (value) => {
+    const newQuery = compileTokens(value)
+    if (unref(updateUrl)) {
+      return router.replace({ query: { q: newQuery } })
+    }
+
+    // TODO (wvffle): updateUrl = false only in FilesTable.vue
+    query.set(newQuery, false)
+    for (const handler of updateHandlers) {
+      handler()
+    }
+    // this.page = 1
+    // this.fetchData()
+  }, { deep: true })
+
+  const getTokenValue = (key: string, fallback: string) => {
+    const matching = tokens.value.find(token => {
+      return token.field === key
+    })
+
+    return matching?.value ?? fallback
+  }
+
+  const addSearchToken = (key: string, value: string) => {
+    if (value === '') {
+      tokens.value = tokens.value.filter(token => {
+        return token.field !== key
+      })
+
+      return
+    }
+
+    const existing = tokens.value.filter(token => {
+      return token.field === key
+    })
+
+    if (!existing.length) {
+      tokens.value.push({ field: key, value })
+      return
+    }
+
+    // TODO (wvffle): Check if triggers reactivity
+    for (const token of existing) {
+      token.value = value
+    }
+  }
+
+  return {
+    getTokenValue,
+    addSearchToken,
+    onSearch,
+    query: computed({
+      get: () => compileTokens(tokens.value),
+      set: (value: string) => query.set(value, true)
+    })
+  }
+}

front/src/store/ui.ts

@@ -18,7 +18,9 @@ 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' | 'release_date'
+export type OrderingField = 'creation_date' | 'title' | 'album__title' | 'artist__name' | 'release_date' | 'name'
+  | 'applied_date'
+
 export type OrderingDirection = '-' | '+'
 interface RoutePreferences {
   paginateBy: number

front/src/utils/search.ts

@@ -1,4 +1,4 @@
-interface Token {
+export interface Token {
   field: string | null
   value: string
 }

front/src/views/playlists/List.vue

@@ -83,13 +83,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>