martin/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE synced 2025-02-14 11:49:16 +00:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

Refactor CommandMenu component to utilize updated Category and Script types, simplifying the sorting logic and enhancing clarity

Browse Source
This commit is contained in:
Bram Suurd 2024-11-06 17:32:16 +01:00
parent 5a633a145a
commit 2261790fd1
1 changed files with 10 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/CommandMenu.tsx
View File

@ -14,24 +14,6 @@ import React, { useEffect } from "react";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { DialogTitle } from "./ui/dialog"; import { DialogTitle } from "./ui/dialog";
const sortCategories = (categories: Category[]): Category[] => {
return categories.sort((a: Category, b: Category) => {
if (
a.catagoryName === "Proxmox VE Tools" &&
b.catagoryName !== "Proxmox VE Tools"
) {
return -1;
} else if (
a.catagoryName !== "Proxmox VE Tools" &&
b.catagoryName === "Proxmox VE Tools"
) {
return 1;
} else {
return a.catagoryName.localeCompare(b.catagoryName);
}
});
};
export default function CommandMenu() { export default function CommandMenu() {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const [links, setLinks] = React.useState<Category[]>([]); const [links, setLinks] = React.useState<Category[]>([]);
@ -57,8 +39,7 @@ export default function CommandMenu() {
) )
.then((response) => response.json()) .then((response) => response.json())
.then((categories) => { .then((categories) => {
const sortedCategories = sortCategories(categories); setLinks(categories);
setLinks(sortedCategories);
setIsLoading(false); setIsLoading(false);
}) })
.catch((error) => { .catch((error) => {
@ -91,21 +72,21 @@ export default function CommandMenu() {
<CommandEmpty>{isLoading ? "Loading..." : "No scripts found."}</CommandEmpty> <CommandEmpty>{isLoading ? "Loading..." : "No scripts found."}</CommandEmpty>
{links.map((category) => ( {links.map((category) => (
<CommandGroup <CommandGroup
key={"category:" + category.catagoryName} key={"category:" + category.name}
heading={category.catagoryName} heading={category.name}
> >
{category.expand.items.map((script) => ( {category.scripts.map((script) => (
<CommandItem <CommandItem
key={"script:" + script.id} key={"script:" + script.name}
value={script.title} value={script.name}
onSelect={() => { onSelect={() => {
setOpen(false); setOpen(false);
router.push(`/scripts?id=${script.title}`); router.push(`/scripts?id=${script.name}`);
}} }}
> >
<div className="flex gap-2" onClick={() => setOpen(false)}> <div className="flex gap-2" onClick={() => setOpen(false)}>
<Image <Image
src={script.logo} src={script.logo || "/logo.png"}
unoptimized unoptimized
height={16} height={16}
onError={(e) => onError={(e) =>
@ -116,9 +97,9 @@ export default function CommandMenu() {
alt="" alt=""
className="h-5 w-5" className="h-5 w-5"
/> />
<span>{script.title}</span> <span>{script.name}</span>
<span className="text-sm text-muted-foreground"> <span className="text-sm text-muted-foreground">
{script.item_type} {script.type}
</span> </span>
</div> </div>
</CommandItem> </CommandItem>