Made moving/transferring playlists possible

src/lib/components/inputs/SelectField.svelte

@@ -31,7 +31,6 @@
 		placeholder={placeholder}
 		required={required}
 		disabled={disabled}
-		bind:value={value}
 	>
 		{#each options as option}
 			<option value={option.value} selected={value === option.value} disabled={option?.disabled}>{option.label}</option>

src/lib/server/models/Playlist.ts

@@ -116,17 +116,19 @@ export async function create(teamId: number, name: string, date: Date) {
  * Edit playlist
  * 
  * @param id
+ * @param teamId
  * @param name
  * @param date
  * @param songs
  * @returns { object } edited playlist
  */
-export async function edit(id: number, name: string, date: Date, songs: string[] = []) {
+export async function edit(id: number, teamId: number, name: string, date: Date, songs: string[] = []) {
 	return await db.playlist.update({
 		where: {
 			id,
 		},
 		data: {
+			teamId,
 			name,
 			date: date.toISOString(),
 			songs: {

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

 import * as Playlist from '$lib/server/models/Playlist';
 import * as Song from '$lib/server/models/Song';
+import * as Team from '$lib/server/models/Team';
 import { error, fail } from '@sveltejs/kit';
 import { parseAndCheckFormData } from '$lib/utils';
 
@@ -8,6 +9,7 @@ export async function load({ params, parent }) {
 	const data = await parent();
 	const playlist = await Playlist.findById(Number(params.id));
 	const songs = (await Song.getAll()) ?? [];
+	const teams = await Team.getAllOfUser(data.authUser.id);
 
 	if (!playlist) throw error(404, 'Playlist not found!');
 	if (!playlist.songs) playlist.songs = [];
@@ -17,6 +19,7 @@ export async function load({ params, parent }) {
 		...data,
 		playlist,
 		songs,
+		teams,
 	};
 }
 
@@ -27,19 +30,20 @@ export const actions = {
 		const formData = parseAndCheckFormData(data, [
 			{ name: 'name', required: true, type: 'string' },
 			{ name: 'date', required: true, type: 'date' },
+			{ name: 'teamId', required: true, type: 'number' },
 			{ name: 'songs', required: true, type: 'json' },
 		]);
 		if (!formData.success) return formData.data;
-		const { name, date, songs } = formData.data;
+		const { name, date, teamId, songs } = formData.data;
 
 		const playlist = await Playlist.findById(Number(params.id));
 		if (!playlist) return fail(404, { not_found: true });
 		// if (!playlist.team.users?.find(usr => usr.id === authUser.id)) return fail(401, {}); // Cannot do this, since we don't have access to authUser!
 
 		if (playlist.name !== name && await Playlist.findByName(name))
-			return fail(400, { name, unique: true, date, songs });
+			return fail(400, { name, unique: true, date, teamId, songs });
 
-		const playlistNew = await Playlist.edit(playlist.id ?? Number(params.id), name, date, songs);
+		const playlistNew = await Playlist.edit(playlist.id ?? Number(params.id), teamId, name, date, songs);
 		return { success: true, playlist: playlistNew };
 	},
 	delete: async ({ request, params }) => {

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

 <script>
 	import TextField from '$lib/components/inputs/TextField.svelte';
+	import SelectField from '$lib/components/inputs/SelectField.svelte';
 	import Error from '$lib/components/alerts/Error.svelte';
 	import Notice from '$lib/components/alerts/Notice.svelte';
 	import Success from '$lib/components/alerts/Success.svelte';
@@ -14,14 +15,27 @@
 
 	/** @type {import('./$types').PageData} */
 	export let data;
+	const authUser = data.authUser;
+	const teams = new Array(...data.teams);
 	$: playlist = data.playlist;
 	let songs = new Array(...data.songs);
+
 	/** @type {import('./$types').ActionData} */
-	$: form = $page.form;
+	export let form;
+
+	/** @type {string} */ $: name = form?.name ?? playlist?.name;
+	/** @type {string} */ $: date = form?.date ?? playlist?.date?.toJSON()?.split('T')[0];
+	/** @type {string} */ $: teamId = form?.teamId ?? playlist?.team?.id;
+	/** @type {string} */ $: songsString = JSON.stringify((form?.songs ?? playlist?.songs ?? []).map(s=>{ return { id: s.id }; }));
 
-	/** @type {string} */ $: name = playlist?.name;
-	/** @type {string} */ $: date = playlist?.date?.toJSON()?.split('T')[0];
-	/** @type {string} */ $: songsString = JSON.stringify(playlist?.songs.map(s=>{ return { id: s.id }; }));
+	/**
+	 * @type {{ label: string; value: string; disabled: boolean; }[]}
+	 */
+	const teamOptions = [];
+	for (const team of teams) {
+		if (team.users.find(usr => usr.id === authUser.id))
+			teamOptions.push({ label: team.name, value: team.id, disabled: false });
+	}
 
 	let working = false;
 
@@ -95,6 +109,15 @@
 			bind:value={date}
 			disabled={working}
 		/>
+		<SelectField
+			id="teamId"
+			label={true}
+			labelText={$_('fields.playlist.team.label')}
+			required={true}
+			bind:value={teamId}
+			options={teamOptions}
+			disabled={working}
+		/>
 
 		<hr />
 		<h2>{$_('page.songs.list.title')}</h2>

src/routes/(leader)/playlists/create/+page.svelte

@@ -14,7 +14,7 @@
 	import { getContext, onMount } from 'svelte';
 
 	/** @type {import('./$types').ActionData} */
-	$: form = $page.form;
+	export let form;
 
 	/** @type {import('./$types').PageData} */
 	export let data;