127 lines
4.3 KiB
Svelte
127 lines
4.3 KiB
Svelte
<script>
|
|
import PreviewCardSmall from "./PreviewCardSmall.svelte";
|
|
import PreviewCard from "./PreviewCard.svelte";
|
|
import Icon from "../common/Icon.svelte";
|
|
import Preview from "../files/Preview.svelte";
|
|
import {getContext} from "svelte";
|
|
|
|
const channel = getContext("channel");
|
|
export let graph;
|
|
export let record;
|
|
|
|
let parentEdgesByField = graph.edges
|
|
.filter((edge) => edge.source !== record.id && edge.depth === 0)
|
|
.reduce((carry, edge) => {
|
|
|
|
let schemaField = edge.sourceSchema + edge.field;
|
|
|
|
let arecord = graph.records.find((n) => {
|
|
return n.id === edge.source;
|
|
});
|
|
if (!carry[schemaField]) {
|
|
|
|
let schema = channel.schemas.find((s) => s.name === edge.sourceSchema);
|
|
carry[schemaField] = {
|
|
field: schema.fields.find((f) => f.name === edge.field),
|
|
schema: schema,
|
|
nodes: [],
|
|
};
|
|
}
|
|
if (arecord) {
|
|
carry[schemaField].nodes.push(arecord);
|
|
}
|
|
return carry;
|
|
}, {});
|
|
|
|
let childrenEdgesByField = graph.edges
|
|
.filter((edge) => edge.source === record.id && edge.depth === 0)
|
|
.reduce((carry, edge) => {
|
|
|
|
let schemaField = edge.targetSchema + edge.field;
|
|
|
|
if (!carry[schemaField]) {
|
|
carry[schemaField] = {
|
|
field: channel.schemas
|
|
.find((s) => s.name === record._sys.schema)
|
|
.fields.find((f) => f.name === edge.field),
|
|
nodes: [],
|
|
};
|
|
}
|
|
|
|
let arecord = graph.records.find((n) => {
|
|
return n.id === edge.target;
|
|
});
|
|
if (arecord) {
|
|
carry[schemaField].nodes.push(arecord);
|
|
}
|
|
|
|
return carry;
|
|
}, {});
|
|
</script>
|
|
|
|
{#each Object.entries(parentEdgesByField) as [fieldName, fieldData]}
|
|
<div class="lx-card mt-3">
|
|
<div class="text-center mb-3 d-flex justify-content-center align-items-center text-uppercase ">
|
|
<span>{fieldData.schema.label}</span>
|
|
<Icon icon="angle-right" width="12" height="12"/>
|
|
<span>{fieldData.field.label}</span>
|
|
</div>
|
|
<div class="d-flex justify-content-center text-center flex-wrap">
|
|
{#each fieldData.nodes as node}
|
|
{#if node._file?.path}
|
|
<div class="ms-2 mb-2" style="max-height:64px;">
|
|
<Preview record={node} size="small"/>
|
|
</div>
|
|
{:else}
|
|
<div class="ms-2 mb-2">
|
|
<PreviewCardSmall {graph} record={node}/>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
<!-- <div class="text-center mt-3 d-block">{fieldData.field.label}</div>-->
|
|
</div>
|
|
{/each}
|
|
{#if Object.entries(parentEdgesByField).length > 0}
|
|
<div class="text-center my-4">
|
|
<Icon icon="angles-down" width="32" height="32"/>
|
|
</div>
|
|
{/if}
|
|
<div style="max-width:400px;margin:0 auto;">
|
|
<PreviewCard {graph} record={record}/>
|
|
</div>
|
|
{#if Object.entries(childrenEdgesByField).length > 0}
|
|
<div class="text-center my-4">
|
|
<Icon icon="angles-down" width="32" height="32"/>
|
|
</div>
|
|
{/if}
|
|
|
|
{#each Object.entries(childrenEdgesByField) as [fieldName, fieldData]}
|
|
<div class="lx-card mt-3">
|
|
<div class="text-center mb-5 d-block">{fieldData.field.label}</div>
|
|
<div class="d-flex justify-content-center text-center flex-wrap">
|
|
{#each fieldData.nodes as node}
|
|
{#if fieldData.field.info.ui === "file"}
|
|
<div
|
|
class="ms-2 mb-2"
|
|
style="max-width:64px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
|
|
>
|
|
<Preview
|
|
record={node}
|
|
size="small"
|
|
showFilename={true}
|
|
/>
|
|
</div>
|
|
{:else}
|
|
<div class="ms-2 mb-2">
|
|
<PreviewCardSmall {graph} record={node}/>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
|
|
<style>
|
|
</style>
|