From 639b6d0bd6f52bb7aa6debd7a83486a6d0bafb74 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Thu, 7 Aug 2025 16:32:31 +0200
Subject: [PATCH] POC form live preview

---
 demo/app/Sharp/Posts/PostForm.php             |  6 ++
 resources/js/Pages/Form/Form.vue              | 90 +++++++++++--------
 src/Form/Eloquent/EloquentModelUpdater.php    |  6 +-
 .../Eloquent/WithSharpFormEloquentUpdater.php |  2 +-
 src/Form/SharpForm.php                        | 10 +++
 .../Api/ApiFormPreviewController.php          | 31 +++++++
 src/routes/api.php                            |  4 +
 7 files changed, 111 insertions(+), 38 deletions(-)
 create mode 100644 src/Http/Controllers/Api/ApiFormPreviewController.php

diff --git a/demo/app/Sharp/Posts/PostForm.php b/demo/app/Sharp/Posts/PostForm.php
index bd0c6538f..e7538daea 100644
--- a/demo/app/Sharp/Posts/PostForm.php
+++ b/demo/app/Sharp/Posts/PostForm.php
@@ -233,6 +233,12 @@ public function update($id, array $data)
             ->ignore(auth()->user()->isAdmin() ? [] : ['author_id'])
             ->save($post, $data);
 
+        if ($this->isPreview) {
+            return view('pages.post', [
+                'post' => $post,
+            ]);
+        }
+
         if (sharp()->context()->isCreation()) {
             $this->notify('Your post was created, but not published yet.');
         }
diff --git a/resources/js/Pages/Form/Form.vue b/resources/js/Pages/Form/Form.vue
index bb8e4c1eb..a08b868f3 100644
--- a/resources/js/Pages/Form/Form.vue
+++ b/resources/js/Pages/Form/Form.vue
@@ -12,6 +12,7 @@
     import { Button } from '@/components/ui/button';
     import { useResizeObserver } from "@vueuse/core";
     import { slugify } from "@/utils";
+    import { api } from "@/api/api";
 
     const props = defineProps<{
         form: FormData,
@@ -71,6 +72,18 @@
             });
         }
     }, { immediate: true });
+
+    const previewHtml = ref('');
+    let timeout: number;
+    watch(() => form.data, () => {
+        clearTimeout(timeout);
+        timeout = window.setTimeout(() => {
+            api.post(route('code16.sharp.api.form.preview', { entityKey, instanceId }), form.data)
+                .then(response => {
+                    previewHtml.value = response.data.data.html;
+                });
+        }, timeout ? 200 : 0);
+    }, { immediate: true, deep: true });
 </script>
 
 <template>
@@ -85,44 +98,49 @@
 
         <div class="@container">
             <div :class="form.pageAlert ? 'mt-4' : 'mt-6 @3xl:mt-10'" ref="el">
-                <SharpForm
-                    :form="form"
-                    :show-error-alert="showErrorAlert"
-                    :error-alert-message="errorAlertMessage"
-                    v-model:tab="selectedTabSlug"
-                    @submit="submit"
-                >
-                    <template #title>
-                        {{ form.title }}
-                    </template>
-                    <template #footer>
-                        <div class="flex gap-4">
-                            <Button variant="outline" as-child>
-                                <Link :href="props.cancelUrl">
-                                    <template v-if="form.canEdit">
-                                        {{ __('sharp::action_bar.form.cancel_button') }}
-                                    </template>
-                                    <template v-else>
-                                        {{ __('sharp::action_bar.form.back_button') }}
-                                    </template>
-                                </Link>
-                            </Button>
-                            <template v-if="form.canEdit">
-                                <Button style="min-width: 6.5em" :disabled="form.isUploading || loading" @click="submit">
-                                    <template v-if="form.isUploading">
-                                        {{ __('sharp::action_bar.form.submit_button.pending.upload') }}
-                                    </template>
-                                    <template v-else-if="instanceId || form.config.isSingle">
-                                        {{ __('sharp::action_bar.form.submit_button.update') }}
-                                    </template>
-                                    <template v-else>
-                                        {{ __('sharp::action_bar.form.submit_button.create') }}
-                                    </template>
+                <div class="grid" :class="previewHtml ? 'grid-cols-2' : 'grid-cols-1'">
+                    <SharpForm
+                        :form="form"
+                        :show-error-alert="showErrorAlert"
+                        :error-alert-message="errorAlertMessage"
+                        v-model:tab="selectedTabSlug"
+                        @submit="submit"
+                    >
+                        <template #title>
+                            {{ form.title }}
+                        </template>
+                        <template #footer>
+                            <div class="flex gap-4">
+                                <Button variant="outline" as-child>
+                                    <Link :href="props.cancelUrl">
+                                        <template v-if="form.canEdit">
+                                            {{ __('sharp::action_bar.form.cancel_button') }}
+                                        </template>
+                                        <template v-else>
+                                            {{ __('sharp::action_bar.form.back_button') }}
+                                        </template>
+                                    </Link>
                                 </Button>
-                            </template>
-                        </div>
+                                <template v-if="form.canEdit">
+                                    <Button style="min-width: 6.5em" :disabled="form.isUploading || loading" @click="submit">
+                                        <template v-if="form.isUploading">
+                                            {{ __('sharp::action_bar.form.submit_button.pending.upload') }}
+                                        </template>
+                                        <template v-else-if="instanceId || form.config.isSingle">
+                                            {{ __('sharp::action_bar.form.submit_button.update') }}
+                                        </template>
+                                        <template v-else>
+                                            {{ __('sharp::action_bar.form.submit_button.create') }}
+                                        </template>
+                                    </Button>
+                                </template>
+                            </div>
+                        </template>
+                    </SharpForm>
+                    <template v-if="previewHtml">
+                        <iframe class="border-0 size-full" :srcdoc="previewHtml"></iframe>
                     </template>
