Files
lucent-laravel/front/js/entry/SchemaEntry/SchemaEntry.svelte
T
2026-01-07 23:54:55 +02:00

110 lines
3.6 KiB
Svelte

<script>
import ChannelLayout from "../../layouts/ChannelLayout.svelte";
import { post } from "../../modules/remote";
let { channel, user, data } = $props();
let newSchemaName = $state("");
let newSchemaAlias = $state("");
function handleSchemaCreate(e) {
e.preventDefault();
post(
channel.lucentUrl + "/schemas",
{
name: newSchemaName,
alias: newSchemaAlias,
},
(data, err) => {
if (err.isEmpty()) {
window.location.reload();
}
},
);
}
</script>
<ChannelLayout {body} {channel} {user}></ChannelLayout>
{#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>{schema.name}</header>
<details>
<summary>Fields</summary>
<table>
<tbody>
<tr>
<td>Title</td>
</tr>
</tbody>
</table>
</details>
<details>
<summary>Add field</summary>
<ul>
<li>
<a
href={`/fields/create?schema=${schema.id}&type=text`}
>Text</a
>
</li>
<li>
<a
href={`/fields/create?schema=${schema.id}&type=text`}
>File</a
>
</li>
<li>
<a
href={`/fields/create?schema=${schema.id}&type=text`}
>Rich</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}