From 8a0363664a0dc4ae6896d46936f8dfcf9d467b46 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 15 Oct 2025 02:25:36 +0530
Subject: [PATCH] chore: better submission form render

---
 .../src/components/FormBuilderContent.vue     |  1 +
 frontend/src/components/RenderField.vue       | 16 ++++-
 .../src/components/builder/FieldRenderer.vue  | 64 +++++++++++++++++--
 .../components/submission/FormRenderer.vue    | 19 ++----
 frontend/src/utils/form_fields.ts             |  2 +-
 5 files changed, 78 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/FormBuilderContent.vue b/frontend/src/components/FormBuilderContent.vue
index 24677ee..6e6559a 100644
--- a/frontend/src/components/FormBuilderContent.vue
+++ b/frontend/src/components/FormBuilderContent.vue
@@ -82,6 +82,7 @@ onClickOutside(fieldContentRef, (event) => {
                                 (updatedField: FormField) =>
                                     editFormStore.updateField(element, updatedField)
                             "
+                            :inEditMode="true"
                         />
                         <Button
                             icon="x"
diff --git a/frontend/src/components/RenderField.vue b/frontend/src/components/RenderField.vue
index c2151eb..c0e3370 100644
--- a/frontend/src/components/RenderField.vue
+++ b/frontend/src/components/RenderField.vue
@@ -8,10 +8,24 @@ const props = defineProps({
     },
 });
 
+const value = defineModel();
 const getComponent = computed(() => {
     return formFields.find((field) => field.name === props.field.fieldtype);
 });
+
+const getBinds = computed(() => {
+    return {
+        ...props.field,
+        ...props.field.options,
+        ...props.field.default,
+    };
+});
 </script>
 <template>
-    <component :is="getComponent.component" :field="props.field" v-bind="getComponent.props" />
+    <component
+        v-model="value"
+        :is="getComponent.component"
+        :field="props.field"
+        v-bind="getComponent.props"
+    />
 </template>
diff --git a/frontend/src/components/builder/FieldRenderer.vue b/frontend/src/components/builder/FieldRenderer.vue
index b7384a9..5b7e558 100644
--- a/frontend/src/components/builder/FieldRenderer.vue
+++ b/frontend/src/components/builder/FieldRenderer.vue
@@ -9,10 +9,17 @@ const props = defineProps({
         type: Object,
         required: true,
     },
+    inEditMode: {
+        type: Boolean,
+        required: true,
+    },
 });
 
 const emit = defineEmits(["update:field"]);
 
