From c3d2d7052918294ceaf0427dc35e935a5312388d Mon Sep 17 00:00:00 2001
From: Farzad Jambor Shabestari <84526926+BenGix@users.noreply.github.com>
Date: Sun, 24 Nov 2024 22:52:15 +0330
Subject: [PATCH] Dynamic Creation Form (#113)

---
 panther/panel/templates/create.html | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/panther/panel/templates/create.html b/panther/panel/templates/create.html
index 47d785f..c2bfc3d 100644
--- a/panther/panel/templates/create.html
+++ b/panther/panel/templates/create.html
@@ -25,19 +25,18 @@ <h1 class="text-2xl font-semibold mb-6">Create New Record</h1>
     </div>
 
     <script>
-      // Example fields object
-      const fields = [
-        { title: 'Id', type: ['string', 'null'], required: false },
-        { title: 'Books', type: ['array'], required: true },
-        { title: 'Is Male', type: ['boolean', 'null'], required: true },
-        { title: 'Name', type: ['string'], required: true },
-        { title: 'Person', type: ['$Person', 'null'], required: false },
-      ];
+      const fields = JSON.parse('{{fields|tojson|safe}}');
+      const fieldsObject = fields.fields;
+      const fieldsArray = Object.entries(fieldsObject).map(([key, value]) => ({
+        title: value.title || key,
+        type: value.type || [],
+        required: value.required || false,
+      }));
 
       const dynamicInputsContainer = document.getElementById('dynamicInputs');
 
       function generateInputs() {
-        fields.forEach(({ title, type, required }) => {
+        fieldsArray.forEach(({ title, type, required }) => {
           let inputField;
 
           if (Array.isArray(type)) {