lucent-laravel/front/js/entry/RecordEditEntry/fields/RelationField.svelte

<script>
    import { get, post } from "../../../modules/remote";
    import { getApp } from "../../../app";
    import FieldLabel from "./FieldLabel.svelte";
    import FieldError from "./FieldError.svelte";
    import Sortable from "../../../common/Sortable.svelte";
    let {
        channel,
        record,
        schemaField,
        dataField,
        locale,
        validationError,
        edgeRecordPreviews,
    } = $props();
    let originalValue = dataField?.value ?? schemaField.props.default;
    let newValue = $state(originalValue);
    let valuesChanged = $derived(newValue !== originalValue);
    let errorMessage = $state("");
    // let validationErrorState = $state(validationError);
    const app = getApp();

    let suggestionsLoaded = $state(false);
    let suggestions = $state([]);
    let selectedRecordIds = $state([]);
    let dialog = $state();

    function handleModalOpen(e) {
        // Add logic to handle adding a record
        dialog.showModal();
        if (suggestionsLoaded) {
            return;
        }
        get(
            app.url("records/suggest"),
            { schemas: schemaField.props.schemas },
            (data, err) => {
                suggestionsLoaded = true;
                suggestions = data;
            },
        );
    }

    function handleModalClose(e) {
        dialog.close();
    }

    function handleInsertSelected() {
        suggestionsLoaded = false;
        post(
            app.url("edges/many"),
            {
                toIds: selectedRecordIds,
                from: record.id,
                fieldId: schemaField.id,
                locale: locale,
            },
            (data, err) => {
                suggestionsLoaded = true;
                dialog.close();
                edgeRecordPreviews = data.edgeRecordPreviews;
                validationError = data.validationError;
            },
        );
    }

    function handleSortUpdate(updatedEdges) {
        // let updatedFieldIds = updatedFields.map((f) => f.id);
        // fields = fields.filter((f) => !updatedFieldIds.includes(f.id));
        // fields = [...fields, ...updatedFields];
        post(
            app.url("records/sort-edges"),
            {
                ids: updatedEdges.map((e) => e.edge.id),
            },
            (data, err) => {
                edgeRecordPreviews = updatedEdges;
            },
        );
    }

    function handleRemoveEdge(edgeId) {
        post(
            app.url("edges/delete"),
            {
                id: edgeId,
                from: record.id,
                fieldId: schemaField.id,
                locale: locale,
            },
            (data, err) => {
                edgeRecordPreviews = edgeRecordPreviews.filter(
                    (e) => e.edge.id !== edgeId,
                );
                validationError = data.validationError;
            },
        );
    }
</script>

<div style="min-width: 400px;">
    <label>
        <FieldLabel {locale} {channel} {schemaField}></FieldLabel>
    </label>
    <FieldError {schemaField} {validationError}></FieldError>
    <button onclick={handleModalOpen}>Choose record</button>

    <dialog bind:this={dialog}>
        <article>
            <header>
                <button onclick={handleModalClose} aria-label="Close" rel="prev"
                ></button>
                <p>
                    <strong>Records</strong>
                </p>
            </header>
            {#if suggestionsLoaded}
                <form>
                    <button onclick={handleInsertSelected}>
                        Insert selected
                    </button>
                    <table>
                        <tbody>
                            {#each suggestions as suggestion}
                                <tr>
                                    <td>
                                        <input
                                            type="checkbox"
                                            value={suggestion.id}
                                            bind:group={selectedRecordIds}
                                        />
                                    </td>
                                    <td>
                                        <a href="#">{suggestion.title}</a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            {suggestion.schemaName}
                                        </a>
                                    </td>
                                </tr>
                            {/each}
                        </tbody>
                    </table>
                </form>
            {:else}
                <progress />
            {/if}
        </article>
    </dialog>
    <div>
        {#if edgeRecordPreviews.length == 0}
            No relations exist
        {:else}
            <Sortable
                onUpdate={handleSortUpdate}
                items={edgeRecordPreviews}
                itemKey="edge.id"
            >
                {#snippet itemView(edgeRecordPreview)}
                    <div>
                        <a href="#">{edgeRecordPreview.recordPreview.title}</a>
                        {edgeRecordPreview.recordPreview.schemaName}
                        <button
                            onclick={(e) =>
                                handleRemoveEdge(edgeRecordPreview.edge.id)}
                            >remove</button
                        >
                    </div>
                {/snippet}
            </Sortable>
        {/if}
    </div>
</div>