feat: make json editable
This commit is contained in:
		
							parent
							
								
									ac6e863b95
								
							
						
					
					
						commit
						a8d428d3ad
					
				@ -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>
 | 
				
			||||||
 | 
				
			|||||||
@ -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>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user