Fix actions not being arrays in components using smart search

front/src/components/manage/ChannelsTable.vue

@@ -34,7 +34,7 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
 ]
 
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
-const actions = () => []
+const actions = []
 
 const isLoading = ref(false)
 const fetchData = async () => {

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

@@ -34,21 +34,18 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
   ['name', 'name']
 ]
 
+const { $pgettext } = useGettext()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
-const actions = () => {
+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.')
+    name: 'delete',
-  return [
+    label: $pgettext('*/*/*/Verb', 'Delete'),
-    {
+    confirmationMessage: $pgettext('Popup/*/Paragraph', 'The selected albums will be removed, as well as associated tracks, uploads, favorites and listening history. This action is irreversible.'),
-      name: 'delete',
+    isDangerous: true,
-      label: deleteLabel,
+    allowAll: false,
-      confirmationMessage: confirmationMessage,
+    confirmColor: 'danger'
-      isDangerous: true,
+  }
-      allowAll: false,
+]
-      confirmColor: 'danger'
-    }
-  ]
-}
 
 const isLoading = ref(false)
 const fetchData = async () => {
@@ -89,7 +86,6 @@ 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')

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

@@ -34,20 +34,16 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
 ]
 
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
-const actions = () => {
+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.')
+    name: 'delete',
-  return [
+    label: $pgettext('*/*/*/Verb', 'Delete'),
-    {
+    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.'),
-      name: 'delete',
+    isDangerous: true,
-      label: deleteLabel,
+    allowAll: false,
-      confirmationMessage: confirmationMessage,
+    confirmColor: 'danger'
-      isDangerous: true,
+  }
-      allowAll: false,
+]
-      confirmColor: 'danger'
-    }
-  ]
-}
 
 const isLoading = ref(false)
 const fetchData = async () => {

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

@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import axios from 'axios'
-import { uniq, merge } from 'lodash-es'
+import { uniq } 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 { ref, reactive, watch, computed } 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'
+import useEditConfigs, { EditObjectType } from '~/composables/moderation/useEditConfigs'
+import { useGettext } from 'vue3-gettext'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
@@ -27,7 +26,10 @@ 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 } }[] }
+
+type StateTarget = { id: number, type: keyof typeof targets }
+type ResponseResult = { uuid: string, is_approved: boolean, target?: StateTarget }
+type ResponseType = { count: number, results: ResponseResult[] }
 const result = ref<null | ResponseType>(null)
 
 const { onSearch, query, addSearchToken, getTokenValue } = useSmartSearch(props.defaultQuery, props.updateUrl)
@@ -38,20 +40,27 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
   ['applied_date', 'applied_date']
 ]
 
