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

refactor fields

Browse Source
This commit is contained in:
Alex Lingris
2024-03-21 22:33:41 +02:00
parent bb77a37ff7
commit 8526fd471f
68 changed files with 635 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/content/Table.svelte
+2 -2
View File
@@ -90,11 +90,11 @@
class="me-2 text-decoration-none text-dark fs-6"
href="{channel.lucentUrl}/records/{record.id}"
target={inModal ? "_blank" : "_self"}
title={previewTitle(channel.schemas, record, graph)}
title={previewTitle(record, graph)}
data-bs-toggle="tooltip" data-bs-placement="left"
>
{previewTitle(channel.schemas, record, graph)}
{previewTitle(record, graph)}
</a>
</div>
<div>
front/js/svelte/content/tools/AppliedFilter.svelte
+1 -1
View File
@@ -76,7 +76,7 @@
<span class="applied-filter d-inline-block border border-primary rounded lx-small-text me-1 px-2 py-1">
<div class="d-flex align-items-center justify-content-center">
{#if filter.isReference && filterRecord}
{filter.label} is {previewTitle(channel.schemas, filterRecord)}
{filter.label} is {previewTitle(filterRecord)}
{:else}
{filter.label} {operators.find((o) => o.name === filter.operator)?.symbol ?? ""} {value}
{/if}
front/js/svelte/content/tools/FilterReferenceInput.svelte
+1 -1
View File
@@ -62,7 +62,7 @@
on:keypress={(e) => apply(e, option)}
>
<span class="dropdown-item">
{previewTitle(channel.schemas, option)}
{previewTitle( option)}
</span>
</div>
front/js/svelte/edges/EdgeModal.svelte
+54
View File
@@ -0,0 +1,54 @@
<script>
import {createEventDispatcher, getContext} from "svelte";
const dispatch = createEventDispatcher();
const channel = getContext("channel");
let isOpen = false;
export function open() {
isOpen = true;
}
</script>
<div
class="modal fade show"
tabindex="-1"
class:d-block={isOpen}
aria-modal="true"
role="dialog"
style="background: rgba(100,100,100,.6);"
>
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button
on:click|preventDefault={(e) => (isOpen = false)}
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<style>
.modal-dialog {
width: auto;
max-width: 100%;
}
.modal-content {
margin: 40px auto;
width: auto;
height: 100%;
}
</style>
front/js/svelte/newPreview/Preview.svelte
+61
View File
@@ -0,0 +1,61 @@
<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();
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);
function remove(e) {
e.preventDefault();
dispatch("remove", record.id);
}
</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>
{/if}
</div>
<style>
.card .trash-button {
display: none;
}
.card:hover .trash-button {
display: block;
}
</style>
front/js/svelte/newPreview/preview/PreviewEdge.svelte
+30
View File
@@ -0,0 +1,30 @@
<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>
front/js/svelte/newPreview/preview/PreviewRecord.svelte
+55
View File
@@ -0,0 +1,55 @@
<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>
front/js/svelte/records/Edit.svelte
+2 -4
View File
@@ -115,7 +115,7 @@
console.log("SAVE: SAVED");
if (isCreateMode) {
window.location = channel.lucentUrl + "/records/" + record.id;
window.location.href = channel.lucentUrl + "/records/" + record.id;
} else {
record = response.data.records[0] ?? null;
if (!record) {
@@ -141,9 +141,7 @@
}
}
resolve(null);
// msgSuccess = null;
// msgError = error.response.data.error;
// submitted = false;
});
});
}
front/js/svelte/records/EditHeader.svelte
+1 -1
View File
@@ -29,7 +29,7 @@
<span class="text-dark d-block">
{#if !isCreateMode}
{previewTitle(channel.schemas, record, graph)}
{previewTitle( record, graph)}
{:else}
New Record
{/if}
front/js/svelte/records/Preview.js
+7 -5
View File
@@ -1,8 +1,10 @@
import Mustache from "mustache";
import {stripHtml} from "../../helpers";
import {getContext} from "svelte";
export function previewTitle(schemas, record, graph) {
let schema = schemas.find((aSchema) => aSchema.name === record?.schema);
export function previewTitle(record, graph) {
const channel = getContext("channel");
let schema = channel.schemas.find((aSchema) => aSchema.name === record?.schema);
if (!schema?.titleTemplate) {
return noTemplate(schema, record);
@@ -10,7 +12,7 @@ export function previewTitle(schemas, record, graph) {
let recordData = record.data;
let template = Mustache.parse(schema.titleTemplate);
console.log({template})
let referencePreviews = template
.filter(segment => segment[0] === "name") // keep only template tags
.map((segment) => segment[1]) // map to fieldNames
@@ -20,7 +22,7 @@ export function previewTitle(schemas, record, graph) {
}).reduce((carry, field) => { // map to records
let edge = graph.edges.find(edge => edge.source === record.id && edge.field === field)
let referenceRecord = graph.records.find(rec => rec.id === edge?.target)
carry[field] = previewTitle(schemas, referenceRecord, graph);
carry[field] = previewTitle(referenceRecord, graph);
return carry;
}, {});
recordData = {...recordData, ...referencePreviews}
@@ -43,7 +45,7 @@ function noTemplate(schema, record) {
record?.data[schema.fields.filter((f) => f.info.name === "text")[0]?.name]
).slice(0, 300);
if(title == ""){
if(title === ""){
return "Untitled";
}
front/js/svelte/records/PreviewCard.svelte
+1 -2
View File
@@ -13,10 +13,9 @@
export let hasDelete = false;
let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
let cardTitle = previewTitle(channel.schemas, record, graph);
let cardTitle = previewTitle(record, graph);
function remove(e) {
e.preventDefault();
dispatch("remove", record.id);
}
</script>
front/js/svelte/records/PreviewCardSmall.svelte
+1 -1
View File
@@ -7,7 +7,7 @@
export let graph;
$: schema = channel.schemas.find((aschema) => aschema.name === record.schema);
$: title = previewTitle(channel.schemas, record, graph);
$: title = previewTitle( record, graph);
</script>
{#if record?.data}
front/js/svelte/records/elements/File.svelte
+16 -4
View File
@@ -5,6 +5,7 @@
import PreviewCard from "../PreviewCard.svelte";
import Sortable from "../../libs/Sortable.svelte";
import BrowseModal from "./BrowseModal.svelte";
import Preview from "../../newPreview/Preview.svelte";
const channel = getContext("channel");
export let field;
@@ -16,8 +17,11 @@
$: references = graph?.edges
.filter((edge) => edge.field === field.name)
.map((edge) => {
return graph.records.find((increc) => increc.id == edge.target && record.id == edge.source);
}).filter((rec) => (rec?.id ? true : false)) ?? [];
return {
record: graph.records.find((increc) => increc.id === edge.target && record.id === edge.source),
edge: edge,
}
}).filter((recordEdge) => (!!recordEdge.record?.id)) ?? [];
let collections = channel.schemas.filter((aschema) =>
field.collections.includes(aschema.name)
@@ -101,14 +105,22 @@
</div>
{#if references.length > 0}
<Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
{#each references as reference (reference.id)}
{#each references as reference (reference.record.id)}
<div class="col mb-3">
<PreviewCard
classes="h-100"
record={reference}
record={reference.record}
hasDelete={true}
on:remove={removeReference}
/>
<!-- <Preview-->
<!-- classes="h-100"-->
<!-- record={reference.record}-->
<!-- edge={reference.edge}-->
<!-- hasDelete={true}-->
<!-- {field}-->
<!-- on:remove={removeReference}-->
<!-- />-->
</div>
{/each}
</Sortable>