validation

front/js/entry/RecordEditEntry/LocaleChooser.svelte

@@ -0,0 +1,32 @@
+<script>
+    import { getSelectedLocales, getLocaleName } from "./locale.svelte.js";
+    let { channel, onLocaleChange } = $props();
+    let selectedLocales = $state(getSelectedLocales());
+
+    let selectedLocaleNames = $derived(
+        selectedLocales.map((id) => getLocaleName(channel, id)),
+    );
+    function handleChange() {
+        localStorage.setItem("selectedLocales", selectedLocales);
+        onLocaleChange();
+    }
+</script>
+
+<details class="dropdown">
+    <summary>Locales: {selectedLocaleNames.join(", ")}</summary>
+    <ul>
+        {#each channel.locales as locale}
+            <li>
+                <label>
+                    <input
+                        type="checkbox"
+                        bind:group={selectedLocales}
+                        onchange={handleChange}
+                        value={locale.id}
+                    />
+                    {locale.name}
+                </label>
+            </li>
+        {/each}
+    </ul>
+</details>

front/js/entry/RecordEditEntry/RecordEditEntry.svelte

@@ -0,0 +1,57 @@
+<script>
+    import ChannelLayout from "../../layouts/ChannelLayout.svelte";
+    import { onMount } from "svelte";
+    import TextField from "./fields/TextField.svelte";
+    import LocaleChooser from "./LocaleChooser.svelte";
+    import { getSelectedLocales } from "./locale.svelte.js";
+    let { channel, user, data } = $props();
+    let selectedLocales = $state(getSelectedLocales());
+    let record = $state(data.record);
+
+    function handleLocaleChange() {
+        selectedLocales = getSelectedLocales();
+    }
+</script>
+
+<!-- <svelte:window on:beforeunload={beforeUnload} /> -->
+<ChannelLayout {body} {channel} schemas={data.schemas} {user}></ChannelLayout>
+{#snippet body()}
+    <LocaleChooser {channel} onLocaleChange={handleLocaleChange}
+    ></LocaleChooser>
+    {#each data.fields as field}
+        <div style="display:flex;gap:20px;">
+            {#if field.type === "text"}
+                <TextField
+                    {channel}
+                    {record}
+                    errors={data.validationErrors.filter(
+                        (f) => f.id === field.fieldId && f.locale === "main",
+                    )}
+                    schemaField={field}
+                    locale="main"
+                    dataField={data.draftData.find(
+                        (f) => f.id === field.id && f.locale === "main",
+                    )}
+                ></TextField>
+                {#if field.translatable}
+                    {#each selectedLocales as locale (locale)}
+                        <TextField
+                            {channel}
+                            {record}
+                            errors={data.validationErrors.filter(
+                                (f) =>
+                                    f.fieldId === field.id &&
+                                    f.locale === locale,
+                            )}
+                            schemaField={field}
+                            {locale}
+                            dataField={data.draftData.find(
+                                (f) => f.id === field.id && f.locale === locale,
+                            )}
+                        ></TextField>
+                    {/each}
+                {/if}
+            {/if}
+        </div>
+    {/each}
+{/snippet}

front/js/entry/RecordEditEntry/fields/TextField.svelte

@@ -0,0 +1,132 @@
+<script>
+    import { post } from "../../../modules/remote";
+    import { getApp } from "../../../app";
+    import { getLocaleName } from "../locale.svelte.js";
+    let { channel, record, schemaField, dataField, locale, errors } = $props();
+    let originalValue = dataField?.value ?? schemaField.props.default;
+    let newValue = $state(originalValue);
+    let valuesChanged = $derived(newValue !== originalValue);
+    let errorMessage = $state("");
+    let validationErrors = $state(errors);
+    let hasErrors = $derived(validationErrors.length > 0);
+    const app = getApp();
+
+    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 {
+                    validationErrors = data.validationErrors;
+                    originalValue = newValue;
+                }
+            },
+        );
+    }
+    let delayMs = 1000;
+    let timer = $state(undefined);
+    let isComposing = $state(false);
+
+    const schedule = () => {
+        if (isComposing) {
+            return;
+        }
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(flush, delayMs);
+    };
+
+    const flush = () => {
+        if (timer) {
+            clearTimeout(timer);
+            timer = undefined;
+        }
+        // value = inputValue;
+        save();
+    };
+
+    const handleInput = () => {
+        schedule();
+    };
+
+    const handleKeydown = (event) => {
+        if (event.key === "Enter") {
+            flush();
+        }
+    };
+
+    const handleBlur = () => {
+        flush();
+    };
+
+    const handleCompositionStart = () => {
+        isComposing = true;
+    };
+
+    const handleCompositionEnd = () => {
+        isComposing = false;
+    };
+</script>
+
+<!-- <div style="position: relative;">
+    {#if field.selectOptions}
+        <Autocomplete {field} bind:value></Autocomplete>
+    {:else}
+        <input
+            type="text"
+            {id}
+            class="form-control"
+            class:is-invalid={errorMessage}
+            bind:value
+            autocomplete="off"
+            readonly={field.readonly && !isCreateMode}
+        />
+    {/if}
+
+    {#if errorMessage}
+        <div class="invalid-feedback d-block">
+            {errorMessage}
+        </div>
+    {/if}
+</div> -->
+<div style="min-width: 400px;">
+    <label>
+        {#if locale !== "main"}
+            {getLocaleName(channel, locale)} >
+        {/if}
+        {schemaField.name} <br />
+
+        <input
+            type="text"
+            bind:value={newValue}
+            autocomplete="off"
+            readonly={schemaField.readonly}
+            aria-describedby={schemaField.id + "-help"}
+            oninput={handleInput}
+            onkeydown={handleKeydown}
+            onblur={handleBlur}
+            oncompositionstart={handleCompositionStart}
+            oncompositionend={handleCompositionEnd}
+            aria-invalid={hasErrors ? "true" : ""}
+        />
+        {#if hasErrors}
+            <small id={schemaField.id + "-help"}
+                >{validationErrors[0].message}</small
+            >
+        {:else if schemaField.help != ""}
+            <small id={schemaField.id + "-help"}>{schemaField.help}</small>
+        {/if}
+    </label>
+</div>

front/js/entry/RecordEditEntry/locale.svelte.js

@@ -0,0 +1,11 @@
+export function getSelectedLocales() {
+  let value = $state(localStorage.getItem("selectedLocales"));
+  if (value == "" || !value) {
+    return [];
+  }
+  return value.split(",");
+}
+
+export function getLocaleName(channel, id) {
+  return channel.locales.find((locale) => locale.id === id).name;
+}