viewer/src/routes/EditModal.svelte

<script lang="ts">
    import { onDestroy, createEventDispatcher } from "svelte";
    import { editingRow, statusMessage } from "./store";
    import type Row from "./Row";
    import { inferFields, editEntry, deleteEntry } from "./bridge";

    const dispatch = createEventDispatcher();
    let row: Row | null = null;

    export let isOpen = false;

    const unsubscribe = editingRow.subscribe((value: Row | null) => {
        row = value;
        isOpen = !!value;
        if (!isOpen) {
            statusMessage.reset();
        }
    });

    async function saveEntry() {
        if (!row) return;
        statusMessage.set(`<span>Sending edit request to backend...</span>`);

        const result = await editEntry(row);
        if (!result) return;
        dispatch("rowUpdated", row);
    }

    async function tryInfer() {
        if (!row) return;
        const result = await inferFields(row);
        if (!result) return;
        editingRow.set(result);
    }

    async function tryDelete() {
        if (!row) return;
        statusMessage.set(`<span style="color: red">Sending delete request to backend...</span>`);
        const result = await deleteEntry(row);
        if (!result) return;
        dispatch("rowDeleted", row);
        close();
    }

    function close() {
        editingRow.set(null);
    }

    onDestroy(unsubscribe);
</script>

{#if $editingRow}
    <div class="modal">
        <button class="modal-backdrop" on:click={close} />
        <div class="modal-content">
            <button class="close-button" on:click={close}> &times; </button>
            <h2>Edit Entry</h2>
            <div class="button-group">
                <button class="delete-button" on:click={tryDelete}>Delete Entry</button>
            </div>
            {#if row}
                <div class="input-group">
                    <label for="name">Name</label>
                    <input id="name" bind:value={row.Name} />
                </div>
                <div class="input-group">
                    <label for="date">Date</label>
                    <input id="date" bind:value={row.Date} />
                </div>
                <div class="input-group">
                    <label for="orgs">Orgs</label>
                    <input id="orgs" bind:value={row.Orgs} />
                </div>
                <div class="input-group">
                    <label for="authors">Authors</label>
                    <input id="authors" bind:value={row.Authors} />
                </div>
                <div class="input-group">
                    <label for="paper">Paper</label>
                    <input id="paper" bind:value={row.Paper} />
                </div>
                <div class="input-group">
                    <label for="code">Code</label>
                    <input id="code" bind:value={row.Code} />
                </div>
                <div class="input-group">
                    <label for="project">Project</label>
                    <input id="project" bind:value={row.Project} />
                </div>
                <div class="input-group">
                    <label for="space">Space</label>
                    <input id="space" bind:value={row.Space} />
                </div>
                <div class="input-group">
                    <label for="model">Model</label>
                    <input id="model" bind:value={row.Model} />
                </div>
                <div class="input-group">
                    <label for="dataset">Dataset</label>
                    <input id="dataset" bind:value={row.Dataset} />
                </div>
                <div class="input-group">
                    <label for="license">License</label>
                    <input id="license" bind:value={row.License} />
                </div>
                <div class="input-group">
                    <label for="code-status">Code Status</label>
                    <input id="code-status" bind:value={row.CodeStatus} />
                </div>
                <div class="input-group">
                    <label for="tags">Tags</label>
                    <input id="tags" bind:value={row.Tags} />
                </div>
            {/if}
            <div class="button-group">
                <button class="infer-button" on:click={tryInfer}>Infer Fields</button>
                <button class="save-button" on:click={saveEntry}>Save</button>
            </div>
            <div class="status">
                <span>{@html $statusMessage}</span>
            </div>
        </div>
    </div>
{/if}

<style>
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: transparent;
        border: none;
    }

    .modal-content {
        position: relative;
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        width: 50%;
        max-width: 768px;
    }

    .modal-content h2 {
        margin: 0;
        margin-bottom: 10px;
    }

    .input-group {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .input-group label {
        flex: 1;
        margin-right: 10px;
    }

    .input-group input {
        flex: 2;
    }

    .modal-content input {
        width: 100%;
    }

    .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 1.5em;
        cursor: pointer;
    }

    .button-group {
        margin: 10px 0;
        width: 100%;
        display: flex;
        justify-content: left;
    }

    .infer-button {
        background-color: rgb(68, 127, 215);
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        flex: 1;
    }

    .save-button {
        background-color: #53c457;
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        flex: 1;
    }

    .delete-button {
        background-color: rgb(248, 39, 39);
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
    }

    .status {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }
</style>