fix(workspaces): improve workspace's UI and UX
This commit is contained in:
@@ -3,6 +3,7 @@ import { fetchWorkspaces, createWorkspace, type Workspace } from "../api/workspa
|
||||
import { useTranslation } from "../hooks/useTranslation"
|
||||
import { toast } from "sonner"
|
||||
import { Button } from "../components/ui/button"
|
||||
import { Input } from "../components/ui/input"
|
||||
|
||||
interface WorkspaceContextType {
|
||||
workspaces: Workspace[]
|
||||
@@ -100,7 +101,7 @@ export const WorkspaceProvider = ({ children }: { children: ReactNode }) => {
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
{t.workspace?.nameLabel || "Workspace Name"}
|
||||
</label>
|
||||
<input
|
||||
<Input
|
||||
type="text"
|
||||
value={newWorkspaceName}
|
||||
onChange={(e) => setNewWorkspaceName(e.target.value)}
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
import React, { useState, useEffect, useRef, Fragment } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBlocker, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from '../hooks/useTranslation';
|
||||
import { AlertCircle, UserPlus, Trash2, Shield } from 'lucide-react';
|
||||
import { AlertCircle, UserPlus, Trash2, Shield, Loader2 } from 'lucide-react';
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
import { toast } from 'sonner';
|
||||
import { createWorkspace } from '../api/workspaces';
|
||||
import { searchUserByExactMobile, type SearchedUser } from '../api/users';
|
||||
import { useAppContext } from '../context/AppContext';
|
||||
import { Button } from '../components/ui/button';
|
||||
import { Input } from '../components/ui/input';
|
||||
import { Select } from '../components/ui/Select';
|
||||
import { TextAreaInput } from '../components/ui/TextAreaInput';
|
||||
|
||||
const toEnglishDigits = (str: string) => {
|
||||
return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
|
||||
@@ -52,6 +55,25 @@ export default function WorkspaceCreate() {
|
||||
const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
|
||||
|
||||
const searchTimeoutRef = useRef<NodeJS.Timeout>();
|
||||
const hasUnsavedChanges = name.trim() !== '' || description.trim() !== '' || members.length > 0;
|
||||
|
||||
useEffect(() => {
|
||||
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
|
||||
if (hasUnsavedChanges && !isSaving) {
|
||||
e.preventDefault();
|
||||
e.returnValue = '';
|
||||
}
|
||||
};
|
||||
window.addEventListener('beforeunload', handleBeforeUnload);
|
||||
return () => window.removeEventListener('beforeunload', handleBeforeUnload);
|
||||
}, [hasUnsavedChanges, isSaving]);
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
|
||||
@@ -101,7 +123,7 @@ export default function WorkspaceCreate() {
|
||||
description,
|
||||
members: members.map(m => ({ user_id: m.user.id, role: m.role }))
|
||||
};
|
||||
const newWorkspace = await createWorkspace({ name, description });
|
||||
const newWorkspace = await createWorkspace(payload);
|
||||
|
||||
window.dispatchEvent(new CustomEvent('workspace_created', {
|
||||
detail: newWorkspace
|
||||
@@ -152,181 +174,210 @@ export default function WorkspaceCreate() {
|
||||
setMembers(members.map(m => m.localId === localId ? { ...m, role: newRole as any } : m));
|
||||
};
|
||||
|
||||
// Creator has full rights to manage members before creating
|
||||
const canManageMembers = true;
|
||||
const isFirstOwner = true;
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto p-6 space-y-6">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6">
|
||||
<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-900 dark:text-white mb-4 sm:mb-6 shrink-0">
|
||||
{t.workspace?.createTitle || "Create Workspace"}
|
||||
</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
{t.workspace?.nameLabel || "Name"}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
<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 flex flex-col shrink-0 overflow-y-auto bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col h-full p-6">
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
{t.workspace?.nameLabel || "Name"}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={t.workspace?.namePlaceholder || "e.g. My Company"}
|
||||
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
{t.workspace?.descriptionLabel || "Description"}
|
||||
</label>
|
||||
<TextAreaInput
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder={t.workspace?.descriptionPlaceholder || "Optional description..."}
|
||||
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => navigate('/workspaces')}
|
||||
>
|
||||
{t.actions?.cancel || "Cancel"}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSaving || !name.trim()}
|
||||
>
|
||||
{isSaving ? (t.workspace?.loading || "Saving...") : (t.workspace?.create || "Create")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
{t.workspace?.descriptionLabel || "Description"}
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder={t.workspace?.descriptionPlaceholder || "Optional description..."}
|
||||
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => navigate('/workspaces')}
|
||||
>
|
||||
{t.workspace?.cancel || "Cancel"}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSaving || !name.trim()}
|
||||
>
|
||||
{isSaving ? (t.workspace?.loading || "Saving...") : (t.workspace?.create || "Create")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">{ t.workspace?.members || "Members" }</h2>
|
||||
|
||||
{canManageMembers && (
|
||||
<div className="mb-6 space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(toEnglishDigits(e.target.value))}
|
||||
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
dir="auto"
|
||||
/>
|
||||
<div className="w-full lg:w-2/3 flex-1 flex flex-col min-h-100 lg:min-h-0 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
|
||||
<div className="p-6 shrink-0 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
{ t.workspace?.members || "Members" }
|
||||
</h2>
|
||||
|
||||
{isSearching && <p className="text-sm text-slate-500">{t.workspace?.searching || "Searching..."}</p>}
|
||||
|
||||
{searchError && !isSearching && (
|
||||
<div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
{t.workspace?.userNotFound || "No user found with this exact number."}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{searchResult && !isSearching && (
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
|
||||
<div className="flex items-center gap-3 flex-1 w-full">
|
||||
{searchResult.profile_picture ? (
|
||||
<img src={searchResult.profile_picture} alt={searchResult.first_name} className="w-10 h-10 rounded-full object-cover" />
|
||||
) : (
|
||||
<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">
|
||||
{searchResult.first_name?.[0] || "U"}
|
||||
{canManageMembers && (
|
||||
<div className="space-y-3">
|
||||
<div className="relative w-full">
|
||||
{isSearching && (
|
||||
<div className="absolute top-1/2 -translate-y-1/2 left-auto right-3 pointer-events-none">
|
||||
<Loader2 className="h-5 w-5 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
|
||||
{searchResult.first_name} {searchResult.last_name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 truncate">
|
||||
{toPersianNum(searchResult.mobile)}
|
||||
</p>
|
||||
</div>
|
||||
<Input
|
||||
type="tel"
|
||||
placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
const englishDigits = toEnglishDigits(e.target.value);
|
||||
if (/\D/.test(englishDigits)) {
|
||||
toast.warning(t.workspace?.onlyNumbersAllowed || "Only numbers are allowed.");
|
||||
}
|
||||
const numbersOnly = englishDigits.replace(/\D/g, '');
|
||||
setSearchQuery(numbersOnly);
|
||||
}}
|
||||
className="w-full px-4 pe-10 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
|
||||
<select
|
||||
value={newMemberRole}
|
||||
onChange={(e) => setNewMemberRole(e.target.value as any)}
|
||||
className="flex-1 sm:flex-none text-sm bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-2 py-1.5 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
|
||||
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
|
||||
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
|
||||
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
|
||||
</select>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={handleAddMember}
|
||||
disabled={members.some(m => m.user?.id === searchResult.id)}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
{members.some(m => m.user?.id === searchResult.id)
|
||||
? (t.workspace?.userAlreadyAdded || "Added")
|
||||
: (t.workspace?.addMember || "Add")}
|
||||
</Button>
|
||||
</div>
|
||||
{isSearching && <p className="text-sm text-slate-500">{t.workspace?.searching || "Searching..."}</p>}
|
||||
|
||||
{searchError && !isSearching && (
|
||||
<div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
{t.workspace?.userNotFound || "No user found with this exact number."}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{searchResult && !isSearching && (
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
|
||||
<div className="flex items-center gap-3 flex-1 w-full">
|
||||
{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">
|
||||
{searchResult.first_name?.[0] || "U"}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
|
||||
{searchResult.first_name} {searchResult.last_name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 truncate">
|
||||
{toPersianNum(searchResult.mobile)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
|
||||
<Select
|
||||
value={newMemberRole}
|
||||
onChange={(val) => setNewMemberRole(val as any)}
|
||||
options={[
|
||||
...(isFirstOwner ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
|
||||
{ value: "admin", label: t.workspace?.roles?.admin || "Admin" },
|
||||
{ value: "member", label: t.workspace?.roles?.member || "Member" },
|
||||
{ value: "guest", label: t.workspace?.roles?.guest || "Guest" },
|
||||
]}
|
||||
className="flex-1 sm:flex-none"
|
||||
buttonClassName="w-full sm:w-[110px] px-3 py-1.5 text-sm"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={handleAddMember}
|
||||
disabled={members.some(m => m.user?.id === searchResult.id)}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
{members.some(m => m.user?.id === searchResult.id)
|
||||
? (t.workspace?.userAlreadyAdded || "Added")
|
||||
: (t.workspace?.addMember || "Add")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
{members.map((m) => {
|
||||
return (
|
||||
<div key={m.localId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-slate-200 dark:border-slate-800 rounded-lg gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{m.user?.profile_picture ? (
|
||||
<img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm">
|
||||
{m.user?.first_name?.[0] || m.user?.last_name?.[0] || "U"}
|
||||
{/* لیست اعضا (با قابلیت اسکرول) */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-3 bg-slate-50/30 dark:bg-slate-900/30">
|
||||
{members.map((m) => {
|
||||
return (
|
||||
<div key={m.localId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg gap-3 shadow-sm hover:border-blue-200 dark:hover:border-blue-800 transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
{m.user?.profile_picture ? (
|
||||
<img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover shadow-sm" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm shadow-sm">
|
||||
{m.user?.first_name?.[0] || m.user?.last_name?.[0] || "U"}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{`${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{`${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 self-end sm:self-auto">
|
||||
<Select
|
||||
value={m.role}
|
||||
onChange={(val) => handleChangeRole(m.localId, val)}
|
||||
options={[
|
||||
...(isFirstOwner ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
|
||||
{ value: "admin", label: t.workspace?.roles?.admin || "Admin" },
|
||||
{ value: "member", label: t.workspace?.roles?.member || "Member" },
|
||||
{ value: "guest", label: t.workspace?.roles?.guest || "Guest" },
|
||||
]}
|
||||
buttonClassName="w-[110px] px-3 py-1.5 text-sm"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => openDeleteModal(m.localId)}
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
||||
title={t.workspace?.removeMemberTitle || "Remove member"}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 self-end sm:self-auto">
|
||||
<select
|
||||
value={m.role}
|
||||
onChange={(e) => handleChangeRole(m.localId, e.target.value)}
|
||||
className="text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
|
||||
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
|
||||
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
|
||||
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
|
||||
</select>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => openDeleteModal(m.localId)}
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
||||
title={t.workspace?.removeMemberTitle || "Remove member"}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{members.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-slate-500">
|
||||
<Shield className="w-12 h-12 mb-3 text-slate-200 dark:text-slate-700" />
|
||||
<p className="text-sm">
|
||||
{t.workspace?.noMembers || "No members added yet."}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{members.length === 0 && (
|
||||
<p className="text-sm text-center text-slate-500 py-4">
|
||||
{t.workspace?.noMembers || "No members added yet."}
|
||||
</p>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -367,13 +418,13 @@ export default function WorkspaceCreate() {
|
||||
variant="secondary"
|
||||
onClick={() => setIsDeleteDialogOpen(false)}
|
||||
>
|
||||
{t.workspace?.cancel || "Cancel"}
|
||||
{t.actions?.cancel || "Cancel"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDeleteMember}
|
||||
>
|
||||
{t.workspace?.delete || "Delete"}
|
||||
{t.actions?.delete || "Delete"}
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect, useRef, Fragment } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import React, { useState, useEffect, useRef, Fragment, useMemo } from 'react';
|
||||
import { useBlocker, useNavigate, useParams } from 'react-router-dom';
|
||||
import { useTranslation } from '../hooks/useTranslation';
|
||||
import { AlertCircle, UserPlus, Trash2, Shield } from 'lucide-react';
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
@@ -16,6 +16,9 @@ import { searchUserByExactMobile, type SearchedUser } from '../api/users';
|
||||
import { useAppContext } from '../context/AppContext';
|
||||
import { Button } from '../components/ui/button';
|
||||
import { InfiniteScroll } from '../components/infiniteScroll';
|
||||
import { Select } from '../components/ui/Select';
|
||||
import { Input } from '../components/ui/input';
|
||||
import { TextAreaInput } from '../components/ui/TextAreaInput';
|
||||
|
||||
const toEnglishDigits = (str: string) => {
|
||||
return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
|
||||
@@ -66,6 +69,44 @@ export default function EditWorkspace() {
|
||||
|
||||
const searchTimeoutRef = useRef<NodeJS.Timeout>();
|
||||
|
||||
const [initialData, setInitialData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
const hasUnsavedChanges = useMemo(() => {
|
||||
if (isLoading) return false;
|
||||
|
||||
const isNameChanged = name.trim() !== (initialData.name || '').trim();
|
||||
const isDescChanged = description.trim() !== (initialData.description || '').trim();
|
||||
|
||||
return isNameChanged || isDescChanged;
|
||||
}, [name, description, initialData, isLoading]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
|
||||
if (hasUnsavedChanges && !isSaving) {
|
||||
e.preventDefault();
|
||||
e.returnValue = '';
|
||||
}
|
||||
};
|
||||
window.addEventListener('beforeunload', handleBeforeUnload);
|
||||
return () => window.removeEventListener('beforeunload', handleBeforeUnload);
|
||||
}, [hasUnsavedChanges, isSaving]);
|
||||
|
||||
useBlocker(({ currentLocation, nextLocation }) => {
|
||||
if (hasUnsavedChanges && !isSaving && currentLocation.pathname !== nextLocation.pathname) {
|
||||
return !window.confirm(t.confirmLeave || "تغییرات ذخیره نشدهای دارید. آیا مطمئن هستید که میخواهید خارج شوید؟");
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (id) loadData();
|
||||
}, [id]);
|
||||
@@ -85,6 +126,11 @@ export default function EditWorkspace() {
|
||||
setMembers(results);
|
||||
setOffset(LIMIT);
|
||||
setHasMore(!!membersData.next);
|
||||
|
||||
setInitialData({
|
||||
name: workspaceData.name,
|
||||
description: workspaceData.description || '',
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error(t.workspace?.toast?.errorLoad || "Failed to load workspace data.");
|
||||
navigate('/workspaces');
|
||||
@@ -97,7 +143,7 @@ export default function EditWorkspace() {
|
||||
if (isLoadingMembers || !hasMore || !id) return;
|
||||
try {
|
||||
setIsLoadingMembers(true);
|
||||
const membersData = await fetchWorkspaceMemberships({ workspace: id, limit: LIMIT, offset });
|
||||
const membersData = await fetchWorkspaceMemberships({ workspace: id, limit: `${LIMIT}`, offset: `${offset}` });
|
||||
const results = membersData.results || [];
|
||||
|
||||
setMembers((prev) => [...prev, ...results]);
|
||||
@@ -212,196 +258,216 @@ export default function EditWorkspace() {
|
||||
if (isLoading) return <div className="p-8 text-center">{t.workspace?.loading || "Loading..."}</div>;
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto p-6 space-y-6">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6">
|
||||
<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-900 dark:text-white mb-4 sm:mb-6 shrink-0">
|
||||
{t.workspace?.editTitle || "Edit Workspace"}
|
||||
</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
{t.workspace?.nameLabel || "Name"}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
{t.workspace?.descriptionLabel || "Description"}
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder={t.workspace?.descriptionPlaceholder || "Optional description..."}
|
||||
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => navigate('/workspaces')}
|
||||
>
|
||||
{t.workspace?.cancel || "Cancel"}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSaving || !name.trim()}
|
||||
>
|
||||
{isSaving ? (t.workspace?.loading || "Saving...") : (t.workspace?.save || "Save")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">{ t.workspace?.members || "Members" }</h2>
|
||||
<div className="flex flex-col lg:flex-row gap-4 sm:gap-6 flex-1 min-h-0">
|
||||
|
||||
{canManageMembers && (
|
||||
<div className="mb-6 space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(toEnglishDigits(e.target.value))}
|
||||
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
dir="auto"
|
||||
/>
|
||||
{/* --- ستون سمت چپ: فرم ویرایش --- */}
|
||||
<div className="w-full lg:w-1/3 lg:max-w-md flex flex-col shrink-0 overflow-y-auto bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col h-full p-6">
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
{t.workspace?.nameLabel || "Name"}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
{t.workspace?.descriptionLabel || "Description"}
|
||||
</label>
|
||||
<TextAreaInput
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder={t.workspace?.descriptionPlaceholder || "Optional description..."}
|
||||
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => navigate('/workspaces')}
|
||||
>
|
||||
{t.actions?.cancel || "Cancel"}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSaving || !name.trim()}
|
||||
>
|
||||
{isSaving ? (t.workspace?.loading || "Saving...") : (t.workspace?.save || "Save")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* --- ستون سمت راست: لیست اعضا --- */}
|
||||
<div className="w-full lg:w-2/3 flex-1 flex flex-col min-h-100 lg:min-h-0 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
|
||||
|
||||
{/* بخش جستجو و هدر (ثابت در بالا) */}
|
||||
<div className="p-6 shrink-0 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
{ t.workspace?.members || "Members" }
|
||||
</h2>
|
||||
|
||||
{isSearching && <p className="text-sm text-slate-500">{t.workspace?.searching || "Searching..."}</p>}
|
||||
|
||||
{searchError && !isSearching && (
|
||||
<div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
{t.workspace?.userNotFound || "No user found with this exact number."}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{searchResult && !isSearching && (
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
|
||||
<div className="flex items-center gap-3 flex-1 w-full">
|
||||
{searchResult.profile_picture ? (
|
||||
<img src={searchResult.profile_picture} alt={searchResult.first_name} className="w-10 h-10 rounded-full object-cover" />
|
||||
) : (
|
||||
<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">
|
||||
{searchResult.first_name?.[0] || "U"}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
|
||||
{searchResult.first_name} {searchResult.last_name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 truncate">
|
||||
{toPersianNum(searchResult.mobile)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{canManageMembers && (
|
||||
<div className="space-y-3">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(toEnglishDigits(e.target.value))}
|
||||
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
dir="auto"
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
|
||||
<select
|
||||
value={newMemberRole}
|
||||
onChange={(e) => setNewMemberRole(e.target.value as any)}
|
||||
className="flex-1 sm:flex-none text-sm bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-2 py-1.5 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
|
||||
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
|
||||
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
|
||||
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
|
||||
</select>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={handleAddMember}
|
||||
disabled={members.some(m => m.user?.id === searchResult.id)}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
{members.some(m => m.user?.id === searchResult.id)
|
||||
? (t.workspace?.userAlreadyAdded || "Added")
|
||||
: (t.workspace?.addMember || "Add")}
|
||||
</Button>
|
||||
</div>
|
||||
{isSearching && <p className="text-sm text-slate-500">{t.workspace?.searching || "Searching..."}</p>}
|
||||
|
||||
{searchError && !isSearching && (
|
||||
<div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
{t.workspace?.userNotFound || "No user found with this exact number."}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{searchResult && !isSearching && (
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
|
||||
<div className="flex items-center gap-3 flex-1 w-full">
|
||||
{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">
|
||||
{searchResult.first_name?.[0] || "U"}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
|
||||
{searchResult.first_name} {searchResult.last_name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 truncate">
|
||||
{toPersianNum(searchResult.mobile)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
|
||||
<Select
|
||||
value={newMemberRole}
|
||||
onChange={(val) => setNewMemberRole(val as any)}
|
||||
options={[
|
||||
...(isFirstOwner ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
|
||||
{ value: "admin", label: t.workspace?.roles?.admin || "Admin" },
|
||||
{ value: "member", label: t.workspace?.roles?.member || "Member" },
|
||||
{ value: "guest", label: t.workspace?.roles?.guest || "Guest" },
|
||||
]}
|
||||
className="flex-1 sm:flex-none"
|
||||
buttonClassName="w-full sm:w-[110px] px-3 py-1.5 text-sm"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={handleAddMember}
|
||||
disabled={members.some(m => m.user?.id === searchResult.id)}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
{members.some(m => m.user?.id === searchResult.id)
|
||||
? (t.workspace?.userAlreadyAdded || "Added")
|
||||
: (t.workspace?.addMember || "Add")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<InfiniteScroll
|
||||
onLoadMore={loadMoreMembers}
|
||||
hasMore={hasMore}
|
||||
isLoading={isLoadingMembers}
|
||||
className="space-y-3"
|
||||
loader={<div className="py-4 text-center text-sm text-slate-500 dark:text-slate-400">{t.workspace?.loading || "Loading more members..."}</div>}
|
||||
>
|
||||
{members.map((m) => {
|
||||
const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId;
|
||||
const canChangeThisUserRole = canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner');
|
||||
{/* لیست اعضا (با قابلیت اسکرول مجزا) */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-3 bg-slate-50/30 dark:bg-slate-900/30">
|
||||
<InfiniteScroll
|
||||
onLoadMore={loadMoreMembers}
|
||||
hasMore={hasMore}
|
||||
isLoading={isLoadingMembers}
|
||||
className="space-y-3"
|
||||
loader={<div className="py-4 text-center text-sm text-slate-500 dark:text-slate-400">{t.workspace?.loading || "Loading more members..."}</div>}
|
||||
>
|
||||
{members.map((m) => {
|
||||
const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId;
|
||||
const canChangeThisUserRole = canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner');
|
||||
|
||||
return (
|
||||
<div key={m.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-slate-200 dark:border-slate-800 rounded-lg gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{m.user?.profile_picture ? (
|
||||
<img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm">
|
||||
{m.user?.name?.[0] || m.user?.first_name?.[0] || "U"}
|
||||
return (
|
||||
<div key={m.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg gap-3 shadow-sm hover:border-blue-200 dark:hover:border-blue-800 transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
{m.user?.profile_picture ? (
|
||||
<img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover shadow-sm" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm shadow-sm">
|
||||
{m.user?.name?.[0] || m.user?.first_name?.[0] || "U"}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 self-end sm:self-auto">
|
||||
{canChangeThisUserRole ? (
|
||||
<Select
|
||||
value={m.role}
|
||||
onChange={(val) => handleChangeRole(m.id, val)}
|
||||
options={[
|
||||
...(isFirstOwner ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
|
||||
{ value: "admin", label: t.workspace?.roles?.admin || "Admin" },
|
||||
{ value: "member", label: t.workspace?.roles?.member || "Member" },
|
||||
{ value: "guest", label: t.workspace?.roles?.guest || "Guest" },
|
||||
]}
|
||||
buttonClassName="w-[110px] px-3 py-1.5 text-sm"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
|
||||
{m.role === 'owner' && <Shield className="w-3 h-3" />}
|
||||
{m.role ? t.workspace?.roles?.[m.role] || m.role : "-"}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner') && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => openDeleteModal(m.id)}
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
||||
title={t.workspace?.removeMemberTitle || "Remove member"}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 self-end sm:self-auto">
|
||||
{canChangeThisUserRole ? (
|
||||
<select
|
||||
value={m.role}
|
||||
onChange={(e) => handleChangeRole(m.id, e.target.value)}
|
||||
className="text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
|
||||
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
|
||||
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
|
||||
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
|
||||
{m.role === 'owner' && <Shield className="w-3 h-3" />}
|
||||
{m.role ? t.workspace?.roles?.[m.role] || m.role : "-"}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner') && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => openDeleteModal(m.id)}
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
||||
title={t.workspace?.removeMemberTitle || "Remove member"}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
{members.length === 0 && !isLoadingMembers && (
|
||||
<p className="text-sm text-center text-slate-500 py-4">
|
||||
{t.workspace?.noMembers || "No members found."}
|
||||
</p>
|
||||
)}
|
||||
);
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
{members.length === 0 && !isLoadingMembers && (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-slate-500">
|
||||
<Shield className="w-12 h-12 mb-3 text-slate-200 dark:text-slate-700" />
|
||||
<p className="text-sm">
|
||||
{t.workspace?.noMembers || "No members found."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -442,13 +508,13 @@ export default function EditWorkspace() {
|
||||
variant="secondary"
|
||||
onClick={() => setIsDeleteDialogOpen(false)}
|
||||
>
|
||||
{t.workspace?.cancel || "Cancel"}
|
||||
{t.actions?.cancel || "Cancel"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDeleteMember}
|
||||
>
|
||||
{t.workspace?.delete || "Delete"}
|
||||
{t.actions?.delete || "Delete"}
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Plus, Edit2, Trash2, Eye } from 'lucide-react';
|
||||
import { Plus, Trash2, Pencil, ChevronRight } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspaces';
|
||||
import { useAppContext } from '../context/AppContext';
|
||||
import { useTranslation } from '../hooks/useTranslation';
|
||||
import FilterBar from '../components/FilterBar';
|
||||
import { Button } from '../components/ui/button';
|
||||
import { Input } from '../components/ui/input';
|
||||
import { Card, CardContent, CardTitle } from '../components/ui/card';
|
||||
import { Pagination } from '../components/Pagination';
|
||||
import { Modal } from '../components/Modal';
|
||||
|
||||
type WorkspaceRole = "owner" | "admin" | "member" | "guest";
|
||||
|
||||
@@ -33,12 +36,11 @@ export default function Workspaces() {
|
||||
const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [ordering, setOrdering] = useState('-updated_at');
|
||||
const [ordering, setOrdering] = useState('-created_at');
|
||||
|
||||
// تنظیمات پاژینیشن
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalItems, setTotalItems] = useState(0);
|
||||
const [limit, setLimit] = useState(9);
|
||||
const [limit, setLimit] = useState(10);
|
||||
|
||||
const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; workspace: Workspace | null}>({isOpen: false, workspace: null});
|
||||
const [deleteInput, setDeleteInput] = useState('');
|
||||
@@ -48,13 +50,13 @@ export default function Workspaces() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const orderingOptions = [
|
||||
{ value: '-updated_at', label: t.workspace?.orderByUpdatedDesc || 'Recently Updated' },
|
||||
{ value: '-created_at', label: t.workspace?.orderByCreatedDesc || 'Newest First' },
|
||||
{ value: 'created_at', label: t.workspace?.orderByCreatedAsc || 'Oldest First' },
|
||||
{ value: 'name', label: t.workspace?.orderByName || 'Name (A-Z)' },
|
||||
{ value: '-created_at', label: t.ordering?.createdAtDesc || 'Newest First' },
|
||||
{ value: 'created_at', label: t.ordering?.createdAt || 'Oldest First' },
|
||||
{ value: 'name', label: t.ordering?.name || 'Name (A-Z)' },
|
||||
{ value: '-name', label: t.ordering?.nameDesc || 'Name (Z-A)' },
|
||||
{ value: '-updated_at', label: t.ordering?.updatedAtDesc || 'Recently Updated' },
|
||||
];
|
||||
|
||||
// وقتی جستجو یا ترتیب تغییر کرد، به صفحه اول برگرد
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchQuery, ordering]);
|
||||
@@ -79,7 +81,6 @@ export default function Workspaces() {
|
||||
|
||||
const data = await fetchWorkspaces(params as any);
|
||||
|
||||
// استخراج هوشمند نتایج و تعداد کل
|
||||
const items = Array.isArray(data) ? data : (data?.results || []);
|
||||
const count = !Array.isArray(data) && data?.count !== undefined ? data.count : items.length;
|
||||
|
||||
@@ -92,7 +93,7 @@ export default function Workspaces() {
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDelete = async () => {
|
||||
const confirmDelete = async () => {
|
||||
if (!deleteModal.workspace) return;
|
||||
try {
|
||||
const deletedId = deleteModal.workspace.id;
|
||||
@@ -100,7 +101,6 @@ export default function Workspaces() {
|
||||
|
||||
loadWorkspaces();
|
||||
|
||||
// ارسال سیگنال به کل اپلیکیشن برای آپدیت نوار ناوبری
|
||||
window.dispatchEvent(new CustomEvent('workspace_deleted', {
|
||||
detail: { id: deletedId }
|
||||
}));
|
||||
@@ -114,7 +114,7 @@ export default function Workspaces() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col p-6 max-w-6xl mx-auto min-h-[calc(100vh-73px)]">
|
||||
<div className="flex flex-col p-6 min-h-[calc(100vh-73px)] bg-slate-50 dark:bg-slate-900">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title || 'Workspaces'}</h1>
|
||||
@@ -122,7 +122,7 @@ export default function Workspaces() {
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => navigate('/workspaces/create')}
|
||||
className="gap-2 rounded-xl shadow-sm"
|
||||
className="gap-2 shadow-sm"
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
{t.workspace?.createNew || 'Create New'}
|
||||
@@ -143,108 +143,104 @@ export default function Workspaces() {
|
||||
<div className="animate-pulse">{t.workspace?.loading || 'Loading...'}</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className="flex flex-col gap-4 mb-6">
|
||||
{workspaces.map((workspace) => {
|
||||
const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
|
||||
const isAdmin = workspace.my_role === 'admin' || isOwner;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={workspace.id}
|
||||
className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow flex flex-col"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between items-start mb-3 gap-2">
|
||||
<h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-1">
|
||||
{workspace.name}
|
||||
</h3>
|
||||
<RoleBadge role={workspace.my_role} />
|
||||
<Card key={workspace.id} className="flex flex-col text-slate-800 dark:text-slate-100 dark:bg-slate-800 dark:border-slate-700 shadow-sm">
|
||||
<CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between py-4 px-6 gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<CardTitle className="text-lg line-clamp-1">
|
||||
{workspace.name}
|
||||
</CardTitle>
|
||||
<RoleBadge role={workspace.my_role} />
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-1">
|
||||
{workspace.description || t.workspace?.noDescription || 'No description'}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
|
||||
{workspace.description || t.workspace?.noDescription || 'No description'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
onClick={() => navigate(`/workspaces/${workspace.id}`)}
|
||||
className="rounded-xl hover:text-blue-600 dark:hover:text-blue-400"
|
||||
title={t.workspace?.view || 'View'}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{isOwner && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setDeleteModal({ isOpen: true, workspace })}
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/20"
|
||||
title={t.actions?.delete || 'Delete'}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{isAdmin && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
|
||||
className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
|
||||
title={t.actions?.edit || 'Edit'}
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{isAdmin && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
|
||||
className="rounded-xl hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
title={t.workspace?.edit || 'Edit'}
|
||||
onClick={() => navigate(`/workspaces/${workspace.id}`)}
|
||||
className="h-8 w-8 hover:bg-blue-700 dark:hover:bg-blue-500 border-none shadow-sm transition-all"
|
||||
title={t.actions?.view || 'View'}
|
||||
>
|
||||
<Edit2 className="h-4 w-4" />
|
||||
<ChevronRight className="h-4 w-4 rtl:-scale-x-100" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{isOwner && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
onClick={() => setDeleteModal({ isOpen: true, workspace })}
|
||||
className="rounded-xl hover:text-red-600 dark:hover:text-red-400"
|
||||
title={t.workspace?.delete || 'Delete'}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
|
||||
{workspaces.length === 0 && (
|
||||
<div className="col-span-full py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
|
||||
<div className="py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
|
||||
<p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalCount={totalItems}
|
||||
limit={limit}
|
||||
onPageChange={setCurrentPage}
|
||||
onLimitChange={setLimit}
|
||||
pageSizeOptions={[9, 12, 24]} // Custom options for Workspaces
|
||||
/>
|
||||
</>
|
||||
currentPage={currentPage}
|
||||
totalCount={totalItems}
|
||||
limit={limit}
|
||||
onPageChange={setCurrentPage}
|
||||
onLimitChange={setLimit}
|
||||
pageSizeOptions={[10, 20, 50]}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Modal */}
|
||||
{deleteModal.isOpen && deleteModal.workspace && (
|
||||
<div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-2xl p-6 max-w-md w-full shadow-2xl border border-slate-200 dark:border-slate-800">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{t.workspace?.deleteTitle || 'Delete Workspace'}</h3>
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-5 text-sm leading-relaxed">
|
||||
{t.workspace?.deleteWarning || 'To confirm deletion, please type the workspace name:'} <strong className="text-slate-900 dark:text-white select-all">{deleteModal.workspace.name}</strong>
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
value={deleteInput}
|
||||
onChange={(e) => setDeleteInput(e.target.value)}
|
||||
placeholder={deleteModal.workspace.name}
|
||||
className="w-full border rounded-xl p-3 mb-6 bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-red-500 transition-shadow"
|
||||
/>
|
||||
<div className="flex justify-end gap-3">
|
||||
{deleteModal.workspace && (
|
||||
<Modal
|
||||
isOpen={deleteModal.isOpen}
|
||||
onClose={() => {
|
||||
setDeleteModal({ isOpen: false, workspace: null });
|
||||
setDeleteInput('');
|
||||
}}
|
||||
title={t.workspace?.deleteTitle || 'Delete Workspace'}
|
||||
maxWidth="max-w-md"
|
||||
footer={
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => { setDeleteModal({ isOpen: false, workspace: null }); setDeleteInput(''); }}
|
||||
onClick={() => {
|
||||
setDeleteModal({ isOpen: false, workspace: null });
|
||||
setDeleteInput('');
|
||||
}}
|
||||
className="rounded-xl font-semibold"
|
||||
>
|
||||
{t.workspace?.cancel || 'Cancel'}
|
||||
{t.actions?.cancel || 'Cancel'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
@@ -252,11 +248,24 @@ export default function Workspaces() {
|
||||
onClick={confirmDelete}
|
||||
className="rounded-xl font-semibold"
|
||||
>
|
||||
{t.workspace?.delete || 'Delete'}
|
||||
{t.actions?.delete || 'Delete'}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
|
||||
{t.workspace?.deleteWarning || 'To confirm deletion, please type the workspace name:'} <strong className="text-slate-900 dark:text-white select-all">{deleteModal.workspace.name}</strong>
|
||||
</p>
|
||||
|
||||
<Input
|
||||
type="text"
|
||||
value={deleteInput}
|
||||
onChange={(e) => setDeleteInput(e.target.value)}
|
||||
placeholder={deleteModal.workspace.name}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user