edges wip

2026-01-10 13:40:33 +02:00
parent ced6146266
commit b0485e77fc
14 changed files with 321 additions and 45 deletions
@@ -42,6 +42,7 @@
            <RecordForm
                {channel}
                fields={data.fields}
+                edgeRecordPreviews={data.edgeRecordPreviewsDraft}
                {record}
                {selectedLocales}
                validationErrors={data.validationErrors}
@@ -53,6 +54,7 @@
            <RecordForm
                {channel}
                fields={data.fields}
+                edgeRecordPreviews={data.edgeRecordPreviewsLive}
                {record}
                {selectedLocales}
                validationErrors={data.validationErrors}
@@ -7,9 +7,9 @@
        channel,
        validationErrors,
        fieldData,
+        edgeRecordPreviews,
        selectedLocales,
    } = $props();
-
    const findFieldValidationError = (field, locale) => {
        return validationErrors.find(
            (f) => f.fieldId === field.id && f.locale === locale,
@@ -20,6 +20,12 @@
            (f) => f.fieldId === field.id && f.locale === locale,
        );
    };
+    $inspect(edgeRecordPreviews);
+    const findFieldEdges = (field, locale) => {
+        return edgeRecordPreviews.filter(
+            (e) => e.edge.fieldId === field.id && e.edge.locale === locale,
+        );
+    };
 </script>

 {#each fields as field}
@@ -62,5 +68,6 @@
        schemaField={field}
        {locale}
        dataField={findDataField(field, locale)}
+        edgeRecordPreviews={findFieldEdges(field, locale)}
    ></RelationField>
 {/snippet}
@@ -2,8 +2,15 @@
    import { get, post } from "../../../modules/remote";
    import { getApp } from "../../../app";
    import { getLocaleName } from "../locale.svelte.js";
-    let { channel, record, schemaField, dataField, locale, validationError } =
-        $props();
+    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);
@@ -14,9 +21,12 @@

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

-    function handleAddRecord(e) {
+    function handleModalOpen(e) {
        // Add logic to handle adding a record
+        dialog.showModal();
        if (suggestionsLoaded) {
            return;
        }
@@ -30,26 +40,24 @@
        );
    }

-    function save() {
-        if (!valuesChanged) {
-            return;
-        }
+    function handleModalClose(e) {
+        dialog.close();
+    }

+    function handleInsertSelected() {
+        suggestionsLoaded = false;
        post(
-            app.url("records/fields"),
+            app.url("edges/many"),
            {
-                recordId: record.id,
-                id: schemaField.id,
+                toIds: selectedRecordIds,
+                from: record.id,
+                fieldId: schemaField.id,
                locale: locale,
-                value: newValue,
            },
            (data, err) => {
-                if (err.isNotEmpty()) {
-                    errorMessage = err.first();
-                } else {
-                    validationError = data.validationError;
-                    originalValue = newValue;
-                }
+                suggestionsLoaded = true;
+                dialog.close();
+                edgeRecordPreviews = [...edgeRecordPreviews, ...data];
            },
        );
    }
@@ -61,26 +69,68 @@
            {getLocaleName(channel, locale)} >
        {/if}
        {schemaField.name} <br />
-        <details class="dropdown">
-            <summary onclick={handleAddRecord}>Add Record</summary>
+    </label>
+    {#if hasError}
+        <small id={schemaField.id + "-help"}>{validationError.message}</small>
+    {:else if schemaField.help != ""}
+        <small id={schemaField.id + "-help"}>{schemaField.help}</small>
+    {/if}
+
+    <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}
-                <ul>
-                    {#each suggestions as suggestion}
-                        <li><a href="#">{suggestion.title}</a></li>
-                    {/each}
-                    <li><a href="#">More</a></li>
-                </ul>
+                <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}
-        </details>
-
-        {#if hasError}
-            <small id={schemaField.id + "-help"}
-                >{validationError.message}</small
-            >
-        {:else if schemaField.help != ""}
-            <small id={schemaField.id + "-help"}>{schemaField.help}</small>
+        </article>
+    </dialog>
+    <div>
+        {#if edgeRecordPreviews.length == 0}
+            No relations exist
+        {:else}
+            {#each edgeRecordPreviews as edgeRecordPreview}
+                <div>
+                    <a href="#">{edgeRecordPreview.recordPreview.title}</a>
+                    {edgeRecordPreview.recordPreview.schemaName}
+                </div>
+            {/each}
        {/if}
-    </label>
+    </div>
 </div>