|
|
@@ -0,0 +1,187 @@
|
|
|
+import { useEffect } from 'react';
|
|
|
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
|
+import { X, FolderKanban, Loader2, XCircle } from 'lucide-react';
|
|
|
+import { api } from '../api/client';
|
|
|
+import { Card, CardContent } from './Card';
|
|
|
+import { Button } from './Button';
|
|
|
+import { useToast } from '../contexts/ToastContext';
|
|
|
+
|
|
|
+interface BatchProjectModalProps {
|
|
|
+ selectedIds: number[];
|
|
|
+ onClose: () => void;
|
|
|
+}
|
|
|
+
|
|
|
+export function BatchProjectModal({ selectedIds, onClose }: BatchProjectModalProps) {
|
|
|
+ const queryClient = useQueryClient();
|
|
|
+ const { showToast } = useToast();
|
|
|
+
|
|
|
+ const { data: projects, isLoading } = useQuery({
|
|
|
+ queryKey: ['projects'],
|
|
|
+ queryFn: () => api.getProjects(),
|
|
|
+ });
|
|
|
+
|
|
|
+ // Close on Escape key
|
|
|
+ useEffect(() => {
|
|
|
+ const handleKeyDown = (e: KeyboardEvent) => {
|
|
|
+ if (e.key === 'Escape') onClose();
|
|
|
+ };
|
|
|
+ window.addEventListener('keydown', handleKeyDown);
|
|
|
+ return () => window.removeEventListener('keydown', handleKeyDown);
|
|
|
+ }, [onClose]);
|
|
|
+
|
|
|
+ // Helper to invalidate all project-related queries
|
|
|
+ const invalidateProjectQueries = () => {
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['archives'] });
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['projects'] });
|
|
|
+ // Invalidate project detail pages (partial match catches all project IDs)
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['project'] });
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['project-archives'] });
|
|
|
+ };
|
|
|
+
|
|
|
+ // Assign to project mutation (uses bulk API)
|
|
|
+ const assignMutation = useMutation({
|
|
|
+ mutationFn: async (projectId: number) => {
|
|
|
+ await api.addArchivesToProject(projectId, selectedIds);
|
|
|
+ return projectId;
|
|
|
+ },
|
|
|
+ onSuccess: (projectId) => {
|
|
|
+ const project = projects?.find(p => p.id === projectId);
|
|
|
+ invalidateProjectQueries();
|
|
|
+ showToast(`Added ${selectedIds.length} archive${selectedIds.length !== 1 ? 's' : ''} to "${project?.name}"`);
|
|
|
+ onClose();
|
|
|
+ },
|
|
|
+ onError: () => {
|
|
|
+ showToast('Failed to assign project', 'error');
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // Remove from project mutation (updates each archive individually)
|
|
|
+ const removeMutation = useMutation({
|
|
|
+ mutationFn: async () => {
|
|
|
+ for (const id of selectedIds) {
|
|
|
+ await api.updateArchive(id, { project_id: null });
|
|
|
+ }
|
|
|
+ return selectedIds.length;
|
|
|
+ },
|
|
|
+ onSuccess: (count) => {
|
|
|
+ invalidateProjectQueries();
|
|
|
+ showToast(`Removed ${count} archive${count !== 1 ? 's' : ''} from project`);
|
|
|
+ onClose();
|
|
|
+ },
|
|
|
+ onError: () => {
|
|
|
+ showToast('Failed to remove from project', 'error');
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const isPending = assignMutation.isPending || removeMutation.isPending;
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
|
+ <Card className="w-full max-w-md max-h-[80vh] flex flex-col">
|
|
|
+ <CardContent className="p-0 flex flex-col min-h-0">
|
|
|
+ {/* Header */}
|
|
|
+ <div className="flex items-center justify-between p-4 border-b border-bambu-dark-tertiary shrink-0">
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <FolderKanban className="w-5 h-5 text-bambu-green" />
|
|
|
+ <h2 className="text-xl font-semibold text-white">
|
|
|
+ Assign to Project
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ onClick={onClose}
|
|
|
+ className="text-bambu-gray hover:text-white transition-colors"
|
|
|
+ disabled={isPending}
|
|
|
+ >
|
|
|
+ <X className="w-5 h-5" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Content */}
|
|
|
+ <div className="p-4 space-y-3 overflow-y-auto min-h-0">
|
|
|
+ <p className="text-sm text-bambu-gray">
|
|
|
+ Assign {selectedIds.length} selected archive{selectedIds.length !== 1 ? 's' : ''} to a project
|
|
|
+ </p>
|
|
|
+
|
|
|
+ {isLoading ? (
|
|
|
+ <div className="flex items-center justify-center py-8">
|
|
|
+ <Loader2 className="w-6 h-6 animate-spin text-bambu-gray" />
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <div className="space-y-2">
|
|
|
+ {/* Remove from project option */}
|
|
|
+ <button
|
|
|
+ onClick={() => removeMutation.mutate()}
|
|
|
+ disabled={isPending}
|
|
|
+ className="w-full flex items-center gap-3 p-3 rounded-lg bg-bambu-dark hover:bg-bambu-dark-tertiary border border-bambu-dark-tertiary transition-colors text-left disabled:opacity-50"
|
|
|
+ >
|
|
|
+ <div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center shrink-0">
|
|
|
+ <XCircle className="w-4 h-4 text-red-400" />
|
|
|
+ </div>
|
|
|
+ <div className="min-w-0 flex-1">
|
|
|
+ <p className="text-white font-medium">Remove from project</p>
|
|
|
+ <p className="text-sm text-bambu-gray truncate">Clear project assignment</p>
|
|
|
+ </div>
|
|
|
+ {removeMutation.isPending && (
|
|
|
+ <Loader2 className="w-4 h-4 animate-spin text-bambu-gray shrink-0" />
|
|
|
+ )}
|
|
|
+ </button>
|
|
|
+
|
|
|
+ {/* Divider */}
|
|
|
+ {projects && projects.length > 0 && (
|
|
|
+ <div className="flex items-center gap-2 py-2">
|
|
|
+ <div className="flex-1 h-px bg-bambu-dark-tertiary" />
|
|
|
+ <span className="text-xs text-bambu-gray">or assign to</span>
|
|
|
+ <div className="flex-1 h-px bg-bambu-dark-tertiary" />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* Project list */}
|
|
|
+ {projects?.map((project) => (
|
|
|
+ <button
|
|
|
+ key={project.id}
|
|
|
+ onClick={() => assignMutation.mutate(project.id)}
|
|
|
+ disabled={isPending}
|
|
|
+ className="w-full flex items-center gap-3 p-3 rounded-lg bg-bambu-dark hover:bg-bambu-dark-tertiary border border-bambu-dark-tertiary transition-colors text-left disabled:opacity-50"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ className="w-8 h-8 rounded-full flex items-center justify-center shrink-0"
|
|
|
+ style={{ backgroundColor: project.color ? `${project.color}20` : 'rgb(var(--bambu-green) / 0.2)' }}
|
|
|
+ >
|
|
|
+ <FolderKanban
|
|
|
+ className="w-4 h-4"
|
|
|
+ style={{ color: project.color || 'rgb(var(--bambu-green))' }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="min-w-0 flex-1">
|
|
|
+ <p className="text-white font-medium truncate">{project.name}</p>
|
|
|
+ <p className="text-sm text-bambu-gray truncate">
|
|
|
+ {project.archive_count} archive{project.archive_count !== 1 ? 's' : ''}
|
|
|
+ {project.status && ` • ${project.status}`}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ {assignMutation.isPending && assignMutation.variables === project.id && (
|
|
|
+ <Loader2 className="w-4 h-4 animate-spin text-bambu-gray shrink-0" />
|
|
|
+ )}
|
|
|
+ </button>
|
|
|
+ ))}
|
|
|
+
|
|
|
+ {(!projects || projects.length === 0) && (
|
|
|
+ <p className="text-center text-bambu-gray py-4">
|
|
|
+ No projects yet. Create one from the Projects page.
|
|
|
+ </p>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Footer */}
|
|
|
+ <div className="flex gap-3 p-4 border-t border-bambu-dark-tertiary shrink-0">
|
|
|
+ <Button variant="secondary" onClick={onClose} className="flex-1" disabled={isPending}>
|
|
|
+ Cancel
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|