refactor fields

2024-03-21 22:33:41 +02:00
parent bb77a37ff7
commit 8526fd471f
68 changed files with 635 additions and 297 deletions
@@ -0,0 +1,61 @@
+<script>
+    import { getContext, createEventDispatcher } from "svelte";
+    import PreviewEdge from "./preview/PreviewEdge.svelte";
+    import PreviewRecord from "./preview/PreviewRecord.svelte";
+    import Icon from "../common/Icon.svelte";
+    const dispatch = createEventDispatcher();
+    const channel = getContext("channel");
+    export let classes = "";
+    export let hasDelete = false;
+    export let record
+    export let edge
+    export let graph
+    export let field
+    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
+
+    function remove(e) {
+        e.preventDefault();
+        dispatch("remove", record.id);
+    }
+</script>
+
+
+<!-- Preview Edge-->
+<div
+
+        class="card mb-2 bg-light  {classes}"
+        style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
+>
+    <div class="card-body d-flex flex-md-column">
+        {#if field.data}
+            <PreviewEdge {record} {edge} {graph} {field} {classes}/>
+        {:else}
+            <PreviewRecord {record} {graph} {classes} />
+        {/if}
+
+    </div>
+
+    {#if hasDelete}
+        <div class="position-absolute end-0" style="top:5px">
+            <button
+                    class="trash-button  text-dark btn btn-sm btn-link"
+                    on:click={remove}
+            >
+                <Icon icon="trash-can"/>
+            </button>
+        </div>
+    {/if}
+</div>
+
+
+<style>
+
+    .card .trash-button {
+        display: none;
+    }
+
+    .card:hover .trash-button {
+        display: block;
+    }
+
+</style>
@@ -0,0 +1,30 @@
+<script>
+
+    import PreviewRecord from "./PreviewRecord.svelte";
+    import {previewTitle} from "../../records/Preview.js";
+    import {getContext} from "svelte";
+    import EdgeModal from "../../edges/EdgeModal.svelte";
+    const channel = getContext("channel");
+    export let record
+    export let edge
+    export let graph
+    export let classes
+    export let field
+
+    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
+    let cardTitle = previewTitle({data:edge.data,schema:field.data}, graph);
+    let modal;
+
+    function edit(e){
+        e.preventDefault();
+        modal.open();
+    }
+</script>
+
+
+<button class="btn btn-primary btn-sm" on:click={edit}>{cardTitle}</button>
+<PreviewRecord {record} {graph} {classes} />
+<EdgeModal bind:this={modal} />
+<style>
+
+</style>
@@ -0,0 +1,55 @@
+<script>
+
+    import Status from "../../records/Status.svelte";
+    import Preview from "../../files/Preview.svelte";
+    import {getContext} from "svelte";
+    import {previewTitle} from "../../records/Preview.js";
+
+    const channel = getContext("channel");
+
+    export let classes
+    export let record
+    export let graph
+
+    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
+    let cardTitle = previewTitle(record, graph);
+</script>
+<div
+        class="card mb-2 bg-light  {classes}"
+        style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
+>
+    <div class="card-body d-flex">
+        {#if schema.type === "files"}
+            <div style="max-width:94px;margin-right:15px">
+                <Preview {record} size="small"/>
+            </div>
+        {/if}
+        <div class="overflow-hidden">
+            <a
+                    class="title-link m-0 fs-5 text-decoration-none text-dark d-block"
+                    href="{channel.lucentUrl}/records/{record.id}"
+                    title={cardTitle}
+            >
+                {cardTitle}
+            </a>
+            <small class="text-muted">
+                {schema.label}
+            </small>
+            <small class="text-muted">
+                {#if record.status === "draft"}
+                    <Status status={record.status}/>
+                {/if}
+            </small>
+        </div>
+    </div>
+</div>
+
+
+<style>
+
+    .title-link {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+</style>