edit schema wip

front/js/entry/SchemaEntry/SchemaEntry.svelte

@@ -1,10 +1,12 @@
 <script>
     import ChannelLayout from "../../layouts/ChannelLayout.svelte";
+    import Sortable from "../../common/Sortable.svelte";
     import { post } from "../../modules/remote";
     import { getApp } from "../../app";
     let { channel, user, data } = $props();
     let newSchemaName = $state("");
     let newSchemaAlias = $state("");
+    let fields = $state(data.fields);
     const app = getApp();
 
     function handleSchemaCreate(e) {
@@ -22,6 +24,20 @@
             },
         );
     }
+
+    function handleSortUpdate(updatedFields) {
+        let updatedFieldIds = updatedFields.map((f) => f.id);
+        fields = fields.filter((f) => !updatedFieldIds.includes(f.id));
+        fields = [...fields, ...updatedFields];
+
+        post(
+            channel.lucentUrl + "/fields/reorder",
+            {
+                ids: updatedFieldIds,
+            },
+            (data, err) => {},
+        );
+    }
 </script>
 
 <ChannelLayout {body} {channel} {user}></ChannelLayout>
@@ -65,15 +81,32 @@
     <div style="display: flex;gap:20px">
         {#each data.schemas as schema}
             <article style="min-width: 300px;">
-                <header>{schema.name}</header>
+                <header>
+                    <a href={app.url("schemas/edit/" + schema.id)}
+                        >{schema.name}</a
+                    >
+                </header>
                 <details>
                     <summary>Fields</summary>
                     <table>
-                        <tbody>
-                            <tr>
-                                <td>Title</td>
-                            </tr>
-                        </tbody>
+                        <Sortable
+                            type="table"
+                            onUpdate={handleSortUpdate}
+                            items={fields.filter(
+                                (field) => field.schemaId === schema.id,
+                            )}
+                        >
+                            {#snippet itemView(field)}
+                                <td
+                                    ><a
+                                        href={app.url(
+                                            "fields/edit/" + field.id,
+                                        )}>{field.name}</a
+                                    ></td
+                                >
+                                <td>{field.type}</td>
+                            {/snippet}
+                        </Sortable>
                     </table>
                 </details>
                 <details>