+// Add v-model support
+const modelValue = defineModel();
+
 // Create a computed property for two-way binding
 const fieldData = computed({
     get() {
@@ -35,60 +42,103 @@ const getClasses = computed(() => {
         case "Text Editor":
             return "w-fit";
         case "Switch":
-            return "w-[calc(100%-3rem)] flex gap-1 justify-between";
+            return "w-full flex gap-4 my-2";
         case "Checkbox":
-            return "w-[calc(100%-3rem)] flex gap-2 ";
+            return "w-full flex gap-2 ";
         default:
-            return "w-[calc(100%-3rem)] flex flex-col gap-1";
+            return "w-full flex flex-col gap-2";
     }
 });
 </script>
 <template>
     <div :class="getClasses" v-if="fieldData.fieldtype == 'Switch'">
+        <RenderField
+            v-model="modelValue"
+            :field="fieldData"
+            :class="{ 'pointer-events-none': inEditMode }"
+        />
         <div class="flex flex-col gap-1">
             <div class="flex gap-2 items-start">
                 <input
+                    v-if="inEditMode"
                     placeholder="Label"
                     type="text"
                     v-model="fieldData.label"
                     class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
                 />
+                <label class="text-base" v-else>{{ fieldData.label }}</label>
                 <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
             </div>
             <small class="text-gray-500">
                 {{ fieldData.description }}
             </small>
         </div>
-        <RenderField :field="fieldData" class="pointer-events-none" />
     </div>
     <div :class="getClasses" v-else-if="fieldData.fieldtype == 'Checkbox'">
-        <RenderField :field="fieldData" class="pointer-events-none mt-1" />
-        <div class="flex flex-col">
+        <RenderField
+            v-model="modelValue"
+            :field="fieldData"
+            class="mt-1"
+            :class="{ 'pointer-events-none': inEditMode }"
+        />
+        <div class="flex flex-col gap-1">
+            <div class="flex gap-2 items-start">
+                <input
+                    v-if="inEditMode"
+                    placeholder="Label"
+                    type="text"
+                    v-model="fieldData.label"
+                    class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
+                />
+                <label class="text-base" v-else>{{ fieldData.label }}</label>
+                <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
+            </div>
+            <small class="text-gray-500">
+                {{ fieldData.description }}
+            </small>
+        </div>
+    </div>
+    <div v-else-if="fieldData.fieldtype == 'Text Editor'">
+        <div class="flex flex-col gap-1">
             <div class="flex gap-2 items-start">
                 <input
+                    v-if="inEditMode"
                     placeholder="Label"
                     type="text"
                     v-model="fieldData.label"
                     class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
                 />
+                <label class="text-base" v-else>{{ fieldData.label }}</label>
                 <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
             </div>
             <small class="text-gray-500">
                 {{ fieldData.description }}
             </small>
+            <RenderField
+                :model-value="modelValue"
+                :field="fieldData"
+                @change="(value) => (modelValue = value)"
+                :class="{ 'pointer-events-none': inEditMode }"
+            />
         </div>
     </div>
     <div v-else :class="getClasses">
         <div class="flex gap-2 items-start">
             <input
+                v-if="inEditMode"
                 placeholder="Label"
                 type="text"
                 v-model="fieldData.label"
                 class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
             />
+            <label class="text-base" v-else>{{ fieldData.label }}</label>
             <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
         </div>
-        <RenderField :field="fieldData" class="pointer-events-none" />
+        <RenderField
+            v-model="modelValue"
+            :field="fieldData"
+            :class="{ 'pointer-events-none': inEditMode }"
+        />
         <small class="text-gray-500">
             {{ fieldData.description }}
         </small>
diff --git a/frontend/src/components/submission/FormRenderer.vue b/frontend/src/components/submission/FormRenderer.vue
index f861163..c2f48a3 100644
--- a/frontend/src/components/submission/FormRenderer.vue
+++ b/frontend/src/components/submission/FormRenderer.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import { ErrorMessage, LoadingIndicator } from "frappe-ui";
+import { ErrorMessage, LoadingIndicator, Button } from "frappe-ui";
 import { useSubmissionForm } from "@/stores/submissionForm";
-import { formFields } from "@/utils/form_fields";
 
 const submissionFormStore = useSubmissionForm();
-
-const getComponent = (fieldtype: string) => {
-    return formFields.find((field) => field.name === fieldtype)?.component;
-};
 </script>
 <template>
     <div v-if="submissionFormStore.isLoading">
@@ -15,15 +10,10 @@ const getComponent = (fieldtype: string) => {
     </div>
     <div v-if="submissionFormStore.inFormSubmission" class="flex flex-col gap-4">
         <div v-for="field in submissionFormStore.formResource.data?.fields" :key="field.fieldname">
-            <component
-                :is="getComponent(field.fieldtype)"
+            <FieldRenderer
                 v-model="submissionFormStore.fields[field.fieldname]"
-                variant="outline"
-                :label="field.label"
-                :required="field.reqd"
-                :options="field.options"
-                :description="field.description"
-                :default="field.default"
+                :field="field"
+                :inEditMode="false"
             />
         </div>
         <hr />
@@ -40,7 +30,6 @@ const getComponent = (fieldtype: string) => {
                 variant="solid"
                 @click="
                     () => {
-                        console.log('submitForm');
                         submissionFormStore.submitForm();
                     }
                 "
diff --git a/frontend/src/utils/form_fields.ts b/frontend/src/utils/form_fields.ts
index e75bbd5..6d3d09f 100644
--- a/frontend/src/utils/form_fields.ts
+++ b/frontend/src/utils/form_fields.ts
@@ -100,7 +100,7 @@ export const TextareaField = {
 export const TextEditorField = {
   component: TextEditor,
   props: {
-    editorClass: "bg-surface-white w-full rounded-b form-description",
+    editorClass: "bg-surface-white w-full rounded-b form-description border rounded-b min-h-24",
     fixedMenu: true,
     bubbleMenu: true,
     starterkitOptions: {