lucent-laravel/front/js/svelte/records/InlineEdit.svelte

<script>
    import {afterUpdate, createEventDispatcher, onMount,} from "svelte";

    import {isEqual} from "lodash";
    import FormField from "./FormField.svelte";
    import FilePreview from "./FilePreview.svelte";
    import ContentTabs from "./ContentTabs.svelte";
    import StatusSelect from "./StatusSelect.svelte";
    import ErrorAlert from "../common/ErrorAlert.svelte";

    const dispatch = createEventDispatcher();
    export let schema;
    export let schemas;
    export let record;
    export let graph = {
        records: [],
        edges: []
    };
    export let isCreateMode;
    let originalContent;
    let activeContentTab = "_default";
    let hasUnsavedData = false;
    $: validationErrors = null;
    $: errorMessage = validationErrors
        ? `Record submission failed. ${
            Object.entries(validationErrors).length
        } error(s)`
        : null;

    let activeFields = schema.fields.filter(
        (f) => f.trashed === false && f.name !== "id"
    );

    let tabname = "_default";
    let fieldToTabs = schema.fields.reduce((c, f) => {
        if (f.ui === "tab") {
            tabname = f.name;
            return c;
        }

        c[tabname] = [...(c[tabname] ?? []), f.name];
        return c;
    }, []);

    onMount(() => {
        setOriginalContent();
    });

    function setOriginalContent() {
        originalContent = {
            data: JSON.parse(JSON.stringify(record.data)),
            _sys: JSON.parse(JSON.stringify(record._sys)),
            _file: JSON.parse(JSON.stringify(record._file)),
            edges: JSON.parse(JSON.stringify(graph.edges)),
        };
    }

    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,
            _sys: record._sys,
            _file: record._file,
            edges: graph.edges,
        });
    }

    function cancel(e) {
        e.preventDefault();
        dispatch("cancel");
    }

    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) ?? [];


            axios
                .post("/records", {
                    record: record,
                    edges: graph.edges,
                    isCreateMode: isCreateMode,
                })
                .then(function (response) {
                    console.log("SAVE: SAVED INLINE");

                    record = response.data.records[0];
                    graph = response.data;
                    if (!isCreateMode) {
                        setOriginalContent();
                    }
                    dispatch("inlinesaved", {
                        records: [record],
                    });
                    resolve(null);
                })
                .catch(function (error) {
                    // setOriginalContent();
                    if (error.response) {
                        if (typeof error.response.data.error === "string") {
                            errorMessage = error.response.data.error;
                        } else {
                            validationErrors = error.response.data.error;
                        }
                    }
                    resolve(null);
                    // msgSuccess = null;
                    // msgError = error.response.data.error;
                    // submitted = false;
                });
        });
    }
</script>

<svelte:window on:beforeunload={beforeUnload}/>

<div class="inline-edit my-4">
    <ErrorAlert message={errorMessage}/>

    <div class=" mt-1">
        <ContentTabs
            {schema}
            {isCreateMode}
            bind:active={activeContentTab}
            {record}
        />
        <FilePreview {record} {schema}/>
        <!-- <fieldset disabled="disabled"> -->
        {#each activeFields as field (field.name)}
            {#if fieldToTabs[activeContentTab].includes(field.name)}
                <FormField
                    bind:data={record.data}
                    bind:graph={graph}
                    {field}
                    {schema}
                    {schemas}
                    {record}
                    {validationErrors}
                    {isCreateMode}
                />
            {/if}
        {/each}
        <!-- </fieldset> -->
    </div>
    <div>
        <div class="d-flex  mt-3 align-items-center justify-content-center">
            {#if schema.hasDrafts}
                <StatusSelect bind:status={record._sys.status} {schema}/>
            {/if}
            {#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"
                    />
                    Add
                </button>
            {:else}
                <button
                    disabled={!hasUnsavedData}
                    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}
            <button class="ms-2 btn btn-link" on:click={cancel}>
                cancel
            </button>
        </div>
    </div>
</div>

<style>
    .inline-edit {
        padding: 44px;
        background-color: #eee;
        border-radius: 32px;
    }
</style>