feat(projects): add Projects page and component modals + translations
This commit is contained in:
108
src/components/projects/ProjectCreateModal.tsx
Normal file
108
src/components/projects/ProjectCreateModal.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useTranslation } from "../../hooks/useTranslation";
|
||||
import { Modal } from "../Modal";
|
||||
import { createProject } from "../../api/projects";
|
||||
import { getClients } from "../../api/clients";
|
||||
import { useWorkspace } from "../../context/WorkspaceContext";
|
||||
import { Select } from "../ui/Select";
|
||||
import { Input } from "../ui/input";
|
||||
|
||||
interface ProjectCreateModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen, onClose }) => {
|
||||
const { t } = useTranslation();
|
||||
const { activeWorkspace } = useWorkspace();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [clients, setClients] = useState<any[]>([]);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
description: "",
|
||||
color: "#3B82F6",
|
||||
client: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && activeWorkspace) {
|
||||
getClients(activeWorkspace.id)
|
||||
.then((res: any) => setClients(res.results || res))
|
||||
.catch(console.error);
|
||||
}
|
||||
}, [isOpen, activeWorkspace]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!activeWorkspace || !formData.name) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const newProject = await createProject({
|
||||
workspace: activeWorkspace.id,
|
||||
name: formData.name,
|
||||
description: formData.description,
|
||||
color: formData.color,
|
||||
client: formData.client || null,
|
||||
});
|
||||
|
||||
window.dispatchEvent(new CustomEvent("project_created", { detail: newProject }));
|
||||
onClose();
|
||||
setFormData({ name: "", description: "", color: "#3B82F6", client: "" });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const footer = (
|
||||
<>
|
||||
<button onClick={onClose} type="button" className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600 dark:hover:bg-slate-700">
|
||||
{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}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title={t.projects.create_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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.select_client}</label>
|
||||
<Select
|
||||
value={formData.client}
|
||||
onChange={(val) => setFormData({ ...formData, client: val })}
|
||||
options={[
|
||||
{ value: "", label: t.projects.no_client },
|
||||
...clients.map(c => ({ value: c.id, label: c.name }))
|
||||
]}
|
||||
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>
|
||||
);
|
||||
};
|
||||
137
src/components/projects/ProjectEditModal.tsx
Normal file
137
src/components/projects/ProjectEditModal.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useTranslation } from "../../hooks/useTranslation";
|
||||
import { Modal } from "../Modal";
|
||||
import { updateProject, toggleArchiveProject } from "../../api/projects";
|
||||
import { getClients } from "../../api/clients";
|
||||
import { useWorkspace } from "../../context/WorkspaceContext";
|
||||
import { Archive, RefreshCcw } from "lucide-react";
|
||||
import { Select } from "../ui/Select";
|
||||
import { Input } from "../ui/input";
|
||||
|
||||
interface ProjectEditModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
project: any;
|
||||
}
|
||||
|
||||
export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onClose, project }) => {
|
||||
const { t } = useTranslation();
|
||||
const { activeWorkspace } = useWorkspace();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [clients, setClients] = useState<any[]>([]);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
description: "",
|
||||
color: "#3B82F6",
|
||||
client: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && activeWorkspace) {
|
||||
getClients(activeWorkspace.id).then((res: any) => setClients(res.results || res));
|
||||
}
|
||||
}, [isOpen, activeWorkspace]);
|
||||
|
||||
useEffect(() => {
|
||||
if (project) {
|
||||
setFormData({
|
||||
name: project.name || "",
|
||||
description: project.description || "",
|
||||
color: project.color || "#3B82F6",
|
||||
client: project.client ? project.client.id : "",
|
||||
});
|
||||
}
|
||||
}, [project]);
|
||||
|
||||
const handleSubmit = async (e?: React.FormEvent) => {
|
||||
e?.preventDefault();
|
||||
if (!project || !formData.name) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const updated = await updateProject(project.id, {
|
||||
name: formData.name,
|
||||
description: formData.description,
|
||||
color: formData.color,
|
||||
client: formData.client || null,
|
||||
});
|
||||
|
||||
window.dispatchEvent(new CustomEvent("project_updated", { detail: updated }));
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleArchiveToggle = async () => {
|
||||
if (!project) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const updated = await toggleArchiveProject(project.id);
|
||||
window.dispatchEvent(new CustomEvent("project_updated", { detail: updated }));
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const footer = (
|
||||
<div className="flex justify-between w-full">
|
||||
<button
|
||||
onClick={handleArchiveToggle}
|
||||
type="button"
|
||||
disabled={loading}
|
||||
className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border ${
|
||||
project?.is_archived
|
||||
? "text-green-600 border-green-600 hover:bg-green-50"
|
||||
: "text-amber-600 border-amber-600 hover:bg-amber-50"
|
||||
}`}
|
||||
>
|
||||
{project?.is_archived ? <RefreshCcw size={16} /> : <Archive size={16} />}
|
||||
{project?.is_archived ? t.projects.restore : t.projects.archive}
|
||||
</button>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button onClick={onClose} type="button" className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600">
|
||||
{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.save || "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
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" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.select_client}</label>
|
||||
<Select
|
||||
value={formData.client}
|
||||
onChange={(val) => setFormData({ ...formData, client: val })}
|
||||
options={[
|
||||
{ value: "", label: t.projects.no_client },
|
||||
...clients.map(c => ({ value: c.id, label: c.name }))
|
||||
]}
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user