Implement reordering with optimistic updates
This commit is contained in:
@ -14,6 +14,7 @@ import { usePlaylists } from '@/composeables/api/playlist-controller/playlist-co
|
||||
import { ChevronsUpDown, Music4, Plus } from 'lucide-vue-next';
|
||||
import Button from '../ui/button/Button.vue';
|
||||
import PlaylistCreateDialog from './playlists/select/PlaylistCreateDialog.vue';
|
||||
import { useCurrentPlaylistStore } from '~/stores/use-current-playlist-store';
|
||||
|
||||
const {
|
||||
open: sidebarOpen,
|
||||
@ -21,18 +22,18 @@ const {
|
||||
|
||||
const { isLoading, isError, error, data } = usePlaylists();
|
||||
|
||||
const selectedPlaylist = ref(-1);
|
||||
const currentPlaylistStore = useCurrentPlaylistStore();
|
||||
|
||||
watch(data, (value) => {
|
||||
const newValue = value?.data[0]?.id || -1;
|
||||
if (selectedPlaylist.value === -1) {
|
||||
selectedPlaylist.value = newValue;
|
||||
const newValue = value?.data[0];
|
||||
if (currentPlaylistStore.id === -1 && newValue) {
|
||||
currentPlaylistStore.load(newValue);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Select v-model="selectedPlaylist">
|
||||
<Select v-model="currentPlaylistStore.id">
|
||||
<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">
|
||||
@ -42,7 +43,7 @@ watch(data, (value) => {
|
||||
<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 ||
|
||||
{{data.data.find(playlist => playlist.id === currentPlaylistStore.id)?.title ||
|
||||
'No playlist selected'}}
|
||||
</h4>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
|
||||
@ -12,5 +12,8 @@ export * from './playlistReadDTO';
|
||||
export * from './playlistReadResponse';
|
||||
export * from './playlistTrackResponse';
|
||||
export * from './readParams';
|
||||
export * from './trackBulkReorderRequest';
|
||||
export * from './trackReoderAfterRequest';
|
||||
export * from './trackReorderAfterRequest';
|
||||
export * from './trackResponse';
|
||||
export * from './uploadBody';
|
||||
10
app/composeables/api/models/trackBulkReorderRequest.ts
Normal file
10
app/composeables/api/models/trackBulkReorderRequest.ts
Normal file
@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Generated by orval v7.16.0 🍺
|
||||
* Do not edit manually.
|
||||
* OpenAPI definition
|
||||
* OpenAPI spec version: v0
|
||||
*/
|
||||
|
||||
export interface TrackBulkReorderRequest {
|
||||
trackIds?: number[];
|
||||
}
|
||||
11
app/composeables/api/models/trackReorderAfterRequest.ts
Normal file
11
app/composeables/api/models/trackReorderAfterRequest.ts
Normal file
@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Generated by orval v7.16.0 🍺
|
||||
* Do not edit manually.
|
||||
* OpenAPI definition
|
||||
* OpenAPI spec version: v0
|
||||
*/
|
||||
|
||||
export interface TrackReorderAfterRequest {
|
||||
moveTrackId?: number;
|
||||
targetTrackId?: number;
|
||||
}
|
||||
@ -31,6 +31,7 @@ import type {
|
||||
import type {
|
||||
AddLocalTrackRequest,
|
||||
PlaylistTrackResponse,
|
||||
TrackBulkReorderRequest,
|
||||
TrackResponse
|
||||
} from '.././models';
|
||||
|
||||
@ -103,6 +104,66 @@ const {mutation: mutationOptions, request: requestOptions} = options ?
|
||||
|
||||
return useMutation(mutationOptions, queryClient);
|
||||
}
|
||||
export const bulkReorder = (
|
||||
playlistId: MaybeRef<number>,
|
||||
trackBulkReorderRequest: MaybeRef<TrackBulkReorderRequest>,
|
||||
options?: SecondParameter<typeof axiosInstance>,signal?: AbortSignal
|
||||
) => {
|
||||
playlistId = unref(playlistId);
|
||||
trackBulkReorderRequest = unref(trackBulkReorderRequest);
|
||||
|
||||
return axiosInstance<void>(
|
||||
{url: `/playlist/${playlistId}/bulk-reorder`, method: 'POST',
|
||||
headers: {'Content-Type': 'application/json', },
|
||||
data: trackBulkReorderRequest, signal
|
||||
},
|
||||
options);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export const getBulkReorderMutationOptions = <TError = unknown,
|
||||
TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof bulkReorder>>, TError,{playlistId: number;data: TrackBulkReorderRequest}, TContext>, request?: SecondParameter<typeof axiosInstance>}
|
||||
): UseMutationOptions<Awaited<ReturnType<typeof bulkReorder>>, TError,{playlistId: number;data: TrackBulkReorderRequest}, TContext> => {
|
||||
|
||||
const mutationKey = ['bulkReorder'];
|
||||
const {mutation: mutationOptions, request: requestOptions} = options ?
|
||||
options.mutation && 'mutationKey' in options.mutation && options.mutation.mutationKey ?
|
||||
options
|
||||
: {...options, mutation: {...options.mutation, mutationKey}}
|
||||
: {mutation: { mutationKey, }, request: undefined};
|
||||
|
||||
|
||||
|
||||
|
||||
const mutationFn: MutationFunction<Awaited<ReturnType<typeof bulkReorder>>, {playlistId: number;data: TrackBulkReorderRequest}> = (props) => {
|
||||
const {playlistId,data} = props ?? {};
|
||||
|
||||
return bulkReorder(playlistId,data,requestOptions)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
return { mutationFn, ...mutationOptions }}
|
||||
|
||||
export type BulkReorderMutationResult = NonNullable<Awaited<ReturnType<typeof bulkReorder>>>
|
||||
export type BulkReorderMutationBody = TrackBulkReorderRequest
|
||||
export type BulkReorderMutationError = unknown
|
||||
|
||||
export const useBulkReorder = <TError = unknown,
|
||||
TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof bulkReorder>>, TError,{playlistId: number;data: TrackBulkReorderRequest}, TContext>, request?: SecondParameter<typeof axiosInstance>}
|
||||
, queryClient?: QueryClient): UseMutationReturnType<
|
||||
Awaited<ReturnType<typeof bulkReorder>>,
|
||||
TError,
|
||||
{playlistId: number;data: TrackBulkReorderRequest},
|
||||
TContext
|
||||
> => {
|
||||
|
||||
const mutationOptions = getBulkReorderMutationOptions(options);
|
||||
|
||||
return useMutation(mutationOptions, queryClient);
|
||||
}
|
||||
export const getPlaylistTracks = (
|
||||
playlistId: MaybeRef<number>,
|
||||
options?: SecondParameter<typeof axiosInstance>,signal?: AbortSignal
|
||||
|
||||
@ -7,56 +7,102 @@ import { SidebarTrigger } from '@/components/ui/sidebar'
|
||||
import MusicCard from '~/components/internal/musiccard/MusicCard.vue'
|
||||
import { DnDOperations, useDroppable } from '@vue-dnd-kit/core'
|
||||
import Draggable from '~/components/action/Draggable.vue'
|
||||
import { useCurrentPlaylistStore } from '~/stores/use-current-playlist-store'
|
||||
import { bulkReorder, getGetPlaylistTracksQueryKey } from '~/composeables/api/track-controller/track-controller'
|
||||
import { useGetPlaylistTracks } from '~/composeables/api/track-controller/track-controller'
|
||||
import { useMutation, useQueryClient } from '@tanstack/vue-query'
|
||||
|
||||
const searchValue = ref('')
|
||||
|
||||
// Mock data
|
||||
const tracks = ref([
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const currentPlaylistStore = useCurrentPlaylistStore();
|
||||
|
||||
const { data: playlistTracks, isLoading, error, refetch } = useGetPlaylistTracks(
|
||||
computed(() => currentPlaylistStore.id),
|
||||
{
|
||||
id: 1,
|
||||
title: "Best of Chobits OST - Beyond",
|
||||
author: "ビヨンド",
|
||||
authorLabel: "Author",
|
||||
badges: ["mp3", "jpop", "anime"],
|
||||
imageUrl: "https://github.com/yavuzceliker/sample-images/blob/main/docs/image-1.jpg?raw=true",
|
||||
date: "about 17 years ago",
|
||||
selected: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Summer Vibessssssssssssssssssssssssssssssssssssfawefjioawefjeaiofjeaoifjeaofejiaofejaiojfoaiss",
|
||||
author: "Various Artists",
|
||||
authorLabel: "Artists",
|
||||
badges: ["mp3", "summer", "mix"],
|
||||
imageUrl: "https://github.com/yavuzceliker/sample-images/blob/main/docs/image-2.jpg?raw=true",
|
||||
date: "about 1 hour ago",
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Unknown Track",
|
||||
author: "Unknown Artist",
|
||||
authorLabel: "Author",
|
||||
badges: ["wav"],
|
||||
imageUrl: "https://github.com/yavuzceliker/sample-images/blob/main/docs/image-3.jpg?raw=true",
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Single Track",
|
||||
author: "Solo Artist",
|
||||
authorLabel: "Author",
|
||||
badges: [],
|
||||
imageUrl: "https://github.com/yavuzceliker/sample-images/blob/main/docs/image-5.jpg?raw=true",
|
||||
date: "recently added",
|
||||
selected: false
|
||||
query: {
|
||||
enabled: computed(() => currentPlaylistStore.id !== -1)
|
||||
}
|
||||
}
|
||||
])
|
||||
)
|
||||
|
||||
const { mutate: reorderTracks } = useMutation({
|
||||
mutationFn: ({ playlistId, trackIds }: { playlistId: number; trackIds: number[] }) =>
|
||||
bulkReorder(playlistId, { trackIds }),
|
||||
onMutate: async ({ playlistId, trackIds }) => {
|
||||
await queryClient.cancelQueries({ queryKey: getGetPlaylistTracksQueryKey(playlistId) });
|
||||
|
||||
const previousTracks = queryClient.getQueryData(getGetPlaylistTracksQueryKey(playlistId));
|
||||
|
||||
queryClient.setQueryData(getGetPlaylistTracksQueryKey(playlistId), (old: any) => {
|
||||
if (!old) return old;
|
||||
return {
|
||||
...old,
|
||||
data: trackIds.map(id => old.data.find((t: any) => t.trackId === id || t.id === id)),
|
||||
};
|
||||
});
|
||||
|
||||
return { previousTracks };
|
||||
},
|
||||
onError: (err, { playlistId }, context) => {
|
||||
if (context?.previousTracks) {
|
||||
queryClient.setQueryData(getGetPlaylistTracksQueryKey(playlistId), context.previousTracks);
|
||||
}
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries({ queryKey: getGetPlaylistTracksQueryKey(currentPlaylistStore.id) });
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const trackCount = computed(() => playlistTracks.value?.data.length || 0)
|
||||
|
||||
const mappedTracks = computed(() => {
|
||||
if (!playlistTracks.value) return []
|
||||
const tracks = playlistTracks.value.data
|
||||
|
||||
return tracks.map((track: any, index: number) => ({
|
||||
id: track.trackId || track.id,
|
||||
title: track.track?.title || track.title || 'Unknown Track',
|
||||
author: track.track?.artist?.name || track.artist || 'Unknown Artist',
|
||||
authorLabel: "Artist",
|
||||
badges: track.track?.format ? [track.track.format] : ['mp3'],
|
||||
imageUrl: track.track?.coverUrl || track.coverUrl || getDefaultImage(index),
|
||||
date: formatDate(track.addedDate || track.createdAt),
|
||||
selected: false
|
||||
}))
|
||||
})
|
||||
|
||||
const getDefaultImage = (index: number) => {
|
||||
const defaultImages = [
|
||||
"https://github.com/yavuzceliker/sample-images/blob/main/docs/image-1.jpg?raw=true",
|
||||
"https://github.com/yavuzceliker/sample-images/blob/main/docs/image-2.jpg?raw=true",
|
||||
"https://github.com/yavuzceliker/sample-images/blob/main/docs/image-3.jpg?raw=true",
|
||||
"https://github.com/yavuzceliker/sample-images/blob/main/docs/image-5.jpg?raw=true"
|
||||
]
|
||||
return defaultImages[index % defaultImages.length]
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
if (!dateString) return 'recently added'
|
||||
|
||||
const date = new Date(dateString)
|
||||
const now = new Date()
|
||||
const diffTime = Math.abs(now.getTime() - date.getTime())
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
||||
|
||||
if (diffDays === 1) return 'yesterday'
|
||||
if (diffDays < 7) return `${diffDays} days ago`
|
||||
if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`
|
||||
if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`
|
||||
return `${Math.floor(diffDays / 365)} years ago`
|
||||
}
|
||||
|
||||
const filteredTracks = computed(() => {
|
||||
if (!searchValue.value) return tracks.value
|
||||
if (!searchValue.value) return mappedTracks.value
|
||||
|
||||
return tracks.value.filter(track =>
|
||||
return mappedTracks.value.filter(track =>
|
||||
track.title.toLowerCase().includes(searchValue.value.toLowerCase()) ||
|
||||
track.author.toLowerCase().includes(searchValue.value.toLowerCase()) ||
|
||||
track.badges.some(badge => badge.toLowerCase().includes(searchValue.value.toLowerCase()))
|
||||
@ -64,19 +110,36 @@ const filteredTracks = computed(() => {
|
||||
})
|
||||
|
||||
const selectTrack = (trackId: number) => {
|
||||
tracks.value.forEach(track => {
|
||||
mappedTracks.value.forEach(track => {
|
||||
track.selected = track.id === trackId
|
||||
})
|
||||
}
|
||||
|
||||
const { elementRef: tracksRef } = useDroppable({
|
||||
data: {
|
||||
source: tracks.value,
|
||||
source: mappedTracks.value,
|
||||
},
|
||||
events: {
|
||||
onDrop: DnDOperations.applyTransfer,
|
||||
onDrop: (store, payload) => {
|
||||
DnDOperations.applyTransfer(store);
|
||||
if (currentPlaylistStore.id === -1) return;
|
||||
if (mappedTracks.value.length !== trackCount.value) return;
|
||||
if (mappedTracks.value.some(t => !t)) return;
|
||||
|
||||
const trackIds = mappedTracks.value?.map(t => t.id);
|
||||
reorderTracks({
|
||||
playlistId: currentPlaylistStore.id,
|
||||
trackIds,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
watch(() => currentPlaylistStore.id, (newId) => {
|
||||
if (newId !== -1) {
|
||||
refetch()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -99,15 +162,30 @@ const { elementRef: tracksRef } = useDroppable({
|
||||
<InputWithIcon v-model="searchValue" :icon="Search" placeholder="Search..." type="search" icon-size="5"
|
||||
id="user-search" class="w-full" />
|
||||
|
||||
<div ref="tracksRef" class="space-y-2">
|
||||
<TransitionGroup name="list" ref="tracksRef">
|
||||
<Draggable v-for="(track, index) in filteredTracks" :key="track.id" :index="index"
|
||||
:source="tracks">
|
||||
<MusicCard :key="track.id" :title="track.title" :author="track.author"
|
||||
:authorLabel="track.authorLabel" :badges="track.badges" :imageUrl="track.imageUrl"
|
||||
:date="track.date" :selected="track.selected" @click="selectTrack(track.id)" />
|
||||
</Draggable>
|
||||
</TransitionGroup>
|
||||
<div ref="tracksRef">
|
||||
<div v-if="isLoading" class="flex justify-center items-center py-8">
|
||||
<p>Loading tracks...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="flex justify-center items-center py-8">
|
||||
<p class="text-red-500">Error loading tracks: {{ error }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!filteredTracks.length" class="flex justify-center items-center py-8">
|
||||
<p v-if="searchValue">No tracks found matching "{{ searchValue }}"</p>
|
||||
<p v-else>No tracks in this playlist</p>
|
||||
</div>
|
||||
|
||||
<div v-else ref="tracksRef" class="space-y-2">
|
||||
<TransitionGroup name="list" ref="tracksRef">
|
||||
<Draggable v-for="(track, index) in filteredTracks" :key="track.id" :index="index"
|
||||
:source="mappedTracks">
|
||||
<MusicCard :key="track.id" :title="track.title" :author="track.author"
|
||||
:authorLabel="track.authorLabel" :badges="track.badges" :imageUrl="track.imageUrl"
|
||||
:date="track.date" :selected="track.selected" @click="selectTrack(track.id)" />
|
||||
</Draggable>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #sidebar>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// ~/plugins/vue-dnd-kit.client.ts
|
||||
import VueDnDKitPlugin from '@vue-dnd-kit/core';
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
|
||||
24
app/stores/use-current-playlist-store.ts
Normal file
24
app/stores/use-current-playlist-store.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import type { PlaylistReadResponse } from '~/composeables/api/models'
|
||||
|
||||
export const useCurrentPlaylistStore = defineStore('current-playlist', {
|
||||
state: () => ({
|
||||
id: -1,
|
||||
ownerId: -1,
|
||||
title: '',
|
||||
createdAt: '',
|
||||
updatedAt: '',
|
||||
}),
|
||||
getters: {
|
||||
getId: (state) => state.id * 2,
|
||||
},
|
||||
actions: {
|
||||
load(response: PlaylistReadResponse) {
|
||||
this.id = response.id || -1;
|
||||
this.ownerId = response.ownerId || -1;
|
||||
this.title = response.title || '';
|
||||
this.createdAt = response.createdAt || '';
|
||||
this.updatedAt = response.updatedAt || '';
|
||||
}
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user