shwo live data

front/js/entry/RecordEditEntry/RecordEditEntry.svelte

@@ -1,14 +1,16 @@
 <script>
     import ChannelLayout from "../../layouts/ChannelLayout.svelte";
     import { onMount } from "svelte";
-    import TextField from "./fields/TextField.svelte";
+
     import LocaleChooser from "./LocaleChooser.svelte";
+    import RecordForm from "./RecordForm.svelte";
     import RecordStatus from "./RecordStatus.svelte";
     import PublishingOptions from "./PublishingOptions.svelte";
     import { getSelectedLocales } from "./locale.svelte.js";
     let { channel, user, data } = $props();
     let selectedLocales = $state(getSelectedLocales());
     let record = $state(data.record);
+    let showPublished = $state(false);
 
     function handleLocaleChange() {
         selectedLocales = getSelectedLocales();
@@ -22,48 +24,35 @@
     <div style="display:flex;gap:20px;justify-content: space-between;">
         <LocaleChooser {channel} onLocaleChange={handleLocaleChange}
         ></LocaleChooser>
+
+        <label>
+            <input bind:checked={showPublished} type="checkbox" role="switch" />
+            Show Live Data
+        </label>
         <PublishingOptions {record} status={data.recordStatus}
         ></PublishingOptions>
     </div>
-    <fieldset disabled={data.recordStatus === "trashed"}>
-        {#each data.fields as field}
-            <div style="display:flex;gap:20px;">
-                {#if field.type === "text"}
-                    <TextField
-                        {channel}
-                        {record}
-                        validationError={data.validationErrors.find(
-                            (f) =>
-                                f.fieldId === field.id && 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}
-                                validationError={data.validationErrors.find(
-                                    (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}
-    </fieldset>
+    {#if !showPublished}
+        <fieldset disabled={data.recordStatus === "trashed"}>
+            <RecordForm
+                {channel}
+                fields={data.fields}
+                {record}
+                {selectedLocales}
+                validationErrors={data.validationErrors}
+                fieldData={data.draftData}
+            ></RecordForm>
+        </fieldset>
+    {:else}
+        <fieldset disabled={true}>
+            <RecordForm
+                {channel}
+                fields={data.fields}
+                {record}
+                {selectedLocales}
+                validationErrors={data.validationErrors}
+                fieldData={data.liveData}
+            ></RecordForm>
+        </fieldset>
+    {/if}
 {/snippet}

front/js/entry/RecordEditEntry/RecordForm.svelte

@@ -0,0 +1,47 @@
+<script>
+    import TextField from "./fields/TextField.svelte";
+    let {
+        fields,
+        record,
+        channel,
+        validationErrors,
+        fieldData,
+        selectedLocales,
+    } = $props();
+</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>
+            {#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>
+                {/each}
+            {/if}
+        {/if}
+    </div>
+{/each}