file uploads

front/js/svelte/records/elements/File.svelte

@@ -1,10 +1,7 @@
 <script>
-    import { sortByField } from "../../edges/sortEdges";
+    import { array_move } from "../../edges/sortEdges";
     import Sortable from "../../libs/Sortable.svelte";
     import PreviewFile from "../previews/PreviewFile.svelte";
-    import Dropdown from "../../common/Dropdown.svelte";
-    import Dialog from "../../dialog/Dialog.svelte";
-    import { insertEdges } from "./reference.js";
     import { getContext } from "svelte";
     import FileDialog from "../../dialog/FileDialog.svelte";
     import Uploader from "../../files/Uploader.svelte";
@@ -12,36 +9,28 @@
     const channel = getContext("channel");
     export let field;
     export let record;
-    export let graph;
+    export let value = [];
     let browseModal;
 
-    function removeReference(e) {
+    function removeFile(e) {
         e.preventDefault();
-        graph.edges = graph.edges.filter(
-            (edge) => !(edge.target === e.detail && edge.field === field.name),
-        );
+        value = value.filter((f) => !(f.id === e.detail));
     }
 
     async function reorder(e) {
-        graph.edges = await sortByField(
-            e.detail.source,
-            e.detail.target,
-            graph.edges,
-            field.name,
-            references,
-        );
+        value = await array_move(value, e.detail.source, e.detail.target);
     }
 
-    function insert(e) {
+    function insertFiles(e) {
         e.preventDefault();
         browseModal.close();
-        graph = insertEdges(
-            graph,
-            record,
-            e.detail.records,
-            field.name,
-            e.detail.action,
-        );
+        value = [...(value ?? []), ...(e.detail ?? [])];
+    }
+
+    function replaceFiles(e) {
+        e.preventDefault();
+        browseModal.close();
+        value = e.detail ?? [];
     }
 
     function uploadComplete(e) {
@@ -61,18 +50,22 @@
         <Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
     </div>
 </div>
-<!-- {#if references.length > 0}
+{#if value.length > 0}
     <Sortable sortableClass="mt-3" on:update={reorder}>
-        {#each references as reference (reference.id)}
+        {#each value ?? [] as aFile (aFile.id)}
             <!--This div helps the sorting thing-->
-<!-- <div>
+            <div>
                 <PreviewFile
-                    record={reference}
+                    file={aFile}
                     hasDelete={true}
-                    on:remove={removeReference}
+                    on:remove_file={removeFile}
                 ></PreviewFile>
             </div>
         {/each}
     </Sortable>
-{/if} -->
-<FileDialog bind:this={browseModal} on:insert={insert}></FileDialog>
+{/if}
+<FileDialog
+    bind:this={browseModal}
+    on:insert_files={insertFiles}
+    on:replace_files={replaceFiles}
+></FileDialog>