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

<script>
    import SchemaLayout from "../../layouts/SchemaLayout.svelte";
    import Sortable from "../../common/Sortable.svelte";
    import { post } from "../../modules/remote";
    import { getApp } from "../../app";
    let { channel, user, data } = $props();
    let newSchemaName = $state("");
    let newSchemaAlias = $state("");
    let fields = $state(data.fields);
    const app = getApp();
    const createFieldUrl = (schema, type) =>
        app.url(`fields/create?schema=${schema.id}&type=${type}`);
    function handleSchemaCreate(e) {
        e.preventDefault();
        post(
            channel.lucentUrl + "/schemas",
            {
                name: newSchemaName,
                alias: newSchemaAlias,
            },
            (data, err) => {
                if (err.isEmpty()) {
                    Turbo.visit(window.location.href);
                }
            },
        );
    }

    function handleSortUpdate(updatedFields) {
        let updatedFieldIds = updatedFields.map((f) => f.id);
        fields = fields.filter((f) => !updatedFieldIds.includes(f.id));
        fields = [...fields, ...updatedFields];

        post(
            channel.lucentUrl + "/fields/reorder",
            {
                ids: updatedFieldIds,
            },
            (data, err) => {},
        );
    }
</script>

<SchemaLayout {body} {channel} {user}></SchemaLayout>
{#snippet body()}
    <h3 class="header-small mb-4 mt-5">Schemas</h3>

    <details style="max-width: 400px;">
        <summary>Create Schema</summary>
        <form onsubmit={handleSchemaCreate}>
            <fieldset>
                <label>
                    Name
                    <input
                        bind:value={newSchemaName}
                        placeholder="ex. Blog Posts"
                        minlength="2"
                        maxlength="30"
                        required
                    />
                    <small id="alias-helper">Plural is recommended</small>
                </label>
                <label>
                    Alias
                    <input
                        bind:value={newSchemaAlias}
                        placeholder="ex. blog_posts"
                        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>
    </details>
    <div style="display: flex;gap:20px">
        {#each data.schemas as schema}
            <article style="min-width: 300px;">
                <header>
                    <a href={app.url("schemas/edit/" + schema.id)}
                        >{schema.name}</a
                    >
                </header>
                <details>
                    <summary>Fields</summary>
                    <table>
                        <Sortable
                            type="table"
                            onUpdate={handleSortUpdate}
                            items={fields.filter(
                                (field) => field.schemaId === schema.id,
                            )}
                        >
                            {#snippet itemView(field)}
                                <td
                                    ><a
                                        href={app.url(
                                            "fields/edit/" + field.id,
                                        )}>{field.name}</a
                                    ></td
                                >
                                <td>{field.type}</td>
                            {/snippet}
                        </Sortable>
                    </table>
                </details>
                <details>
                    <summary>Add field</summary>
                    <ul>
                        <li>
                            <a href={createFieldUrl(schema, "text")}>Text</a>
                        </li>

                        <li>
                            <a href={createFieldUrl(schema, "file")}>File</a>
                        </li>
                        <li>
                            <a href={createFieldUrl(schema, "relation")}>
                                Relation
                            </a>
                        </li>
                    </ul>
                </details>
                <footer>
                    <small> Id: {schema.id}</small><br />
                    <small> Alias: {schema.alias}</small><br />
                    <small> Revisions: {schema.revisions}</small><br />
                </footer>
            </article>
        {/each}
    </div>
{/snippet}