files

front/js/entry/RecordEditEntry/fields/RelationField.svelte

@@ -1,7 +1,9 @@
 <script>
     import { get, post } from "../../../modules/remote";
     import { getApp } from "../../../app";
-    import { getLocaleName } from "../locale.svelte.js";
+    import FieldLabel from "./FieldLabel.svelte";
+    import FieldError from "./FieldError.svelte";
+    import Sortable from "../../../common/Sortable.svelte";
     let {
         channel,
         record,
@@ -16,7 +18,6 @@
     let valuesChanged = $derived(newValue !== originalValue);
     let errorMessage = $state("");
     // let validationErrorState = $state(validationError);
-    let hasError = $derived(!!validationError);
     const app = getApp();
 
     let suggestionsLoaded = $state(false);
@@ -57,7 +58,41 @@
             (data, err) => {
                 suggestionsLoaded = true;
                 dialog.close();
-                edgeRecordPreviews = data;
+                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;
             },
         );
     }
@@ -65,17 +100,9 @@
 
 <div style="min-width: 400px;">
     <label>
-        {#if locale !== "main"}
-            {getLocaleName(channel, locale)} >
-        {/if}
-        {schemaField.name} <br />
+        <FieldLabel {locale} {channel} {schemaField}></FieldLabel>
     </label>
-    {#if hasError}
-        <small id={schemaField.id + "-help"}>{validationError.message}</small>
-    {:else if schemaField.help != ""}
-        <small id={schemaField.id + "-help"}>{schemaField.help}</small>
-    {/if}
-
+    <FieldError {schemaField} {validationError}></FieldError>
     <button onclick={handleModalOpen}>Choose record</button>
 
     <dialog bind:this={dialog}>
@@ -125,12 +152,23 @@
         {#if edgeRecordPreviews.length == 0}
             No relations exist
         {:else}
-            {#each edgeRecordPreviews as edgeRecordPreview}
-                <div>
-                    <a href="#">{edgeRecordPreview.recordPreview.title}</a>
-                    {edgeRecordPreview.recordPreview.schemaName}
-                </div>
-            {/each}
+            <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>