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

feat(workspace): add WorkspaceEdit and WorkspaceCreate pages

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-03-13 01:56:56 +08:00
parent 228de3c180
commit b291689b1c
11 changed files with 1287 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/pages/Workspaces.tsx
View File

@@ -6,6 +6,7 @@ import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspa
import { useAppContext } from '../context/AppContext';
import { useTranslation } from '../hooks/useTranslation';
import FilterBar from '../components/FilterBar';
import { Button } from '../components/ui/button';
type WorkspaceRole = "owner" | "admin" | "member" | "guest";
@@ -90,13 +91,13 @@ export default function Workspaces() {
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title}</h1>
<p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle}</p>
</div>
<button
<Button
onClick={() => navigate('/workspaces/create')}
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"
className="gap-2 rounded-xl shadow-sm"
>
<Plus className="h-5 w-5" />
{t.workspace?.createNew}
</button>
</Button>
</div>
<FilterBar
@@ -135,32 +136,38 @@ export default function Workspaces() {
</div>
<div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
<button
<Button
variant="secondary"
size="icon"
onClick={() => navigate(`/workspaces/${workspace.id}`)}
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"
className="rounded-xl hover:text-blue-600 dark:hover:text-blue-400"
title={t.workspace?.view}
>
<Eye className="h-4 w-4" />
</button>
</Button>
{isAdmin && (
<button
<Button
variant="secondary"
size="icon"
onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
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"
className="rounded-xl hover:text-emerald-600 dark:hover:text-emerald-400"
title={t.workspace?.edit}
>
<Edit2 className="h-4 w-4" />
</button>
</Button>
)}
{isOwner && (
<button
<Button
variant="secondary"
size="icon"
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"
className="rounded-xl hover:text-red-600 dark:hover:text-red-400"
title={t.workspace?.delete}
>
<Trash2 className="h-4 w-4" />
</button>
</Button>
)}
</div>
</div>
@@ -190,19 +197,21 @@ export default function Workspaces() {
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
<Button
variant="secondary"
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"
className="rounded-xl font-semibold"
>
{t.workspace?.cancel || 'Cancel'}
</button>
<button
</Button>
<Button
variant="destructive"
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"
className="rounded-xl font-semibold"
>
{t.workspace?.delete || 'Delete'}
</button>
</Button>
</div>
</div>
</div>