115 lines
3.3 KiB
Svelte
115 lines
3.3 KiB
Svelte
<script>
|
|
import Icon from "../common/Icon.svelte";
|
|
|
|
import {getContext, createEventDispatcher} from "svelte";
|
|
import {previewTitle} from "./Preview";
|
|
import Status from "./Status.svelte";
|
|
import Preview from "../newPreview/Preview.svelte";
|
|
import EdgeData from "./form/references/EdgeData.svelte";
|
|
|
|
const dispatch = createEventDispatcher();
|
|
const channel = getContext("channel");
|
|
export let record;
|
|
export let field;
|
|
export let edge;
|
|
export let editable = false;
|
|
export let classes = "";
|
|
export let hasDelete = false;
|
|
|
|
let edgeData;
|
|
|
|
let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
|
|
let cardTitle = previewTitle(record);
|
|
|
|
function remove(e) {
|
|
e.preventDefault();
|
|
dispatch("remove", record.id);
|
|
}
|
|
|
|
function edit(e) {
|
|
e.preventDefault();
|
|
edgeData.openEdit();
|
|
|
|
}
|
|
</script>
|
|
<div class="d-flex gap-2">
|
|
{#if editable}
|
|
<div
|
|
class="card mb-2 bg-light w-50 "
|
|
style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
|
|
>
|
|
<div class="card-body">
|
|
Edge Data
|
|
<div class="position-absolute d-flex end-0" style="top:5px">
|
|
<button
|
|
class="trash-button text-dark btn btn-sm btn-link"
|
|
on:click={edit}
|
|
>
|
|
<Icon icon="pencil"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<EdgeData bind:this={edgeData} {field} {edge}/>
|
|
{/if}
|
|
|
|
<div
|
|
class="card mb-2 bg-light w-100 {classes}"
|
|
style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
|
|
>
|
|
<div class="card-body">
|
|
|
|
<Preview {record} type="card"/>
|
|
|
|
<!-- <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>
|
|
|
|
{#if hasDelete}
|
|
<div class="position-absolute d-flex 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>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.card .trash-button {
|
|
display: none;
|
|
}
|
|
|
|
.card:hover .trash-button {
|
|
display: block;
|
|
}
|
|
|
|
.title-link {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|