Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(workspaces): add FilterBar component and search/ordering to Workspaces.tsx

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-03-12 21:47:19 +08:00
parent 5e4f4ec6e4
commit 228de3c180
5 changed files with 261 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/api/workspaces.ts
View File

@@ -1,3 +1,4 @@
// src/api/workspaces.ts
import { authFetch } from "./client";
export interface Workspace {
@@ -9,8 +10,10 @@ export interface Workspace {
[key: string]: any;
}
export const fetchWorkspaces = async (): Promise<Workspace[]> => {
const response = await authFetch("/api/workspaces/");
export const fetchWorkspaces = async (params?: Record<string, string>): Promise<Workspace[]> => {
const query = params ? new URLSearchParams(params).toString() : '';
const url = `/api/workspaces/${query ? `?${query}` : ''}`;
const response = await authFetch(url);
if (!response.ok) {
throw new Error("Failed to fetch workspaces");
@@ -22,37 +25,26 @@ export const fetchWorkspaces = async (): Promise<Workspace[]> => {
export const getWorkspace = async (id: string): Promise<Workspace> => {
const response = await authFetch(`/api/workspaces/${id}/`);
if (!response.ok) {
throw new Error("Failed to fetch workspace details");
}
if (!response.ok) throw new Error("Failed to fetch workspace details");
return await response.json();
};
export const createWorkspace = async (data: { name: string; description: string; members?: any[] }): Promise<Workspace> => {
const payload = {
name: data.name,
description: data.description,
members: data.members,
};
const response = await authFetch('/api/workspaces/', {
method: 'POST',
body: JSON.stringify(payload),
body: JSON.stringify(data),
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || JSON.stringify(errorData) || 'Failed to create workspace');
}
return await response.json();
};
export const updateWorkspace = async (id: string, data: { name?: string; description?: string }): Promise<Workspace> => {
const response = await authFetch(`/api/workspaces/${id}/`, {
method: 'PATCH', // Using PATCH as defined in API docs for partial updates
method: 'PATCH',
body: JSON.stringify(data),
});
@@ -60,7 +52,6 @@ export const updateWorkspace = async (id: string, data: { name?: string; descrip
const errorData = await response.json();
throw new Error(errorData.error || JSON.stringify(errorData) || 'Failed to update workspace');
}
return await response.json();
};

44
src/components/FilterBar.tsx Normal file
View File

@@ -0,0 +1,44 @@
// src/components/FilterBar.tsx
import { Search, ArrowUpDown } from 'lucide-react';
import { useTranslation } from '../hooks/useTranslation';
interface FilterBarProps {
searchQuery: string;
setSearchQuery: (val: string) => void;
ordering: string;
setOrdering: (val: string) => void;
orderingOptions: { value: string; label: string }[];
}
export default function FilterBar({ searchQuery, setSearchQuery, ordering, setOrdering, orderingOptions }: FilterBarProps) {
const { t } = useTranslation();
return (
<div className="flex flex-col sm:flex-row gap-4 mb-6">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder={t.workspace?.searchPlaceholder || 'Search...'}
className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow"
/>
</div>
<div className="flex items-center gap-2">
<ArrowUpDown className="h-5 w-5 text-slate-400 hidden sm:block" />
<select
value={ordering}
onChange={(e) => setOrdering(e.target.value)}
className="w-full sm:w-auto py-2.5 pl-3 pr-8 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow appearance-none"
>
{orderingOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
</div>
</div>
);
}

33
src/locales/en.ts
View File

@@ -130,8 +130,33 @@ export const en = {
view: "View",
edit: "Edit",
delete: "Delete",
emptyState: "You are not a member of any workspace."
}
emptyState: "You are not a member of any workspace.",
createTitle: "Create Workspace",
editTitle: "Edit Workspace",
detailTitle: "Workspace Details",
save: "Save",
create: "Create",
back: "Back to Workspaces",
roleLabel: "Your Role",
roles: {
owner: "Owner",
admin: "Admin",
member: "Member",
guest: "Guest",
},
createdSuccess: "Workspace created successfully",
updatedSuccess: "Workspace updated successfully",
fetchError: "Failed to load workspace data",
remove: "Remove",
noUsersFound: "No user found",
selectRole: "Select Role",
add: "Add",
orderByUpdatedDesc: "Recently Updated",
orderByCreatedDesc: "Newest First",
orderByCreatedAsc: "Oldest First",
orderByName: "Name (A-Z)",
deleteSuccess: "Workspace deleted successfully",
deleteTitle: "Delete Workspace",
deleteWarning: "To confirm deletion, please type the workspace name:",
},
}

31
src/locales/fa.ts
View File

@@ -131,8 +131,33 @@ export const fa = {
view: "مشاهده",
edit: "ویرایش",
delete: "حذف",
emptyState: "شما در هیچ فضای کاری عضو نیستید."
emptyState: "شما در هیچ فضای کاری عضو نیستید.",
createTitle: "ایجاد فضای کاری",
editTitle: "ویرایش فضای کاری",
detailTitle: "جزئیات فضای کاری",
save: "ذخیره",
create: "ایجاد",
back: "بازگشت به فضاهای کاری",
roleLabel: "نقش شما",
roles: {
owner: "مالک",
admin: "مدیر",
member: "عضو",
guest: "مهمان",
},
createdSuccess: "فضای کاری با موفقیت ایجاد شد",
updatedSuccess: "فضای کاری با موفقیت ویرایش شد",
fetchError: "خطا در دریافت اطلاعات فضای کاری",
remove: "حذف",
noUsersFound: "کاربری یافت نشد",
selectRole: "انتخاب نقش",
add: "افزودن",
orderByUpdatedDesc: "آخرین ویرایش",
orderByCreatedDesc: "جدیدترین",
orderByCreatedAsc: "قدیمی‌ترین",
orderByName: "نام (الف تا ی)",
deleteSuccess: "فضای کاری با موفقیت حذف شد",
deleteTitle: "حذف فضای کاری",
deleteWarning: "برای تأیید حذف، لطفاً نام فضای کاری را وارد کنید:",
},
}

137
src/pages/Workspaces.tsx
View File

@@ -1,49 +1,88 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Plus, Edit2, Trash2, Eye } 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';
type WorkspaceRole = "owner" | "admin" | "member" | "guest";
const RoleBadge = ({ role }: { role?: WorkspaceRole }) => {
const { t } = useTranslation();
if (!role) return null;
const styles: Record<string, string> = {
owner: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400',
admin: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
member: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400',
guest: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-400',
};
return (
<span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${styles[role] || styles.guest}`}>
{role ? t.workspace?.roles[role] : "-"}
</span>
);
};
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 [deleteModal, setDeleteModal] = useState<{isOpen: boolean; workspace: Workspace | null}>({isOpen: false, workspace: null});
const [deleteInput, setDeleteInput] = useState('');
const navigate = useNavigate();
const { user } = useAppContext();
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)' },
];
useEffect(() => {
const timer = setTimeout(() => {
loadWorkspaces();
}, []);
}, 400);
return () => clearTimeout(timer);
}, [searchQuery, ordering]);
const loadWorkspaces = async () => {
try {
setIsLoading(true);
const data = await fetchWorkspaces();
const params: Record<string, string> = {};
if (searchQuery) params.search = searchQuery;
if (ordering) params.ordering = ordering;
const data = await fetchWorkspaces(params);
setWorkspaces(data);
} catch (error) {
console.error('Error fetching workspaces', error);
toast.error(t.workspace?.fetchError || 'Error fetching workspaces');
} finally {
setIsLoading(false);
}
};
const handleDelete = async (id: string) => {
if (!window.confirm(t.workspace?.confirmDelete)) return;
const confirmDelete = async () => {
if (!deleteModal.workspace) return;
try {
await deleteWorkspace(id);
setWorkspaces(workspaces.filter((w) => w.id !== id));
await deleteWorkspace(deleteModal.workspace.id);
setWorkspaces(workspaces.filter((w) => w.id !== deleteModal.workspace!.id));
toast.success(t.workspace?.deleteSuccess || 'Workspace deleted successfully');
setDeleteModal({ isOpen: false, workspace: null });
setDeleteInput('');
} catch (error) {
console.error('Error deleting workspace', error);
alert(t.workspace?.deleteError);
toast.error(t.workspace?.deleteError || 'Failed to delete workspace');
}
};
if (isLoading) {
return <div className="p-8 text-center text-slate-500">{t.workspace?.loading}</div>;
}
return (
<div className="max-w-5xl mx-auto p-6">
<div className="flex justify-between items-center mb-8">
@@ -53,14 +92,27 @@ export default function Workspaces() {
</div>
<button
onClick={() => navigate('/workspaces/create')}
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors font-medium"
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-xl transition-colors font-medium shadow-sm"
>
<Plus className="h-5 w-5" />
{t.workspace?.createNew}
</button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<FilterBar
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
ordering={ordering}
setOrdering={setOrdering}
orderingOptions={orderingOptions}
/>
{isLoading ? (
<div className="p-12 flex justify-center text-slate-500">
<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">
{workspaces.map((workspace) => {
const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
const isAdmin = workspace.my_role === 'admin' || isOwner;
@@ -68,12 +120,15 @@ export default function Workspaces() {
return (
<div
key={workspace.id}
className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-5 shadow-sm flex flex-col"
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">
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
<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} />
</div>
<p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
{workspace.description || t.workspace?.noDescription}
</p>
@@ -82,7 +137,7 @@ export default function Workspaces() {
<div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
<button
onClick={() => navigate(`/workspaces/${workspace.id}`)}
className="p-2 text-slate-500 hover:text-blue-600 dark:hover:text-blue-400 bg-slate-50 dark:bg-slate-800 rounded-lg transition-colors"
className="p-2.5 text-slate-500 hover:text-blue-600 dark:hover:text-blue-400 bg-slate-50 dark:bg-slate-800 rounded-xl transition-colors"
title={t.workspace?.view}
>
<Eye className="h-4 w-4" />
@@ -91,7 +146,7 @@ export default function Workspaces() {
{isAdmin && (
<button
onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
className="p-2 text-slate-500 hover:text-emerald-600 dark:hover:text-emerald-400 bg-slate-50 dark:bg-slate-800 rounded-lg transition-colors"
className="p-2.5 text-slate-500 hover:text-emerald-600 dark:hover:text-emerald-400 bg-slate-50 dark:bg-slate-800 rounded-xl transition-colors"
title={t.workspace?.edit}
>
<Edit2 className="h-4 w-4" />
@@ -100,8 +155,8 @@ export default function Workspaces() {
{isOwner && (
<button
onClick={() => handleDelete(workspace.id)}
className="p-2 text-slate-500 hover:text-red-600 dark:hover:text-red-400 bg-slate-50 dark:bg-slate-800 rounded-lg transition-colors"
onClick={() => setDeleteModal({ isOpen: true, workspace })}
className="p-2.5 text-slate-500 hover:text-red-600 dark:hover:text-red-400 bg-slate-50 dark:bg-slate-800 rounded-xl transition-colors"
title={t.workspace?.delete}
>
<Trash2 className="h-4 w-4" />
@@ -113,11 +168,45 @@ export default function Workspaces() {
})}
{workspaces.length === 0 && (
<div className="col-span-full py-12 text-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl">
<p className="text-slate-500 dark:text-slate-400">{t.workspace?.emptyState}</p>
<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">
<p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
</div>
)}
</div>
)}
{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-red-600 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">
<button
onClick={() => { setDeleteModal({ isOpen: false, workspace: null }); setDeleteInput(''); }}
className="px-5 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl transition-colors font-semibold"
>
{t.workspace?.cancel || 'Cancel'}
</button>
<button
disabled={deleteInput !== deleteModal.workspace.name}
onClick={confirmDelete}
className="px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-xl disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-semibold"
>
{t.workspace?.delete || 'Delete'}
</button>
</div>
</div>
</div>
)}
</div>
);
}