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

fix(projects): add translation and fix minor details in Projects create modal

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-03-16 16:10:19 +08:00
parent 501e6c7ed2
commit 99257ef70f
6 changed files with 177 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/projects/ProjectEditModal.tsx
View File

@@ -7,6 +7,8 @@ import { useWorkspace } from "../../context/WorkspaceContext";
import { Archive, RefreshCcw } from "lucide-react";
import { Select } from "../ui/Select";
import { Input } from "../ui/input";
import { TextAreaInput } from "../ui/TextAreaInput";
import { toast } from "sonner";
interface ProjectEditModalProps {
isOpen: boolean;
@@ -25,10 +27,15 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
color: "#3B82F6",
client: "",
});
const [loadingClients, setLoadingClients] = useState(false);
useEffect(() => {
if (isOpen && activeWorkspace) {
getClients(activeWorkspace.id).then((res: any) => setClients(res.results || res));
setLoadingClients(true);
getClients(activeWorkspace.id)
.then((res: any) => setClients(res.results || res))
.catch((err) => toast.error(t.projects?.clientFetchError || err.message || "Failed to load clients"))
.finally(() => setLoadingClients(false));
}
}, [isOpen, activeWorkspace]);
@@ -107,29 +114,66 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
);
return (
<Modal isOpen={isOpen} onClose={onClose} title={t.projects.edit_project} footer={footer}>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.project_name}</label>
<Input type="text" required value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} className="w-full px-3 py-2 border rounded-lg dark:bg-slate-800 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500" />
<Modal isOpen={isOpen} onClose={onClose} title={t.projects.editProject} footer={footer}>
<form onSubmit={handleSubmit} className="space-y-4 mb-6">
<div className="flex items-end gap-3">
<div className="flex-1">
<label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">
{t.projects.titleLabel}
</label>
<Input
type="text"
required
value={formData.name}
placeholder={t.projects?.titlePlaceholder}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full px-3 py-2 border rounded-lg dark:bg-slate-800 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="flex flex-col items-center shrink-0">
<div className="mb-1 text-sm font-medium invisible">C</div>
<div
className="relative w-10 h-10 rounded-full overflow-hidden border border-slate-300 dark:border-slate-600 shadow-sm cursor-pointer shrink-0"
title={t.projects.colorLabel}
>
<input
type="color"
value={formData.color}
onChange={(e) => setFormData({ ...formData, color: e.target.value })}
className="absolute -top-2 -left-2 w-16 h-16 cursor-pointer"
/>
</div>
</div>
</div>
<div>
<label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.select_client}</label>
<label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">
{t.projects?.descriptionLabel || 'Description'}
</label>
<TextAreaInput
value={formData.description}
placeholder={t.projects?.titlePlaceholder}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
className="w-full px-3 py-2 border rounded-lg dark:text-slate-100 dark:bg-slate-800 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500 min-h-[80px] resize-y"
/>
</div>
<div>
<label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">
{t.projects.clientLabel}
</label>
<Select
value={formData.client}
onChange={(val) => setFormData({ ...formData, client: val })}
options={[
{ value: "", label: t.projects.no_client },
{ value: "", label: t.projects.noClient },
...clients.map(c => ({ value: c.id, label: c.name }))
]}
isLoading={loadingClients}
className="w-full"
buttonClassName="w-full"
/>
</div>
<div>
<label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.project_color}</label>
<Input type="color" value={formData.color} onChange={(e) => setFormData({ ...formData, color: e.target.value })} className="w-14 h-10 p-1 border rounded-lg cursor-pointer dark:bg-slate-800 dark:border-slate-700" />
</div>
</form>
</Modal>