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

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

Browse Source
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
1 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/app/json-editor/page.tsx
View File

@ -23,7 +23,7 @@ import { fetchCategories } from "@/lib/data";
import { Category } from "@/lib/types";
import { cn } from "@/lib/utils";
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 { toast } from "sonner";
import { z } from "zod";
@ -97,6 +97,21 @@ export default function JSONGenerator() {
toast.success("Copied metadata to clipboard");
}, [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(
(date: Date | undefined) => {
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">
{validationAlert}
<div className="relative">
{/* Copy Button */}
<Button
className="absolute right-2 top-2"
className="absolute right-10 top-2"
size="icon"
variant="outline"
onClick={handleCopy}
>
{isCopied ? (
<Check className="h-4 w-4" />
) : (
<Clipboard className="h-4 w-4" />
)}
{isCopied ? <Check className="h-4 w-4" /> : <Clipboard className="h-4 w-4" />}
</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">
{JSON.stringify(script, null, 2)}
</pre>