feat: implement season requests management with CRUD operations and enhance UI components

web/src/lib/components/login-form.svelte

@@ -80,7 +80,7 @@
             if (response.ok) {
                 console.log('Registration successful!');
                 console.log('Received User Data: ', response);
-                goto('/dashboard');
+                tabValue = "login"; // Switch to login tab after successful registration
                 errorMessage = 'Registration successful! Redirecting...';
             } else {
                 let errorText = await response.text();

web/src/lib/components/nav-user.svelte

@@ -17,23 +17,9 @@
 	import {base} from '$app/paths';
 	import {env} from "$env/dynamic/public";
 	import {goto} from '$app/navigation';
-
+	import {handleLogout} from '$lib/utils.ts';
 	const user: () => User = getContext('user');
 	const sidebar = useSidebar();
-	const apiUrl = env.PUBLIC_API_URL;
-
-	async function handleLogout() {
-		const response = await fetch(apiUrl + '/auth/cookie/logout', {
-			method: 'POST',
-			credentials: 'include'
-		});
-		if (response.ok) {
-			console.log('Logout successful!');
-			await goto(base + '/login');
-		} else {
-			console.error('Logout failed:', response.status);
-		}
-	}
 
 </script>
 

web/src/lib/components/season-requests-table.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import {
+        convertTorrentSeasonRangeToIntegerRange, getFullyQualifiedShowName,
+        getTorrentQualityString,
+        getTorrentStatusString
+    } from "$lib/utils.js";
+    import type {SeasonRequest} from "$lib/types.js";
+    import CheckmarkX from "$lib/components/checkmark-x.svelte";
+    import * as Table from "$lib/components/ui/table/index.js";
+
+    let {
+        requests, filter = () => {
+            return true
+        }
+    }: { requests: SeasonRequest[], filter: (SeasonRequest) => boolean } = $props();
+
+</script>
+
+<Table.Root>
+    <Table.Caption>A list of all requests.</Table.Caption>
+    <Table.Header>
+        <Table.Row>
+            <Table.Head>Show</Table.Head>
+            <Table.Head>Season</Table.Head>
+            <Table.Head>Minimum Quality</Table.Head>
+            <Table.Head>Wanted Quality</Table.Head>
+            <Table.Head>Requested by</Table.Head>
+            <Table.Head>Approved</Table.Head>
+            <Table.Head>Approved by</Table.Head>
+            <Table.Head>Actions</Table.Head>
+        </Table.Row>
+    </Table.Header>
+    <Table.Body>
+        {#each requests as request (request.id)}
+            {#if filter(request)}
+                <Table.Row>
+                    <Table.Cell class="font-medium">
+                        {getFullyQualifiedShowName(request.show)}
+                    </Table.Cell>
+                    <Table.Cell>
+                        {request.season.number}
+                    </Table.Cell>
+                    <Table.Cell class="font-medium">
+                        {getTorrentQualityString(request.min_quality)}
+                    </Table.Cell>
+                    <Table.Cell class="font-medium">
+                        {getTorrentQualityString(request.wanted_quality)}
+                    </Table.Cell>
+                    <Table.Cell>
+                        {request.requested_by?.email}
+                    </Table.Cell>
+                    <Table.Cell>
+                        <CheckmarkX state={request.authorized}/>
+                    </Table.Cell>
+                    <Table.Cell>
+                        {request.authorized_by?.email}
+                    </Table.Cell>
+                </Table.Row>
+            {/if}
+        {/each}
+    </Table.Body>
+</Table.Root>

web/src/lib/types.ts

@@ -94,11 +94,6 @@ export interface PublicSeason {
 	episodes: Episode[]; // items: { $ref: #/components/schemas/Episode }, type: array
 	id?: string; // type: string, format: uuid
 }
-export interface SeasonRequest {
-	season_id: string; // type: string, format: uuid
-	min_quality: Quality; // $ref: #/components/schemas/Quality
-	wanted_quality: Quality; // $ref: #/components/schemas/Quality
-}
 
 export interface Show {
 	name: string;
@@ -172,3 +167,25 @@ export interface RichShowTorrent {
 	metadata_provider: string;
 	torrents: RichSeasonTorrent[];
 }
+
+interface SeasonRequestBase {
+	min_quality: Quality;
+	wanted_quality: Quality;
+}
+
+export interface CreateSeasonRequest extends SeasonRequestBase {
+	season_id: string;
+}
+
+export interface UpdateSeasonRequest extends SeasonRequestBase {
+	id: string;
+}
+
+export interface SeasonRequest extends SeasonRequestBase {
+	id: string;
+	season: Season;
+	requested_by?: User;
+	authorized: boolean;
+	authorized_by?: User;
+	show: Show;
+}

web/src/lib/utils.ts

@@ -1,5 +1,10 @@
 import {type ClassValue, clsx} from 'clsx';
 import {twMerge} from 'tailwind-merge';
+import {env} from "$env/dynamic/public";
+import {goto} from '$app/navigation';
+import {base} from '$app/paths';
+
+const apiUrl = env.PUBLIC_API_URL;
 
 export const qualityMap: { [key: number]: string } = {
 	1: 'high',
@@ -42,4 +47,17 @@ export function convertTorrentSeasonRangeToIntegerRange(torrent: any): string {
 		return "Error parsing season range: " + torrent.seasons;
 	}
 
+}
+
+export async function handleLogout(): null {
+	const response = await fetch(apiUrl + '/auth/cookie/logout', {
+		method: 'POST',
+		credentials: 'include'
+	});
+	if (response.ok) {
+		console.log('Logout successful!');
+		await goto(base + '/login');
+	} else {
+		console.error('Logout failed:', response.status);
+	}
 }

web/src/routes/+page.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+	import {goto} from "$app/navigation";
+	import {base} from "$app/paths";
+	import {onMount} from 'svelte';
+
+	onMount(() => {
+		goto(base + '/dashboard');
+	});
 </script>
 
 <svelte:head>

web/src/routes/dashboard/tv/[showId=uuid]/+layout.ts

@@ -8,12 +8,11 @@ export const load: LayoutLoad = async ({params, fetch}) => {
 		return {
 			showData: null,
 			torrentsData: null,
-			error: 'Show ID is missing'
 		};
 	}
 
 	try {
-		const response = await fetch(`${env.PUBLIC_API_URL}/tv/shows/${showId}`, {
+		const show = await fetch(`${env.PUBLIC_API_URL}/tv/shows/${showId}`, {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json'
@@ -29,16 +28,15 @@ export const load: LayoutLoad = async ({params, fetch}) => {
 			credentials: 'include'
 		});
 
-		if (!response.ok || !torrents.ok) {
-			console.error(`Failed to fetch show ${showId}: ${response.statusText}`);
+		if (!show.ok || !torrents.ok) {
+			console.error(`Failed to fetch show ${showId}: ${show.statusText}`);
 			return {
 				showData: null,
 				torrentsData: null,
-				error: `Failed to load show or/and its torrents: ${response.statusText}`
 			};
 		}
 
-		const showData = await response.json();
+		const showData = await show.json();
 		const torrentsData = await torrents.json();
 		console.log('Fetched show data:', showData);
 		console.log('Fetched torrents data:', torrentsData);
@@ -52,7 +50,6 @@ export const load: LayoutLoad = async ({params, fetch}) => {
 		return {
 			showData: null,
 			torrentsData: null,
-			error: 'An error occurred while fetching show data.'
 		};
 	}
 };

web/src/routes/dashboard/tv/requests/+layout.ts

@@ -0,0 +1,33 @@
+import {env} from '$env/dynamic/public';
+import type {LayoutLoad} from './$types';
+
+export const load: LayoutLoad = async ({params, fetch}) => {
+    try {
+        const requests = await fetch(`${env.PUBLIC_API_URL}/tv/seasons/requests`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            credentials: 'include'
+        });
+
+        if (!requests.ok) {
+            console.error(`Failed to fetch season requests ${requests.statusText}`);
+            return {
+                requestsData: null,
+            };
+        }
+
+        const requestsData = await requests.json();
+        console.log('Fetched season requests:', requestsData);
+
+        return {
+            requestsData: requestsData,
+        };
+    } catch (error) {
+        console.error('Error fetching season requests:', error);
+        return {
+            requestsData: null,
+        };
+    }
+};

web/src/routes/dashboard/tv/requests/+page.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import {page} from '$app/state';
+    import {Separator} from '$lib/components/ui/separator/index.js';
+    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+    import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+    import * as Table from '$lib/components/ui/table/index.js';
+    import {getTorrentQualityString, getTorrentStatusString} from '$lib/utils';
+    import type {SeasonRequest} from '$lib/types';
+    import {getFullyQualifiedShowName} from '$lib/utils';
+    import * as Accordion from '$lib/components/ui/accordion/index.js';
+    import CheckmarkX from '$lib/components/checkmark-x.svelte';
+    import * as Card from "$lib/components/ui/card/index.js";
+    import RequestsTable from "$lib/components/season-requests-table.svelte";
+
+    let requests: SeasonRequest[] = $state(page.data.requestsData);
+</script>
+
+<header class="flex h-16 shrink-0 items-center gap-2">
+    <div class="flex items-center gap-2 px-4">
+        <Sidebar.Trigger class="-ml-1"/>
+        <Separator class="mr-2 h-4" orientation="vertical"/>
+        <Breadcrumb.Root>
+            <Breadcrumb.List>
+                <Breadcrumb.Item class="hidden md:block">
+                    <Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Page>TV Torrents</Breadcrumb.Page>
+                </Breadcrumb.Item>
+            </Breadcrumb.List>
+        </Breadcrumb.Root>
+    </div>
+</header>
+
+<div class="flex w-full flex-1 flex-col items-center gap-4 p-4 pt-0">
+    <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
+        Season Requests
+    </h1>
+    <RequestsTable requests={requests}/>
+</div>

web/src/routes/login/verify/+page.svelte

@@ -2,7 +2,7 @@
     import {UserCheck} from 'lucide-svelte';
     import {Button} from '$lib/components/ui/button/index.js';
     import Logo from '$lib/components/logo-side-by-side.svelte';
-
+    import {handleLogout} from '$lib/utils.ts';
 </script>
 
 
@@ -10,10 +10,11 @@
     <div class="absolute top-4 left-4">
         <Logo/>
     </div>
+    <div class="absolute top-4 right-4">
+        <Button onclick={()=>handleLogout()} variant="outline">Logout</Button>
+    </div>
     <div class="mx-auto w-full max-w-md text-center">
-
-
-    <div class="mb-6">
+        <div class="mb-6">
             <UserCheck class="mx-auto h-16 w-16 text-primary"/>
         </div>
         <h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
@@ -30,6 +31,7 @@
             The above button will only work once your account is verified.
         </p>
         <p class="mt-10 text-sm text-muted-foreground end">
-            If you have any questions, please contact an administrator.</p>
+            If you have any questions, please contact an administrator.
+        </p>
     </div>
 </div>