dev day #80

frontend/src/pages/admin/CommentsAdminPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import AdminLayout from '../../layouts/AdminLayout';
-import { Box, Heading, HStack, VStack, Button, Select, Input, Table, Thead, Tbody, Tr, Th, Td, Text, Badge, IconButton, useToast, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalCloseButton, useDisclosure, FormControl, FormLabel, NumberInput, NumberInputField } from '@chakra-ui/react';
+import { Box, Heading, HStack, VStack, Button, Select, Input, Table, Thead, Tbody, Tr, Th, Td, Text, Badge, IconButton, useToast, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalCloseButton, useDisclosure, FormControl, FormLabel, NumberInput, NumberInputField, Switch } from '@chakra-ui/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { adminListComments, adminUpdateCommentStatus, adminBanUser, adminListUnbanRequests, adminResolveUnban } from '../../services/admin/comments';
 import { deleteComment } from '../../services/comments';
@@ -12,6 +12,7 @@ const CommentsAdminPage: React.FC = () => {
   const [targetId, setTargetId] = React.useState<string>('');
   const [userId, setUserId] = React.useState<string>('');
   const [page, setPage] = React.useState<number>(1);
+  const [reportedOnly, setReportedOnly] = React.useState<boolean>(false);
   const toast = useToast();
   const qc = useQueryClient();
 
@@ -49,7 +50,11 @@ const CommentsAdminPage: React.FC = () => {
     onSuccess: async () => { await qc.invalidateQueries({ queryKey: ['admin-unban-requests'] }); toast({ status: 'success', title: 'Vyřízeno' }); },
   });
 
-  const items = listQ.data?.items || [];
+  const itemsAll = listQ.data?.items || [];
+  const items = React.useMemo(() => {
+    if (!reportedOnly) return itemsAll;
+    return itemsAll.filter((c: any) => (c as any).reports && (c as any).reports > 0);
+  }, [itemsAll, reportedOnly]);
 
   return (
     <AdminLayout>
@@ -69,6 +74,10 @@ const CommentsAdminPage: React.FC = () => {
             </Select>
             <Input placeholder="Target ID" value={targetId} onChange={(e) => { setTargetId(e.target.value); setPage(1); }} maxW="200px" />
             <Input placeholder="User ID" value={userId} onChange={(e) => { setUserId(e.target.value); setPage(1); }} maxW="200px" />
+            <HStack>
+              <Text fontSize="sm" color="gray.500">Jen nahlášené</Text>
+              <Switch isChecked={reportedOnly} onChange={(e)=>setReportedOnly(e.target.checked)} />
+            </HStack>
           </HStack>
         </VStack>
 
@@ -81,6 +90,7 @@ const CommentsAdminPage: React.FC = () => {
                 <Th>Cíl</Th>
                 <Th>Obsah</Th>
                 <Th>Spam</Th>
+                <Th>Hlášení</Th>
                 <Th>Status</Th>
                 <Th>Akce</Th>
               </Tr>
@@ -93,6 +103,7 @@ const CommentsAdminPage: React.FC = () => {
                   <Td><Badge>{c.target_type}</Badge> <Text as="span">{c.target_id}</Text></Td>
                   <Td maxW="420px"><Text noOfLines={2}>{c.content}</Text></Td>
                   <Td>{(c as any).spam_score ? <Badge colorScheme={(c as any).spam_score > 0.5 ? 'orange' : 'green'}>{(c as any).spam_score.toFixed(2)}</Badge> : '-'}</Td>
+                  <Td>{(c as any).reports ? <Badge colorScheme={(c as any).reports > 2 ? 'red' : 'yellow'}>{(c as any).reports}</Badge> : '-'}</Td>
                   <Td>
                     <HStack>
                       <Button size="xs" variant={c.status === 'visible' ? 'solid' : 'outline'} onClick={() => updateStatusMut.mutate({ id: c.id, s: 'visible' })}>Viditelné</Button>
@@ -111,6 +122,14 @@ const CommentsAdminPage: React.FC = () => {
           </Table>
         </Box>
 
+        <HStack mt={3} justify="space-between">
+          <Text fontSize="sm" color="gray.500">Stránka {page} • {listQ.data?.total || 0} komentářů</Text>
+          <HStack>
+            <Button size="sm" variant="outline" onClick={() => setPage(p => Math.max(1, p - 1))} isDisabled={page <= 1}>Předchozí</Button>
+            <Button size="sm" variant="outline" onClick={() => setPage(p => p + 1)} isDisabled={(itemsAll.length === 0) || ((itemsAll.length < 50) && (listQ.data?.total || 0) <= (page * 50))}>Další</Button>
+          </HStack>
+        </HStack>
+
         <Heading size="sm" mt={6} mb={2}>Žádosti o odblokování</Heading>
         <Box borderWidth="1px" borderRadius="md" overflowX="auto">
           <Table size="sm">
@@ -160,6 +179,12 @@ const CommentsAdminPage: React.FC = () => {
                     <NumberInputField />
                   </NumberInput>
                 </FormControl>
+                <HStack>
+                  <Text fontSize="sm" color="gray.500">Rychlá volba:</Text>
+                  <Button size="xs" variant="outline" onClick={()=>setBanHours(24)}>24h</Button>
+                  <Button size="xs" variant="outline" onClick={()=>setBanHours(24*7)}>7 dní</Button>
+                  <Button size="xs" variant="outline" onClick={()=>setBanHours(0)}>Trvale</Button>
+                </HStack>
               </VStack>
             </ModalBody>
             <ModalFooter>