Fix radio button

front/src/components/radios/Button.vue

@@ -10,14 +10,15 @@ interface Props {
   type?: string
   clientOnly?: boolean
   objectId?: ObjectId | null
-  radioConfig: RadioConfig
+  radioConfig?: RadioConfig | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
   customRadioId: null,
   type: '',
   clientOnly: false,
-  objectId: null
+  objectId: null,
+  radioConfig: null
 })
 
 const store = useStore()
@@ -33,7 +34,7 @@ const running = computed(() => {
 
 const { $pgettext } = useGettext()
 const buttonLabel = computed(() => {
-  switch (props.radioConfig.type) {
+  switch (props.radioConfig?.type) {
     case 'tag':
       return running.value
         ? $pgettext('*/Player/Button.Label/Short, Verb', 'Stop tags radio')

front/src/router/routes/library.ts

@@ -26,7 +26,8 @@ export default [
           defaultTags: Array.isArray(route.query.tag || [])
             ? route.query.tag
             : [route.query.tag],
-          defaultPage: route.query.page ? +route.query.page : undefined
+          defaultPage: route.query.page ? +route.query.page : undefined,
+          orderingConfigName: null
         })
       },
       {
@@ -40,7 +41,8 @@ export default [
           defaultTags: Array.isArray(route.query.tag || [])
             ? route.query.tag
             : [route.query.tag],
-          defaultPage: route.query.page ? +route.query.page : undefined
+          defaultPage: route.query.page ? +route.query.page : undefined,
+          orderingConfigName: null
         })
       },
       {
@@ -53,7 +55,8 @@ export default [
           defaultTags: Array.isArray(route.query.tag || [])
             ? route.query.tag
             : [route.query.tag],
-          defaultPage: route.query.page ? +route.query.page : undefined
+          defaultPage: route.query.page ? +route.query.page : undefined,
+          orderingConfigName: null
         })
       },
       {
@@ -66,7 +69,8 @@ export default [
           defaultTags: Array.isArray(route.query.tag || [])
             ? route.query.tag
             : [route.query.tag],
-          defaultPage: route.query.page ? +route.query.page : undefined
+          defaultPage: route.query.page ? +route.query.page : undefined,
+          orderingConfigName: null
         })
       },
       {
@@ -80,7 +84,8 @@ export default [
           defaultTags: Array.isArray(route.query.tag || [])
             ? route.query.tag
             : [route.query.tag],
-          defaultPage: route.query.page ? +route.query.page : undefined
+          defaultPage: route.query.page ? +route.query.page : undefined,
+          orderingConfigName: null
         })
       },
       {
@@ -90,7 +95,8 @@ export default [
         props: route => ({
           defaultOrdering: route.query.ordering,
           defaultQuery: route.query.query,
-          defaultPage: route.query.page ? +route.query.page : undefined
+          defaultPage: route.query.page ? +route.query.page : undefined,
+          orderingConfigName: null
         })
       },
       {
@@ -101,7 +107,8 @@ export default [
           scope: 'me',
           defaultOrdering: route.query.ordering,
           defaultQuery: route.query.query,
-          defaultPage: route.query.page ? +route.query.page : undefined
+          defaultPage: route.query.page ? +route.query.page : undefined,
+          orderingConfigName: null
         })
       },
       {
@@ -129,7 +136,8 @@ export default [
         props: route => ({
           defaultOrdering: route.query.ordering,
           defaultQuery: route.query.query,
-          defaultPage: route.query.page ? +route.query.page : undefined
+          defaultPage: route.query.page ? +route.query.page : undefined,
+          orderingConfigName: null
         })
       },
       {
@@ -140,7 +148,8 @@ export default [
           scope: 'me',
           defaultOrdering: route.query.ordering,
           defaultQuery: route.query.query,
-          defaultPage: route.query.page ? +route.query.page : undefined
+          defaultPage: route.query.page ? +route.query.page : undefined,
+          orderingConfigName: null
         })
       },
       {

front/src/types.ts

@@ -143,6 +143,9 @@ export interface LibraryScan {
 export interface LibraryFollow {
   uuid: string
   approved: boolean
+
+  // TODO (wvffle): Check if it's not added only on frontend side
+  isLoading?: boolean
 }
 
 export interface Cover {

front/src/views/Search.vue

@@ -8,6 +8,7 @@ import TrackTable from '~/components/audio/track/Table.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 import PlaylistCardList from '~/components/playlists/CardList.vue'
 import RadioCard from '~/components/radios/Card.vue'
+import RadioButton from '~/components/radios/Button.vue'
 import TagsList from '~/components/tags/List.vue'
 import { ref, reactive, computed, watch } from 'vue'
 import { useRouter, onBeforeRouteUpdate } from 'vue-router'

front/src/views/library/Edit.vue

@@ -1,3 +1,51 @@
+<script setup lang="ts">
+import type { Library, LibraryFollow } from '~/types'
+
+import LibraryFilesTable from '~/views/content/libraries/FilesTable.vue'
+import LibraryForm from '~/views/content/libraries/Form.vue'
+import { ref } from 'vue'
+import axios from 'axios'
+
+interface Props {
+  object: Library
+}
+
+const props = defineProps<Props>()
+
+type ResponseType = { count: number, results: any[] }
+const follows = ref<ResponseType | null>(null)
+
+const isLoading = ref(false)
+const fetchData = async () => {
+  isLoading.value = true
+
+  try {
+    const response = await axios.get(`libraries/${props.object.uuid}/follows/`)
+    follows.value = response.data
+  } catch (error) {
+    // TODO (wvffle): Handle error
+  }
+
+  isLoading.value = false
+}
+
+fetchData()
+
+// TODO (wvffle): Find correct type
+const updateApproved = async (follow: LibraryFollow, approved: boolean) => {
+  follow.isLoading = true
+
+  try {
+    await axios.post(`federation/follows/library/${follow.uuid}/${approved ? 'accept' : 'reject'}/`)
+    follow.approved = approved
+  } catch (error) {
+    // TODO (wvffle): Handle error
+  }
+
+  follow.isLoading = false
+}
+</script>
+
 <template>
   <section>
     <library-form
@@ -11,7 +59,7 @@
         Library contents
       </translate>
     </h2>
-    <library-files-table :filters="{library: object.uuid}" />
+    <library-files-table :filters="{library: object.uuid}" :ordering-config-name="null" />
 
     <div class="ui hidden divider" />
     <h2 class="ui header">
@@ -20,8 +68,8 @@
       </translate>
     </h2>
     <div
-      v-if="isLoadingFollows"
+      v-if="isLoading"
-      :class="['ui', {'active': isLoadingFollows}, 'inverted', 'dimmer']"
+      :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
     >
       <div class="ui text loader">
         <translate translate-context="Content/Library/Paragraph">
@@ -30,7 +78,7 @@
       </div>
     </div>
     <table
-      v-else-if="follows && follows.count > 0"
+      v-else-if="follows?.count > 0"
       class="ui table"
     >
       <thead>
@@ -58,7 +106,7 @@
         </tr>
       </thead>
       <tr
-        v-for="follow in follows.results"
+        v-for="follow in follows?.results ?? []"
         :key="follow.fid"
       >
         <td><actor-link :actor="follow.actor" /></td>
@@ -112,50 +160,3 @@
     </p>
   </section>
 </template>
-
-<script>
-import LibraryFilesTable from '~/views/content/libraries/FilesTable.vue'
-import LibraryForm from '~/views/content/libraries/Form.vue'
-import axios from 'axios'
-
-export default {
-  components: {
-    LibraryForm,
-    LibraryFilesTable
-  },
-  props: { object: { type: String, required: true } },
-  data () {
-    return {
-      isLoadingFollows: false,
-      follows: null
-    }
-  },
-  created () {
-    this.fetchFollows()
-  },
-  methods: {
-    fetchFollows () {
-      const self = this
-      self.isLoadingLibrary = true
-      axios.get(`libraries/${this.object.uuid}/follows/`).then(response => {
-        self.follows = response.data
-        self.isLoadingFollows = false
-      })
-    },
-    updateApproved (follow, value) {
-      let action
-      if (value) {
-        action = 'accept'
-      } else {
-        action = 'reject'
-      }
-      axios
-        .post(`federation/follows/library/${follow.uuid}/${action}/`)
-        .then(response => {
-          follow.isLoading = false
-          follow.approved = value
-        })
-    }
-  }
-}
-</script>