feat: make json editable

This commit is contained in:
BennyKok 2024-01-12 15:41:43 +08:00
parent ac6e863b95
commit a8d428d3ad
2 changed files with 23 additions and 11 deletions

View File

@ -16,6 +16,7 @@ import {
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Check, ChevronsUpDown } from "lucide-react"; import { Check, ChevronsUpDown } from "lucide-react";
import * as React from "react"; import * as React from "react";
@ -144,12 +145,20 @@ export function ModelPickerView({
</PopoverContent> </PopoverContent>
</Popover> </Popover>
{field.value && ( {field.value && (
<ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg mt-2"> <ScrollArea className="w-full bg-gray-100 mx-auto rounded-lg mt-2">
<div className="max-h-[200px]"> {/* <div className="max-h-[200px]">
<pre className="p-2 rounded-md text-xs "> <pre className="p-2 rounded-md text-xs ">
{JSON.stringify(field.value, null, 2)} {JSON.stringify(field.value, null, 2)}
</pre> </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> </ScrollArea>
)} )}
</div> </div>

View File

@ -16,7 +16,7 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { ScrollArea } from "@/components/ui/scroll-area"; import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { findAllDeployments } from "@/server/curdDeploments"; import { findAllDeployments } from "@/server/curdDeploments";
import { Check, ChevronsUpDown } from "lucide-react"; import { Check, ChevronsUpDown } from "lucide-react";
@ -31,13 +31,16 @@ export function SnapshotPickerView({
<SnapshotPresetPicker field={field} /> <SnapshotPresetPicker field={field} />
<CustomNodesSelector field={field} /> <CustomNodesSelector field={field} />
{field.value && ( {field.value && (
<ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg"> // <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg">
<div className="max-h-[200px] w-full"> <Textarea
<pre className="p-2 rounded-md text-xs w-full"> className="min-h-[150px] max-h-[300px] p-2 rounded-md text-xs w-full"
{JSON.stringify(field.value, null, 2)} value={JSON.stringify(field.value, null, 2)}
</pre> onChange={(e) => {
</div> // Update field.onChange to pass the array of selected models
</ScrollArea> field.onChange(JSON.parse(e.target.value));
}}
/>
// </ScrollArea>
)} )}
</div> </div>
); );