refactor edit and edges
This commit is contained in:
@@ -1,61 +1,65 @@
|
||||
<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();
|
||||
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 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);
|
||||
export let record;
|
||||
|
||||
function remove(e) {
|
||||
e.preventDefault();
|
||||
dispatch("remove", record.id);
|
||||
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>
|
||||
|
||||
|
||||
<!-- 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>
|
||||
<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">
|
||||
<span class="">{previewTitle(record)}</span>
|
||||
<span class="d-flex gap-1 text-muted">
|
||||
{#if record.status === "draft"}
|
||||
<Status status={record.status}/>
|
||||
{/if}
|
||||
{schema.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.card .trash-button {
|
||||
display: none;
|
||||
.preview-card {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.card:hover .trash-button {
|
||||
display: block;
|
||||
.preview-card-edge {
|
||||
position: absolute;
|
||||
top: -28px;
|
||||
background: #fff;
|
||||
padding: 0px 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 7px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
<!--{#if record._file && type === "inline"}-->
|
||||
<!--<!– <FilePreviewInline {record} {edge} {editable}/>–>-->
|
||||
<!--{:else if record._file && type === "card"}-->
|
||||
<!-- <FilePreviewCard {record} {edge} {editable}/>-->
|
||||
<!--{:else if type === "inline"}-->
|
||||
<!--<!– <DocPreviewCard {record} {edge} {editable}/>–>-->
|
||||
<!--{:else if type === "card"}-->
|
||||
<!--<!– <DocPreviewCard {record} {edge} {editable}/>–>-->
|
||||
<!--{/if}-->
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<script>
|
||||
import {imgurl} from "../../files/imageserver.js";
|
||||
import {getContext} from "svelte";
|
||||
import Icon from "../../common/Icon.svelte";
|
||||
const channel = getContext("channel");
|
||||
export let record;
|
||||
|
||||
|
||||
export let size = "tiny";
|
||||
let imageSide;
|
||||
let fileSide;
|
||||
let fontSize;
|
||||
if (size === "large") {
|
||||
imageSide = 256;
|
||||
fileSide = 32;
|
||||
fontSize = "20";
|
||||
} else if (size === "medium") {
|
||||
imageSide = 128;
|
||||
fileSide = 12;
|
||||
fontSize = "17";
|
||||
} else if (size === "small") {
|
||||
imageSide = 64;
|
||||
fileSide = 12;
|
||||
fontSize = "15";
|
||||
} else if (size === "tiny") {
|
||||
imageSide = 42;
|
||||
fileSide = 12;
|
||||
fontSize = "13";
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if record}
|
||||
{#if record._file.mime.startsWith("image")}
|
||||
<!-- href={imgurl(record)} -->
|
||||
<a
|
||||
href="{channel.lucentUrl}/records/{record.id}"
|
||||
title={record._file.path}
|
||||
class="d-flex align-items-center justify-content-center "
|
||||
style="width:{imageSide}px;height:{imageSide}px"
|
||||
>
|
||||
<img
|
||||
class="rounded w-100"
|
||||
src={imgurl(record)}
|
||||
alt={record._file.path}
|
||||
/>
|
||||
</a>
|
||||
{:else}
|
||||
<a
|
||||
href="{channel.lucentUrl}/records/{record.id}"
|
||||
title={record._file.path}
|
||||
class="btn btn-outline-primary btn-sm d-flex align-items-center justify-content-center"
|
||||
style="width:{imageSide}px;height:{imageSide}px"
|
||||
>
|
||||
<Icon icon="file" width={fileSide} height={fileSide}/>
|
||||
<span class="ms-2" style="font-size:{fontSize}px"
|
||||
>.{record._file.path.split(".").pop()}</span
|
||||
>
|
||||
</a>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -1,30 +0,0 @@
|
||||
<script>
|
||||
|
||||
import PreviewRecord from "./PreviewRecord.svelte";
|
||||
import {previewTitle} from "../../records/Preview.js";
|
||||
import {getContext} from "svelte";
|
||||
import EdgeModal from "../../edges/EdgeModal.svelte";
|
||||
const channel = getContext("channel");
|
||||
export let record
|
||||
export let edge
|
||||
export let graph
|
||||
export let classes
|
||||
export let field
|
||||
|
||||
let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
|
||||
let cardTitle = previewTitle({data:edge.data,schema:field.data}, graph);
|
||||
let modal;
|
||||
|
||||
function edit(e){
|
||||
e.preventDefault();
|
||||
modal.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<button class="btn btn-primary btn-sm" on:click={edit}>{cardTitle}</button>
|
||||
<PreviewRecord {record} {graph} {classes} />
|
||||
<EdgeModal bind:this={modal} />
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,55 +0,0 @@
|
||||
<script>
|
||||
|
||||
import Status from "../../records/Status.svelte";
|
||||
import Preview from "../../files/Preview.svelte";
|
||||
import {getContext} from "svelte";
|
||||
import {previewTitle} from "../../records/Preview.js";
|
||||
|
||||
const channel = getContext("channel");
|
||||
|
||||
export let classes
|
||||
export let record
|
||||
export let graph
|
||||
|
||||
let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
|
||||
let cardTitle = previewTitle(record, graph);
|
||||
</script>
|
||||
<div
|
||||
class="card mb-2 bg-light {classes}"
|
||||
style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
|
||||
>
|
||||
<div class="card-body d-flex">
|
||||
{#if schema.type === "files"}
|
||||
<div style="max-width:94px;margin-right:15px">
|
||||
<Preview {record} size="small"/>
|
||||
</div>
|
||||
{/if}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.title-link {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user