643 lines
26 KiB
TypeScript
643 lines
26 KiB
TypeScript
import { useState, useEffect, useCallback, useRef } from "react";
|
||
import { useNavigate, useBlocker } from "react-router-dom";
|
||
import {
|
||
Users,
|
||
Briefcase,
|
||
Trash2,
|
||
Search,
|
||
Loader2,
|
||
} from "lucide-react";
|
||
import { toast } from "sonner";
|
||
|
||
import { createProject } from "../api/projects";
|
||
import { getClients } from "../api/clients";
|
||
import { fetchWorkspaceMemberships } from "../api/workspaces";
|
||
import { searchUserByExactMobile, type SearchedUser } from "../api/users";
|
||
import { useAppContext } from "../context/AppContext";
|
||
import { useWorkspace } from "../context/WorkspaceContext";
|
||
import { useTranslation } from "../hooks/useTranslation";
|
||
import { PROJECTS_CREATE, canWorkspace } from "../lib/permissions";
|
||
import { Button } from "../components/ui/button";
|
||
import { Input } from "../components/ui/input";
|
||
import { Select } from "../components/ui/Select";
|
||
import { TextAreaInput } from "../components/ui/TextAreaInput";
|
||
import { InfiniteScroll } from "../components/InfiniteScroll";
|
||
import { Modal } from "../components/Modal";
|
||
|
||
type ProjectRole = "manager" | "member";
|
||
|
||
interface LocalMember {
|
||
localId: string;
|
||
user: any;
|
||
role: ProjectRole;
|
||
isCreator?: boolean;
|
||
}
|
||
|
||
const COLORS = [
|
||
"#3B82F6",
|
||
"#10B981",
|
||
"#F59E0B",
|
||
"#EF4444",
|
||
"#8B5CF6",
|
||
"#EC4899",
|
||
"#14B8A6",
|
||
"#64748B",
|
||
];
|
||
|
||
const toEnglishDigits = (str: string) => {
|
||
if (!str) return "";
|
||
return str
|
||
.replace(/[۰-۹]/g, (d) => "۰۱۲۳۴۵۶۷۸۹".indexOf(d).toString())
|
||
.replace(/[٠-٩]/g, (d) => "٠١٢٣٤٥٦٧٨٩".indexOf(d).toString());
|
||
};
|
||
|
||
const LIMIT = 10;
|
||
|
||
export default function ProjectCreate() {
|
||
const navigate = useNavigate();
|
||
const { t } = useTranslation();
|
||
const { user } = useAppContext();
|
||
const { activeWorkspace } = useWorkspace();
|
||
const currentUserId = user?.id || "";
|
||
const canCreateProject = canWorkspace(activeWorkspace?.my_role, PROJECTS_CREATE);
|
||
|
||
// Project Detail States
|
||
const [name, setName] = useState("");
|
||
const [description, setDescription] = useState("");
|
||
const [color, setColor] = useState(COLORS[0]);
|
||
const [client, setClient] = useState("");
|
||
const [clientsList, setClientsList] = useState<any[]>([]);
|
||
|
||
// Workspace List & Pagination States
|
||
const [workspaceMembers, setWorkspaceMembers] = useState<any[]>([]);
|
||
const [offset, setOffset] = useState(0);
|
||
const [hasMore, setHasMore] = useState(true);
|
||
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
||
const [isLoadingData, setIsLoadingData] = useState(true);
|
||
|
||
// Member Management States
|
||
const [members, setMembers] = useState<LocalMember[]>([]);
|
||
const [searchQuery, setSearchQuery] = useState("");
|
||
const [addAllMembers, setAddAllMembers] = useState(false);
|
||
const [isAddingAll, setIsAddingAll] = useState(false);
|
||
|
||
// External Search States
|
||
const [searchResult, setSearchResult] = useState<SearchedUser | null>(null);
|
||
const [isSearching, setIsSearching] = useState(false);
|
||
const [searchError, setSearchError] = useState(false);
|
||
const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||
|
||
const [isSaving, setIsSaving] = useState(false);
|
||
const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
|
||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||
|
||
const hasUnsavedChanges = name.trim() !== "" || description.trim() !== "" || members.length > 1;
|
||
|
||
useEffect(() => {
|
||
if (activeWorkspace && !canCreateProject) {
|
||
toast.error("You do not have permission to create projects.");
|
||
navigate("/projects");
|
||
}
|
||
}, [activeWorkspace, canCreateProject, navigate]);
|
||
|
||
useBlocker(({ currentLocation, nextLocation }) => {
|
||
if (hasUnsavedChanges && !isSaving && currentLocation.pathname !== nextLocation.pathname) {
|
||
return !window.confirm(t.confirmLeave || "You have unsaved changes. Are you sure you want to leave?");
|
||
}
|
||
return false;
|
||
});
|
||
|
||
// EXACT same pagination structure as EditWorkspace.tsx
|
||
useEffect(() => {
|
||
if (activeWorkspace?.id) {
|
||
const workspaceId = activeWorkspace.id;
|
||
|
||
setName("");
|
||
setDescription("");
|
||
setColor(COLORS[0]);
|
||
setClient("");
|
||
setClientsList([]);
|
||
setWorkspaceMembers([]);
|
||
setSearchQuery("");
|
||
setSearchResult(null);
|
||
setSearchError(false);
|
||
setAddAllMembers(false);
|
||
|
||
// Reset pagination state
|
||
setOffset(0);
|
||
setHasMore(true);
|
||
setIsLoadingData(true);
|
||
|
||
if (user?.id) {
|
||
setMembers([{ localId: user.id, user: user, role: "manager", isCreator: true }]);
|
||
} else {
|
||
setMembers([]);
|
||
}
|
||
|
||
const loadInitialData = async () => {
|
||
try {
|
||
const clientsRes = await getClients(workspaceId);
|
||
setClientsList(clientsRes.results || []);
|
||
|
||
const res = await fetchWorkspaceMemberships({
|
||
workspace: workspaceId,
|
||
limit: LIMIT,
|
||
offset: 0,
|
||
});
|
||
const results = res.results || (Array.isArray(res) ? res : []);
|
||
|
||
setWorkspaceMembers(results);
|
||
setOffset(LIMIT);
|
||
setHasMore(res.next ? true : results.length >= LIMIT);
|
||
} catch (err) {
|
||
console.error("Failed to fetch initial data", err);
|
||
toast.error("Failed to load initial data.");
|
||
} finally {
|
||
setIsLoadingData(false);
|
||
}
|
||
};
|
||
|
||
loadInitialData();
|
||
}
|
||
}, [activeWorkspace?.id, user?.id]);
|
||
|
||
// EXACT same LoadMore logic and deduplication as EditWorkspace.tsx
|
||
const loadMoreMembers = useCallback(async () => {
|
||
if (isLoadingMore || !hasMore || !activeWorkspace?.id) return;
|
||
try {
|
||
setIsLoadingMore(true);
|
||
|
||
const res = await fetchWorkspaceMemberships({
|
||
workspace: activeWorkspace.id,
|
||
limit: LIMIT,
|
||
offset: offset
|
||
});
|
||
const results = res.results || (Array.isArray(res) ? res : []);
|
||
|
||
setWorkspaceMembers((prev) => {
|
||
// Safe deduplication to avoid React key warnings breaking the DOM observer
|
||
const existingIds = new Set(prev.map(m => m.id));
|
||
const newItems = results.filter((item: any) => !existingIds.has(item.id));
|
||
return [...prev, ...newItems];
|
||
});
|
||
|
||
setOffset(prev => prev + LIMIT);
|
||
setHasMore(res.next ? true : results.length >= LIMIT);
|
||
|
||
} catch (error) {
|
||
console.error("Failed to load more members", error);
|
||
} finally {
|
||
setIsLoadingMore(false);
|
||
}
|
||
}, [activeWorkspace?.id, isLoadingMore, hasMore, offset]);
|
||
|
||
// Unified Search Logic
|
||
useEffect(() => {
|
||
if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
|
||
const cleanQuery = toEnglishDigits(searchQuery.trim());
|
||
setSearchError(false);
|
||
|
||
if (cleanQuery.length >= 10 && /^\d+$/.test(cleanQuery)) {
|
||
searchTimeoutRef.current = setTimeout(async () => {
|
||
setIsSearching(true);
|
||
try {
|
||
const foundUser = await searchUserByExactMobile(cleanQuery);
|
||
if (foundUser && foundUser.id) {
|
||
if (foundUser.id === currentUserId) {
|
||
setSearchResult(null);
|
||
} else {
|
||
setSearchResult(foundUser);
|
||
setSearchError(false);
|
||
}
|
||
} else {
|
||
setSearchResult(null);
|
||
setSearchError(true);
|
||
}
|
||
} catch (error) {
|
||
setSearchResult(null);
|
||
setSearchError(true);
|
||
} finally {
|
||
setIsSearching(false);
|
||
}
|
||
}, 500);
|
||
} else {
|
||
setSearchResult(null);
|
||
}
|
||
return () => {
|
||
if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
|
||
};
|
||
}, [searchQuery, currentUserId]);
|
||
|
||
const handleAddMember = (userToAdd: any) => {
|
||
if (members.some((m) => m.user.id === userToAdd.id)) return;
|
||
const newMember: LocalMember = {
|
||
localId: Math.random().toString(36).substr(2, 9),
|
||
user: userToAdd,
|
||
role: "member",
|
||
};
|
||
setMembers((prev) => [newMember, ...prev]);
|
||
setSearchQuery("");
|
||
setSearchResult(null);
|
||
};
|
||
|
||
const handleToggleAddAllMembers = async () => {
|
||
if (addAllMembers) {
|
||
setMembers((prev) => prev.filter(m => m.isCreator || m.role === "manager"));
|
||
setAddAllMembers(false);
|
||
} else {
|
||
if (!activeWorkspace?.id) return;
|
||
setIsAddingAll(true);
|
||
try {
|
||
let currentOffset = 0;
|
||
let continueFetching = true;
|
||
const allWsMembers: any[] = [];
|
||
|
||
while (continueFetching) {
|
||
const res = await fetchWorkspaceMemberships({
|
||
workspace: activeWorkspace.id,
|
||
limit: 50,
|
||
offset: currentOffset,
|
||
});
|
||
const fetchedResults = res.results || (Array.isArray(res) ? res : []);
|
||
allWsMembers.push(...fetchedResults);
|
||
if (res.next) {
|
||
currentOffset += 50;
|
||
} else {
|
||
continueFetching = false;
|
||
}
|
||
}
|
||
|
||
const newMembersToAdd = allWsMembers
|
||
.map((wm) => wm.user)
|
||
.filter((u) => u && u.id !== currentUserId && !members.some((m) => m.user.id === u.id));
|
||
|
||
const localMembers: LocalMember[] = newMembersToAdd.map((u) => ({
|
||
localId: Math.random().toString(36).substr(2, 9),
|
||
user: u,
|
||
role: "member",
|
||
}));
|
||
|
||
setMembers((prev) => [...prev, ...localMembers]);
|
||
setAddAllMembers(true);
|
||
} catch (error) {
|
||
toast.error("Could not add all workspace members.");
|
||
} finally {
|
||
setIsAddingAll(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
const openDeleteModal = (userId: string) => {
|
||
setMemberIdToDelete(userId);
|
||
setIsDeleteDialogOpen(true);
|
||
};
|
||
|
||
const handleDeleteMember = () => {
|
||
if (!memberIdToDelete) return;
|
||
setMembers(members.filter((m) => m.user.id !== memberIdToDelete));
|
||
setIsDeleteDialogOpen(false);
|
||
setMemberIdToDelete(null);
|
||
};
|
||
|
||
const handleChangeRole = (userId: string, newRole: string) => {
|
||
setMembers(
|
||
members.map((m) => (m.user.id === userId ? { ...m, role: newRole as ProjectRole } : m))
|
||
);
|
||
};
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!name.trim() || !activeWorkspace) return;
|
||
|
||
try {
|
||
setIsSaving(true);
|
||
const membersPayload = members
|
||
.filter((m) => !m.isCreator)
|
||
.map((m) => ({ user_id: m.user.id, role: m.role }));
|
||
|
||
const projectPayload: any = {
|
||
name,
|
||
description,
|
||
color,
|
||
workspace: activeWorkspace.id,
|
||
members: membersPayload,
|
||
};
|
||
if (client) projectPayload.client = client;
|
||
|
||
const newProject = await createProject(projectPayload);
|
||
|
||
window.dispatchEvent(new CustomEvent("project_created", { detail: newProject }));
|
||
toast.success(t.projects?.createSuccess || "Project created successfully.");
|
||
navigate("/projects");
|
||
} catch (error: any) {
|
||
toast.error(error.message || t.projects?.createError || "Failed to create project.");
|
||
} finally {
|
||
setIsSaving(false);
|
||
}
|
||
};
|
||
|
||
// Prepare unified display list
|
||
const filteredWorkspaceMembers = workspaceMembers.filter((m) => {
|
||
const q = searchQuery.trim().toLowerCase();
|
||
if (!q) return true;
|
||
const fullName = `${m.user.first_name || ""} ${m.user.last_name || ""}`.toLowerCase();
|
||
const phone = toEnglishDigits(m.user.mobile || "");
|
||
return fullName.includes(q) || phone.includes(toEnglishDigits(q));
|
||
});
|
||
|
||
const workspaceMemberUserIds = new Set(filteredWorkspaceMembers.map((m) => m.user.id));
|
||
|
||
const externalAddedMembers = members.filter((m) => {
|
||
if (workspaceMemberUserIds.has(m.user.id)) return false;
|
||
const q = searchQuery.trim().toLowerCase();
|
||
if (!q) return true;
|
||
const fullName = `${m.user.first_name || ""} ${m.user.last_name || ""}`.toLowerCase();
|
||
const phone = toEnglishDigits(m.user.mobile || "");
|
||
return fullName.includes(q) || phone.includes(toEnglishDigits(q));
|
||
});
|
||
|
||
const displayList = [
|
||
...externalAddedMembers.map((m) => ({ listId: m.localId, user: m.user })),
|
||
...filteredWorkspaceMembers.map((m) => ({ listId: m.id || m.user.id, user: m.user }))
|
||
];
|
||
|
||
if (!activeWorkspace) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div className="absolute inset-0 flex flex-col p-4 sm:p-6 bg-slate-50 dark:bg-slate-900 overflow-hidden">
|
||
<h1 className="text-2xl font-bold text-slate-800 dark:text-slate-200 mb-6 shrink-0">
|
||
{t.projects?.createNew || "Create New Project"}
|
||
</h1>
|
||
|
||
<div className="flex flex-col lg:flex-row gap-4 sm:gap-6 flex-1 min-h-0">
|
||
<div className="w-full lg:w-1/3 lg:max-w-md bg-white dark:bg-slate-900 rounded-lg shadow-sm border border-slate-200 dark:border-slate-800 overflow-y-auto">
|
||
<form id="create-project-form" onSubmit={handleSubmit} className="flex flex-col h-full p-6">
|
||
<div className="flex-1 space-y-6">
|
||
<div className="flex flex-col gap-3">
|
||
<div className="flex items-center gap-4">
|
||
<div className="h-10 w-10 rounded-lg shrink-0 shadow-sm" style={{ backgroundColor: color }} />
|
||
<Input
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
placeholder={t.projects?.namePlaceholder || "Project name..."}
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2 mt-2">
|
||
{COLORS.map((c) => (
|
||
<button
|
||
key={c}
|
||
type="button"
|
||
onClick={() => setColor(c)}
|
||
className={`w-5 h-5 rounded-full transition-all duration-150 shrink-0 ${
|
||
color === c
|
||
? "ring-2 ring-offset-2 ring-offset-white dark:ring-offset-slate-800 ring-blue-500 scale-110 shadow-md"
|
||
: "hover:scale-110 shadow-sm"
|
||
}`}
|
||
style={{ backgroundColor: c }}
|
||
aria-label={`Select color ${c}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-slate-700 dark:text-slate-300 mb-2 flex items-center gap-2">
|
||
<Briefcase size={16} />
|
||
{t.projects?.client || "Client"}
|
||
</label>
|
||
<Select
|
||
value={client}
|
||
onChange={setClient}
|
||
options={[
|
||
{ value: "", label: t.projects?.noClient || "No Client" },
|
||
...clientsList.map((c) => ({ value: c.id, label: c.name })),
|
||
]}
|
||
className="w-full"
|
||
buttonClassName="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-slate-700 dark:text-slate-300 mb-2">
|
||
{t.projects?.descriptionLabel || "Description (Optional)"}
|
||
</label>
|
||
<TextAreaInput
|
||
value={description}
|
||
onChange={(e) => setDescription(e.target.value)}
|
||
placeholder={t.projects?.descriptionPlaceholder || "Add more details..."}
|
||
rows={4}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-8 pt-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3 shrink-0">
|
||
<Button variant="ghost" type="button" onClick={() => navigate("/projects")}>
|
||
{t.cancel || "Cancel"}
|
||
</Button>
|
||
<Button type="submit" disabled={isSaving || !name.trim()}>
|
||
{isSaving && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
|
||
{t.create || "Create"}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div className="w-full lg:w-2/3 flex flex-col min-h-0 bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-sm rounded-lg border">
|
||
<div className="p-4 border-b border-slate-200 dark:border-slate-700 shrink-0 space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-2">
|
||
<Users size={18} />
|
||
{t.projects?.projectMembers || "Project Members"}
|
||
</h3>
|
||
<Button
|
||
type="button"
|
||
variant={addAllMembers ? "destructive" : "outline"}
|
||
disabled={isAddingAll || isLoadingData}
|
||
onClick={handleToggleAddAllMembers}
|
||
>
|
||
{isAddingAll && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||
{addAllMembers
|
||
? (t.projects?.removeAllWorkspaceMembers || "Remove All")
|
||
: (t.projects?.addAllWorkspaceMembers || "Add All")}
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<Search className="absolute inset-s-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
|
||
<Input
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
placeholder={t.projects?.searchWorkspaceMembers || "Search by name or enter mobile number..."}
|
||
className="ps-10"
|
||
/>
|
||
{isSearching && (
|
||
<Loader2 className="animate-spin absolute inset-e-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
|
||
)}
|
||
</div>
|
||
|
||
{searchError && (
|
||
<p className="text-xs text-red-500 dark:text-red-400 mt-2">
|
||
{t.projects?.userNotFound || "No user found with this mobile number."}
|
||
</p>
|
||
)}
|
||
|
||
{searchResult && !searchError && (
|
||
<div className="p-3 border border-blue-200 dark:border-blue-900 bg-blue-50 dark:bg-blue-900/20 rounded-md flex items-center justify-between mt-2">
|
||
<div className="flex items-center gap-3">
|
||
{searchResult.profile_picture ? (
|
||
<img
|
||
src={searchResult.profile_picture}
|
||
alt={searchResult.first_name}
|
||
className="w-10 h-10 rounded-full object-cover shadow-sm"
|
||
/>
|
||
) : (
|
||
<div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm shadow-sm flex-shrink-0">
|
||
{searchResult.first_name?.[0] || "U"}
|
||
</div>
|
||
)}
|
||
<div className="flex flex-col">
|
||
<span className="text-sm font-semibold text-slate-800 dark:text-slate-200">
|
||
{searchResult.first_name} {searchResult.last_name}
|
||
</span>
|
||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||
{searchResult.mobile}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<Button
|
||
type="button"
|
||
variant="default"
|
||
size="sm"
|
||
disabled={members.some((m) => m.user.id === searchResult.id)}
|
||
onClick={() => handleAddMember(searchResult)}
|
||
>
|
||
{members.some((m) => m.user.id === searchResult.id)
|
||
? (t.projects?.alreadyInProject || "Already Added")
|
||
: (t.projects?.addToProject || "Add to Project")}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto p-2">
|
||
{isLoadingData ? (
|
||
<div className="p-4 text-sm text-slate-500 flex justify-center items-center gap-2">
|
||
<Loader2 className="h-5 w-5 animate-spin" />
|
||
{t.loading || "Loading..."}
|
||
</div>
|
||
) : (
|
||
<InfiniteScroll
|
||
onLoadMore={loadMoreMembers}
|
||
hasMore={hasMore && searchQuery.trim().length === 0}
|
||
isLoading={isLoadingMore}
|
||
>
|
||
{displayList.length === 0 ? (
|
||
<div className="p-4 text-sm text-slate-500 text-center">
|
||
{t.projects?.noWorkspaceMembers || "No members found."}
|
||
</div>
|
||
) : (
|
||
<ul className="divide-y divide-slate-100 dark:divide-slate-700/50">
|
||
{displayList.map((item) => {
|
||
const addedMemberData = members.find((mm) => mm.user.id === item.user.id);
|
||
const isAdded = !!addedMemberData;
|
||
|
||
return (
|
||
<li key={item.listId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 gap-3 hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors rounded-lg">
|
||
<div className="flex items-center gap-3">
|
||
{item.user.profile_picture ? (
|
||
<img
|
||
src={item.user.profile_picture}
|
||
alt={item.user.first_name}
|
||
className="w-9 h-9 rounded-full object-cover shadow-sm"
|
||
/>
|
||
) : (
|
||
<div className="w-9 h-9 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm shadow-sm flex-shrink-0">
|
||
{item.user.first_name?.[0] || "U"}
|
||
</div>
|
||
)}
|
||
<div className="flex flex-col">
|
||
<span className="text-sm font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-2">
|
||
{item.user.first_name} {item.user.last_name}
|
||
{addedMemberData?.isCreator && (
|
||
<span className="text-[10px] bg-slate-200 dark:bg-slate-600 px-2 py-0.5 rounded-full text-slate-600 dark:text-slate-300 font-bold">
|
||
{t.projects?.creator || "Creator"}
|
||
</span>
|
||
)}
|
||
</span>
|
||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||
{item.user.mobile}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
{isAdded ? (
|
||
<div className="flex items-center gap-2">
|
||
{!addedMemberData.isCreator && (
|
||
<Select
|
||
value={addedMemberData.role}
|
||
onChange={(val) => handleChangeRole(item.user.id, val)}
|
||
options={[
|
||
{ value: "member", label: t.projects?.roles?.member || "Member" },
|
||
{ value: "manager", label: t.projects?.roles?.manager || "Manager" },
|
||
]}
|
||
buttonClassName="text-xs h-8 w-28"
|
||
/>
|
||
)}
|
||
{!addedMemberData.isCreator && (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-8 w-8 shrink-0 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
|
||
onClick={() => openDeleteModal(item.user.id)}
|
||
>
|
||
<Trash2 size={16} />
|
||
</Button>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<Button
|
||
type="button"
|
||
variant="secondary"
|
||
onClick={() => handleAddMember(item.user)}
|
||
>
|
||
{t.projects?.addToProject || "Add to Project"}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
)}
|
||
</InfiniteScroll>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Modal
|
||
isOpen={isDeleteDialogOpen}
|
||
onClose={() => setIsDeleteDialogOpen(false)}
|
||
title={t.projects?.confirmDeleteTitle || "Remove Member"}
|
||
description={
|
||
t.projects?.confirmDeleteDesc || "Are you sure you want to remove this member from the project?"
|
||
}
|
||
>
|
||
<div className="flex justify-end gap-3 mt-6">
|
||
<Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
|
||
{t.cancel || "Cancel"}
|
||
</Button>
|
||
<Button variant="destructive" onClick={handleDeleteMember}>
|
||
{t.remove || "Remove"}
|
||
</Button>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}
|