Workaround vuejs/core/pull/4512

front/src/components/favorites/List.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import $ from 'jquery'
 import RadioButton from '~/components/radios/Button.vue'
@@ -17,6 +18,9 @@ import { OrderingField } from '~/store/ui'
 
 interface Props extends OrderingProps {
   defaultPage?: number
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
 }
 
 const props = withDefaults(defineProps<Props>(), {

front/src/components/library/Albums.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
@@ -20,6 +21,9 @@ interface Props extends OrderingProps {
   defaultQuery?: string
   defaultTags?: string[]
   scope?: string
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
 }
 
 const props = withDefaults(defineProps<Props>(), {

front/src/components/library/Artists.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
@@ -20,6 +21,9 @@ interface Props extends OrderingProps {
   defaultQuery?: string
   defaultTags?: string[]
   scope?: string
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
 }
 
 const props = withDefaults(defineProps<Props>(), {

front/src/components/library/Podcasts.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
@@ -23,6 +24,9 @@ interface Props extends OrderingProps {
   defaultQuery?: string
   defaultTags?: string[]
   scope?: string
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
 }
 
 const props = withDefaults(defineProps<Props>(), {

front/src/components/library/Radios.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import $ from 'jquery'
 
@@ -18,6 +19,9 @@ interface Props extends OrderingProps {
 
   defaultQuery?: string
   scope?: string
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
 }
 
 const props = withDefaults(defineProps<Props>(), {

front/src/components/manage/ChannelsTable.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -12,6 +13,11 @@ import useOrdering, { OrderingProps } from '~/composables/useOrdering'
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -13,6 +14,11 @@ interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): Remove from EVERY SINGLE component that does not use it at all
   // TODO (wvffle): find object type
   filters?: object
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -21,6 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
   filters: () => ({})
 })
 
+const search = ref()
+
 // TODO (wvffle): Make sure everything is it's own type
 const page = ref(1)
 type ResponseType = { count: number, results: any[] }
@@ -91,7 +99,7 @@ const labels = computed(() => ({
       <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="query = $refs.search.value">
+          <form @submit.prevent="query = search.value">
             <input
               id="albums-search"
               ref="search"

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -12,6 +13,11 @@ import { OrderingField } from '~/store/ui'
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +26,8 @@ const props = withDefaults(defineProps<Props>(), {
   filters: () => ({})
 })
 
+const search = ref()
+
 // TODO (wvffle): Make sure everything is it's own type
 const page = ref(1)
 type ResponseType = { count: number, results: any[] }
@@ -94,7 +102,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
       <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="query = $refs.search.value">
+          <form @submit.prevent="query = search.value">
             <input
               id="artists-search"
               ref="search"

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import { uniq } from 'lodash-es'
 import Pagination from '~/components/vui/Pagination.vue'
@@ -14,6 +15,11 @@ import { useGettext } from 'vue3-gettext'
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -23,6 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const configs = useEditConfigs()
+const search = ref()
 
 // TODO (wvffle): Make sure everything is it's own type
 const page = ref(1)
@@ -148,7 +155,7 @@ const getCurrentState = (target?: StateTarget): object => {
       <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="query = $refs.search.value">
+          <form @submit.prevent="query = search.value">
             <input
               id="search-edits"
               ref="search"
@@ -233,7 +240,7 @@ const getCurrentState = (target?: StateTarget): object => {
       >
         <div class="ui loader" />
       </div>
-      <div v-else-if="result?.count > 0">
+      <div v-else-if="(result?.count ?? 0) > 0">
         <edit-card
           v-for="obj in result?.results ?? []"
           :key="obj.uuid"

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { PrivacyLevel } from '~/types'
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -12,6 +14,11 @@ import { useGettext } from 'vue3-gettext'
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
   filters: () => ({})
 })
 
+const search = ref()
+
 // TODO (wvffle): Make sure everything is it's own type
 const page = ref(1)
 type ResponseType = { count: number, results: any[] }
@@ -81,6 +90,10 @@ const sharedLabels = useSharedLabels()
 const labels = computed(() => ({
   searchPlaceholder: $pgettext('Content/Search/Input.Placeholder', 'Search by domain, actor, name, description…')
 }))
+
+const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
+  return sharedLabels.fields.privacy_level.shortChoices[privacyLevel]
+}
 </script>
 
 <template>
@@ -89,7 +102,7 @@ const labels = computed(() => ({
       <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="query = $refs.search.value">
+          <form @submit.prevent="query = search.value">
             <input
               id="libraries-search"
               ref="search"
@@ -213,9 +226,7 @@ const labels = computed(() => ({
             </translate>
           </th>
         </template>
-        <template
+        <template #row-cells="scope">
-          #row-cells="scope"
-        >
           <td>
             <router-link :to="{name: 'manage.library.libraries.detail', params: {id: scope.obj.uuid }}">
               {{ scope.obj.name }}
@@ -258,10 +269,10 @@ const labels = computed(() => ({
             <a
               href=""
               class="discrete link"
-              :title="sharedLabels.fields.privacy_level.shortChoices[scope.obj.privacy_level]"
+              :title="getPrivacyLevelChoice(scope.obj.privacy_level)"
               @click.prevent="addSearchToken('privacy_level', scope.obj.privacy_level)"
             >
-              {{ sharedLabels.fields.privacy_level.shortChoices[scope.obj.privacy_level] }}
+              {{ getPrivacyLevelChoice(scope.obj.privacy_level) }}
             </a>
           </td>
           <td>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -14,6 +15,11 @@ import { useGettext } from 'vue3-gettext'
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +28,8 @@ const props = withDefaults(defineProps<Props>(), {
   filters: () => ({})
 })
 
+const search = ref()
+
 // TODO (wvffle): Make sure everything is it's own type
 const page = ref(1)
 type ResponseType = { count: number, results: any[] }
@@ -96,7 +104,7 @@ const showUploadDetailModal = ref(false)
       <div class="fields">
         <div class="ui six wide field">
           <label for="tags-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
-          <form @submit.prevent="query = $refs.search.value">
+          <form @submit.prevent="query = search.value">
             <input
               id="tags-search"
               ref="search"

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -12,6 +13,11 @@ import { OrderingField } from '~/store/ui'
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +26,8 @@ const props = withDefaults(defineProps<Props>(), {
   filters: () => ({})
 })
 
+const search = ref()
+
 // TODO (wvffle): Make sure everything is it's own type
 const page = ref(1)
 type ResponseType = { count: number, results: any[] }
@@ -87,7 +95,7 @@ const labels = computed(() => ({
       <div class="fields">
         <div class="ui six wide field">
           <label for="tracks-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
-          <form @submit.prevent="query = $refs.search.value">
+          <form @submit.prevent="query = search.value">
             <input
               id="tracks-search"
               ref="search"

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ImportStatus, PrivacyLevel } from '~/types'
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -15,6 +17,11 @@ import { Upload } from '~/types'
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -23,6 +30,8 @@ const props = withDefaults(defineProps<Props>(), {
   filters: () => ({})
 })
 
+const search = ref()
+
 // TODO (wvffle): Make sure everything is it's own type
 const page = ref(1)
 type ResponseType = { count: number, results: any[] }
@@ -94,6 +103,14 @@ const displayName = (upload: Upload): string => {
 
 const detailedUpload = ref({})
 const showUploadDetailModal = ref(false)
+
+const getImportStatusChoice = (importStatus: ImportStatus) => {
+  return sharedLabels.fields.import_status.choices[importStatus]
+}
+
+const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
+  return sharedLabels.fields.privacy_level.shortChoices[privacyLevel]
+}
 </script>
 
 <template>
@@ -102,7 +119,7 @@ const showUploadDetailModal = ref(false)
       <div class="fields">
         <div class="ui six wide field">
           <label for="uploads-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
-          <form @submit.prevent="query = $refs.search.value">
+          <form @submit.prevent="query = search.value">
             <input
               id="uploads-search"
               ref="search"
@@ -332,20 +349,20 @@ const showUploadDetailModal = ref(false)
             <a
               href=""
               class="discrete link"
-              :title="sharedLabels.fields.privacy_level.shortChoices[scope.obj.library.privacy_level]"
+              :title="getPrivacyLevelChoice(scope.obj.library.privacy_level)"
               @click.prevent="addSearchToken('privacy_level', scope.obj.library.privacy_level)"
             >
-              {{ sharedLabels.fields.privacy_level.shortChoices[scope.obj.library.privacy_level] }}
+              {{ getPrivacyLevelChoice(scope.obj.library.privacy_level) }}
             </a>
           </td>
           <td>
             <a
               href=""
               class="discrete link"
-              :title="sharedLabels.fields.import_status.choices[scope.obj.import_status].help"
+              :title="getImportStatusChoice(scope.obj.import_status).help"
               @click.prevent="addSearchToken('status', scope.obj.import_status)"
             >
-              {{ sharedLabels.fields.import_status.choices[scope.obj.import_status].label }}
+              {{ getImportStatusChoice(scope.obj.import_status).label }}
             </a>
             <button
               class="ui tiny basic icon button"

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -12,6 +13,11 @@ import { OrderingField } from '~/store/ui'
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +26,8 @@ const props = withDefaults(defineProps<Props>(), {
   filters: () => ({})
 })
 
+const search = ref()
+
 // TODO (wvffle): Make sure everything is it's own type
 const page = ref(1)
 type ResponseType = { count: number, results: any[] }
@@ -88,7 +96,7 @@ const labels = computed(() => ({
       <div class="fields">
         <div class="ui six wide field">
           <label for="accounts-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
-          <form @submit.prevent="query = $refs.search.value">
+          <form @submit.prevent="query = search.value">
             <input
               id="accounts-search"
               ref="search"

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -13,6 +14,9 @@ interface Props extends OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
   allowListEnabled?: boolean
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
 }
 
 const props = withDefaults(defineProps<Props>(), {

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import moment from 'moment'
 import Pagination from '~/components/vui/Pagination.vue'
@@ -13,6 +14,9 @@ import { OrderingField } from '~/store/ui'
 interface Props extends OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
 }
 
 const props = withDefaults(defineProps<Props>(), {

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -12,6 +13,9 @@ import { useGettext } from 'vue3-gettext'
 interface Props extends OrderingProps {
   // TODO (wvffle): find object type
   filters?: object
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
 }
 
 const props = withDefaults(defineProps<Props>(), {

front/src/composables/locale/useSharedLabels.ts

@@ -1,4 +1,5 @@
 import { gettext } from '~/init/locale'
+import { PrivacyLevel, ImportStatus } from '~/types'
 
 const { $pgettext } = gettext
 
@@ -11,12 +12,12 @@ export default () => ({
         me: $pgettext('Content/Settings/Dropdown', 'Nobody except me'),
         instance: $pgettext('Content/Settings/Dropdown', 'Everyone on this instance'),
         everyone: $pgettext('Content/Settings/Dropdown', 'Everyone, across all instances')
-      },
+      } as Record<PrivacyLevel, string>,
       shortChoices: {
         me: $pgettext('Content/Settings/Dropdown/Short', 'Private'),
         instance: $pgettext('Content/Settings/Dropdown/Short', 'Instance'),
         everyone: $pgettext('Content/Settings/Dropdown/Short', 'Everyone')
-      }
+      } as Record<PrivacyLevel, string>
     },
     import_status: {
       detailTitle: $pgettext('Content/Library/Link.Title', 'Click to display more information about the import process for this upload'),
@@ -41,7 +42,7 @@ export default () => ({
           label: $pgettext('Content/Library/*', 'Finished'),
           help: $pgettext('Content/Library/Help text', 'Imported')
         }
-      }
+      } as Record<ImportStatus, { label: string, help: string }>
     },
     report_type: {
       label: $pgettext('*/*/*', 'Category'),

front/src/types.ts

@@ -108,6 +108,8 @@ export interface Channel {
   downloads_count: number
 }
 
+export type PrivacyLevel = 'everyone' | 'instance' | 'me'
+
 export interface Library {
   id: string
   uuid: string
@@ -117,16 +119,17 @@ export interface Library {
   uploads_count: number
   size: number
   description: string
-  privacy_level: 'everyone' | 'instance' | 'me'
+  privacy_level: PrivacyLevel
   creation_date: string
   follow?: LibraryFollow
   latest_scan: LibraryScan
 }
 
+export type ImportStatus = 'scanning' | 'pending' | 'finished' | 'errored' | 'draft' | 'skipped'
 export interface LibraryScan {
   processed_files: number
   total_files: number
-  status: 'scanning' | 'pending' | 'finished' | 'errored'
+  status: ImportStatus
   errored_files: number
   modification_date: string
 }

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ReportCard from '~/components/manage/moderation/ReportCard.vue'
@@ -14,6 +15,11 @@ import { OrderingField } from '~/store/ui'
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find more types
   mode?: 'card'
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +28,8 @@ const props = withDefaults(defineProps<Props>(), {
   mode: 'card'
 })
 
+const search = ref()
+
 // TODO (wvffle): Make sure everything is it's own type
 const page = ref(1)
 type ResponseType = { count: number, results: any[] }
@@ -93,7 +101,7 @@ const labels = computed(() => ({
         <div class="fields">
           <div class="ui field">
             <label for="reports-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
-            <form @submit.prevent="query = $refs.search.value">
+            <form @submit.prevent="query = search.value">
               <input
                 id="reports-search"
                 ref="search"

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import UserRequestCard from '~/components/manage/moderation/UserRequestCard.vue'
@@ -10,13 +11,20 @@ import { OrderingField } from '~/store/ui'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
 
-interface Props extends SmartSearchProps, OrderingProps {}
+interface Props extends SmartSearchProps, OrderingProps {
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
+}
 
 const props = withDefaults(defineProps<Props>(), {
   defaultQuery: '',
   updateUrl: false
 })
 
+const search = ref()
+
 // TODO (wvffle): Make sure everything is it's own type
 const page = ref(1)
 type ResponseType = { count: number, results: any[] }
@@ -88,7 +96,7 @@ const labels = computed(() => ({
         <div class="fields">
           <div class="ui field">
             <label for="requests-search"><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
-            <form @submit.prevent="query = $refs.search.value">
+            <form @submit.prevent="query = search.value">
               <input
                 id="requests-search"
                 ref="search"

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ImportStatus } from '~/types'
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import time from '~/utils/time'
 import Pagination from '~/components/vui/Pagination.vue'
@@ -18,8 +20,15 @@ interface Props extends SmartSearchProps, OrderingProps {
   needsRefresh?: boolean
   // TODO (wvffle): find object type
   customObjects?: any[]
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
+  defaultQuery?: string
+  updateUrl?: boolean
 }
 
+const search = ref()
+
 const props = withDefaults(defineProps<Props>(), {
   defaultQuery: '',
   updateUrl: false,
@@ -110,6 +119,10 @@ const labels = computed(() => ({
 
 const detailedUpload = ref({})
 const showUploadDetailModal = ref(false)
+
+const getImportStatusChoice = (importStatus: ImportStatus) => {
+  return sharedLabels.fields.import_status.choices[importStatus]
+}
 </script>
 
 <template>
@@ -120,7 +133,7 @@ const showUploadDetailModal = ref(false)
           <label for="files-search">
             <translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
           </label>
-          <form @submit.prevent="query = $refs.search.value">
+          <form @submit.prevent="query = search.value">
             <input
               id="files-search"
               ref="search"
@@ -327,9 +340,9 @@ const showUploadDetailModal = ref(false)
             <a
               href=""
               class="discrete link"
-              :title="sharedLabels.fields.import_status.choices[scope.obj.import_status].help"
+              :title="getImportStatusChoice(scope.obj.import_status).help"
               @click.prevent="addSearchToken('status', scope.obj.import_status)"
-            >{{ sharedLabels.fields.import_status.choices[scope.obj.import_status].label }}</a>
+            >{{ getImportStatusChoice(scope.obj.import_status).label }}</a>
             <button
               class="ui tiny basic icon button"
               :title="sharedLabels.fields.import_status.detailTitle"

front/src/views/playlists/List.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouteWithPreferences } from '~/store/ui'
 import axios from 'axios'
 import $ from 'jquery'
 import { computed, ref, watch, onMounted } from 'vue'
@@ -16,6 +17,9 @@ interface Props extends OrderingProps {
   defaultPage?: number
   defaultQuery?: string
   scope?: string
+
+  // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  orderingConfigName: RouteWithPreferences | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -198,7 +202,7 @@ const labels = computed(() => ({
         :playlists="result.results"
       />
       <div
-        v-else-if="result && !result.results.length > 0"
+        v-else-if="result && result.results.length === 0"
         class="ui placeholder segment sixteen wide column"
         style="text-align: center; display: flex; align-items: center"
       >