lucent-laravel/front/js/entry/FieldEditEntry/FieldEditEntry.svelte

<script>
    import SchemaLayout from "../../layouts/SchemaLayout.svelte";
    import TextFieldProps from "./TextFieldProps.svelte";
    import RelationFieldProps from "./RelationFieldProps.svelte";
    import FileFieldProps from "./FileFieldProps.svelte";
    import DeleteButton from "../../common/DeleteButton.svelte";
    import { post } from "../../modules/remote";
    import { getApp } from "../../app";
    let { channel, user, data } = $props();

    const app = getApp();

    function handleUpdate(e) {
        e.preventDefault();
        post(
            app.url("fields/update"),
            {
                field: data.field,
            },
            (data, err) => {
                if (err.isEmpty()) {
                    Turbo.visit(app.url("schemas"));
                } else {
                    console.log(err);
                }
            },
        );
    }

    function handleDelete() {
        post(
            app.url("fields/delete"),
            {
                fieldId: data.field.id,
            },
            (data, err) => {
                if (err.isEmpty()) {
                    Turbo.visit(app.url("schemas"));
                } else {
                    console.log(err);
                }
            },
        );
    }
</script>

<SchemaLayout {body} {channel} {user}></SchemaLayout>
{#snippet body()}
    <h3 class="header-small mb-4 mt-5">
        Edit <em>{data.field.type}</em> field {data.field.name}
    </h3>

    {#if data.field.alias == "_title"}
        {@render titleField()}
    {:else}
        {@render normalfield()}
    {/if}
{/snippet}

{#snippet normalfield()}
    <form onsubmit={handleUpdate}>
        <fieldset>
            <label>
                Name
                <input
                    bind:value={data.field.name}
                    placeholder="ex. Description"
                    minlength="2"
                    maxlength="30"
                    required
                />
            </label>
            <label>
                Alias
                <input
                    bind:value={data.field.alias}
                    placeholder="ex. description"
                    minlength="2"
                    maxlength="30"
                    required
                    aria-describedby="alias-helper"
                />
                <small id="alias-helper">
                    Developers will use this to reference the field
                </small>
            </label>
            <label>
                Help text
                <input bind:value={data.field.help} />
            </label>
            <label>
                <input
                    bind:checked={data.field.translatable}
                    type="checkbox"
                    role="switch"
                />
                Is Translatable
            </label>
            <fieldset>
                <label>
                    <input
                        bind:checked={data.field.required}
                        type="checkbox"
                        role="switch"
                    />
                    Required
                </label>
                <label>
                    <input
                        bind:checked={data.field.readonly}
                        type="checkbox"
                        role="switch"
                    />
                    Readonly
                </label>
                <label>
                    <input
                        bind:checked={data.field.hidden}
                        type="checkbox"
                        role="switch"
                    />
                    Hidden
                </label>
            </fieldset>
        </fieldset>

        {#if data.field.type === "text"}
            <TextFieldProps field={data.field}></TextFieldProps>
        {:else if data.field.type === "relation"}
            <RelationFieldProps field={data.field} schemas={data.schemas}
            ></RelationFieldProps>
        {:else if data.field.type === "file"}
            <FileFieldProps field={data.field}></FileFieldProps>
        {/if}

        <button type="submit">Update</button>
    </form>
    <DeleteButton onDelete={handleDelete}>
        {#snippet text()}
            Delete field
        {/snippet}
    </DeleteButton>
{/snippet}

{#snippet titleField()}
    <form onsubmit={handleUpdate}>
        <fieldset>
            <label>
                <input
                    bind:checked={data.field.translatable}
                    type="checkbox"
                    role="switch"
                />
                Is Translatable
            </label>
        </fieldset>

        <button type="submit">Update</button>
    </form>
{/snippet}