drp-48/src/lib/components/Report.svelte

<script lang="ts">
    import { reportTypes } from "$lib";
    import crossUrl from "$lib/assets/cross.svg";
    import Textarea from "./inputs/Textarea.svelte";
    import type { Table } from "$lib";
    import type { SupabaseClient } from "@supabase/supabase-js";
    import type { Database } from "$lib/database.d.ts";

    interface Props {
        data: { supabase: SupabaseClient<Database> };
        studySpaceId: string;
        hideFunc: () => void;
    }

    const { data, studySpaceId, hideFunc }: Props = $props();
    const { supabase } = $derived(data);

    let uploading = $state(false);
    let reportData = $state<Omit<Table<"reports">, "id" | "created_at" | "updated_at">>({
        study_space_id: studySpaceId,
        type: "",
        content: ""
    });

    async function uploadReport() {
        const { error: reportUploadError } = await supabase
            .from("reports")
            .insert(reportData)
            .select()
            .single();

        await supabase.channel("report_updates").send({
            type: "broadcast",
            event: "reports_updated",
            payload: { study_space_id: studySpaceId }
        });

        if (reportUploadError)
            return alert(`Error submitting report: ${reportUploadError.message}`);
        else alert("Report submitted successfully!");
    }
</script>

<div class="overlay">
    <form
        onsubmit={async (event) => {
            event.preventDefault();
            uploading = true;
            await uploadReport();
            uploading = false;
            hideFunc();
        }}
        class="reportContainer"
    >
        <h1 class="submitHeader">Submit a Report</h1>
        <p>What's the reason?</p>
        <select name="reportType" class="reportType" required bind:value={reportData.type}>
            <option value="" disabled selected>Report type</option>
            {#each reportTypes as reportType (reportType)}
                <option value={reportType}>{reportType}</option>
            {/each}
        </select>
        <label for="description">Briefly describe the problem:</label>
        <Textarea
            name="description"
            placeholder="Image is inappropriate..."
            rows={2}
            bind:value={reportData.content}
        />
        <button
            disabled={!reportData.type || reportData.content?.length === 0 || uploading}
            class="submit">Submit</button
        >
        <button type="button" class="exit" aria-label="exit" onclick={hideFunc}
            ><img src={crossUrl} alt="exit" /></button
        >
    </form>
</div>

<style>
    .overlay {
        display: flex;
        width: 100%;
        height: 100%;
        position: fixed;
        justify-content: center;
        align-items: center;
        background-color: rgba(8, 15, 18, 0.9);
        z-index: 100;
    }

    .reportContainer {
        display: flex;
        flex-direction: column;
        width: 80%;
        gap: 0.5rem;
        padding: 1rem;
        background-color: #182125;
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
        color: #eaffeb;
        position: absolute;
        translate: 0 -3.5rem;
        border: 2px solid #eaffeb;
    }

    .submitHeader {
        width: 80%;
    }
    .reportType {
        width: 100%;
        height: 100%;
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: 2px solid #eaffeb;
        background: none;
        color: #eaffeb;
        font-size: 0.9rem;
        text-align: left;
    }

    .reportType option {
        background-color: #2e4653;
        color: #eaffeb;
    }

    .submit {
        width: 100%;
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: none;
        background-color: #189f5e;
        color: #ffffff;
        font-size: 1rem;
        cursor: pointer;
    }

    .exit {
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
        background: none;
        border: none;
        cursor: pointer;
    }
</style>