dialog wip

front/js/svelte/records/Edit.svelte

@@ -153,34 +153,34 @@
 
 <div class="record-edit">
     <div class="tools-header">
-    <!--    <Manager managerRecords={recordHistory} {graph}/>-->
-    {#if isCreateMode}
-        <button
-                class="button btn-spinner"
-                on:click={save}
-        >
+        <!--    <Manager managerRecords={recordHistory} {graph}/>-->
+        {#if isCreateMode}
+            <button
+                    class="button primary btn-spinner"
+                    on:click={save}
+            >
                             <span
                                     class="spinner-border spinner-border-sm"
                                     role="status"
                                     aria-hidden="true"
                             />
-            Create
-        </button>
-    {:else if hasUnsavedData}
-        <button
-                type="button"
-                class="button ms-2 btn btn-primary btn-spinner"
-                on:click={save}
-        >
+                Create
+            </button>
+        {:else if hasUnsavedData}
+            <button
+                    type="button"
+                    class="button primary ms-2 btn btn-primary btn-spinner"
+                    on:click={save}
+            >
                             <span
                                     class="spinner-border spinner-border-sm"
                                     role="status"
                                     aria-hidden="true"
                             />
-            Save
-        </button>
-    {/if}
-    <EditHeader {schema} bind:record {isCreateMode} {graph} bind:activeContentTab/>
+                Save
+            </button>
+        {/if}
+        <EditHeader {schema} bind:record {isCreateMode} {graph} bind:activeContentTab/>
     </div>
     <Title {schema} {record} {isCreateMode}/>
 
@@ -195,7 +195,6 @@
         />
         {#if !["_graph", "_info"].includes(activeContentTab)}
             <FilePreview {record} {schema}/>
-            <!-- <fieldset disabled="disabled"> -->
             {#each activeFields as field (field.name)}
                 {#if activeContentTab === field.group}
                     <FormField
@@ -209,7 +208,6 @@
                     />
                 {/if}
             {/each}
-            <!-- </fieldset> -->
         {:else if activeContentTab === "_graph"}
             <Graph {graph} {record}/>
         {:else if activeContentTab === "_info"}

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}/>-->

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

@@ -0,0 +1,57 @@
+<script>
+    import Icon from "../../common/Icon.svelte";
+
+    import {createEventDispatcher, getContext} from "svelte";
+    import Preview from "../../files/Preview.svelte";
+    import {previewTitle} from "./../Preview";
+    import Status from "./../Status.svelte";
+
+    const dispatch = createEventDispatcher();
+    const channel = getContext("channel");
+    export let record;
+    export let hasDelete = false;
+
+    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
+    let cardTitle = previewTitle(channel.schemas, record);
+
+    function remove(e) {
+        e.preventDefault();
+
+        dispatch("remove", record.id);
+    }
+</script>
+
+<div class="preview-file">
+    <div class="image">
+        <Preview {record} size="small"/>
+    </div>
+    <div class="title">
+        <div>
+            <a
+                    class="record-title"
+                    href="{channel.lucentUrl}/records/{record.id}"
+            >
+                {cardTitle}
+            </a>
+            <small class="d-block">
+                from {schema.label}
+                {#if record.status === "draft"}
+                    <Status status={record.status}/>
+                {/if}
+            </small>
+
+        </div>
+
+    </div>
+    {#if hasDelete}
+        <div class="trash-action">
+            <button
+                    class="button"
+                    on:click={remove}
+            >
+                <Icon icon="trash-can"/>
+            </button>
+        </div>
+    {/if}
+</div>
+