feat(tickets): add TicketsPage with URL-param filter state, stub detail panel and modal
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
12
frontend/src/components/tickets/NewTicketModal.tsx
Normal file
12
frontend/src/components/tickets/NewTicketModal.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
// Placeholder — full implementation in Task 17
|
||||
interface Props {
|
||||
defaultTab?: 'quick' | 'manual'
|
||||
initialValues?: Record<string, unknown>
|
||||
summaryHint?: string
|
||||
onClose: () => void
|
||||
onCreated: (ticketId?: number, summary?: string) => void
|
||||
}
|
||||
|
||||
export function NewTicketModal(_props: Props) {
|
||||
return null
|
||||
}
|
||||
12
frontend/src/components/tickets/TicketDetailPanel.tsx
Normal file
12
frontend/src/components/tickets/TicketDetailPanel.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
// Placeholder — full implementation in Task 16
|
||||
import type { PSATicketSearchResult } from '@/types/integrations'
|
||||
|
||||
interface Props {
|
||||
ticket: PSATicketSearchResult
|
||||
onClose: () => void
|
||||
onStatusUpdated?: (ticketId: number, newStatus: string) => void
|
||||
}
|
||||
|
||||
export function TicketDetailPanel(_props: Props) {
|
||||
return <div>Loading ticket details…</div>
|
||||
}
|
||||
201
frontend/src/pages/TicketsPage.tsx
Normal file
201
frontend/src/pages/TicketsPage.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import { Plus, Ticket } from 'lucide-react'
|
||||
import { TicketFilterBar } from '@/components/tickets/TicketFilterBar'
|
||||
import { TicketListRow } from '@/components/tickets/TicketListRow'
|
||||
import { TicketDetailPanel } from '@/components/tickets/TicketDetailPanel'
|
||||
import { NewTicketModal } from '@/components/tickets/NewTicketModal'
|
||||
import { integrationsApi } from '@/api/integrations'
|
||||
import { ticketsApi } from '@/api/tickets'
|
||||
import type { PSATicketSearchResult, PSABoard, PSATicketStatusItem } from '@/types/integrations'
|
||||
import type { TicketFilters, PSAPriority } from '@/types/tickets'
|
||||
import { DEFAULT_TICKET_FILTERS } from '@/types/tickets'
|
||||
|
||||
const PAGE_SIZE = 25
|
||||
|
||||
function filtersFromParams(params: URLSearchParams): TicketFilters & { page: number } {
|
||||
const assigned = params.get('assigned') ?? 'all'
|
||||
return {
|
||||
...DEFAULT_TICKET_FILTERS,
|
||||
search: params.get('search') ?? '',
|
||||
board_id: params.get('board') ? Number(params.get('board')) : null,
|
||||
status_id: params.get('status') ? Number(params.get('status')) : null,
|
||||
priority: params.get('priority') ?? null,
|
||||
company_id: params.get('company') ? Number(params.get('company')) : null,
|
||||
assigned: (assigned === 'me' || assigned === 'unassigned' || assigned === 'all')
|
||||
? assigned
|
||||
: Number(assigned),
|
||||
include_closed: params.get('closed') === 'true',
|
||||
page: params.get('page') ? Number(params.get('page')) : 1,
|
||||
}
|
||||
}
|
||||
|
||||
export default function TicketsPage() {
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const { page, ...filters } = filtersFromParams(searchParams)
|
||||
|
||||
const [tickets, setTickets] = useState<PSATicketSearchResult[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [boards, setBoards] = useState<PSABoard[]>([])
|
||||
const [statuses, setStatuses] = useState<PSATicketStatusItem[]>([])
|
||||
const [priorities, setPriorities] = useState<PSAPriority[]>([])
|
||||
const [members, setMembers] = useState<{ id: number; name: string }[]>([])
|
||||
const [selectedTicket, setSelectedTicket] = useState<PSATicketSearchResult | null>(null)
|
||||
const [showNewTicket, setShowNewTicket] = useState(false)
|
||||
|
||||
// Load filter option data once
|
||||
useEffect(() => {
|
||||
integrationsApi.listBoards().then(setBoards).catch(() => {})
|
||||
ticketsApi.listPriorities().then(setPriorities).catch(() => {})
|
||||
integrationsApi.listMembers()
|
||||
.then(ms => setMembers(ms.map(m => ({ id: Number(m.id), name: m.name }))))
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
// Load statuses when board changes
|
||||
useEffect(() => {
|
||||
if (filters.board_id) {
|
||||
integrationsApi.getTicketStatuses(String(filters.board_id))
|
||||
.then(setStatuses).catch(() => {})
|
||||
} else {
|
||||
setStatuses([])
|
||||
}
|
||||
}, [filters.board_id])
|
||||
|
||||
// Fetch tickets on filter/page change
|
||||
const fetchTickets = useCallback(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const result = await ticketsApi.searchTickets({
|
||||
query: filters.search || undefined,
|
||||
board_id: filters.board_id ?? undefined,
|
||||
status_id: filters.status_id ?? undefined,
|
||||
include_closed: filters.include_closed,
|
||||
assigned_to_me: filters.assigned === 'me',
|
||||
unassigned: filters.assigned === 'unassigned',
|
||||
priority: filters.priority ?? undefined,
|
||||
company_id: filters.company_id ?? undefined,
|
||||
page,
|
||||
page_size: PAGE_SIZE,
|
||||
})
|
||||
setTickets(result.items)
|
||||
setTotal(result.total)
|
||||
} catch {
|
||||
setTickets([])
|
||||
setTotal(0)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [filters.search, filters.board_id, filters.status_id, filters.include_closed,
|
||||
filters.assigned, filters.priority, filters.company_id, page])
|
||||
|
||||
useEffect(() => { fetchTickets() }, [fetchTickets])
|
||||
|
||||
function updateFilters(updated: Partial<TicketFilters>) {
|
||||
const next = new URLSearchParams(searchParams)
|
||||
if ('search' in updated) updated.search ? next.set('search', updated.search!) : next.delete('search')
|
||||
if ('board_id' in updated) updated.board_id ? next.set('board', String(updated.board_id)) : next.delete('board')
|
||||
if ('status_id' in updated) updated.status_id ? next.set('status', String(updated.status_id)) : next.delete('status')
|
||||
if ('priority' in updated) updated.priority ? next.set('priority', updated.priority!) : next.delete('priority')
|
||||
if ('company_id' in updated) updated.company_id ? next.set('company', String(updated.company_id)) : next.delete('company')
|
||||
if ('assigned' in updated) {
|
||||
const a = updated.assigned
|
||||
a === 'all' ? next.delete('assigned') : next.set('assigned', String(a))
|
||||
}
|
||||
if ('include_closed' in updated) updated.include_closed ? next.set('closed', 'true') : next.delete('closed')
|
||||
next.delete('page') // reset to 1 on filter change
|
||||
setSearchParams(next)
|
||||
}
|
||||
|
||||
function updatePage(p: number) {
|
||||
const next = new URLSearchParams(searchParams)
|
||||
p === 1 ? next.delete('page') : next.set('page', String(p))
|
||||
setSearchParams(next)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-default shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Ticket className="w-5 h-5 text-muted-foreground" />
|
||||
<h1 className="font-heading text-xl font-bold text-heading">Tickets</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowNewTicket(true)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-accent text-white text-sm font-medium rounded-[5px] hover:bg-accent/90 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" /> New Ticket
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="px-6 py-3 border-b border-default shrink-0">
|
||||
<TicketFilterBar
|
||||
filters={filters}
|
||||
onChange={updateFilters}
|
||||
boards={boards}
|
||||
statuses={statuses}
|
||||
priorities={priorities}
|
||||
members={members}
|
||||
total={total}
|
||||
page={page}
|
||||
pageSize={PAGE_SIZE}
|
||||
onPageChange={updatePage}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* List + Detail Panel */}
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* Ticket list */}
|
||||
<div className={`flex flex-col overflow-y-auto transition-all ${selectedTicket ? 'w-1/2' : 'w-full'}`}>
|
||||
{loading && tickets.length === 0 && (
|
||||
<div className="flex items-center justify-center py-16 text-muted-foreground text-sm">
|
||||
Loading tickets…
|
||||
</div>
|
||||
)}
|
||||
{!loading && tickets.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground text-sm gap-2">
|
||||
<Ticket className="w-8 h-8 opacity-30" />
|
||||
No tickets match your filters
|
||||
</div>
|
||||
)}
|
||||
{tickets.map(t => (
|
||||
<TicketListRow
|
||||
key={t.id}
|
||||
ticket={t}
|
||||
selected={selectedTicket?.id === t.id}
|
||||
onClick={() => setSelectedTicket(t)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Detail panel */}
|
||||
{selectedTicket && (
|
||||
<div className="w-1/2 border-l border-default overflow-y-auto">
|
||||
<TicketDetailPanel
|
||||
ticket={selectedTicket}
|
||||
onClose={() => setSelectedTicket(null)}
|
||||
onStatusUpdated={(ticketId, newStatus) => {
|
||||
setTickets(prev => prev.map(t =>
|
||||
t.id === String(ticketId) ? { ...t, status_name: newStatus } : t
|
||||
))
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* New Ticket Modal */}
|
||||
{showNewTicket && (
|
||||
<NewTicketModal
|
||||
defaultTab="quick"
|
||||
onClose={() => setShowNewTicket(false)}
|
||||
onCreated={() => { setShowNewTicket(false); fetchTickets() }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user