Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions 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

66
src/components/projects/ProjectCreateModal.tsx
View File

@@ -6,6 +6,8 @@ import { getClients } from "../../api/clients";
import { useWorkspace } from "../../context/WorkspaceContext";
import { Select } from "../ui/Select";
import { Input } from "../ui/input";
import { TextAreaInput } from "../ui/TextAreaInput";
import { toast } from "sonner";
interface ProjectCreateModalProps {
isOpen: boolean;
@@ -23,12 +25,15 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen,
color: "#3B82F6",
client: "",
});
const [loadingClients, setLoadingClients] = useState(false);
useEffect(() => {
if (isOpen && activeWorkspace) {
setLoadingClients(true);
getClients(activeWorkspace.id)
.then((res: any) => setClients(res.results || res))
.catch(console.error);
.catch((err) => toast.error(t.projects?.clientFetchError || err.message || "Failed to load clients"))
.finally(() => setLoadingClients(false));
}
}, [isOpen, activeWorkspace]);
@@ -62,46 +67,75 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen,
{t.actions?.cancel || "Cancel"}
</button>
<button onClick={handleSubmit} disabled={loading || !formData.name} type="button" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
{loading ? "..." : t.projects.create_project}
{loading ? "..." : t.projects?.create}
</button>
</>
);
return (
<Modal isOpen={isOpen} onClose={onClose} title={t.projects.create_project} footer={footer}>
<Modal isOpen={isOpen} onClose={onClose} title={t.projects?.createProject} 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>
{/* ردیف اول: عنوان و انتخاب رنگ */}
<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>
);

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>

37
src/components/ui/Select.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import { useTranslation } from "../../hooks/useTranslation";
export interface SelectOption {
value: string | number;
@@ -12,6 +13,9 @@ interface SelectProps {
options: SelectOption[];
className?: string;
buttonClassName?: string;
isLoading?: boolean;
disabled?: boolean;
loadingText?: string;
}
export const Select: React.FC<SelectProps> = ({
@@ -20,12 +24,17 @@ export const Select: React.FC<SelectProps> = ({
options,
className = "",
buttonClassName = "",
isLoading = false,
disabled = false,
loadingText = "",
}) => {
const [isOpen, setIsOpen] = useState(false);
const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});
const buttonRef = useRef<HTMLButtonElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
const { t } = useTranslation()
loadingText = loadingText || t.loadingText
// Close dropdown when clicking outside
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
@@ -85,34 +94,36 @@ export const Select: React.FC<SelectProps> = ({
}, [isOpen]);
const selectedOption = options.find((o) => o.value === value) || options[0];
const isDisabled = disabled || isLoading;
return (
<div className={`relative inline-block ${className}`}>
<button
ref={buttonRef}
type="button"
onClick={() => setIsOpen(!isOpen)}
className={`flex items-center justify-between bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-3 py-2 text-sm text-slate-700 dark:text-slate-300 outline-none focus:ring-2 focus:ring-blue-500 ${buttonClassName}`}
disabled={isDisabled}
onClick={() => !isDisabled && setIsOpen(!isOpen)}
className={`flex items-center justify-between bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-3 py-2 text-sm text-slate-700 dark:text-slate-300 outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed ${buttonClassName}`}
>
<span className="truncate">{selectedOption?.label}</span>
<span className="truncate">{isLoading ? loadingText : selectedOption?.label}</span>
{isLoading ? (
<svg className="w-4 h-4 ml-2 rtl:ml-0 rtl:mr-2 animate-spin text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
) : (
<svg
className={`w-4 h-4 ml-2 rtl:ml-0 rtl:mr-2 transition-transform ${
isOpen ? "rotate-180" : ""
}`}
className={`w-4 h-4 ml-2 rtl:ml-0 rtl:mr-2 transition-transform ${isOpen ? "rotate-180" : ""}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 9l-7 7-7-7"
></path>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
</svg>
)}
</button>
{isOpen &&
{isOpen && !isDisabled &&
createPortal(
<div
ref={dropdownRef}

13
src/locales/en.ts
View File

@@ -9,6 +9,7 @@ export const en = {
save: "Save",
lightMode: "Light Mode",
darkMode: "Dark Mode",
loadingText: "Loading...",
actions: {
create: "Create",
@@ -259,6 +260,12 @@ export const en = {
archived: "Archived Projects",
createNew: "Create New",
searchPlaceholder: "Search projects...",
titlePlaceholder: "Enter title",
descriptionPlaceholder: "Enter desription",
titleLabel: "Title",
clientLabel: "Client",
colorLabel: "Color",
descriptionLabel: "Description",
loading: "Loading...",
client: "Client",
noClient: "No client",
@@ -268,6 +275,12 @@ export const en = {
deleteSuccess: "Project deleted successfully",
deleteError: "Failed to delete project",
cancel: "Cancel",
create: "Create",
createProject: "Create New Project",
editProject: "Edit Project",
restore: "Restore",
archive: "Archive",
clientFetchError: "Failed to load clients.",
},
}

16
src/locales/fa.ts
View File

@@ -9,6 +9,7 @@ export const fa = {
save: "ذخیره",
lightMode: "حالت روشن",
darkMode: "حالت تاریک",
loadingText: "در حال بارگزاری...",
actions: {
create: "ایجاد",
@@ -253,9 +254,15 @@ export const fa = {
title: "پروژه‌ها",
description: (workspaceName: string) => `مدیریت پروژه‌ها برای ${workspaceName}`,
active: "پروژه‌های فعال",
archived: "پروژه‌های آرشیو شده",
archived: "پروژه‌های بایگانی شده",
createNew: "ایجاد پروژه جدید",
searchPlaceholder: "جستجوی پروژه‌ها...",
titlePlaceholder: "عنوان پروژه",
descriptionPlaceholder: "توضیحات پروژه",
titleLabel: "عنوان",
descriptionLabel: "توضیحات",
clientLabel: "مشتری",
colorLabel: "رنگ",
loading: "در حال بارگذاری...",
client: "مشتری",
noClient: "بدون مشتری",
@@ -264,7 +271,12 @@ export const fa = {
deleteWarning: "برای تایید حذف، لطفاً نام پروژه را تایپ کنید:",
deleteSuccess: "پروژه با موفقیت حذف شد",
deleteError: "خطا در حذف پروژه",
create: "ایجاد",
cancel: "انصراف",
createProject: "ایجاد پروژه",
editProject: "ویرایش پروژه",
restore: "بازیابی",
archive: "بایگانی",
clientFetchError: "خطا در دریافت لیست مشتریان.",
},
}

9
src/pages/Projects.tsx
View File

@@ -161,8 +161,15 @@ export const Projects: React.FC = () => {
</CardTitle>
</div>
<p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-1">
{project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noDescription || 'No description'}
{project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noClient || 'No client'}
</p>
{project.description && (
<p className="text-sm text-slate-600 dark:text-slate-300 mt-2 line-clamp-2">
{project.description}
</p>
)}
</div>
<div className="flex items-center gap-2 shrink-0">