fix: orphan collaborative playlists

This commit is contained in:
Phan An 2024-03-12 13:14:43 +07:00
parent 4d230f3baa
commit e054e6ea8f
2 changed files with 16 additions and 10 deletions

View file

@ -3,8 +3,8 @@
<h1> <h1>
<span class="heading">Playlists</span> <span class="heading">Playlists</span>
<button <button
type="button"
ref="createBtnEl" ref="createBtnEl"
type="button"
title="Create a new playlist or folder" title="Create a new playlist or folder"
@click.stop.prevent="requestContextMenu" @click.stop.prevent="requestContextMenu"
> >
@ -35,7 +35,13 @@ const folders = toRef(playlistFolderStore.state, 'folders')
const playlists = toRef(playlistStore.state, 'playlists') const playlists = toRef(playlistStore.state, 'playlists')
const favorites = toRef(favoriteStore.state, 'songs') const favorites = toRef(favoriteStore.state, 'songs')
const orphanPlaylists = computed(() => playlists.value.filter(({ folder_id }) => folder_id === null)) const orphanPlaylists = computed(() => playlists.value.filter(({ folder_id }) => {
if (folder_id === null) return true
// if the playlist's folder is not found, it's an orphan
// this can happen if the playlist belongs to another user (collaborative playlist)
return !folders.value.find(folder => folder.id === folder_id)
}))
const requestContextMenu = () => { const requestContextMenu = () => {
const clientRect = createBtnEl.value!.getBoundingClientRect() const clientRect = createBtnEl.value!.getBoundingClientRect()

View file

@ -1,39 +1,39 @@
<template> <template>
<nav id="sidebar" v-koel-clickaway="closeIfMobile" :class="{ showing: mobileShowing }" class="side side-nav"> <nav id="sidebar" v-koel-clickaway="closeIfMobile" :class="{ showing: mobileShowing }" class="side side-nav">
<section class="search-wrapper"> <section class="search-wrapper">
<SearchForm/> <SearchForm />
</section> </section>
<section class="menu-wrapper" v-koel-overflow-fade> <section v-koel-overflow-fade class="menu-wrapper">
<section class="music"> <section class="music">
<h1>Your Music</h1> <h1>Your Music</h1>
<ul class="menu"> <ul class="menu">
<SidebarItem screen="Home" href="#/home" :icon="faHome">Home</SidebarItem> <SidebarItem screen="Home" href="#/home" :icon="faHome">Home</SidebarItem>
<QueueSidebarItem/> <QueueSidebarItem />
<SidebarItem screen="Songs" href="#/songs" :icon="faMusic">All Songs</SidebarItem> <SidebarItem screen="Songs" href="#/songs" :icon="faMusic">All Songs</SidebarItem>
<SidebarItem screen="Albums" href="#/albums" :icon="faCompactDisc">Albums</SidebarItem> <SidebarItem screen="Albums" href="#/albums" :icon="faCompactDisc">Albums</SidebarItem>
<SidebarItem screen="Artists" href="#/artists" :icon="faMicrophone">Artists</SidebarItem> <SidebarItem screen="Artists" href="#/artists" :icon="faMicrophone">Artists</SidebarItem>
<SidebarItem screen="Genres" href="#/genres" :icon="faTags">Genres</SidebarItem> <SidebarItem screen="Genres" href="#/genres" :icon="faTags">Genres</SidebarItem>
<YouTubeSidebarItem v-show="showYouTube"/> <YouTubeSidebarItem v-show="showYouTube" />
</ul> </ul>
</section> </section>
<PlaylistList/> <PlaylistList />
<section v-if="showManageSection" class="manage"> <section v-if="showManageSection" class="manage">
<h1>Manage</h1> <h1>Manage</h1>
<ul class="menu"> <ul class="menu">
<SidebarItem screen="Settings" href="#/settings" :icon="faTools" v-if="isAdmin">Settings</SidebarItem> <SidebarItem v-if="isAdmin" screen="Settings" href="#/settings" :icon="faTools">Settings</SidebarItem>
<SidebarItem screen="Upload" href="#/upload" :icon="faUpload">Upload</SidebarItem> <SidebarItem screen="Upload" href="#/upload" :icon="faUpload">Upload</SidebarItem>
<SidebarItem screen="Users" href="#/users" :icon="faUsers" v-if="isAdmin">Users</SidebarItem> <SidebarItem v-if="isAdmin" screen="Users" href="#/users" :icon="faUsers">Users</SidebarItem>
</ul> </ul>
</section> </section>
</section> </section>
<section v-if="!isPlus && isAdmin" class="plus-wrapper"> <section v-if="!isPlus && isAdmin" class="plus-wrapper">
<BtnUpgradeToPlus/> <BtnUpgradeToPlus />
</section> </section>
</nav> </nav>
</template> </template>