Modified routes and made playlist song list working

src/lib/server/models/Playlist.ts

@@ -116,7 +116,7 @@ export async function edit(id: number, name: string, date: Date, songs: string[]
 			name,
 			date: date.toISOString(),
 			songs: {
-				connect: songs
+				set: songs
 			},
 		}
 	})

src/lib/server/models/Song.ts

@@ -71,7 +71,6 @@ export async function findByName(name: string) {
 			name: true,
 			lyrics: true,
 			sheets: true,
-			// team: true,
 		}
 	})
 }

src/routes/(leader)/playlists/[id=integer]/edit/+page.svelte

@@ -14,7 +14,7 @@
 	/** @type {import('./$types').PageData} */
 	export let data;
 	$: playlist = data.playlist;
-	$: songs = new Array(...data.songs).filter(i => !playlist.songs.includes(i.id));
+	let songs = new Array(...data.songs);
 	/** @type {import('./$types').ActionData} */
 	$: form = $page.form;
 
@@ -39,19 +39,20 @@
 	function handleDndFinalizePlaylist(e) {
 		playlist.songs = e.detail.items;
 	}
+
 </script>
 <div transition:slide>
 	<h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white mb-6">Edit {$_('page.playlists.info.title')}</h1>
 
 	{#if !working && form?.success}
 		<div class="mt-4" transition:slide>
-			<Success message={$_('messages.successfully.updated')} />
+			<Success message={$_('messages.successfully.edited')} />
 		</div>
 	{/if}
 
 	{#if !working && form?.success === false}
 		<div class="mt-4" transition:slide>
-			<Error message={$_('messages.not_successfully.updated')} />
+			<Error message={$_('messages.not_successfully.edited')} />
 		</div>
 	{/if}
 
@@ -92,16 +93,16 @@
 		<h1>Adding and removing songs</h1>
 		<h2>To add a song, drag one from the left container to the right</h2>
 		<div class="flex">
-			<ol class="dropbox grey" use:dndzone="{{ items: songs }}" on:consider="{handleDndConsiderSongs}" on:finalize="{handleDndFinalizeSongs}">
-				{#each songs as song(song.id)}
-					<li>{song.name}</li>
+			<ul class="dropbox grey list-inside list-disc" use:dndzone="{{ items: songs.filter(i => playlist?.songs && !playlist.songs.find(ps=>ps.id===i.id)) }}" on:consider="{handleDndConsiderSongs}" on:finalize="{handleDndFinalizeSongs}">
+				{#each songs.filter(i => playlist?.songs && !playlist.songs.find(ps=>ps.id===i.id)) as song(song.id)}
+					<li>#{song.id} - {song.name}</li>
 				{/each}
-			</ol>
-			<ol class="dropbox green" use:dndzone="{{ items: playlist?.songs }}" on:consider="{handleDndConsiderPlaylist}" on:finalize="{handleDndFinalizePlaylist}">
-				{#each playlist?.songs as song(song.id)}
-					<li><a href={"/songs/" + song.id}>{song.name}</a></li>
+			</ul>
+			<ul class="dropbox green list-inside list-disc" use:dndzone="{{ items: playlist?.songs ?? [] }}" on:consider="{handleDndConsiderPlaylist}" on:finalize="{handleDndFinalizePlaylist}">
+				{#each playlist?.songs ?? [] as song(song.id)}
+					<li>#{song.id} - {song.name}</li>
 				{/each}
-			</ol>
+			</ul>
 		</div>
 
 		<input id="songs" name="songs" type="text" hidden bind:value={songsString} />

src/routes/(user)/playlists/+page.svelte

@@ -17,11 +17,16 @@
 </script>
 <div transition:slide>
 	<h1 class="text-3xl font-bold">{$_('page.playlists.list.title')}</h1>
-	<p>{$_('page.playlists.list.description')}</p>
 	{#if authUser.roleId <= Roles.Leader}
 		<button class="text-white bg-green-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-2.5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" on:click={() => goto($page.url.pathname + '/create', { replaceState: false })}>Create Playlist</button>
 	{/if}
-	{#each playlists as playlist}
-		<li><a href={$page.url.pathname + '/' + playlist.id}>{playlist.date.toLocaleDateString()} - {playlist.name}</a></li>
-	{/each}
+	<p>{$_('page.playlists.list.description')}</p>
+	<ul class="list-inside list-disc">
+		{#each playlists as playlist}
+			<li><a href={$page.url.pathname + '/' + playlist.id}>[{playlist.team.name}] {playlist.date.toLocaleDateString()} - {playlist.name}</a></li>
+		{/each}
+		{#if playlists.length === 0}
+			<i>No Playlists</i>
+		{/if}
+	</ul>
 </div>

src/routes/(user)/playlists/[id=integer]/+page.svelte

 <script>
-	import { getContext } from 'svelte';
+	import Roles from '$lib/roles';
+
+	import { goto } from '$app/navigation';
 	import { slide } from 'svelte/transition';
 	import { _ } from 'svelte-i18n';
+	import { getContext } from 'svelte';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
+	$: authUser = data.authUser;
 	$: playlist = data.playlist;
 
 	/** @type {import('svelte/store').Writable<string>} */
@@ -12,11 +16,19 @@
 </script>
 <div transition:slide>
 	<h1 class="text-3xl font-bold">{$_('page.playlists.info.title')}</h1>
-	<hr />
-	<h2 class="text-2xl font-bold">{$_('page.songs.list.title')}</h2>
-	<ol>
+	{#if (authUser.roleId <= Roles.Leader)}
+		<button class="text-white bg-green-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-2.5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" on:click={() => goto(location?.pathname + '/edit', { replaceState: false })}>Edit</button>
+	{/if}
+	<p><strong>Name:</strong> {playlist.name}</p>
+	<p><strong>Date:</strong> {playlist.date}</p>
+	<br><hr /><br>
+	<h2 class="text-2xl font-bold">{$_('page.songs.list.title')}:</h2>
+	<ul class="list-inside list-disc">
 		{#each playlist?.songs as song}
 			<li><a href={"/songs/" + song.id}>{song.name}</a></li>
 		{/each}
-	</ol>
+		{#if playlist?.songs.length === 0}
+			<i>No songs</i>
+		{/if}
+	</ul>
 </div>

src/routes/(user)/songs/+page.server.js

 import * as Song from '$lib/server/models/Song';
-import * as User from '$lib/server/models/User';
+// import * as User from '$lib/server/models/User';
 
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ parent }) {
 	const data = await parent();
+	// const user = await User.findById(data.authUser.id);
+
 	/** @type {any} */
-	let songs = [];
-	const user = await User.findById(data.authUser.id);
-	songs = await Song.getAll();
+	// let songs = [];
+	const songs = await Song.getAll();
+
 	//for (const team of user.teams) {
 	//	const tsongs = await Song.getAllByTeam(team.id);
 	//	songs = [...songs, ...tsongs];

src/routes/(user)/songs/+page.svelte

 <script>
+	import Roles from '$lib/roles';
+
+	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { getContext } from 'svelte';
 	import { slide } from 'svelte/transition';
 	import { _ } from 'svelte-i18n';
+	import { getContext } from 'svelte';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
+	$: authUser = data.authUser;
 	$: songs = data.songs;
 
 	/** @type {import('svelte/store').Writable<string>} */
@@ -14,9 +18,15 @@
 <div transition:slide>
 	<h1 class="text-3xl font-bold">{$_('page.songs.list.title')}</h1>
 	<p>{$_('page.songs.list.description')}</p>
-	<ol>
+	{#if (authUser.roleId <= Roles.Leader)}
+		<button class="text-white bg-green-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-2.5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" on:click={() => goto(location?.pathname + '/create', { replaceState: false })}>Create</button>
+	{/if}
+	<ul class="list-inside list-disc">
 		{#each songs as song}
 			<li><a href={$page.url.pathname + "/" + song.id}>{song.name}</a></li>
 		{/each}
-	</ol>
+		{#if songs.length === 0}
+			<i>No songs</i>
+		{/if}
+	</ul>
 </div>

src/routes/(user)/songs/[id=integer]/+page.svelte

 <script>
+	import Roles from '$lib/roles';
+
 	import { goto } from '$app/navigation';
 	import { slide } from 'svelte/transition';
 	import { _ } from 'svelte-i18n';
@@ -7,6 +9,7 @@
 
 	/** @type {import('./$types').PageData} */
 	export let data;
+	$: authUser = data.authUser;
 	$: song = data.song;
 	$: songObject = song && new Song(song.lyrics, song.id);
 
@@ -15,11 +18,11 @@
 </script>
 <div transition:slide>
 	<h1 class="text-2xl font-bold">{$_('page.songs.info.title')}</h1>
-	{#if data.authUser}
+	{#if (authUser.roleId <= Roles.Leader)}
 		<button class="text-white bg-green-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-2.5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" on:click={() => goto(location?.pathname + '/edit', { replaceState: false })}>Edit</button>
 	{/if}
 	<p><strong>Name:</strong> {song.name}</p>
-	<br>
+	<br><hr /><br>
 	<h3 class="text-xl font-bold">Lyrics:</h3>
 	<div class="song_container">
 		{#each songObject.couplets as couplet, i}