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

Organize imports, set "side" to Select

Browse Source
This commit is contained in:
bivashy
2025-11-16 18:03:09 +05:00
parent 15389b9de1
commit 7b39d48316
4 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,17 @@
<script setup lang="ts">
import { ChevronsUpDown, Music4, Plus } from 'lucide-vue-next';
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 SelectCustomTrigger from '@/components/ui/select/SelectCustomTrigger.vue';
import { useSidebar } from '@/components/ui/sidebar';
import SelectContent from '@/components/ui/select/SelectContent.vue';
import SelectLabel from '@/components/ui/select/SelectLabel.vue';
import SelectSeparator from '@/components/ui/select/SelectSeparator.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 { usePlaylists } from '@/composeables/api/playlist-controller/playlist-controller';
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 PlaylistsNotFound from '@/components/internal/playlists/select/PlaylistsNotFound.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';
@ -64,30 +64,34 @@ watch(data, (value) => {
</SelectCustomTrigger>
</div>
</div>
<SelectContent class="w-full" v-if="isLoading">
<UiSpinner />
</SelectContent>
<SelectContent class="w-full" v-else-if="isError">
<SelectLabel>{{ error }}</SelectLabel>
</SelectContent>
<SelectContent class="w-full" v-else-if="data">
<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>
<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>

18
app/components/internal/playlists/select/PlaylistCreateDialog.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { toTypedSchema } from "@vee-validate/zod"
import { useForm } from "vee-validate"
import * as z from "zod"
import { toTypedSchema } from "@vee-validate/zod";
import { useForm } from "vee-validate";
import * as z from "zod";
import {
Dialog,
@ -11,13 +11,13 @@ import {
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import Button from '~/components/ui/button/Button.vue';
import Input from '~/components/ui/input/Input.vue';
import { toast } from "vue-sonner"
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form"
import { getPlaylistsQueryKey, useCreatePlaylist } from "~/composeables/api/playlist-controller/playlist-controller"
} from '@/components/ui/dialog';
import { useQueryClient } from "@tanstack/vue-query";
import { toast } from "vue-sonner";
import Button from '~/components/ui/button/Button.vue';
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import Input from '~/components/ui/input/Input.vue';
import { getPlaylistsQueryKey, useCreatePlaylist } from "~/composeables/api/playlist-controller/playlist-controller";
const formSchema = toTypedSchema(z.object({
playlistName: z.string().min(2).max(50).default(''),

2
app/components/internal/playlists/select/PlaylistsNotFound.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts">
import { FileMusicIcon } from 'lucide-vue-next';
import Button from '@/components/ui/button/Button.vue';
import Empty from '@/components/ui/empty/Empty.vue';
import EmptyContent from '@/components/ui/empty/EmptyContent.vue';
@ -7,6 +6,7 @@ import EmptyDescription from '@/components/ui/empty/EmptyDescription.vue';
import EmptyHeader from '@/components/ui/empty/EmptyHeader.vue';
import EmptyMedia from '@/components/ui/empty/EmptyMedia.vue';
import EmptyTitle from '@/components/ui/empty/EmptyTitle.vue';
import { FileMusicIcon } from 'lucide-vue-next';
import PlaylistCreateDialog from './PlaylistCreateDialog.vue';
</script>