Files
lucent-laravel/front/js/svelte/records/previews/PreviewFile.svelte
T

92 lines
2.9 KiB
Svelte

<script>
import Icon from "../../common/Icon.svelte";
import {createEventDispatcher, getContext} from "svelte";
import Preview from "../../files/Preview.svelte";
import {previewTitle} from "./../Preview";
import {fileurl, htmlurl} from "../../files/imageserver.js"
import Status from "./../Status.svelte";
import Dropdown from "../../common/Dropdown.svelte";
const dispatch = createEventDispatcher();
const channel = getContext("channel");
export let record;
export let hasDelete = false;
export let hasInsert = false;
let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
let cardTitle = previewTitle(channel.schemas, record);
let imagePresets = Object.keys(channel.imageFilters);
function remove(e) {
e.preventDefault();
dispatch("remove", record.id);
}
function insert(e, preset) {
e.preventDefault();
let html = htmlurl(channel, record, preset)
let url = !preset ? `/${record._file.path}` : `/templates/${preset}/${record._file.path}`;
dispatch("editor-insert", {
html: html,
url: channel.filesUrl + url,
originalUrl: channel.filesUrl + "/" + record._file.path,
record: record
});
}
</script>
<div class="preview-file">
<div style="display: flex;align-items: center;gap: 10px;">
<div class="image">
<Preview {record} size="small"/>
</div>
<div class="title">
<div>
<a
class="record-title"
href="{channel.lucentUrl}/records/{record.id}"
>
{cardTitle}
</a>
<small class="d-block">
from {schema.label}
{#if record.status === "draft"}
<Status status={record.status}/>
{/if}
</small>
</div>
</div>
</div>
<div style="display: flex;gap:4px; align-items: center; margin-right: 10px;">
{#if hasInsert}
<div class="reference-action">
<Dropdown>
<div slot="button">
<Icon icon="photo-film"/>
</div>
<button class="dropdown-item button" on:click={e => insert(e,null)}>original</button>
{#each imagePresets as preset}
<button class="dropdown-item button" on:click={e => insert(e,preset)}>{preset}</button>
{/each}
</Dropdown>
</div>
{/if}
{#if hasDelete}
<div class="reference-action">
<button
class="button"
on:click={remove}
>
<Icon icon="trash-can"/>
</button>
</div>
{/if}
</div>
</div>