Files
lucent-laravel/front/js/svelte/records/previews/PreviewReference.svelte
T
2024-10-05 18:48:38 +03:00

100 lines
2.9 KiB
Svelte

<script>
import Icon from "../../common/Icon.svelte";
import {createEventDispatcher, getContext} from "svelte";
import {previewTitle} from "./../Preview";
import Status from "./../Status.svelte";
import Preview from "../../files/Preview.svelte";
const dispatch = createEventDispatcher();
const channel = getContext("channel");
export let graph;
export let record;
export let edge;
export let hasDelete = false;
let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
let cardTitle = previewTitle(channel.schemas, record, graph);
const cardImageEdge = graph.edges.find(e => e.source === record.id && e.field === schema.cardImage);
let cardImageRecord = graph.records.find(r => r.id === cardImageEdge?.target);
function remove(e) {
e.preventDefault();
dispatch("remove", record.id);
}
function restore(e) {
e.preventDefault();
dispatch("restore", record.id);
}
function fullDelete(e) {
e.preventDefault();
dispatch("fulldelete", record.id);
}
</script>
<div class="preview-reference" class:is-trashed={edge?._isTrashed}>
<div style="display: flex;align-items: center;gap: 10px;">
{#if cardImageRecord}
<div class="image">
<Preview record={cardImageRecord} size="small"/>
</div>
{/if}
<div class="title">
<div>
<a
class="record-title"
href="{channel.lucentUrl}/records/{record.id}"
>
{cardTitle}
{#if edge?._isTrashed}
<span class="trashed-text">will remove on save</span>
{/if}
</a>
<small class="d-block">
from {schema.label}
{#if record.status === "draft"}
<Status status={record.status}/>
{/if}
</small>
</div>
</div>
</div>
{#if hasDelete}
<div class="reference-action">
{#if edge?._isTrashed}
<button
title="Restore"
class="button"
on:click={restore}
>
<Icon icon="undo"/>
</button>
<button
title="Delete from everywhere"
class="button"
on:click={fullDelete}
>
<Icon icon="destroy"/>
</button>
{:else}
<button
title="Remove"
class="button"
on:click={remove}
>
<Icon icon="trash-can"/>
</button>
{/if}
</div>
{/if}
</div>