dialog wip

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

@@ -1,16 +1,17 @@
 <script>
-    import {getContext} from "svelte";
+    import {createEventDispatcher, getContext} from "svelte";
     import {uniqBy} from "lodash";
     import {sortByField} from "../../edges/sortEdges";
-    import PreviewCard from "../PreviewCard.svelte";
     import Sortable from "../../libs/Sortable.svelte";
-    import BrowseModal from "./BrowseModal.svelte";
+    import PreviewFile from "../previews/PreviewFile.svelte";
+    import Dropdown from "../../common/Dropdown.svelte";
+    import Dialog from "../../dialog/Dialog.svelte";
 
     const channel = getContext("channel");
     export let field;
     export let record;
     export let graph
-
+    const dispatch = createEventDispatcher();
     let browseModal;
     $: references = graph?.edges
         .filter((edge) => edge.field === field.name)
@@ -32,6 +33,7 @@
     function openBrowseModal(e, schema) {
         e.preventDefault();
         browseModal.open(schema);
+
     }
 
     async function reorder(e) {
@@ -69,49 +71,37 @@
 <div class="mb-0">
     {#if field.collections.length === 1}
         <button
-                class="btn btn-outline-primary"
+                class="button"
                 on:click={(e) => openBrowseModal(e, collections[0].name)}
         >
             Browse
         </button>
     {:else}
-        <div class="dropdown d-inline-block">
-            <button
-                    class="btn btn-outline-primary btn-sm"
-                    type="button"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-            >
+        <Dropdown>
+            <div slot="button">
                 Browse
-            </button>
-            <ul class="dropdown-menu">
-                {#each collections as collection}
-                    <li>
-                        <!-- {`${channelurl}/content/${collection.name}?parent=${record.id}&parentfield=${field.name}`} -->
-                        <a
-                                class="dropdown-item"
-                                on:click={(e) =>
+            </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
-                        >
-                    </li>
-                {/each}
-            </ul>
-        </div>
+                        href="/">{collection.label}</a
+                >
+            {/each}
+        </Dropdown>
     {/if}
 </div>
 {#if references.length > 0}
     <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
         {#each references as reference (reference.id)}
             <div class="col mb-3">
-                <PreviewCard
-                        classes="h-100"
-                        record={reference}
-                        hasDelete={true}
-                        on:remove={removeReference}
-                />
+                <PreviewFile record={reference} hasDelete={true} on:remove={removeReference}></PreviewFile>
+
             </div>
         {/each}
     </Sortable>
 {/if}
-<BrowseModal bind:this={browseModal} on:insert={insert}/>
+<Dialog bind:this={browseModal} on:insert={insert}></Dialog>
+<!--<BrowseModal bind:this={browseModal} on:insert={insert}/>-->