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

feat(workspaces): add thumbnail UI across workspace surfaces

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-28 11:38:35 +03:30
parent 599e25e836
commit f45038d398
5 changed files with 440 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/api/workspaces.ts
View File

@@ -4,6 +4,7 @@ export interface Workspace {
id: string;
name: string;
description?: string;
thumbnail?: string | null;
owner?: string;
my_role?: 'owner' | 'admin' | 'member' | 'guest';
[key: string]: any;
@@ -77,10 +78,35 @@ export const getWorkspace = async (id: string): Promise<Workspace> => {
return await response.json();
};
export const createWorkspace = async (data: { name: string; description: string; members?: any[] }): Promise<Workspace> => {
export const createWorkspace = async (data: {
name: string;
description: string;
members?: any[];
thumbnail?: File | null;
}): Promise<Workspace> => {
const hasFile = data.thumbnail instanceof File;
const body = hasFile
? (() => {
const formData = new FormData();
formData.append("name", data.name);
formData.append("description", data.description);
if (Array.isArray(data.members)) {
formData.append("members", JSON.stringify(data.members));
}
if (data.thumbnail) {
formData.append("thumbnail", data.thumbnail);
}
return formData;
})()
: JSON.stringify({
name: data.name,
description: data.description,
members: data.members,
});
const response = await authFetch('/api/workspaces/', {
method: 'POST',
body: JSON.stringify(data),
body,
});
if (!response.ok) {
@@ -90,10 +116,32 @@ export const createWorkspace = async (data: { name: string; description: string;
return await response.json();
};
export const updateWorkspace = async (id: string, data: { name?: string; description?: string }): Promise<Workspace> => {
export const updateWorkspace = async (
id: string,
data: {
name?: string;
description?: string;
thumbnail?: File | null;
clear_thumbnail?: boolean;
},
): Promise<Workspace> => {
const hasFile = data.thumbnail instanceof File;
const shouldClear = Boolean(data.clear_thumbnail);
const useForm = hasFile || shouldClear;
const body = useForm
? (() => {
const formData = new FormData();
if (data.name !== undefined) formData.append("name", data.name);
if (data.description !== undefined) formData.append("description", data.description);
if (data.thumbnail) formData.append("thumbnail", data.thumbnail);
if (shouldClear) formData.append("clear_thumbnail", "true");
return formData;
})()
: JSON.stringify(data);
const response = await authFetch(`/api/workspaces/${id}/`, {
method: 'PATCH',
body: JSON.stringify(data),
body,
});
if (!response.ok) {

19
src/components/WorkspaceSelector.tsx
View File

@@ -52,8 +52,7 @@ export const WorkspaceSelector: React.FC = () => {
if (activeWorkspace?.id === e.detail?.id) {
setActiveWorkspace({
...activeWorkspace,
name: e.detail.name,
description: e.detail.description
...e.detail,
} as Workspace);
}
refreshWorkspacesList();
@@ -123,8 +122,12 @@ export const WorkspaceSelector: React.FC = () => {
onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 px-3 py-2 text-base font-medium text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
>
<div className="w-6 h-6 flex items-center justify-center bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-md">
{activeWorkspace?.name?.charAt(0) || <Briefcase className="w-4 h-4" />}
<div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400">
{activeWorkspace?.thumbnail ? (
<img src={activeWorkspace.thumbnail} alt={activeWorkspace?.name || "Workspace"} className="h-full w-full object-cover" />
) : (
activeWorkspace?.name?.charAt(0)?.toUpperCase() || <Briefcase className="w-4 h-4" />
)}
</div>
<span className="max-w-30 truncate">
{activeWorkspace?.name || t.workspace?.title || "Workspaces"}
@@ -159,8 +162,12 @@ export const WorkspaceSelector: React.FC = () => {
className="w-full flex items-center justify-between px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
>
<div className="flex items-center gap-2 truncate">
<div className="w-6 h-6 flex items-center justify-center bg-slate-100 dark:bg-slate-800 rounded-md font-medium">
{ws.name.charAt(0)}
<div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-slate-100 font-medium dark:bg-slate-800">
{ws.thumbnail ? (
<img src={ws.thumbnail} alt={ws.name} className="h-full w-full object-cover" />
) : (
ws.name.charAt(0).toUpperCase()
)}
</div>
<span className="truncate">{ws.name}</span>
</div>

76
src/pages/WorkspaceCreate.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef, Fragment } from 'react';
import { useBlocker, useNavigate } from 'react-router-dom';
import { useTranslation } from '../hooks/useTranslation';
import { AlertCircle, UserPlus, Trash2, Shield, Loader2 } from 'lucide-react';
import { AlertCircle, UserPlus, Trash2, Shield, Loader2, UploadCloud } from 'lucide-react';
import { Dialog, Transition } from '@headlessui/react';
import { toast } from 'sonner';
import { createWorkspace } from '../api/workspaces';
@@ -40,6 +40,8 @@ export default function WorkspaceCreate() {
// Workspace Info States
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
const [isSaving, setIsSaving] = useState(false);
// Members States (Local)
@@ -55,7 +57,35 @@ export default function WorkspaceCreate() {
const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const hasUnsavedChanges = name.trim() !== '' || description.trim() !== '' || members.length > 0;
const hasUnsavedChanges = name.trim() !== '' || description.trim() !== '' || members.length > 0 || !!thumbnailFile;
useEffect(() => {
if (!thumbnailFile) {
setThumbnailPreview(null);
return;
}
const objectUrl = URL.createObjectURL(thumbnailFile);
setThumbnailPreview(objectUrl);
return () => URL.revokeObjectURL(objectUrl);
}, [thumbnailFile]);
const handleThumbnailChange = (file: File | null) => {
if (!file) {
setThumbnailFile(null);
return;
}
const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
if (!allowedTypes.includes(file.type)) {
toast.error(t.workspace?.thumbnailInvalidType || "Unsupported image type. Use JPG, PNG, or WebP.");
return;
}
const maxBytes = 2 * 1024 * 1024;
if (file.size > maxBytes) {
toast.error(t.workspace?.thumbnailMaxSizeError || "Image size must be 2MB or less.");
return;
}
setThumbnailFile(file);
};
useEffect(() => {
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
@@ -121,7 +151,8 @@ export default function WorkspaceCreate() {
const payload = {
name,
description,
members: members.map(m => ({ user_id: m.user.id, role: m.role }))
members: members.map(m => ({ user_id: m.user.id, role: m.role })),
thumbnail: thumbnailFile,
};
const newWorkspace = await createWorkspace(payload);
@@ -210,6 +241,45 @@ export default function WorkspaceCreate() {
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="mb-6">
<label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
{t.workspace?.thumbnailLabel || "Thumbnail"}
</label>
<label className="mt-3 flex aspect-square w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-dashed border-slate-300 bg-slate-100 text-5xl font-semibold text-slate-700 transition hover:bg-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
{thumbnailPreview ? (
<img
src={thumbnailPreview}
alt={name || "Workspace"}
className="h-full w-full object-cover"
/>
) : (
<div className="flex flex-col items-center gap-2 text-center">
<UploadCloud className="h-12 w-12 text-slate-500 dark:text-slate-400" />
<span className="text-sm font-medium text-slate-500 dark:text-slate-400">
{t.workspace?.uploadImage || "Click to upload image"}
</span>
</div>
)}
<Input
type="file"
accept=".jpg,.jpeg,.png,.webp"
className="hidden"
onChange={(e) => handleThumbnailChange(e.target.files?.[0] || null)}
/>
</label>
{thumbnailFile && (
<button
type="button"
onClick={() => setThumbnailFile(null)}
className="mt-2 text-xs text-red-600 hover:underline dark:text-red-400"
>
{t.workspace?.removeImage || "Remove image"}
</button>
)}
</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"

101
src/pages/WorkspaceEdit.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef, Fragment, useMemo, useCallback } from 'react';
import { useBlocker, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from '../hooks/useTranslation';
import { AlertCircle, UserPlus, Trash2, Shield } from 'lucide-react';
import { AlertCircle, UserPlus, Trash2, Shield, UploadCloud } from 'lucide-react';
import { Dialog, Transition } from '@headlessui/react';
import { toast } from 'sonner';
import { getPriceUnits, getWorkspaceUserRates, type PriceUnit, type WorkspaceUserRate } from '../api/rates';
@@ -55,6 +55,10 @@ export default function EditWorkspace() {
// Workspace Info States
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
const [clearThumbnail, setClearThumbnail] = useState(false);
const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
const [myRole, setMyRole] = useState<WorkspaceRole>('member');
const [workspaceOwnerId, setWorkspaceOwnerId] = useState<string>('');
const [isLoading, setIsLoading] = useState(true);
@@ -91,9 +95,39 @@ export default function EditWorkspace() {
const isNameChanged = name.trim() !== (initialData.name || '').trim();
const isDescChanged = description.trim() !== (initialData.description || '').trim();
const isImageChanged = !!thumbnailFile || clearThumbnail;
return isNameChanged || isDescChanged;
}, [name, description, initialData, isLoading]);
return isNameChanged || isDescChanged || isImageChanged;
}, [name, description, initialData, isLoading, thumbnailFile, clearThumbnail]);
useEffect(() => {
if (!thumbnailFile) {
setThumbnailPreview(null);
return;
}
const objectUrl = URL.createObjectURL(thumbnailFile);
setThumbnailPreview(objectUrl);
return () => URL.revokeObjectURL(objectUrl);
}, [thumbnailFile]);
const handleThumbnailChange = (file: File | null) => {
if (!file) {
setThumbnailFile(null);
return;
}
const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
if (!allowedTypes.includes(file.type)) {
toast.error(t.workspace?.thumbnailInvalidType || "Unsupported image type. Use JPG, PNG, or WebP.");
return;
}
const maxBytes = 2 * 1024 * 1024;
if (file.size > maxBytes) {
toast.error(t.workspace?.thumbnailMaxSizeError || "Image size must be 2MB or less.");
return;
}
setThumbnailFile(file);
setClearThumbnail(false);
};
useEffect(() => {
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
@@ -130,6 +164,9 @@ export default function EditWorkspace() {
const workspaceData = await getWorkspace(id!);
setName(workspaceData.name);
setDescription(workspaceData.description || '');
setThumbnailUrl(workspaceData.thumbnail || null);
setThumbnailFile(null);
setClearThumbnail(false);
setMyRole(workspaceData.my_role || 'member');
setWorkspaceOwnerId(workspaceData.owner || '');
@@ -225,10 +262,15 @@ export default function EditWorkspace() {
if (!name.trim() || !id) return;
try {
setIsSaving(true);
await updateWorkspace(id, { name, description });
const updatedWorkspace = await updateWorkspace(id, {
name,
description,
thumbnail: thumbnailFile,
clear_thumbnail: clearThumbnail,
});
toast.success(t.workspace?.toast?.successUpdate || "Workspace updated successfully.");
window.dispatchEvent(new CustomEvent('workspace_edited', {
detail: { id, name, description }
detail: updatedWorkspace
}));
navigate('/workspaces');
} catch (error) {
@@ -328,6 +370,55 @@ export default function EditWorkspace() {
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="mb-6">
<label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
{t.workspace?.thumbnailLabel || "Thumbnail"}
</label>
<label className="mt-3 flex aspect-square w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-dashed border-slate-300 bg-slate-100 text-5xl font-semibold text-slate-700 transition hover:bg-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
{thumbnailPreview ? (
<img
src={thumbnailPreview}
alt={name || "Workspace"}
className="h-full w-full object-cover"
/>
) : !clearThumbnail && thumbnailUrl ? (
<img
src={thumbnailUrl}
alt={name || "Workspace"}
className="h-full w-full object-cover"
/>
) : (
<div className="flex flex-col items-center gap-2 text-center">
<UploadCloud className="h-10 w-10 text-slate-500 dark:text-slate-400" />
<span className="text-sm font-medium text-slate-500 dark:text-slate-400">
{t.workspace?.uploadImage || "Click to upload image"}
</span>
</div>
)}
<input
type="file"
accept=".jpg,.jpeg,.png,.webp"
className="hidden"
onChange={(e) => handleThumbnailChange(e.target.files?.[0] || null)}
/>
</label>
{(thumbnailUrl || thumbnailFile) && (
<button
type="button"
onClick={() => {
setThumbnailFile(null);
setClearThumbnail(true);
}}
className="mt-2 text-xs text-red-600 hover:underline dark:text-red-400"
>
{t.workspace?.removeImage || "Remove image"}
</button>
)}
</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"}

9
src/pages/Workspaces.tsx
View File

@@ -157,10 +157,17 @@ export default function Workspaces() {
<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">
<div className="h-9 w-9 shrink-0 overflow-hidden rounded-lg bg-slate-100 dark:bg-slate-600 flex items-center justify-center text-sm font-semibold text-slate-700 dark:text-slate-200">
{workspace.thumbnail ? (
<img src={workspace.thumbnail} alt={workspace.name} className="h-full w-full object-cover" />
) : (
workspace.name.trim().charAt(0).toUpperCase() || "W"
)}
</div>
<CardTitle className="text-lg line-clamp-1">
{workspace.name}
</CardTitle>
<RoleBadge role={workspace.my_role} />
<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'}