edit schema wip
This commit is contained in:
@@ -2,14 +2,13 @@
|
||||
import ChannelLayout from "../../layouts/ChannelLayout.svelte";
|
||||
import { post } from "../../modules/remote";
|
||||
import { getApp } from "../../app";
|
||||
let { channel, user, data } = $props();
|
||||
let { channel, user, data, newRank } = $props();
|
||||
let name = $state("");
|
||||
let alias = $state("");
|
||||
const app = getApp();
|
||||
|
||||
function handleSchemaCreate(e) {
|
||||
function handleCreate(e) {
|
||||
e.preventDefault();
|
||||
console.log(data);
|
||||
post(
|
||||
app.url("fields"),
|
||||
{
|
||||
@@ -33,7 +32,7 @@
|
||||
{#snippet body()}
|
||||
<h3 class="header-small mb-4 mt-5">Create a <em>{data.type}</em> field</h3>
|
||||
|
||||
<form onsubmit={handleSchemaCreate}>
|
||||
<form onsubmit={handleCreate}>
|
||||
<fieldset>
|
||||
<label>
|
||||
Name
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
<script>
|
||||
import ChannelLayout from "../../layouts/ChannelLayout.svelte";
|
||||
import TextFieldProps from "./TextFieldProps.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>
|
||||
|
||||
<ChannelLayout {body} {channel} {user}></ChannelLayout>
|
||||
{#snippet body()}
|
||||
<h3 class="header-small mb-4 mt-5">
|
||||
Edit <em>{data.field.type}</em> field {data.field.name}
|
||||
</h3>
|
||||
|
||||
<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>
|
||||
</fieldset>
|
||||
|
||||
{#if data.field.type === "text"}
|
||||
<TextFieldProps field={data.field}></TextFieldProps>
|
||||
{/if}
|
||||
|
||||
<button type="submit">Update</button>
|
||||
</form>
|
||||
<DeleteButton onDelete={handleDelete}>
|
||||
{#snippet text()}
|
||||
Delete field
|
||||
{/snippet}
|
||||
</DeleteButton>
|
||||
{/snippet}
|
||||
@@ -0,0 +1,49 @@
|
||||
<script>
|
||||
let { field } = $props();
|
||||
</script>
|
||||
|
||||
<fieldset>
|
||||
<label>
|
||||
<input
|
||||
bind:checked={field.props.required}
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
/>
|
||||
Required
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
bind:checked={field.props.readonly}
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
/>
|
||||
Readonly
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
bind:checked={field.props.hidden}
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
/>
|
||||
Hidden
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>
|
||||
Default
|
||||
<input bind:value={field.props.default} />
|
||||
</label>
|
||||
<label>
|
||||
Help text
|
||||
<input bind:value={field.props.help} />
|
||||
</label>
|
||||
<label>
|
||||
Min characters
|
||||
<input type="number" bind:value={field.props.min} />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Max characters
|
||||
<input type="number" bind:value={field.props.max} />
|
||||
</label>
|
||||
</fieldset>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script>
|
||||
import ChannelLayout from "../../layouts/ChannelLayout.svelte";
|
||||
import Sortable from "../../common/Sortable.svelte";
|
||||
import { post } from "../../modules/remote";
|
||||
import { getApp } from "../../app";
|
||||
let { channel, user, data } = $props();
|
||||
const app = getApp();
|
||||
|
||||
function handleSchemaCreate(e) {
|
||||
e.preventDefault();
|
||||
// post(
|
||||
// channel.lucentUrl + "/schemas",
|
||||
// {
|
||||
// name: newSchemaName,
|
||||
// alias: newSchemaAlias,
|
||||
// },
|
||||
// (data, err) => {
|
||||
// if (err.isEmpty()) {
|
||||
// Turbo.visit(window.location.href);
|
||||
// }
|
||||
// },
|
||||
// );
|
||||
}
|
||||
</script>
|
||||
|
||||
<ChannelLayout {body} {channel} {user}></ChannelLayout>
|
||||
{#snippet body()}
|
||||
<h3>Edit Schema</h3>
|
||||
|
||||
<form onsubmit={handleSchemaCreate}>
|
||||
<fieldset>
|
||||
<label>
|
||||
Name
|
||||
<input
|
||||
bind:value={data.schema.name}
|
||||
placeholder="ex. Blog Posts"
|
||||
minlength="2"
|
||||
maxlength="30"
|
||||
required
|
||||
/>
|
||||
<small id="alias-helper">Plural is recommended</small>
|
||||
</label>
|
||||
<label>
|
||||
Alias
|
||||
<input
|
||||
bind:value={data.schema.alias}
|
||||
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">Update</button>
|
||||
</form>
|
||||
{/snippet}
|
||||
@@ -1,10 +1,12 @@
|
||||
<script>
|
||||
import ChannelLayout from "../../layouts/ChannelLayout.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();
|
||||
|
||||
function handleSchemaCreate(e) {
|
||||
@@ -22,6 +24,20 @@
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<ChannelLayout {body} {channel} {user}></ChannelLayout>
|
||||
@@ -65,15 +81,32 @@
|
||||
<div style="display: flex;gap:20px">
|
||||
{#each data.schemas as schema}
|
||||
<article style="min-width: 300px;">
|
||||
<header>{schema.name}</header>
|
||||
<header>
|
||||
<a href={app.url("schemas/edit/" + schema.id)}
|
||||
>{schema.name}</a
|
||||
>
|
||||
</header>
|
||||
<details>
|
||||
<summary>Fields</summary>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Title</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user