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/Edit.svelte
+34 -156
View File
@@ -1,112 +1,43 @@
<script>
import {afterUpdate, getContext, onMount} from "svelte";
import {isEqual} from "lodash";
import {getContext} from "svelte";
import Manager from "./Manager.svelte";
import EditHeader from "./EditHeader.svelte"
import StatusSelect from "./StatusSelect.svelte"
import FilePreview from "./FilePreview.svelte"
import ContentTabs from "./ContentTabs.svelte"
import FormField from "./FormField.svelte"
import Graph from "./Graph.svelte"
import Info from "./Info.svelte"
import ErrorAlert from "../common/ErrorAlert.svelte"
import Form from "./form/Form.svelte";
import axios from "axios";
const channel = getContext("channel");
export let schema;
export let record;
export let graph = {
records: [],
edges: []
};
export let graph = [];
export let recordHistory;
export let isCreateMode;
export let isWritable = false;
export let users;
let originalContent;
let activeContentTab = "";
$: hasUnsavedData = false;
// export let isWritable = false;
// export let users;
$: validationErrors = null;
$: errorMessage = validationErrors
? `Record submission failed. ${
Object.entries(validationErrors).length
} error(s)`
: null;
let activeFields = schema.fields.filter(
(f) => f.name !== "id"
);
onMount(() => {
setOriginalContent();
});
function setOriginalContent() {
originalContent = {
data: JSON.parse(JSON.stringify(record.data)),
schema: record.schema,
status: record.status,
_sys: JSON.parse(JSON.stringify(record._sys)),
edges: JSON.parse(JSON.stringify(graph)),
};
}
afterUpdate(() => {
hasUnsavedData = checkUnsavedData();
});
function beforeUnload(e) {
// Cancel the event as stated by the standard.
// e.preventDefault();
// console.log(hasUnsavedData);
if (hasUnsavedData) {
return (e.returnValue =
"You have unsaved changes. Are you sure you want to exit?");
}
// Chrome requires returnValue to be set.
// e.returnValue = "";
delete e["returnValue"];
// more compatibility
// return true;
return "...";
}
function checkUnsavedData() {
if (isCreateMode) {
return false;
}
return !isEqual(originalContent, {
data: record.data,
schema: record.schema,
status: record.status,
_sys: record._sys,
edges: graph,
});
}
let form;
function save(e) {
e.preventDefault();
console.log("SAVE: Attempt");
validationErrors = null;
errorMessage = "";
return new Promise(function (resolve, reject) {
if (!hasUnsavedData && !isCreateMode) {
resolve(null);
return;
}
if (!record) {
resolve(null);
return;
}
// remove trashed edges
graph.edges = graph.edges?.filter((edge) => !edge._isTrashed && edge.source === record.id);
let replaceEdges = graph
.map((queryRecord) => queryRecord.edge)
.filter((edge) => !edge._isTrashed && edge.source === record.id);
axios
.post(channel.lucentUrl + "/records", {
record: record,
edges: graph.edges,
schemaName: record.schema,
updateEdges: true,
id: record.id,
data: record.data,
edges: replaceEdges,
status: record.status,
isCreateMode: isCreateMode,
})
.then(function (response) {
@@ -115,15 +46,15 @@
if (isCreateMode) {
window.location.href = channel.lucentUrl + "/records/" + record.id;
} else {
record = response.data.rootRecords[0] ?? null;
record = response.data.record ?? null;
if (!record) {
// means trashed
hasUnsavedData = false;
window.location = channel.lucentUrl;
return;
}
graph = response.data;
setOriginalContent();
form.setOriginalData();
graph = response.data.graph;
}
resolve(null);
@@ -145,77 +76,24 @@
}
</script>
<svelte:window on:beforeunload={beforeUnload}/>
<div class="wrapper-normal transparent">
<Manager managerRecords={recordHistory} {graph}/>
<EditHeader {schema} {record} {isCreateMode} {graph} bind:activeContentTab/>
{#if !["_graph", "_info"].includes(activeContentTab) && isWritable}
<div class="shadow-lg record-status-bar">
<div
class="d-flex mt-3 mb-3 align-items-center justify-content-center"
>
<StatusSelect bind:status={record.status} {record} {schema}/>
{#if isCreateMode}
<button
class="ms-2 btn btn-primary btn-spinner"
on:click={save}
>
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
/>
Create
</button>
{:else if hasUnsavedData}
<button
type="button"
class="ms-2 btn btn-primary btn-spinner"
on:click={save}
>
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
/>
Save
</button>
{/if}
</div>
</div>
{/if}
<ErrorAlert message={errorMessage}/>
<FilePreview {record} {schema}/>
<div class=" mt-4" style="margin-bottom:150px">
<ContentTabs
{schema}
{isCreateMode}
bind:active={activeContentTab}
/>
{#if !["_graph", "_info"].includes(activeContentTab)}
<FilePreview {record} {schema}/>
<!-- <fieldset disabled="disabled"> -->
{#each activeFields as field (field.name)}
{#if activeContentTab === field.group}
<FormField
bind:data={record.data}
bind:graph={graph}
{field}
{schema}
{record}
{validationErrors}
{isCreateMode}
/>
{/if}
{/each}
<!-- </fieldset> -->
{:else if activeContentTab === "_graph"}
<Graph {graph} {record}/>
{:else if activeContentTab === "_info"}
<Info {record} {graph} {users} {schema}/>
{/if}
<Form
bind:this={form}
data={record.data}
status={record.status}
{graph}
{schema}
{record}
{isCreateMode}
on:save={save}
/>
<!-- <Graph {graph} {record}/>-->
<!-- <Info {record} {graph} {users} {schema}/>-->
</div>
</div>