61 lines
1.5 KiB
Svelte
61 lines
1.5 KiB
Svelte
<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> |