From a8d428d3ad5595e221ba0da02c6e1d299f210ae4 Mon Sep 17 00:00:00 2001
From: BennyKok <itechbenny@gmail.com>
Date: Fri, 12 Jan 2024 15:41:43 +0800
Subject: [PATCH] feat: make json editable

---
 .../custom-form/ModelPickerView.tsx           | 15 ++++++++++++---
 .../custom-form/SnapshotPickerView.tsx        | 19 +++++++++++--------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/web/src/components/custom-form/ModelPickerView.tsx b/web/src/components/custom-form/ModelPickerView.tsx
index 79d22aa..dd093af 100644
--- a/web/src/components/custom-form/ModelPickerView.tsx
+++ b/web/src/components/custom-form/ModelPickerView.tsx
@@ -16,6 +16,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { Check, ChevronsUpDown } from "lucide-react";
 import * as React from "react";
@@ -144,12 +145,20 @@ export function ModelPickerView({
         </PopoverContent>
       </Popover>
       {field.value && (
-        <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg mt-2">
-          <div className="max-h-[200px]">
+        <ScrollArea className="w-full bg-gray-100 mx-auto rounded-lg mt-2">
+          {/* <div className="max-h-[200px]">
             <pre className="p-2 rounded-md text-xs ">
               {JSON.stringify(field.value, null, 2)}
             </pre>
-          </div>
+          </div> */}
+          <Textarea
+            className="min-h-[150px] max-h-[300px] p-2 rounded-md text-xs w-full"
+            value={JSON.stringify(field.value, null, 2)}
+            onChange={(e) => {
+              // Update field.onChange to pass the array of selected models
+              field.onChange(JSON.parse(e.target.value));
+            }}
+          />
         </ScrollArea>
       )}
     </div>
diff --git a/web/src/components/custom-form/SnapshotPickerView.tsx b/web/src/components/custom-form/SnapshotPickerView.tsx
index 5e287a4..aa6849d 100644
--- a/web/src/components/custom-form/SnapshotPickerView.tsx
+++ b/web/src/components/custom-form/SnapshotPickerView.tsx
@@ -16,7 +16,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { findAllDeployments } from "@/server/curdDeploments";
 import { Check, ChevronsUpDown } from "lucide-react";
@@ -31,13 +31,16 @@ export function SnapshotPickerView({
       <SnapshotPresetPicker field={field} />
       <CustomNodesSelector field={field} />
       {field.value && (
-        <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg">
-          <div className="max-h-[200px] w-full">
-            <pre className="p-2 rounded-md text-xs w-full">
-              {JSON.stringify(field.value, null, 2)}
-            </pre>
-          </div>
-        </ScrollArea>
+        // <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg">
+        <Textarea
+          className="min-h-[150px] max-h-[300px] p-2 rounded-md text-xs w-full"
+          value={JSON.stringify(field.value, null, 2)}
+          onChange={(e) => {
+            // Update field.onChange to pass the array of selected models
+            field.onChange(JSON.parse(e.target.value));
+          }}
+        />
+        // </ScrollArea>
       )}
     </div>
   );