fix(tickets): fix permissions toast, board fallback, assignment search, remove load more
All checks were successful
Mirror to GitHub / mirror (push) Successful in 2s
All checks were successful
Mirror to GitHub / mirror (push) Successful in 2s
- list_resources: return [] on PSAError instead of 502 — stops global interceptor toast when CW API key lacks ticket members permission (Lesson 111) - list_boards/list_priorities: add warning logging so Railway logs reveal the root cause when CW permissions are missing - TicketsPage: derive board options from ticket search results when listBoards returns empty (CW permissions fallback) - TicketFilterBar: replace assignment <select> with searchable member picker — fixed options (All/Mine/Unassigned) + text-filtered member dropdown - TicketQueue: remove Load More / infinite scroll; page now exists at /tickets Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
// frontend/src/components/tickets/TicketFilterBar.tsx
|
||||
import { Search, X } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { Search, X, User } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { TicketFilters, PSAPriority } from '@/types/tickets'
|
||||
import type { PSABoard, PSATicketStatusItem } from '@/types/integrations'
|
||||
@@ -27,6 +28,24 @@ export function TicketFilterBar({
|
||||
const hasNext = page * pageSize < total
|
||||
const hasPrev = page > 1
|
||||
|
||||
// Member search state — text filter over the member list
|
||||
const [memberSearch, setMemberSearch] = useState('')
|
||||
const [memberDropdownOpen, setMemberDropdownOpen] = useState(false)
|
||||
|
||||
const currentMemberName = typeof filters.assigned === 'number'
|
||||
? (members.find(m => m.id === filters.assigned)?.name ?? `Member ${filters.assigned}`)
|
||||
: null
|
||||
|
||||
const filteredMembers = members.filter(m =>
|
||||
m.name.toLowerCase().includes(memberSearch.toLowerCase())
|
||||
)
|
||||
|
||||
function handleMemberSelect(memberId: number | 'all' | 'me' | 'unassigned') {
|
||||
onChange({ assigned: memberId })
|
||||
setMemberDropdownOpen(false)
|
||||
setMemberSearch('')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Filter row */}
|
||||
@@ -42,22 +61,60 @@ export function TicketFilterBar({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Assignment */}
|
||||
<select
|
||||
className="bg-input border border-default rounded-[5px] px-3 py-1.5 text-sm text-primary focus:border-accent focus:outline-none"
|
||||
value={typeof filters.assigned === 'number' ? String(filters.assigned) : filters.assigned}
|
||||
onChange={e => {
|
||||
const v = e.target.value
|
||||
onChange({ assigned: v === 'me' || v === 'unassigned' || v === 'all' ? v : Number(v) })
|
||||
}}
|
||||
>
|
||||
<option value="all">All Tickets</option>
|
||||
<option value="me">My Tickets</option>
|
||||
<option value="unassigned">Unassigned</option>
|
||||
{members.map(m => (
|
||||
<option key={m.id} value={String(m.id)}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
{/* Assignment — searchable member picker */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => { setMemberDropdownOpen(v => !v); setMemberSearch('') }}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 bg-input border rounded-[5px] px-3 py-1.5 text-sm focus:border-accent focus:outline-none',
|
||||
filters.assigned === 'all' ? 'text-muted-foreground border-default' : 'text-primary border-accent'
|
||||
)}
|
||||
>
|
||||
<User className="w-3.5 h-3.5" />
|
||||
{filters.assigned === 'all' && 'All Tickets'}
|
||||
{filters.assigned === 'me' && 'My Tickets'}
|
||||
{filters.assigned === 'unassigned' && 'Unassigned'}
|
||||
{currentMemberName}
|
||||
</button>
|
||||
{memberDropdownOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-10" onClick={() => setMemberDropdownOpen(false)} />
|
||||
<div className="absolute left-0 top-full mt-1 z-20 w-52 bg-card border border-default rounded-[5px] shadow-lg overflow-hidden">
|
||||
<div className="p-2 border-b border-default">
|
||||
<input
|
||||
autoFocus
|
||||
className="w-full bg-input border border-default rounded-[5px] px-2 py-1 text-xs text-primary placeholder:text-muted-foreground focus:border-accent focus:outline-none"
|
||||
placeholder="Search member..."
|
||||
value={memberSearch}
|
||||
onChange={e => setMemberSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="max-h-48 overflow-y-auto py-1">
|
||||
{!memberSearch && (
|
||||
<>
|
||||
<button onClick={() => handleMemberSelect('all')} className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors', filters.assigned === 'all' && 'text-accent')}>All Tickets</button>
|
||||
<button onClick={() => handleMemberSelect('me')} className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors', filters.assigned === 'me' && 'text-accent')}>My Tickets</button>
|
||||
<button onClick={() => handleMemberSelect('unassigned')} className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors', filters.assigned === 'unassigned' && 'text-accent')}>Unassigned</button>
|
||||
{members.length > 0 && <div className="border-t border-default mx-2 my-1" />}
|
||||
</>
|
||||
)}
|
||||
{filteredMembers.map(m => (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => handleMemberSelect(m.id)}
|
||||
className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors truncate', filters.assigned === m.id && 'text-accent')}
|
||||
>
|
||||
{m.name}
|
||||
</button>
|
||||
))}
|
||||
{memberSearch && filteredMembers.length === 0 && (
|
||||
<p className="px-3 py-2 text-xs text-muted-foreground">No members found</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Board */}
|
||||
<select
|
||||
|
||||
Reference in New Issue
Block a user