edges wip
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import SchemaLayout from "../../layouts/SchemaLayout.svelte";
|
||||
import TextFieldProps from "./TextFieldProps.svelte";
|
||||
import RelationFieldProps from "./RelationFieldProps.svelte";
|
||||
import DeleteButton from "../../common/DeleteButton.svelte";
|
||||
import { post } from "../../modules/remote";
|
||||
import { getApp } from "../../app";
|
||||
@@ -124,6 +125,9 @@
|
||||
|
||||
{#if data.field.type === "text"}
|
||||
<TextFieldProps field={data.field}></TextFieldProps>
|
||||
{:else if data.field.type === "relation"}
|
||||
<RelationFieldProps field={data.field} schemas={data.schemas}
|
||||
></RelationFieldProps>
|
||||
{/if}
|
||||
|
||||
<button type="submit">Update</button>
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
let { field, schemas } = $props();
|
||||
</script>
|
||||
|
||||
<fieldset>
|
||||
<label>
|
||||
Schemas
|
||||
<select
|
||||
bind:value={field.props.schemas}
|
||||
aria-label="Select allowed schemas"
|
||||
multiple
|
||||
size="6"
|
||||
>
|
||||
<option disabled>Select allowed schemas </option>
|
||||
{#each schemas as schema}
|
||||
<option value={schema.id}>{schema.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</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>
|
||||
@@ -1,5 +1,6 @@
|
||||
<script>
|
||||
import TextField from "./fields/TextField.svelte";
|
||||
import RelationField from "./fields/RelationField.svelte";
|
||||
let {
|
||||
fields,
|
||||
record,
|
||||
@@ -8,40 +9,58 @@
|
||||
fieldData,
|
||||
selectedLocales,
|
||||
} = $props();
|
||||
|
||||
const findFieldValidationError = (field, locale) => {
|
||||
return validationErrors.find(
|
||||
(f) => f.fieldId === field.id && f.locale === locale,
|
||||
);
|
||||
};
|
||||
const findDataField = (field, locale) => {
|
||||
return fieldData.find(
|
||||
(f) => f.fieldId === field.id && f.locale === locale,
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
{#each fields as field}
|
||||
<div style="display:flex;gap:20px;">
|
||||
{#if field.type === "text"}
|
||||
<TextField
|
||||
{channel}
|
||||
{record}
|
||||
validationError={validationErrors.find(
|
||||
(f) => f.fieldId === field.id && f.locale === "main",
|
||||
)}
|
||||
schemaField={field}
|
||||
locale="main"
|
||||
dataField={fieldData.find(
|
||||
(f) => f.id === field.id && f.locale === "main",
|
||||
)}
|
||||
></TextField>
|
||||
{@render textField(field, "main")}
|
||||
{#if field.translatable}
|
||||
{#each selectedLocales as locale (locale)}
|
||||
<TextField
|
||||
{channel}
|
||||
{record}
|
||||
validationError={validationErrors.find(
|
||||
(f) =>
|
||||
f.fieldId === field.id && f.locale === locale,
|
||||
)}
|
||||
schemaField={field}
|
||||
{locale}
|
||||
dataField={fieldData.find(
|
||||
(f) => f.id === field.id && f.locale === locale,
|
||||
)}
|
||||
></TextField>
|
||||
{@render textField(field, locale)}
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
{#if field.type === "relation"}
|
||||
{@render relationField(field, "main")}
|
||||
{#if field.translatable}
|
||||
{#each selectedLocales as locale (locale)}
|
||||
{@render relationField(field, locale)}
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#snippet textField(field, locale)}
|
||||
<TextField
|
||||
{channel}
|
||||
{record}
|
||||
validationError={findFieldValidationError(field, locale)}
|
||||
schemaField={field}
|
||||
{locale}
|
||||
dataField={findDataField(field, locale)}
|
||||
></TextField>
|
||||
{/snippet}
|
||||
|
||||
{#snippet relationField(field, locale)}
|
||||
<RelationField
|
||||
{channel}
|
||||
{record}
|
||||
validationError={findFieldValidationError(field, locale)}
|
||||
schemaField={field}
|
||||
{locale}
|
||||
dataField={findDataField(field, locale)}
|
||||
></RelationField>
|
||||
{/snippet}
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
<script>
|
||||
import { get, post } from "../../../modules/remote";
|
||||
import { getApp } from "../../../app";
|
||||
import { getLocaleName } from "../locale.svelte.js";
|
||||
let { channel, record, schemaField, dataField, locale, validationError } =
|
||||
$props();
|
||||
let originalValue = dataField?.value ?? schemaField.props.default;
|
||||
let newValue = $state(originalValue);
|
||||
let valuesChanged = $derived(newValue !== originalValue);
|
||||
let errorMessage = $state("");
|
||||
// let validationErrorState = $state(validationError);
|
||||
let hasError = $derived(!!validationError);
|
||||
const app = getApp();
|
||||
|
||||
let suggestionsLoaded = $state(false);
|
||||
let suggestions = $state([]);
|
||||
|
||||
function handleAddRecord(e) {
|
||||
// Add logic to handle adding a record
|
||||
if (suggestionsLoaded) {
|
||||
return;
|
||||
}
|
||||
get(
|
||||
app.url("records/suggest"),
|
||||
{ schemas: schemaField.props.schemas },
|
||||
(data, err) => {
|
||||
suggestionsLoaded = true;
|
||||
suggestions = data;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (!valuesChanged) {
|
||||
return;
|
||||
}
|
||||
|
||||
post(
|
||||
app.url("records/fields"),
|
||||
{
|
||||
recordId: record.id,
|
||||
id: schemaField.id,
|
||||
locale: locale,
|
||||
value: newValue,
|
||||
},
|
||||
(data, err) => {
|
||||
if (err.isNotEmpty()) {
|
||||
errorMessage = err.first();
|
||||
} else {
|
||||
validationError = data.validationError;
|
||||
originalValue = newValue;
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div style="min-width: 400px;">
|
||||
<label>
|
||||
{#if locale !== "main"}
|
||||
{getLocaleName(channel, locale)} >
|
||||
{/if}
|
||||
{schemaField.name} <br />
|
||||
<details class="dropdown">
|
||||
<summary onclick={handleAddRecord}>Add Record</summary>
|
||||
{#if suggestionsLoaded}
|
||||
<ul>
|
||||
{#each suggestions as suggestion}
|
||||
<li><a href="#">{suggestion.title}</a></li>
|
||||
{/each}
|
||||
<li><a href="#">More</a></li>
|
||||
</ul>
|
||||
{:else}
|
||||
<progress />
|
||||
{/if}
|
||||
</details>
|
||||
|
||||
{#if hasError}
|
||||
<small id={schemaField.id + "-help"}
|
||||
>{validationError.message}</small
|
||||
>
|
||||
{:else if schemaField.help != ""}
|
||||
<small id={schemaField.id + "-help"}>{schemaField.help}</small>
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
@@ -8,7 +8,8 @@
|
||||
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(
|
||||
@@ -113,24 +114,16 @@
|
||||
<summary>Add field</summary>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href={app.url(
|
||||
`fields/create?schema=${schema.id}&type=text`,
|
||||
)}>Text</a
|
||||
>
|
||||
<a href={createFieldUrl(schema, "text")}>Text</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
href={`/fields/create?schema=${schema.id}&type=text`}
|
||||
>File</a
|
||||
>
|
||||
<a href={createFieldUrl(schema, "file")}>File</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`/fields/create?schema=${schema.id}&type=text`}
|
||||
>Rich</a
|
||||
>
|
||||
<a href={createFieldUrl(schema, "relation")}>
|
||||
Relation
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
Reference in New Issue
Block a user