225 lines
12 KiB
TypeScript
225 lines
12 KiB
TypeScript
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useState } from "react";
|
|
import { useQuery, useMutation } from "@tanstack/react-query";
|
|
import { apiRequest } from "@/lib/queryClient";
|
|
import { User } from "@shared/schema";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Loader2, Share2, Check, Search } from "lucide-react";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface ShareTaskModalProps {
|
|
taskId: string;
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
}
|
|
|
|
export function ShareTaskModal({ taskId, open, onOpenChange }: ShareTaskModalProps) {
|
|
const { toast } = useToast();
|
|
const { t } = useTranslation();
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [debouncedQuery, setDebouncedQuery] = useState("");
|
|
const [userToConfirm, setUserToConfirm] = useState<{ id: string; username: string } | null>(null);
|
|
|
|
const { data: users, isLoading: searchLoading } = useQuery<Pick<User, "id" | "username">[]>({
|
|
queryKey: ["/api/users/search", debouncedQuery],
|
|
queryFn: async () => {
|
|
if (debouncedQuery.length < 2) return [];
|
|
const res = await fetch(`/api/users/search?q=${encodeURIComponent(debouncedQuery)}`);
|
|
if (!res.ok) throw new Error("Failed to search users");
|
|
return res.json();
|
|
},
|
|
enabled: debouncedQuery.length >= 2,
|
|
});
|
|
|
|
const { data: sharedUsers, refetch: refetchShared, isLoading: sharedLoading } = useQuery<Pick<User, "id" | "username">[]>({
|
|
queryKey: [`/api/tasks/${taskId}/shared-users`], // Needs to be dependent on taskId
|
|
enabled: open, // Only fetch when open
|
|
});
|
|
|
|
const shareMutation = useMutation({
|
|
mutationFn: async (targetUserId: string) => {
|
|
const res = await apiRequest("POST", `/api/tasks/${taskId}/share`, { targetUserId });
|
|
return res.json();
|
|
},
|
|
onSuccess: () => {
|
|
toast({ title: t('share.successTask') });
|
|
setUserToConfirm(null);
|
|
setSearchQuery("");
|
|
setDebouncedQuery(""); // Clear search
|
|
refetchShared(); // Update list
|
|
},
|
|
onError: () => {
|
|
toast({ title: t('share.errorTask'), variant: "destructive" });
|
|
},
|
|
});
|
|
|
|
const unshareMutation = useMutation({
|
|
mutationFn: async (targetUserId: string) => {
|
|
const res = await apiRequest("DELETE", `/api/tasks/${taskId}/share/${targetUserId}`);
|
|
return res.json();
|
|
},
|
|
onSuccess: () => {
|
|
toast({ title: t('share.removeSuccess') });
|
|
refetchShared();
|
|
},
|
|
onError: () => {
|
|
toast({ title: t('share.errorTask'), variant: "destructive" });
|
|
},
|
|
});
|
|
|
|
// Confirmation State
|
|
const confirmShare = () => {
|
|
if (userToConfirm) {
|
|
shareMutation.mutate(userToConfirm.id);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(val) => {
|
|
if (!val) {
|
|
setUserToConfirm(null); // Reset on close
|
|
setSearchQuery("");
|
|
setDebouncedQuery("");
|
|
}
|
|
onOpenChange(val);
|
|
}}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<Share2 className="w-5 h-5" />
|
|
{t('share.taskTitle')}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{userToConfirm ? (
|
|
<div className="space-y-4 py-4">
|
|
<div className="bg-muted/50 p-4 rounded-lg text-center">
|
|
<Avatar className="h-16 w-16 mx-auto mb-2">
|
|
<AvatarFallback className="text-lg">{userToConfirm.username.substring(0, 2).toUpperCase()}</AvatarFallback>
|
|
</Avatar>
|
|
<h3 className="font-semibold text-lg">{userToConfirm.username}</h3>
|
|
<p className="text-muted-foreground mt-2">
|
|
{t('share.confirmShareDesc', { username: userToConfirm.username })}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2 justify-end">
|
|
<Button variant="outline" onClick={() => setUserToConfirm(null)}>
|
|
{t('share.cancel')}
|
|
</Button>
|
|
<Button onClick={confirmShare} disabled={shareMutation.isPending}>
|
|
{shareMutation.isPending && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
|
{t('share.confirm')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6 py-4">
|
|
{/* Current Shared Users */}
|
|
<div>
|
|
<h4 className="text-sm font-medium mb-3">{t('share.sharedWith')}</h4>
|
|
<div className="space-y-2">
|
|
{sharedLoading ? (
|
|
<div className="flex justify-center py-2"><Loader2 className="w-4 h-4 animate-spin text-muted-foreground" /></div>
|
|
) : sharedUsers && sharedUsers.length > 0 ? (
|
|
<div className="max-h-[150px] overflow-y-auto space-y-2 pr-1">
|
|
{sharedUsers.map(user => (
|
|
<div key={user.id} className="flex items-center justify-between p-2 bg-muted/40 rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="h-6 w-6">
|
|
<AvatarFallback className="text-xs">{user.username.substring(0, 2).toUpperCase()}</AvatarFallback>
|
|
</Avatar>
|
|
<span className="text-sm">{user.username}</span>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="h-7 px-2 text-muted-foreground hover:text-destructive"
|
|
onClick={() => unshareMutation.mutate(user.id)}
|
|
disabled={unshareMutation.isPending}
|
|
>
|
|
<span className="text-xs">{t('share.unshare')}</span>
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground italic pl-1">Not shared with anyone yet.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<div className="absolute inset-x-0 border-t my-2" />
|
|
</div>
|
|
|
|
{/* Search to Add */}
|
|
<div className="space-y-3">
|
|
<div className="relative">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder={t('share.searchPlaceholder')}
|
|
className="pl-9"
|
|
value={searchQuery}
|
|
onChange={(e) => {
|
|
setSearchQuery(e.target.value);
|
|
// Simple manual debounce for now
|
|
}}
|
|
onKeyUp={(e) => {
|
|
// Debounce could be improved, but sufficient
|
|
setDebouncedQuery(searchQuery);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<ScrollArea className="h-[180px] rounded-md border p-2">
|
|
{searchLoading && debouncedQuery.length >= 2 ? (
|
|
<div className="flex justify-center p-4">
|
|
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : users && users.length > 0 ? (
|
|
<div className="space-y-1">
|
|
{users.filter(u => !sharedUsers?.find(su => su.id === u.id)).map((user) => (
|
|
<div
|
|
key={user.id}
|
|
className="flex items-center justify-between p-2 hover:bg-muted cursor-pointer rounded-lg transition-colors"
|
|
onClick={() => setUserToConfirm(user)}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarFallback>{user.username.substring(0, 2).toUpperCase()}</AvatarFallback>
|
|
</Avatar>
|
|
<span className="font-medium">{user.username}</span>
|
|
</div>
|
|
<Button size="icon" variant="ghost" className="h-8 w-8">
|
|
<Share2 className="w-4 h-4 text-muted-foreground" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
{users.filter(u => !sharedUsers?.find(su => su.id === u.id)).length === 0 && (
|
|
<div className="text-center p-4 text-sm text-muted-foreground">
|
|
No new users found to share with.
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : debouncedQuery.length >= 2 ? (
|
|
<div className="text-center p-4 text-sm text-muted-foreground">
|
|
{t('share.noUsers')}
|
|
</div>
|
|
) : (
|
|
<div className="text-center p-4 text-sm text-muted-foreground">
|
|
{t('share.typeToSearch')}
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|