Files
lucent-laravel/front/js/svelte/newPreview/Preview.svelte
T
2024-04-03 16:25:59 +03:00

66 lines
2.0 KiB
Svelte

<script>
import File from "./includes/File.svelte";
import {previewTitle} from "../records/Preview.js";
import {getContext} from "svelte";
import Status from "../records/Status.svelte";
const channel = getContext("channel");
export let record;
export let edge = null;
let schema = channel.schemas.find(s => s.name === record.schema);
let types = ["inline", "card"];
export let type = "inline";
if (!types.includes(type)) {
console.error("unknown preview type")
}
export let editable = false;
</script>
<div class="preview-card">
{#if edge?.data}
<div class="preview-card-edge">Edge Data</div>
{/if}
<div class="d-flex column-gap-3">
{#if record._file}
<div>
<File {record}/>
</div>
{/if}
<div class="d-flex flex-md-column " style="line-height: 22px">
<a class="text-decoration-none" target="_blank" href="{channel.lucentUrl}/records/{record.id}">{previewTitle(record)}</a>
<span class="d-flex gap-1 text-muted">
{#if record.status === "draft"}
<Status status={record.status}/>
{/if}
{schema.label}
</span>
</div>
</div>
</div>
<style>
.preview-card {
position: relative
}
.preview-card-edge {
position: absolute;
top: -28px;
background: #fff;
padding: 0px 5px;
border: 1px solid #ccc;
border-radius: 7px;
font-size: 14px;
}
</style>
<!--{#if record._file && type === "inline"}-->
<!--&lt;!&ndash; <FilePreviewInline {record} {edge} {editable}/>&ndash;&gt;-->
<!--{:else if record._file && type === "card"}-->
<!-- <FilePreviewCard {record} {edge} {editable}/>-->
<!--{:else if type === "inline"}-->
<!--&lt;!&ndash; <DocPreviewCard {record} {edge} {editable}/>&ndash;&gt;-->
<!--{:else if type === "card"}-->
<!--&lt;!&ndash; <DocPreviewCard {record} {edge} {editable}/>&ndash;&gt;-->
<!--{/if}-->