files

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

@@ -1,15 +1,14 @@
 <script>
     import { post } from "../../../modules/remote";
     import { getApp } from "../../../app";
-    import { getLocaleName } from "../locale.svelte.js";
+    import FieldLabel from "./FieldLabel.svelte";
+    import FieldError from "./FieldError.svelte";
     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();
 
     function save() {
@@ -81,33 +80,9 @@
     };
 </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 />
+        <FieldLabel {locale} {channel} {schemaField}></FieldLabel>
 
         <input
             type="text"
@@ -120,14 +95,8 @@
             onblur={handleBlur}
             oncompositionstart={handleCompositionStart}
             oncompositionend={handleCompositionEnd}
-            aria-invalid={hasError ? "true" : ""}
         />
-        {#if hasError}
-            <small id={schemaField.id + "-help"}
-                >{validationError.message}</small
-            >
-        {:else if schemaField.help != ""}
-            <small id={schemaField.id + "-help"}>{schemaField.help}</small>
-        {/if}
+        <!-- aria-invalid={hasError ? "true" : ""} -->
+        <FieldError {schemaField} {validationError}></FieldError>
     </label>
 </div>