mp3-composer/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement basic listing and creating playlist

Browse Source
This commit is contained in:
bivashy
2025-11-14 01:58:46 +05:00
parent 3186fa16e5
commit 15389b9de1
38 changed files with 810 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/components/internal/PlaylistSelect.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ChevronsUpDown, Music4 } from 'lucide-vue-next';
import { ChevronsUpDown, Music4, Plus } from 'lucide-vue-next';
import Frame from '@/components/ui/frame/Frame.vue';
import Select from '@/components/ui/select/Select.vue';
import SelectCustomTrigger from '@/components/ui/select/SelectCustomTrigger.vue';
@ -10,26 +10,43 @@ import SelectSeparator from '@/components/ui/select/SelectSeparator.vue';
import SelectGroup from '@/components/ui/select/SelectGroup.vue';
import SelectItem from '@/components/ui/select/SelectItem.vue';
import { usePlaylists } from '@/composeables/api/playlist-controller/playlist-controller';
import Skeleton from '@/components/ui/skeleton/Skeleton.vue';
import PlaylistsNotFound from '@/components/internal/playlists/select/PlaylistsNotFound.vue';
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>
<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">
<h4 class="text-xl font-semibold tracking-tight truncate">
My playlist
<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>
@ -51,25 +68,26 @@ const { isLoading, isError, error, data } = usePlaylists();
<UiSpinner />
</SelectContent>
<SelectContent class="w-full" v-else-if="isError">
<SelectLabel>{{ error?.message }}</SelectLabel>
<SelectLabel>{{ error }}</SelectLabel>
</SelectContent>
<SelectContent class="w-full" v-else-if="data">
<SelectLabel>Playlists</SelectLabel>
<SelectSeparator />
<SelectGroup>
<SelectItem value="test">
<span>Test</span>
</SelectItem>
<SelectItem value="second">
<span>Second</span>
</SelectItem>
<SelectItem value="third">
<span>Third</span>
</SelectItem>
<SelectItem value="fourth">
<span>Fourth</span>
<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>
</SelectContent>
</Select>
</template>