Split Tickets.tsx (631 lines) into focused sub-components
Extracted TicketFilters, BulkActions, and TicketListItem into client/src/pages/tickets/. The main Tickets.tsx remains as the page orchestrator with state management and pagination. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,377 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { useShortcut } from '../../hooks/useShortcuts';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import Layout from '../../components/Layout';
|
||||
import { TicketStatus } from '../../types';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import {
|
||||
useTicketsPaged,
|
||||
useBulkTickets,
|
||||
useSavedViews,
|
||||
useCreateSavedView,
|
||||
useDeleteSavedView,
|
||||
useUsers,
|
||||
} from '../../api/queries';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import TicketFilters from './TicketFilters';
|
||||
import BulkActions from './BulkActions';
|
||||
import TicketListItem from './TicketListItem';
|
||||
|
||||
const PAGE_SIZE = 25;
|
||||
const BULK_LIMIT = 500;
|
||||
|
||||
export default function Tickets() {
|
||||
const [params, setParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const { user: authUser } = useAuth();
|
||||
const { data: users = [] } = useUsers();
|
||||
|
||||
const status = (params.get('status') ?? '') as TicketStatus | '';
|
||||
const severity = params.get('severity') ?? '';
|
||||
const assigneeId = params.get('assigneeId') ?? '';
|
||||
const categoryId = params.get('categoryId') ?? '';
|
||||
const typeId = params.get('typeId') ?? '';
|
||||
const itemId = params.get('itemId') ?? '';
|
||||
const search = params.get('search') ?? '';
|
||||
const page = Math.max(1, Number(params.get('page') ?? '1'));
|
||||
|
||||
const [searchInput, setSearchInput] = useState(search);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [cursor, setCursor] = useState<number>(-1);
|
||||
const [saveOpen, setSaveOpen] = useState(false);
|
||||
const [newViewName, setNewViewName] = useState('');
|
||||
const [confirmBulk, setConfirmBulk] = useState<
|
||||
| { kind: 'close' | 'setSeverity' | 'reassign'; value?: unknown; label: string }
|
||||
| null
|
||||
>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => {
|
||||
if (search !== searchInput) {
|
||||
updateParam('search', searchInput);
|
||||
updateParam('page', '1');
|
||||
}
|
||||
}, 250);
|
||||
return () => clearTimeout(t);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [searchInput]);
|
||||
|
||||
const updateParam = (key: string, value: string | null) => {
|
||||
setParams(
|
||||
(prev) => {
|
||||
const next = new URLSearchParams(prev);
|
||||
if (value === null || value === '') next.delete(key);
|
||||
else next.set(key, value);
|
||||
if (key !== 'page') next.delete('page');
|
||||
return next;
|
||||
},
|
||||
{ replace: true },
|
||||
);
|
||||
};
|
||||
|
||||
const queryParams = {
|
||||
status: status || undefined,
|
||||
severity: severity ? Number(severity) : undefined,
|
||||
assigneeId: assigneeId || undefined,
|
||||
categoryId: categoryId || undefined,
|
||||
typeId: typeId || undefined,
|
||||
itemId: itemId || undefined,
|
||||
search: search || undefined,
|
||||
page,
|
||||
pageSize: PAGE_SIZE,
|
||||
};
|
||||
|
||||
const { data, isLoading, isFetching } = useTicketsPaged(queryParams);
|
||||
const tickets = data?.data ?? [];
|
||||
const total = data?.total ?? 0;
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
||||
|
||||
const savedViewsQ = useSavedViews();
|
||||
const createView = useCreateSavedView();
|
||||
const deleteView = useDeleteSavedView();
|
||||
const bulk = useBulkTickets();
|
||||
|
||||
const allVisible = tickets.length > 0 && tickets.every((t) => selected.has(t.id));
|
||||
const someVisible = tickets.some((t) => selected.has(t.id));
|
||||
|
||||
const toggleAll = () => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (allVisible) tickets.forEach((t) => next.delete(t.id));
|
||||
else tickets.forEach((t) => next.add(t.id));
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleOne = (id: string) => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const clearSelected = () => setSelected(new Set());
|
||||
|
||||
const currentFilters = useMemo(
|
||||
() => ({
|
||||
status: status || undefined,
|
||||
severity: severity ? Number(severity) : undefined,
|
||||
assigneeId: assigneeId || undefined,
|
||||
categoryId: categoryId || undefined,
|
||||
typeId: typeId || undefined,
|
||||
itemId: itemId || undefined,
|
||||
search: search || undefined,
|
||||
}),
|
||||
[status, severity, assigneeId, categoryId, typeId, itemId, search],
|
||||
);
|
||||
|
||||
const runBulk = async (payload: { action: string; value?: unknown }) => {
|
||||
const ids = Array.from(selected).slice(0, BULK_LIMIT);
|
||||
try {
|
||||
const res = (await bulk.mutateAsync({ ids, ...payload })) as { updated?: number };
|
||||
toast.success(`Updated ${res.updated ?? ids.length} ticket${ids.length === 1 ? '' : 's'}`);
|
||||
clearSelected();
|
||||
} catch (e) {
|
||||
toast.error((e as Error).message || 'Bulk action failed');
|
||||
} finally {
|
||||
setConfirmBulk(null);
|
||||
}
|
||||
};
|
||||
|
||||
const activeCount = Object.values(currentFilters).filter(Boolean).length;
|
||||
|
||||
const handleSaveView = async () => {
|
||||
if (!newViewName.trim()) return;
|
||||
try {
|
||||
await createView.mutateAsync({
|
||||
name: newViewName.trim(),
|
||||
filters: currentFilters,
|
||||
});
|
||||
toast.success('Saved view');
|
||||
setNewViewName('');
|
||||
setSaveOpen(false);
|
||||
} catch (e) {
|
||||
toast.error((e as Error).message || 'Failed to save view');
|
||||
}
|
||||
};
|
||||
|
||||
const applyView = (filters: Record<string, unknown>) => {
|
||||
const next = new URLSearchParams();
|
||||
Object.entries(filters).forEach(([k, v]) => {
|
||||
if (v !== undefined && v !== null && v !== '') next.set(k, String(v));
|
||||
});
|
||||
setParams(next, { replace: true });
|
||||
setSearchInput(String(filters.search ?? ''));
|
||||
};
|
||||
|
||||
// Keyboard navigation
|
||||
useEffect(() => {
|
||||
setCursor((c) => (c >= tickets.length ? tickets.length - 1 : c));
|
||||
}, [tickets.length]);
|
||||
|
||||
useShortcut('j', (e) => {
|
||||
if (tickets.length === 0) return;
|
||||
e.preventDefault();
|
||||
setCursor((c) => Math.min(tickets.length - 1, c < 0 ? 0 : c + 1));
|
||||
}, [tickets.length]);
|
||||
|
||||
useShortcut('k', (e) => {
|
||||
if (tickets.length === 0) return;
|
||||
e.preventDefault();
|
||||
setCursor((c) => Math.max(0, c < 0 ? 0 : c - 1));
|
||||
}, [tickets.length]);
|
||||
|
||||
useShortcut('enter', (e) => {
|
||||
if (cursor < 0 || cursor >= tickets.length) return;
|
||||
e.preventDefault();
|
||||
navigate(`/${tickets[cursor].displayId}`);
|
||||
}, [cursor, tickets]);
|
||||
|
||||
useShortcut('x', (e) => {
|
||||
if (cursor < 0 || cursor >= tickets.length) return;
|
||||
e.preventDefault();
|
||||
toggleOne(tickets[cursor].id);
|
||||
}, [cursor, tickets]);
|
||||
|
||||
return (
|
||||
<Layout wide>
|
||||
<TicketFilters
|
||||
status={status}
|
||||
severity={severity}
|
||||
assigneeId={assigneeId}
|
||||
categoryId={categoryId}
|
||||
typeId={typeId}
|
||||
itemId={itemId}
|
||||
searchInput={searchInput}
|
||||
onSearchChange={setSearchInput}
|
||||
onUpdateParam={updateParam}
|
||||
onSetParams={(fn) => setParams(fn, { replace: true })}
|
||||
authUser={authUser}
|
||||
users={users}
|
||||
savedViews={savedViewsQ.data ?? []}
|
||||
onDeleteView={(id) => deleteView.mutate(id)}
|
||||
onApplyView={applyView}
|
||||
onSaveView={() => setSaveOpen(true)}
|
||||
activeFilterCount={activeCount}
|
||||
total={total}
|
||||
isFetching={isFetching}
|
||||
/>
|
||||
|
||||
{selected.size > 0 && (
|
||||
<BulkActions
|
||||
selectedCount={selected.size}
|
||||
users={users}
|
||||
onClear={clearSelected}
|
||||
onConfirm={setConfirmBulk}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Ticket list */}
|
||||
{isLoading ? (
|
||||
<div className="text-center py-16 text-muted-foreground text-sm">Loading…</div>
|
||||
) : tickets.length === 0 ? (
|
||||
<div className="text-center py-16 text-muted-foreground text-sm">No tickets found</div>
|
||||
) : (
|
||||
<div className="rounded-md border border-border overflow-hidden">
|
||||
<div className="flex items-center gap-3 px-4 py-2 bg-card text-xs text-muted-foreground border-b border-border">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allVisible}
|
||||
aria-label="Select all on page"
|
||||
ref={(el) => {
|
||||
if (el) el.indeterminate = !allVisible && someVisible;
|
||||
}}
|
||||
onChange={toggleAll}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
<span>
|
||||
{tickets.length} of {total}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="divide-y divide-border">
|
||||
{tickets.map((ticket, idx) => (
|
||||
<TicketListItem
|
||||
key={ticket.id}
|
||||
ticket={ticket}
|
||||
selected={selected.has(ticket.id)}
|
||||
focused={idx === cursor}
|
||||
onToggle={() => toggleOne(ticket.id)}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-4 text-sm">
|
||||
<div className="text-muted-foreground">
|
||||
Page {page} of {totalPages}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
disabled={page <= 1}
|
||||
onClick={() => updateParam('page', String(page - 1))}
|
||||
className="p-1.5 rounded-md hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<button
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => updateParam('page', String(page + 1))}
|
||||
className="p-1.5 rounded-md hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Save view dialog */}
|
||||
<Dialog open={saveOpen} onOpenChange={setSaveOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Save current filters</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-2">
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
value={newViewName}
|
||||
onChange={(e) => setNewViewName(e.target.value)}
|
||||
placeholder="View name"
|
||||
className="w-full px-3 py-2 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleSaveView();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<button
|
||||
onClick={() => setSaveOpen(false)}
|
||||
className="px-3 py-1.5 rounded-md border border-input text-sm hover:bg-accent"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveView}
|
||||
disabled={!newViewName.trim() || createView.isPending}
|
||||
className="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm disabled:opacity-50"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Confirm bulk action */}
|
||||
<AlertDialog open={!!confirmBulk} onOpenChange={(o) => !o && setConfirmBulk(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{confirmBulk?.label}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will affect {selected.size} ticket{selected.size === 1 ? '' : 's'}.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => {
|
||||
if (!confirmBulk) return;
|
||||
if (confirmBulk.kind === 'close') runBulk({ action: 'close' });
|
||||
else
|
||||
runBulk({
|
||||
action: confirmBulk.kind,
|
||||
value: confirmBulk.value,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Confirm
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user