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

<script>
    import SchemaLayout from "../../layouts/SchemaLayout.svelte";
    import { post } from "../../modules/remote";
    import { getApp } from "../../app";
    let { channel, user, data, newRank } = $props();
    let name = $state("");
    let alias = $state("");
    const app = getApp();

    function handleCreate(e) {
        e.preventDefault();
        post(
            app.url("fields"),
            {
                schemaId: data.schema.id,
                name: name,
                alias: alias,
                fieldType: data.type,
            },
            (data, err) => {
                if (err.isEmpty()) {
                    Turbo.visit(app.url("fields/edit/" + data.field.id));
                } else {
                    console.log(err);
                }
            },
        );
    }
</script>

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

    <form onsubmit={handleCreate}>
        <fieldset>
            <label>
                Name
                <input
                    bind:value={name}
                    placeholder="ex. Description"
                    minlength="2"
                    maxlength="30"
                    required
                />
            </label>
            <label>
                Alias
                <input
                    bind:value={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>
        </fieldset>

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