#591 - sites [wip]

2025-07-03 15:02:34 +00:00 · 2025-05-25 22:17:19 +02:00
parent ff11fb44e0
commit f5fdbae4ac
77 changed files with 2156 additions and 414 deletions
--- a/resources/js/pages/servers/components/server-select.tsx
+++ b/resources/js/pages/servers/components/server-select.tsx
@ -0,0 +1,93 @@
+import { Server } from '@/types/server';
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
+import { cn } from '@/lib/utils';
+import axios from 'axios';
+
+export default function ServerSelect({ value, onValueChange }: { value: string; onValueChange: (selectedServer: Server) => void }) {
+  const [query, setQuery] = useState('');
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<string>(value);
+
+  useEffect(() => {
+    setSelected(value);
+  }, [value]);
+
+  const {
+    data: servers = [],
+    isFetching,
+    refetch,
+  } = useQuery<Server[]>({
+    queryKey: ['servers', query],
+    queryFn: async () => {
+      const response = await axios.get(route('servers.json', { query: query }));
+      return response.data;
+    },
+    enabled: false,
+  });
+
+  const onOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (open) {
+      refetch();
+    }
+  };
+
+  useEffect(() => {
+    if (open && query !== '') {
+      const timeoutId = setTimeout(() => {
+        refetch();
+      }, 300); // Debounce search
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [query, open, refetch]);
+
+  const selectedServer = servers.find((server) => server.id === parseInt(selected));
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between">
+          {selectedServer ? selectedServer.name : 'Select server...'}
+          <ChevronsUpDownIcon className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" align="start">
+        <Command shouldFilter={false}>
+          <CommandInput placeholder="Search server..." value={query} onValueChange={setQuery} />
+          <CommandList>
+            <CommandEmpty>{isFetching ? 'Searching...' : query === '' ? 'Start typing to search servers' : 'No servers found.'}</CommandEmpty>
+            <CommandGroup>
+              {servers.map((server) => (
+                <CommandItem
+                  key={`server-select-${server.id}`}
+                  value={server.id.toString()}
+                  onSelect={(currentValue) => {
+                    const newSelected = currentValue === selected ? '' : currentValue;
+                    setSelected(newSelected);
+                    setOpen(false);
+                    if (newSelected) {
+                      const server = servers.find((s) => s.id.toString() === newSelected);
+                      if (server) {
+                        onValueChange(server);
+                      }
+                    }
+                  }}
+                  className="truncate"
+                >
+                  {server.name} ({server.ip})
+                  <CheckIcon className={cn('ml-auto', selected && parseInt(selected) === server.id ? 'opacity-100' : 'opacity-0')} />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}