mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-15 02:42:45 +08:00
Add orchestrator types and error handling configurations
- Introduced new TypeScript types for orchestrator functionality, including `SessionStrategy`, `ErrorHandlingStrategy`, and `OrchestrationStep`. - Defined interfaces for `OrchestrationPlan` and `ManualOrchestrationParams` to facilitate orchestration management. - Added a new PNG image file for visual representation. - Created a placeholder file named 'nul' for future use.
This commit is contained in:
catlog22
230
ccw/frontend/src/components/team/TeamListView.tsx
Normal file
230
ccw/frontend/src/components/team/TeamListView.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
// ========================================
|
||||
// TeamListView Component
|
||||
// ========================================
|
||||
// Team card grid with tabs, search, and actions
|
||||
|
||||
import * as React from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import {
|
||||
RefreshCw,
|
||||
Search,
|
||||
Users,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { TabsNavigation } from '@/components/ui/TabsNavigation';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/Dialog';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { TeamCard, TeamCardSkeleton } from './TeamCard';
|
||||
import { useTeamStore } from '@/stores/teamStore';
|
||||
import { useTeams, useArchiveTeam, useUnarchiveTeam, useDeleteTeam } from '@/hooks/useTeamData';
|
||||
|
||||
export function TeamListView() {
|
||||
const { formatMessage } = useIntl();
|
||||
const {
|
||||
locationFilter,
|
||||
setLocationFilter,
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
selectTeamAndShowDetail,
|
||||
} = useTeamStore();
|
||||
|
||||
// Dialog state
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
|
||||
const [teamToDelete, setTeamToDelete] = React.useState<string | null>(null);
|
||||
|
||||
// Data
|
||||
const { teams, isLoading, isFetching, refetch } = useTeams(locationFilter);
|
||||
const { archiveTeam, isArchiving } = useArchiveTeam();
|
||||
const { unarchiveTeam, isUnarchiving } = useUnarchiveTeam();
|
||||
const { deleteTeam, isDeleting } = useDeleteTeam();
|
||||
|
||||
const isMutating = isArchiving || isUnarchiving || isDeleting;
|
||||
|
||||
// Client-side search filter
|
||||
const filteredTeams = React.useMemo(() => {
|
||||
if (!searchQuery) return teams;
|
||||
const q = searchQuery.toLowerCase();
|
||||
return teams.filter((t) => t.name.toLowerCase().includes(q));
|
||||
}, [teams, searchQuery]);
|
||||
|
||||
// Handlers
|
||||
const handleArchive = async (name: string) => {
|
||||
try {
|
||||
await archiveTeam(name);
|
||||
} catch (err) {
|
||||
console.error('Failed to archive team:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnarchive = async (name: string) => {
|
||||
try {
|
||||
await unarchiveTeam(name);
|
||||
} catch (err) {
|
||||
console.error('Failed to unarchive team:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteClick = (name: string) => {
|
||||
setTeamToDelete(name);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
if (!teamToDelete) return;
|
||||
try {
|
||||
await deleteTeam(teamToDelete);
|
||||
setDeleteDialogOpen(false);
|
||||
setTeamToDelete(null);
|
||||
} catch (err) {
|
||||
console.error('Failed to delete team:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearSearch = () => setSearchQuery('');
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-5 h-5" />
|
||||
<h1 className="text-2xl font-semibold text-foreground">
|
||||
{formatMessage({ id: 'team.title' })}
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{formatMessage({ id: 'team.description' })}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => refetch()}
|
||||
disabled={isFetching}
|
||||
>
|
||||
<RefreshCw className={cn('h-4 w-4 mr-2', isFetching && 'animate-spin')} />
|
||||
{formatMessage({ id: 'common.actions.refresh' })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||||
{/* Location tabs */}
|
||||
<TabsNavigation
|
||||
value={locationFilter}
|
||||
onValueChange={(v) => setLocationFilter(v as 'active' | 'archived' | 'all')}
|
||||
tabs={[
|
||||
{ value: 'active', label: formatMessage({ id: 'team.filters.active' }) },
|
||||
{ value: 'archived', label: formatMessage({ id: 'team.filters.archived' }) },
|
||||
{ value: 'all', label: formatMessage({ id: 'team.filters.all' }) },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Search input */}
|
||||
<div className="flex-1 max-w-sm relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder={formatMessage({ id: 'team.searchPlaceholder' })}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9 pr-9"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={handleClearSearch}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team grid */}
|
||||
{isLoading ? (
|
||||
<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<TeamCardSkeleton key={i} />
|
||||
))}
|
||||
</div>
|
||||
) : filteredTeams.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 px-4 border border-dashed border-border rounded-lg">
|
||||
<Users className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-medium text-foreground mb-1">
|
||||
{searchQuery
|
||||
? formatMessage({ id: 'team.emptyState.noMatching' })
|
||||
: formatMessage({ id: 'team.emptyState.noTeams' })}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground text-center max-w-sm mb-4">
|
||||
{searchQuery
|
||||
? formatMessage({ id: 'team.emptyState.noMatchingDescription' })
|
||||
: formatMessage({ id: 'team.emptyState.noTeamsDescription' })}
|
||||
</p>
|
||||
{searchQuery && (
|
||||
<Button variant="outline" onClick={handleClearSearch}>
|
||||
{formatMessage({ id: 'common.actions.clearFilters' })}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredTeams.map((team) => (
|
||||
<TeamCard
|
||||
key={team.name}
|
||||
team={team}
|
||||
onClick={selectTeamAndShowDetail}
|
||||
onArchive={handleArchive}
|
||||
onUnarchive={handleUnarchive}
|
||||
onDelete={handleDeleteClick}
|
||||
actionsDisabled={isMutating}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{formatMessage({ id: 'team.dialog.deleteTeam' })}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{formatMessage({ id: 'team.dialog.deleteConfirm' })}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setDeleteDialogOpen(false);
|
||||
setTeamToDelete(null);
|
||||
}}
|
||||
>
|
||||
{formatMessage({ id: 'team.dialog.cancel' })}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleConfirmDelete}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting
|
||||
? formatMessage({ id: 'team.dialog.deleting' })
|
||||
: formatMessage({ id: 'team.actions.delete' })}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user