MediaManager/web/src/lib/components/request-movie-dialog.svelte

<script lang="ts">
    import {env} from '$env/dynamic/public';
    import {Button, buttonVariants} from '$lib/components/ui/button/index.js';
    import * as Dialog from '$lib/components/ui/dialog/index.js';
    import {Label} from '$lib/components/ui/label';
    import * as Select from '$lib/components/ui/select/index.js';
    import LoaderCircle from '@lucide/svelte/icons/loader-circle';
    import type {CreateSeasonRequest, PublicMovie, PublicShow, Quality} from '$lib/types.js';
    import {getFullyQualifiedMediaName, getTorrentQualityString} from '$lib/utils.js';
    import {toast} from 'svelte-sonner';

    const apiUrl = env.PUBLIC_API_URL;
    let {movie}: { movie: PublicMovie } = $props();
    let dialogOpen = $state(false);
    let minQuality = $state<Quality | undefined>(undefined);
    let wantedQuality = $state<Quality | undefined>(undefined);
    let isSubmittingRequest = $state(false);
    let submitRequestError = $state<string | null>(null);

    const qualityValues: Quality[] = [1, 2, 3, 4];
    let qualityOptions = $derived(
        qualityValues.map((q) => ({value: q, label: getTorrentQualityString(q)}))
    );
    let isFormInvalid = $derived(
        !minQuality ||
        !wantedQuality ||
        wantedQuality > minQuality
    );

    async function handleRequestMovie() {
        isSubmittingRequest = true;
        submitRequestError = null;

        try {
            const response = await fetch(`${apiUrl}/movies/requests`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                credentials: 'include',
                body: JSON.stringify({
                    movie_id: movie.id,
                    min_quality: minQuality,
                    wanted_quality: wantedQuality
                })
            });

            if (response.status === 204) {
                dialogOpen = false;
                minQuality = undefined;
                wantedQuality = undefined;
                toast.success('Movie request submitted successfully!');
            } else {
                const errorData = await response.json().catch(() => ({message: response.statusText}));
                submitRequestError = `Failed to submit request: ${errorData.message || response.statusText}`;
                toast.error(submitRequestError);
                console.error('Failed to submit request', response.statusText, errorData);
            }
        } catch (error) {
            submitRequestError = `Error submitting request: ${error instanceof Error ? error.message : String(error)}`;
            toast.error(submitRequestError);
            console.error('Error submitting request:', error);
        } finally {
            isSubmittingRequest = false;
        }
    }
</script>

<Dialog.Root bind:open={dialogOpen}>
    <Dialog.Trigger
            class={buttonVariants({ variant: 'default' })}
            on:click={() => {
			dialogOpen = true;
		}}
    >
        Request Movie
    </Dialog.Trigger>
    <Dialog.Content class="max-h-[90vh] w-fit min-w-[clamp(300px,50vw,600px)] overflow-y-auto">
        <Dialog.Header>
            <Dialog.Title>Request {getFullyQualifiedMediaName(movie)}</Dialog.Title>
            <Dialog.Description>
                Select desired qualities to submit a request.
            </Dialog.Description>
        </Dialog.Header>
        <div class="grid gap-4 py-4">
            <!-- Min Quality Select -->
            <div class="grid grid-cols-[1fr,3fr] items-center gap-4 md:grid-cols-[100px,1fr]">
                <Label class="text-right" for="min-quality">Min Quality</Label>
                <Select.Root bind:value={minQuality} type="single">
                    <Select.Trigger class="w-full" id="min-quality">
                        {minQuality ? getTorrentQualityString(minQuality) : 'Select Minimum Quality'}
                    </Select.Trigger>
                    <Select.Content>
                        {#each qualityOptions as option (option.value)}
                            <Select.Item value={option.value}>{option.label}</Select.Item>
                        {/each}
                    </Select.Content>
                </Select.Root>
            </div>

            <!-- Wanted Quality Select -->
            <div class="grid grid-cols-[1fr,3fr] items-center gap-4 md:grid-cols-[100px,1fr]">
                <Label class="text-right" for="wanted-quality">Wanted Quality</Label>
                <Select.Root bind:value={wantedQuality} type="single">
                    <Select.Trigger class="w-full" id="wanted-quality">
                        {wantedQuality ? getTorrentQualityString(wantedQuality) : 'Select Wanted Quality'}
                    </Select.Trigger>
                    <Select.Content>
                        {#each qualityOptions as option (option.value)}
                            <Select.Item value={option.value}>{option.label}</Select.Item>
                        {/each}
                    </Select.Content>
                </Select.Root>
            </div>

            {#if submitRequestError}
                <p class="col-span-full text-center text-sm text-red-500">{submitRequestError}</p>
            {/if}
        </div>
        <Dialog.Footer>
            <Button disabled={isSubmittingRequest} onclick={() => (dialogOpen = false)} variant="outline"
            >Cancel
            </Button>
            <Button disabled={isFormInvalid || isSubmittingRequest} onclick={handleRequestMovie}>
                {#if isSubmittingRequest}
                    <LoaderCircle class="mr-2 h-4 w-4 animate-spin"/>
                    Submitting...
                {:else}
                    Submit Request
                {/if}
            </Button>
        </Dialog.Footer>
    </Dialog.Content>
</Dialog.Root>