d-bis/ProxmoxVE
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add search filtering to CommandDialog for improved script search functionality (#10800)

Browse Source
This commit is contained in:
Bram
2026-01-14 10:08:44 +01:00
committed by GitHub
parent 277d1ed5a2
commit bf648203f0
2 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/command-menu.tsx
View File

@@ -194,7 +194,20 @@ function CommandMenu() {
</TooltipProvider>
</div>
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandDialog
open={open}
onOpenChange={setOpen}
filter={(value: string, search: string) => {
const searchLower = search.toLowerCase().trim();
if (!searchLower)
return 1;
const valueLower = value.toLowerCase();
const searchWords = searchLower.split(/\s+/).filter(Boolean);
// All search words must appear somewhere in the value (name + description)
const allWordsMatch = searchWords.every((word: string) => valueLower.includes(word));
return allWordsMatch ? 1 : 0;
}}
>
<DialogTitle className="sr-only">Search scripts</DialogTitle>
<CommandInput placeholder="Search for a script..." />
<CommandList>
@@ -204,7 +217,7 @@ function CommandMenu() {
{scripts.map(script => (
<CommandItem
key={`script:${script.slug}`}
value={`${script.name}-${script.type}`}
value={`${script.name} ${script.type} ${script.description || ""}`}
onSelect={() => {
setOpen(false);
router.push(`/scripts?id=${script.slug}`);

11
frontend/src/components/ui/command.tsx
View File

@@ -24,13 +24,18 @@ const Command = React.forwardRef<
));
Command.displayName = CommandPrimitive.displayName;
type CommandDialogProps = {} & DialogProps;
type CommandDialogProps = {
filter?: (value: string, search: string, keywords?: string[]) => number;
} & DialogProps;
function CommandDialog({ children, ...props }: CommandDialogProps) {
function CommandDialog({ children, filter, ...props }: CommandDialogProps) {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0 shadow-lg">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
<Command
filter={filter}
className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
>
{children}
</Command>
</DialogContent>