1
0
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-03-08 13:19:05 +00:00

Website: Add Download for json-editor (#2099)

This commit is contained in:
CanbiZ 2025-02-06 17:04:32 +01:00 committed by GitHub
parent 5a25348e04
commit 9c4e9ed4be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -23,7 +23,7 @@ import { fetchCategories } from "@/lib/data";
import { Category } from "@/lib/types"; import { Category } from "@/lib/types";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { format } from "date-fns"; import { format } from "date-fns";
import { CalendarIcon, Check, Clipboard } from "lucide-react"; import { CalendarIcon, Check, Clipboard, Download } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { z } from "zod"; import { z } from "zod";
@ -97,6 +97,21 @@ export default function JSONGenerator() {
toast.success("Copied metadata to clipboard"); toast.success("Copied metadata to clipboard");
}, [script]); }, [script]);
const handleDownload = useCallback(() => {
const jsonString = JSON.stringify(script, null, 2);
const blob = new Blob([jsonString], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `${script.slug || "script"}.json`;
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(url);
document.body.removeChild(a);
}, [script]);
const handleDateSelect = useCallback( const handleDateSelect = useCallback(
(date: Date | undefined) => { (date: Date | undefined) => {
updateScript("date_created", format(date || new Date(), "yyyy-MM-dd")); updateScript("date_created", format(date || new Date(), "yyyy-MM-dd"));
@ -313,18 +328,26 @@ export default function JSONGenerator() {
<div className="w-1/2 p-4 bg-background overflow-y-auto"> <div className="w-1/2 p-4 bg-background overflow-y-auto">
{validationAlert} {validationAlert}
<div className="relative"> <div className="relative">
{/* Copy Button */}
<Button <Button
className="absolute right-2 top-2" className="absolute right-10 top-2"
size="icon" size="icon"
variant="outline" variant="outline"
onClick={handleCopy} onClick={handleCopy}
> >
{isCopied ? ( {isCopied ? <Check className="h-4 w-4" /> : <Clipboard className="h-4 w-4" />}
<Check className="h-4 w-4" />
) : (
<Clipboard className="h-4 w-4" />
)}
</Button> </Button>
{/* Download Button */}
<Button
className="absolute right-2 top-2"
size="icon"
variant="outline"
onClick={handleDownload}
>
<Download className="h-4 w-4" />
</Button>
<pre className="mt-4 p-4 bg-secondary rounded shadow overflow-x-scroll"> <pre className="mt-4 p-4 bg-secondary rounded shadow overflow-x-scroll">
{JSON.stringify(script, null, 2)} {JSON.stringify(script, null, 2)}
</pre> </pre>