front:update playlist.id to playlist.uuid

front/src/components/playlist/Card.vue

@@ -30,7 +30,7 @@ let navigate = (to: 'playlist' | 'user') => {}
 if (import.meta.env.PROD) {
   const router = useRouter()
   navigate = (to: 'playlist' | 'user') => to === 'playlist'
-    ? router.push({ name: 'library.playlists.detail', params: { id: playlist.id } })
+    ? router.push({ name: 'library.playlists.detail', params: { id: playlist.uuid } })
     : router.push({ name: 'profile.full', params: profileParams.value })
 }
 </script>

front/src/components/playlists/Card.vue

@@ -68,7 +68,7 @@ const updatedAgo = computed(() => moment(props.playlist.modification_date).fromN
 <template>
   <Card
     :title="playlist.name"
-    :to="{ name: 'library.playlists.detail', params: { id: playlist.id } }"
+    :to="{ name: 'library.playlists.detail', params: { id: playlist.uuid } }"
     small
   >
     <template #topright>

front/src/components/playlists/CardList.vue

@@ -14,7 +14,7 @@ defineProps<Props>()
   <!-- TODO: Remove this module -->
   <PlaylistsCard
     v-for="playlist in playlists"
-    :key="playlist.id"
+    :key="playlist.uuid"
     :playlist="playlist"
   />
 </template>

front/src/components/playlists/PlaylistDropdown.vue

@@ -40,7 +40,7 @@ const labels = computed(() => ({
 
 }))
 
-const exportUrl = computed(() => store.getters['instance/absoluteUrl'](`/api/v2/playlists/${props.playlist.id}`))
+const exportUrl = computed(() => store.getters['instance/absoluteUrl'](`/api/v2/playlists/${props.playlist.uuid}`))
 const exportPlaylist = async () => {
   const url = exportUrl.value
   const authToken = store.state.auth.oauth.accessToken
@@ -67,7 +67,7 @@ const router = useRouter()
 
 const deletePlaylist = async () => {
   try {
-    await axios.delete(`playlists/${props.playlist.id}/`)
+    await axios.delete(`playlists/${props.playlist.uuid}/`)
     store.dispatch('playlists/fetchOwn')
     return router.push({ path: '/library' })
   } catch (error) {
@@ -161,7 +161,7 @@ const showDeleteModal = ref(false)
     <div class="scrolling content">
       <div class="description">
         <embed-wizard
-          :id="playlist.id"
+          :id="playlist.uuid"
           type="playlist"
         />
       </div>

front/src/components/playlists/PlaylistModal.vue

@@ -151,7 +151,10 @@ store.dispatch('playlists/fetchOwn')
       >
         <thead>
           <tr>
-            <th><span class="visually-hidden">{{ t('components.playlists.PlaylistModal.table.edit.header.edit') }}</span></th>
+            <th>
+              <span class="visually-hidden">{{ t('components.playlists.PlaylistModal.table.edit.header.edit')
+              }}</span>
+            </th>
             <th>
               {{ t('components.playlists.PlaylistModal.table.edit.header.name') }}
             </th>
@@ -173,7 +176,7 @@ store.dispatch('playlists/fetchOwn')
                 solid
                 secondary
                 square-small
-                :to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"
+                :to="{ name: 'library.playlists.detail', params: { id: playlist.uuid }, query: { mode: 'edit' } }"
                 icon="bi-pencil-fill"
               >
                 <span class="visually-hidden">{{ t('components.playlists.PlaylistModal.button.edit') }}</span>
@@ -181,7 +184,7 @@ store.dispatch('playlists/fetchOwn')
             </td>
             <td>
               <router-link
-                :to="{name: 'library.playlists.detail', params: {id: playlist.id }}"
+                :to="{ name: 'library.playlists.detail', params: { id: playlist.uuid } }"
                 @click="store.state.playlists.showModal = false"
               >
                 {{ playlist.name }}
@@ -196,7 +199,7 @@ store.dispatch('playlists/fetchOwn')
                 primary
                 :title="labels.addToPlaylist"
                 icon="bi-plus"
-                @click.prevent="addToPlaylist(playlist.id, false)"
+                @click.prevent="addToPlaylist(playlist.uuid, false)"
               >
                 {{ t('components.playlists.PlaylistModal.button.addTrack') }}
               </Button>

front/src/components/playlists/Widget.vue

@@ -100,7 +100,7 @@ watch(
     </Alert>
     <PlaylistCard
       v-for="playlist in objects"
-      :key="playlist.id"
+      :key="playlist.uuid"
       :playlist="playlist"
     />
   </Section>

front/src/composables/moderation/useReport.ts

@@ -112,7 +112,7 @@ const getReportableObjects = ({ track, album, artist, artistCredit, playlist, ac
       label: t('composables.moderation.useReport.playlist.label'),
       target: {
         type: 'playlist',
-        id: playlist.id,
+        id: playlist.uuid,
         label: playlist.name,
         _obj: playlist,
         typeLabel: t('composables.moderation.useReport.playlist.typeLabel')

front/src/views/playlists/Detail.vue

@@ -277,7 +277,7 @@ const shuffle = () => {}
     <div class="scrolling content">
       <div class="description">
         <embed-wizard
-          :id="playlist.id"
+          :id="playlist.uuid"
           type="playlist"
         />
       </div>

front/src/views/playlists/List.vue

@@ -254,7 +254,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       />
       <PlaylistsCard
         v-for="playlist in (result && result.results.length > 0 ? result.results : [])"
-        :key="playlist.id"
+        :key="playlist.uuid"
         :playlist="playlist"
       />
       <Spacer grow />