wip image templates

front/js/svelte/records/FormField.svelte

@@ -86,11 +86,8 @@
     {:else if field.info.name === "rich"}
         <RichEditor
             bind:value={data[field.name]}
-            {schema}
             {field}
             {validationErrors}
-            {isCreateMode}
-            bind:graph
             {record}
         />
     {:else if field.info.name === "markdown"}

front/js/svelte/records/elements/Markdown.svelte

@@ -3,7 +3,6 @@
     import { getErrorMessage } from "./errorMessage";
     import RichEditorFiles from "./RichEditorFiles.svelte";
 
-
     export let value;
     export let field;
     export let graph;
@@ -14,24 +13,24 @@
     $: errorMessage = getErrorMessage(validationErrors, field.name);
     let editor;
 
-    function insertMedia(e){
-        editor.insertMedia(e.detail)
+    function insertMedia(e) {
+        editor.insertMedia(e.detail);
     }
 </script>
 
 <div class="mb-3">
-    
-    <Codemirror bind:this={editor} bind:value editable={!field.readonly || isCreateMode} />
-    {#if field.collections.length > 0}
-        <RichEditorFiles
-                bind:graph
-                {record}
-                {field}
-                {validationErrors}
-                on:editor-insert={insertMedia}
-        >
-        </RichEditorFiles>
-    {/if}
+    <Codemirror
+        bind:this={editor}
+        bind:value
+        editable={!field.readonly || isCreateMode}
+    />
+    <RichEditorFiles
+        bind:graph
+        {record}
+        {field}
+        {validationErrors}
+        on:editor-insert={insertMedia}
+    ></RichEditorFiles>
     {#if errorMessage}
         <div class="invalid-feedback d-block">
             {errorMessage}

front/js/svelte/records/elements/RichEditor.svelte

@@ -5,17 +5,12 @@
 
     export let value;
     export let field;
-    export let isCreateMode;
-    export let graph;
     export let record;
     export let validationErrors;
 
     let editor;
 
     $: errorMessage = getErrorMessage(validationErrors, field.name);
-    let additionalConfig = {
-        readonly: field.readonly && !isCreateMode,
-    };
 
     function insertMedia(e) {
         editor.insertMedia(e.detail);
@@ -24,16 +19,12 @@
 
 <div class="mb-0">
     <Trix {field} bind:this={editor} bind:value></Trix>
-    <!--    <Tinymce  bind:this={editor} bind:value {additionalConfig}/>-->
-    {#if field.collections.length > 0}
-        <RichEditorFiles
-            bind:graph
-            {record}
-            {field}
-            {validationErrors}
-            on:editor-insert={insertMedia}
-        ></RichEditorFiles>
-    {/if}
+    <RichEditorFiles
+        {record}
+        {field}
+        {validationErrors}
+        on:editor-insert={insertMedia}
+    ></RichEditorFiles>
 
     {#if errorMessage}
         <div class="invalid-feedback d-block">

front/js/svelte/records/elements/RichEditorFiles.svelte

@@ -2,75 +2,45 @@
     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 { insertEdges } from "./reference.js";
+    import { getContext } from "svelte";
+    import FileDialog from "../../dialog/FileDialog.svelte";
+    import Uploader from "../../files/Uploader.svelte";
 
     const channel = getContext("channel");
     export let field;
     export let record;
-    export let graph
     let browseModal;
-    $: references = graph?.edges
-        .filter((edge) => edge.field === field.name)
-        .map((edge) => {
-            return graph.records.find((increc) => increc.id === edge.target && record.id === edge.source);
-        }).filter((rec) => (rec?.id ? true : false)) ?? [];
 
-    let collections = channel.schemas.filter((aschema) =>
-        field.collections.includes(aschema.name)
-    );
-
-    function removeReference(e) {
+    function openBrowseModal(e) {
         e.preventDefault();
-        graph.edges = graph.edges.filter(
-            (edge) => !(edge.target === e.detail && edge.field === field.name)
-        );
+        browseModal.open(record.id);
     }
 
-    function openBrowseModal(e, schema) {
-        e.preventDefault();
-        browseModal.open(schema);
-    }
-
-    function insert(e) {
+    function insertFiles(e) {
         e.preventDefault();
         browseModal.close();
-        graph = insertEdges(graph, record, e.detail.records, field.name, e.detail.action);
     }
+
+    function replaceFiles(e) {
+        e.preventDefault();
+        browseModal.close();
+    }
+
+    function uploadComplete(e) {}
 </script>
 
 <div class="mb-3">
     <label class="mt-4 mb-3">Rich editor files</label>
-    {#if field.collections.length === 1}
-        <button
-                class="button"
-                on:click={(e) => openBrowseModal(e, collections[0].name)}
-        >
-            Browse
-        </button>
-    {:else}
-        <Dropdown>
-            <div slot="button">
-                Browse
-            </div>
-            {#each collections as collection}
-                <!-- {`${channelurl}/content/${collection.name}?parent=${record.id}&parentfield=${field.name}`} -->
-                <a
-                        class="dropdown-item"
-                        on:click={(e) => openBrowseModal(e, collection.name)}
-                        href="/">{collection.label}</a
-                >
-            {/each}
-        </Dropdown>
-    {/if}
+    <button class="button" on:click={openBrowseModal}> Browse </button>
+
+    <div>
+        <Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
+    </div>
 </div>
-{#if references.length > 0}
-    {#each references as reference (reference.id)}
-        <!--This div helps the sorting thing-->
-        <div>
-            <PreviewFile record={reference} hasDelete={true} hasInsert={true} on:remove={removeReference}
-                         on:editor-insert></PreviewFile>
-        </div>
-    {/each}
-{/if}
-<Dialog bind:this={browseModal} on:insert={insert}></Dialog>
+
+<FileDialog
+    bind:this={browseModal}
+    on:insert_files={insertFiles}
+    on:replace_files={replaceFiles}
+></FileDialog>

front/js/svelte/records/previews/PreviewFile.svelte

@@ -4,6 +4,7 @@
     import { createEventDispatcher, getContext } from "svelte";
     import Preview from "../../files/Preview.svelte";
     import Dropdown from "../../common/Dropdown.svelte";
+    import { htmlurl } from "../../files/imageserver";
 
     const dispatch = createEventDispatcher();
     const channel = getContext("channel");
@@ -20,16 +21,16 @@
 
     function insert(e, preset) {
         e.preventDefault();
-        // let html = htmlurl(channel, record, preset);
-        // let url = !preset
-        //     ? `/${record._file.path}`
-        //     : `/templates/${preset}/${record._file.path}`;
-        // dispatch("editor-insert", {
-        //     html: html,
-        //     url: channel.filesUrl + url,
-        //     originalUrl: channel.filesUrl + "/" + record._file.path,
-        //     record: record,
-        // });
+        let html = htmlurl(channel, record, preset);
+        let url = !preset
+            ? `/${record._file.path}`
+            : `/templates/${preset}/${record._file.path}`;
+        dispatch("editor-insert", {
+            html: html,
+            url: channel.filesUrl + url,
+            originalUrl: channel.filesUrl + "/" + record._file.path,
+            record: record,
+        });
     }
 </script>