dev day #89

frontend/src/pages/PlayersPage.tsx

@@ -1,4 +1,4 @@
-import { Box, Container, Heading, HStack, Image, SimpleGrid, Spinner, Stack, Text, VStack, useColorModeValue, Badge } from '@chakra-ui/react';
+import { Box, Container, Heading, HStack, Image, SimpleGrid, Spinner, Stack, Text, VStack, useColorModeValue, Badge, Input, Select, Checkbox, InputGroup, InputLeftElement } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { getPlayers } from '../services/public';
 import type { Player } from '../services/public';
@@ -6,14 +6,43 @@ import { assetUrl } from '../utils/url';
 import { Link as RouterLink } from 'react-router-dom';
 import MainLayout from '../components/layout/MainLayout';
 import NewsletterCTA from '../components/common/NewsletterCTA';
-import { translateNationality, getCountryFlag } from '../utils/nationality';
+// nationality display removed per requirements
+import { useMemo, useState } from 'react';
+import { SearchIcon } from '@chakra-ui/icons';
 
 const PlayersPage: React.FC = () => {
-  const { data, isLoading, isError } = useQuery<Player[]>({ queryKey: ['players'], queryFn: getPlayers });
+  const { data, isLoading, isError } = useQuery<Player[]>({ queryKey: ['players'], queryFn: () => getPlayers() });
   const cardBg = useColorModeValue('white', 'gray.800');
   const borderColor = useColorModeValue('gray.200', 'gray.700');
   const textSecondary = useColorModeValue('gray.600', 'gray.400');
 
+  const [q, setQ] = useState('');
+  const [gender, setGender] = useState('');
+  const [position, setPosition] = useState('');
+  const [activeOnly, setActiveOnly] = useState(true);
+
+  const positions = useMemo(() => {
+    const all = (data || []).map(p => p.position).filter(Boolean) as string[];
+    return Array.from(new Set(all));
+  }, [data]);
+
+  const filtered = useMemo(() => {
+    let list = (data || []).slice();
+    if (activeOnly) list = list.filter(p => p.is_active !== false);
+    if (gender) list = list.filter(p => (p.gender || '').toLowerCase() === gender);
+    if (position) list = list.filter(p => (p.position || '') === position);
+    if (q.trim()) {
+      const needle = q.trim().toLowerCase();
+      list = list.filter(p => {
+        const name = `${p.first_name} ${p.last_name}`.trim().toLowerCase();
+        const pos = (p.position || '').toLowerCase();
+        const jersey = typeof p.jersey_number === 'number' ? String(p.jersey_number) : '';
+        return name.includes(needle) || pos.includes(needle) || jersey.includes(needle);
+      });
+    }
+    return list;
+  }, [data, q, gender, position, activeOnly]);
+
   if (isLoading) {
     return (
       <MainLayout>
@@ -40,8 +69,28 @@ const PlayersPage: React.FC = () => {
         <Container maxW="7xl" py={{ base: 6, md: 10 }}>
           <VStack align="stretch" spacing={6}>
             <Heading as="h1" size={{ base: 'xl', md: '2xl' }}>Hráči</Heading>
+            <SimpleGrid columns={{ base: 1, md: 4 }} spacing={4}>
+              <InputGroup>
+                <InputLeftElement pointerEvents="none">
+                  <SearchIcon color="gray.400" />
+                </InputLeftElement>
+                <Input value={q} onChange={(e)=>setQ(e.target.value)} placeholder="Hledat jméno, číslo, pozici" />
+              </InputGroup>
+              <Select value={gender} onChange={(e)=>setGender(e.target.value)} placeholder="Pohlaví">
+                <option value="men">Muž</option>
+                <option value="women">Žena</option>
+              </Select>
+              <Select value={position} onChange={(e)=>setPosition(e.target.value)} placeholder="Pozice">
+                {positions.map((pos)=> (
+                  <option key={pos} value={pos}>{pos}</option>
+                ))}
+              </Select>
+              <HStack>
+                <Checkbox isChecked={activeOnly} onChange={(e)=>setActiveOnly(e.target.checked)}>Pouze aktivní</Checkbox>
+              </HStack>
+            </SimpleGrid>
             <SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={6}>
-              {data?.map((p) => (
+              {filtered.map((p) => (
                 <Stack
                   key={p.id}
                   as={RouterLink}
@@ -69,12 +118,7 @@ const PlayersPage: React.FC = () => {
                   </Box>
                   <Text fontWeight="bold" fontSize="lg">{p.first_name} {p.last_name}</Text>
                   <Text color={textSecondary}>{p.position}</Text>
-                  {p.nationality ? (
-                    <HStack spacing={2} color={textSecondary}>
-                      <Text as="span" fontSize="lg">{getCountryFlag(p.nationality)}</Text>
-                      <Text>{translateNationality(p.nationality)}</Text>
-                    </HStack>
-                  ) : null}
+                  {/* Národnost skryta */}
                 </Stack>
               ))}
             </SimpleGrid>