139 lines
4.8 KiB
Svelte
139 lines
4.8 KiB
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}
|