98 lines
4.3 KiB
Vue
98 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import PlaylistsNotFound from '@/components/internal/playlists/select/PlaylistsNotFound.vue';
|
|
import Frame from '@/components/ui/frame/Frame.vue';
|
|
import Select from '@/components/ui/select/Select.vue';
|
|
import SelectContent from '@/components/ui/select/SelectContent.vue';
|
|
import SelectCustomTrigger from '@/components/ui/select/SelectCustomTrigger.vue';
|
|
import SelectGroup from '@/components/ui/select/SelectGroup.vue';
|
|
import SelectItem from '@/components/ui/select/SelectItem.vue';
|
|
import SelectLabel from '@/components/ui/select/SelectLabel.vue';
|
|
import SelectSeparator from '@/components/ui/select/SelectSeparator.vue';
|
|
import { useSidebar } from '@/components/ui/sidebar';
|
|
import Skeleton from '@/components/ui/skeleton/Skeleton.vue';
|
|
import { usePlaylists } from '@/composeables/api/playlist-controller/playlist-controller';
|
|
import { ChevronsUpDown, Music4, Plus } from 'lucide-vue-next';
|
|
import Button from '../ui/button/Button.vue';
|
|
import PlaylistCreateDialog from './playlists/select/PlaylistCreateDialog.vue';
|
|
|
|
const {
|
|
open: sidebarOpen,
|
|
} = useSidebar()
|
|
|
|
const { isLoading, isError, error, data } = usePlaylists();
|
|
|
|
const selectedPlaylist = ref(-1);
|
|
|
|
watch(data, (value) => {
|
|
const newValue = value?.data[0]?.id || -1;
|
|
if (selectedPlaylist.value === -1) {
|
|
selectedPlaylist.value = newValue;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Select v-model="selectedPlaylist">
|
|
<div v-if="sidebarOpen" class="hover:bg-sidebar-muted cursor-pointer rounded-md select-none">
|
|
<SelectCustomTrigger class="w-full flex p-2 gap-2 items-center">
|
|
<Frame borderRadius="round" background="primary" padding="dense" margin="none">
|
|
<Music4 class="text-primary-foreground" :size="24" />
|
|
</Frame>
|
|
<div class="overflow-hidden text-start">
|
|
<Skeleton v-if="isLoading" class="w-32 h-5 rounded-full" />
|
|
<h4 v-else-if="data" class="text-xl font-semibold tracking-tight truncate">
|
|
<!-- TODO: i18n -->
|
|
{{data.data.find(playlist => playlist.id === selectedPlaylist)?.title ||
|
|
'No playlist selected'}}
|
|
</h4>
|
|
<p class="text-sm text-muted-foreground">
|
|
<!-- TODO: Actual track count -->
|
|
11 track(s)
|
|
</p>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<ChevronsUpDown />
|
|
</div>
|
|
</SelectCustomTrigger>
|
|
</div>
|
|
<div v-if="!sidebarOpen">
|
|
<div class="flex items-center">
|
|
<SelectCustomTrigger as-child>
|
|
<Frame borderRadius="round" background="primary" padding="dense" margin="none">
|
|
<Music4 class="text-primary-foreground" :size="24" />
|
|
</Frame>
|
|
</SelectCustomTrigger>
|
|
</div>
|
|
</div>
|
|
<SelectContent align="start" side="right" :sideOffset="4">
|
|
<div class="w-full">
|
|
<div v-if="isLoading">
|
|
<UiSpinner />
|
|
</div>
|
|
<div v-else-if="isError">
|
|
<SelectLabel>{{ error }}</SelectLabel>
|
|
</div>
|
|
<div v-else-if="data" class="w-full">
|
|
<SelectLabel>Playlists</SelectLabel>
|
|
<SelectSeparator />
|
|
<SelectGroup>
|
|
<SelectItem v-for="item in data.data" :key="item.id" :value="item.id || -1">
|
|
<span>{{ item.title }}</span>
|
|
</SelectItem>
|
|
<PlaylistsNotFound v-if="data.data.length === 0" />
|
|
</SelectGroup>
|
|
<SelectSeparator v-if="data.data.length > 0" />
|
|
<PlaylistCreateDialog v-if="data.data.length > 0">
|
|
<template #trigger>
|
|
<Button variant="outline" size="icon" class="w-full">
|
|
<Plus />
|
|
Create playlist
|
|
</Button>
|
|
</template>
|
|
</PlaylistCreateDialog>
|
|
</div>
|
|
</div>
|
|
</SelectContent>
|
|
</Select>
|
|
</template>
|