lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

refactor edit and edges

Browse Source
This commit is contained in:
Alex Lingris
2024-03-25 21:26:21 +02:00
parent e74e1e7956
commit 02224eb580
83 changed files with 3569 additions and 818 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/records/PreviewCard.svelte
+57 -33
View File
@@ -1,62 +1,84 @@
<script>
import Icon from "../common/Icon.svelte";
import { getContext, createEventDispatcher } from "svelte";
import Preview from "../files/Preview.svelte";
import { previewTitle } from "./Preview";
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 graph;
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, graph);
let cardTitle = previewTitle(record);
function remove(e) {
e.preventDefault();
dispatch("remove", record.id);
}
function edit(e) {
e.preventDefault();
edgeData.openEdit();
}
</script>
<div
class="card mb-2 bg-light {classes}"
style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
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>
<div class="card-body">
<Preview {record} type="card"/>
{#if editable}
<EdgeData bind:this={edgeData} {field} {edge}/>
{/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 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 end-0" style="top:5px">
<div class="position-absolute d-flex end-0" style="top:5px">
{#if editable}
<button
class="trash-button text-dark btn btn-sm btn-link"
on:click={edit}
>
<Icon icon="pencil"/>
</button>
{/if}
<button
class="trash-button text-dark btn btn-sm btn-link"
on:click={remove}
><Icon icon="trash-can" />
class="trash-button text-dark btn btn-sm btn-link"
on:click={remove}
>
<Icon icon="trash-can"/>
</button>
</div>
{/if}
</div>
@@ -66,9 +88,11 @@
.card .trash-button {
display: none;
}
.card:hover .trash-button {
display: block;
}
.title-link {
overflow: hidden;
white-space: nowrap;