fix json editor slug generating

frontend/src/app/json-editor/_components/InstallMethod.tsx

@@ -1,12 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { OperatingSystems } from "@/config/siteConfig";
 import { PlusCircle, Trash2 } from "lucide-react";
 import { memo, useCallback, useRef } from "react";
@@ -20,21 +14,31 @@ type InstallMethodProps = {
   setZodErrors: (zodErrors: z.ZodError | null) => void;
 };
 
-function InstallMethod({
+function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallMethodProps) {
-  script,
-  setScript,
-  setIsValid,
-  setZodErrors,
-}: InstallMethodProps) {
   const cpuRefs = useRef<(HTMLInputElement | null)[]>([]);
   const ramRefs = useRef<(HTMLInputElement | null)[]>([]);
   const hddRefs = useRef<(HTMLInputElement | null)[]>([]);
 
   const addInstallMethod = useCallback(() => {
     setScript((prev) => {
+      const { type, slug } = prev;
+      const newMethodType = "default";
+
+      let scriptPath = "";
+
+      if (type === "pve") {
+        scriptPath = `tools/pve/${slug}.sh`;
+      } else if (type === "addon") {
+        scriptPath = `tools/addon/${slug}.sh`;
+      } else if (newMethodType === "alpine") {
+        scriptPath = `${type}/alpine-${slug}.sh`;
+      } else {
+        scriptPath = `${type}/${slug}.sh`;
+      }
+
       const method = InstallMethodSchema.parse({
-        type: "default",
+        type: newMethodType,
-        script: `${prev.type}/${prev.slug}.sh`,
+        script: scriptPath,
         resources: {
           cpu: null,
           ram: null,
@@ -43,6 +47,7 @@ function InstallMethod({
           version: null,
         },
       });
+
       return {
         ...prev,
         install_methods: [...prev.install_methods, method],
@@ -63,9 +68,7 @@ function InstallMethod({
 
             if (key === "type") {
               updatedMethod.script =
-                value === "alpine"
+                value === "alpine" ? `${prev.type}/alpine-${prev.slug}.sh` : `${prev.type}/${prev.slug}.sh`;
-                  ? `${prev.type}/alpine-${prev.slug}.sh`
-                  : `${prev.type}/${prev.slug}.sh`;
 
               // Set OS to Alpine and reset version if type is alpine
               if (value === "alpine") {
@@ -112,10 +115,7 @@ function InstallMethod({
       <h3 className="text-xl font-semibold">Install Methods</h3>
       {script.install_methods.map((method, index) => (
         <div key={index} className="space-y-2 border p-4 rounded">
-          <Select
+          <Select value={method.type} onValueChange={(value) => updateInstallMethod(index, "type", value)}>
-            value={method.type}
-            onValueChange={(value) => updateInstallMethod(index, "type", value)}
-          >
             <SelectTrigger>
               <SelectValue placeholder="Type" />
             </SelectTrigger>
@@ -205,9 +205,7 @@ function InstallMethod({
                 <SelectValue placeholder="Version" />
               </SelectTrigger>
               <SelectContent>
-                {OperatingSystems.find(
+                {OperatingSystems.find((os) => os.name === method.resources.os)?.versions.map((version) => (
-                  (os) => os.name === method.resources.os,
-                )?.versions.map((version) => (
                   <SelectItem key={version.slug} value={version.name}>
                     {version.name}
                   </SelectItem>
@@ -215,22 +213,12 @@ function InstallMethod({
               </SelectContent>
             </Select>
           </div>
-          <Button
+          <Button variant="destructive" size="sm" type="button" onClick={() => removeInstallMethod(index)}>
-            variant="destructive"
-            size="sm"
-            type="button"
-            onClick={() => removeInstallMethod(index)}
-          >
             <Trash2 className="mr-2 h-4 w-4" /> Remove Install Method
           </Button>
         </div>
       ))}
-      <Button
+      <Button type="button" size="sm" disabled={script.install_methods.length >= 2} onClick={addInstallMethod}>
-        type="button"
-        size="sm"
-        disabled={script.install_methods.length >= 2}
-        onClick={addInstallMethod}
-      >
         <PlusCircle className="mr-2 h-4 w-4" /> Add Install Method
       </Button>
     </>

frontend/src/app/json-editor/page.tsx

@@ -60,14 +60,25 @@ export default function JSONGenerator() {
     setScript((prev) => {
       const updated = { ...prev, [key]: value };
 
-      if (key === "type" || key === "slug") {
+      if (updated.slug && updated.type) {
-        updated.install_methods = updated.install_methods.map((method) => ({
+        updated.install_methods = updated.install_methods.map((method) => {
+          let scriptPath = "";
+
+          if (updated.type === "pve") {
+            scriptPath = `tools/pve/${updated.slug}.sh`;
+          } else if (updated.type === "addon") {
+            scriptPath = `tools/addon/${updated.slug}.sh`;
+          } else if (method.type === "alpine") {
+            scriptPath = `${updated.type}/alpine-${updated.slug}.sh`;
+          } else {
+            scriptPath = `${updated.type}/${updated.slug}.sh`;
+          }
+
+          return {
             ...method,
-          script:
+            script: scriptPath,
-            method.type === "alpine"
+          };
-              ? `${updated.type}/alpine-${updated.slug}.sh`
+        });
-              : `${updated.type}/${updated.slug}.sh`,
-        }));
       }
 
       const result = ScriptSchema.safeParse(updated);