-                </SharpForm>
+                </div>
             </div>
         </div>
     </Layout>
diff --git a/src/Form/Eloquent/EloquentModelUpdater.php b/src/Form/Eloquent/EloquentModelUpdater.php
index 77b7ce266..6d0cc52e0 100644
--- a/src/Form/Eloquent/EloquentModelUpdater.php
+++ b/src/Form/Eloquent/EloquentModelUpdater.php
@@ -16,10 +16,14 @@ class EloquentModelUpdater
     protected array $relationships = [];
     protected ?Closure $fillAfterUpdateUsing = null;
 
-    public function update(Model $instance, array $data): Model
+    public function update(Model $instance, array $data, bool $isPreview = false): Model
     {
         $this->fillInstance($instance, $data);
 
+        if ($isPreview) {
+            return $instance;
+        }
+
         // End of "normal" attributes.
         $instance->save();
 
diff --git a/src/Form/Eloquent/WithSharpFormEloquentUpdater.php b/src/Form/Eloquent/WithSharpFormEloquentUpdater.php
index dff4fb83c..c7cb10762 100644
--- a/src/Form/Eloquent/WithSharpFormEloquentUpdater.php
+++ b/src/Form/Eloquent/WithSharpFormEloquentUpdater.php
@@ -43,7 +43,7 @@ public function save(Model $instance, array $data): Model
             ->fillAfterUpdateUsing(
                 fn ($instanceId) => $this->formatDataAfterUpdate($data, $instanceId)
             )
-            ->update($instance, $data);
+            ->update($instance, $data, $this->isPreview);
     }
 
     /**
diff --git a/src/Form/SharpForm.php b/src/Form/SharpForm.php
index 7e6c6dbf8..58a21b63d 100644
--- a/src/Form/SharpForm.php
+++ b/src/Form/SharpForm.php
@@ -27,6 +27,7 @@ abstract class SharpForm
     protected bool $displayShowPageAfterCreation = false;
     protected ?string $editFormTitle = null;
     protected ?string $createFormTitle = null;
+    protected bool $isPreview = false;
 
     final public function formLayout(): array
     {
@@ -77,6 +78,15 @@ final public function store(array $data): mixed
         return $this->update(null, $data);
     }
 
+    final public function updateForPreview(mixed $id, array $data): mixed
+    {
+        $this->isPreview = true;
+
+        return tap($this->update($id, $data), function () {
+            $this->isPreview = false;
+        });
+    }
+
     public function buildFormConfig(): void {}
 
     protected function configureDisplayShowPageAfterCreation(bool $displayShowPage = true): self
diff --git a/src/Http/Controllers/Api/ApiFormPreviewController.php b/src/Http/Controllers/Api/ApiFormPreviewController.php
new file mode 100644
index 000000000..e4dc051d6
--- /dev/null
+++ b/src/Http/Controllers/Api/ApiFormPreviewController.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Code16\Sharp\Http\Controllers\Api;
+
+use Code16\Sharp\Utils\Entities\ValueObjects\EntityKey;
+use Illuminate\Contracts\View\View;
+
+class ApiFormPreviewController extends ApiController
+{
+    public function store(EntityKey $entityKey, ?string $instanceId = null)
+    {
+        $entity = $this->entityManager->entityFor($entityKey);
+
+        $form = $entity->getFormOrFail($entityKey->multiformKey());
+
+        $form->buildFormConfig();
+
+        $formattedData = $form->formatAndValidateRequestData(request()->all(), $instanceId);
+        $view = $form->updateForPreview($instanceId, $formattedData);
+
+        if (! $view instanceof View) {
+            throw new \Exception('A view must be returned by the update() method if $this->isPreview is true.');
+        }
+
+        return response()->json([
+            'data' => [
+                'html' => $view->render(),
+            ],
+        ]);
+    }
+}
diff --git a/src/routes/api.php b/src/routes/api.php
index 9d025f701..acdf16b90 100644
--- a/src/routes/api.php
+++ b/src/routes/api.php
@@ -5,6 +5,7 @@
 use Code16\Sharp\Http\Controllers\Api\ApiFilterAutocompleteController;
 use Code16\Sharp\Http\Controllers\Api\ApiFormAutocompleteController;
 use Code16\Sharp\Http\Controllers\Api\ApiFormEditorUploadFormController;
+use Code16\Sharp\Http\Controllers\Api\ApiFormPreviewController;
 use Code16\Sharp\Http\Controllers\Api\ApiFormUploadController;
 use Code16\Sharp\Http\Controllers\Api\ApiFormUploadThumbnailController;
 use Code16\Sharp\Http\Controllers\Api\ApiSearchController;
@@ -96,6 +97,9 @@
     Route::post('/form/editors/upload/form/{entityKey}/{instanceId?}', [ApiFormEditorUploadFormController::class, 'update'])
         ->name('code16.sharp.api.form.editor.upload.form.update');
 
+    Route::post('/form/preview/{entityKey}/{instanceId?}', [ApiFormPreviewController::class, 'store'])
+        ->name('code16.sharp.api.form.preview');
+
     Route::post('/upload/thumbnail/{entityKey}/{instanceId?}', [ApiFormUploadThumbnailController::class, 'show'])
         ->name('code16.sharp.api.form.upload.thumbnail.show');