+interface TargetType {
+  payload: ResponseResult
+  currentState: Record<EditObjectType, { value: unknown }>
+}
+
 const targets = reactive({
-  track: {}
+  track: {} as Record<string, TargetType>
 })
 
 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 = {
+  type Config = { url: string, ids: number[] }
-    track: { url: 'tracks/', ids: [] as number[] }
+  const typesAndIds: Record<keyof typeof targets, Config> = {
+    track: { url: 'tracks/', ids: [] }
   }
 
   for (const res of result.value?.results ?? []) {
-    const typeAndId = typesAndIds[result.target?.type as keyof typeof typesAndIds]
+    if (!res.target) continue
-    typeAndId?.ids.push(result.target.id)
+    const typeAndId = typesAndIds[res.target.type as keyof typeof typesAndIds]
+    typeAndId?.ids.push(res.target.id)
   }
 
   for (const [key, config] of Object.entries(typesAndIds)) {
@@ -68,13 +77,13 @@ const fetchTargets = async () => {
       // TODO (wvffle): Handle error
     })
 
-    for (const payload of response.data.results) {
+    for (const payload of response?.data?.results ?? []) {
-      targets[key][payload.id] = { 
+      targets[key as keyof typeof targets][payload.id] = {
         payload,
-        currentState: configs[key].fields.reduce((state, field) => {
+        currentState: configs[key as keyof typeof targets].fields.reduce((state, field) => {
           state[field.id] = { value: field.getValue(payload) }
           return state
-        })
+        }, {} as Record<EditObjectType, { value: unknown }>)
       }
     }
   }
@@ -124,33 +133,19 @@ 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) => {
+const handle = (type: 'delete' | 'approved', id: string, value: boolean) => {
-        if (e.uuid === id) {
+  for (const entry of result.value?.results ?? []) {
-          e.is_approved = value
+    if (entry.uuid === id) {
-        }
+      entry.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 {}
     }
   }
 }
+
+const getCurrentState = (target?: StateTarget): object => {
+  if (!target) return {}
+  return targets[target.type]?.[target.id]?.currentState ?? {}
+}
 </script>
 
 <template>
@@ -160,13 +155,13 @@ export default {
       <div class="fields">
         <div class="ui field">
           <label for="search-edits"><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="search-edits"
               ref="search"
               name="search"
               type="text"
-              :value="search.query"
+              :value="query"
               :placeholder="labels.searchPlaceholder"
             >
           </form>
@@ -177,7 +172,7 @@ export default {
             id="edit-status"
             class="ui dropdown"
             :value="getTokenValue('is_approved', '')"
-            @change="addSearchToken('is_approved', $event.target.value)"
+            @change="addSearchToken('is_approved', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
               <translate translate-context="Content/*/Dropdown">
@@ -247,11 +242,11 @@ export default {
       </div>
       <div v-else-if="result?.count > 0">
         <edit-card
-          v-for="obj in result.results"
+          v-for="obj in result?.results ?? []"
           :key="obj.uuid"
           :obj="obj"
           :current-state="getCurrentState(obj.target)"
-          @deleted="handle('delete', obj.uuid, null)"
+          @deleted="handle('delete', obj.uuid, false)"
           @approved="handle('approved', obj.uuid, $event)"
         />
       </div>
@@ -265,11 +260,10 @@ export default {
     <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">

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

@@ -1,16 +1,109 @@
+<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, 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'],
+  ['followers_count', 'followers'],
+  ['uploads_count', 'uploads']
+]
+
+const { $pgettext } = useGettext()
+const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
+const actions = [
+  {
+    name: 'delete',
+    label: $pgettext('*/*/*/Verb', 'Delete'),
+    confirmationMessage: $pgettext('Popup/*/Paragraph', 'The selected library will be removed, as well as associated uploads and follows. This action is irreversible.'),
+    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/libraries/', {
+      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 labels = computed(() => ({
+  searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, actor, name, description…')
+}))
+</script>
+
 <template>
   <div>
     <div class="ui inline form">
       <div class="fields">
         <div class="ui six wide field">
           <label for="libraries-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="libraries-search"
               ref="search"
               name="search"
               type="text"
-              :value="search.query"
+              :value="query"
               :placeholder="labels.searchPlaceholder"
             >
           </form>
@@ -21,7 +114,7 @@
             id="libraries-visibility"
             class="ui dropdown"
             :value="getTokenValue('privacy_level', '')"
-            @change="addSearchToken('privacy_level', $event.target.value)"
+            @change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)"
           >
             <option value="">
               <translate translate-context="Content/*/Dropdown">
@@ -194,11 +287,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">
@@ -212,119 +304,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'],
-        ['followers_count', 'followers'],
-        ['uploads_count', 'uploads']
-      ]
-    }
-  },
-  computed: {
-    labels () {
-      return {
-        searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by domain, actor, name, description…')
-      }
-    },
-    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 library will be removed, as well as associated uploads and follows. 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/libraries/', { 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/composables/moderation/useEditConfigs.ts

@@ -11,9 +11,13 @@ interface ConfigField {
   getValueRepr?: (obj: any) => string
 }
 
+interface EditableConfigField extends ConfigField {
+  id: EditObjectType
+}
+
 export type EditObject = Artist | Album | Track
 export type EditObjectType = 'artist' | 'album' | 'track'
-type Configs = Record<EditObjectType, { fields: ConfigField[] }>
+type Configs = Record<EditObjectType, { fields: EditableConfigField[] }>
 
 const { $pgettext } = gettext
 const getContentValueRepr = (val: Content) => val.text

front/src/store/ui.ts

@@ -19,7 +19,7 @@ export type WebSocketEventName = 'inbox.item_added' | 'import.status_updated' |
   | 'report.created' | 'user_request.created' | 'Listen'
 
 export type OrderingField = 'creation_date' | 'title' | 'album__title' | 'artist__name' | 'release_date' | 'name'
-  | 'applied_date'
+  | 'applied_date' | 'followers_count' | 'uploads_count'
 
 export type OrderingDirection = '-' | '+'
 interface RoutePreferences {