262 lines
10 KiB
TypeScript
262 lines
10 KiB
TypeScript
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";
|
|
import { TextAreaInput } from "../ui/TextAreaInput";
|
|
import { toast } from "sonner";
|
|
import { PROJECTS_ARCHIVE, PROJECTS_EDIT, canWorkspace } from "../../lib/permissions";
|
|
|
|
interface ProjectEditModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
project: any;
|
|
}
|
|
|
|
export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onClose, project }) => {
|
|
const { t } = useTranslation();
|
|
const { activeWorkspace } = useWorkspace();
|
|
const canEditProject = canWorkspace(activeWorkspace?.my_role, PROJECTS_EDIT);
|
|
const canArchiveProject = canWorkspace(activeWorkspace?.my_role, PROJECTS_ARCHIVE);
|
|
const [loading, setLoading] = useState(false);
|
|
const [clients, setClients] = useState<any[]>([]);
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
description: "",
|
|
color: "#3B82F6",
|
|
client: "",
|
|
});
|
|
const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
|
|
const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
|
|
const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
|
|
const [clearThumbnail, setClearThumbnail] = useState(false);
|
|
const [loadingClients, setLoadingClients] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (isOpen && activeWorkspace) {
|
|
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]);
|
|
|
|
useEffect(() => {
|
|
if (project) {
|
|
setFormData({
|
|
name: project.name || "",
|
|
description: project.description || "",
|
|
color: project.color || "#3B82F6",
|
|
client: project.client ? project.client.id : "",
|
|
});
|
|
setThumbnailUrl(project.thumbnail || null);
|
|
setThumbnailFile(null);
|
|
setClearThumbnail(false);
|
|
}
|
|
}, [project]);
|
|
|
|
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) return;
|
|
if (!["image/jpeg", "image/png", "image/webp"].includes(file.type)) {
|
|
toast.error(t.workspace?.thumbnailInvalidType || "Unsupported image type. Use JPG, PNG, or WebP.");
|
|
return;
|
|
}
|
|
if (file.size > 2 * 1024 * 1024) {
|
|
toast.error(t.workspace?.thumbnailMaxSizeError || "Image size must be 2MB or less.");
|
|
return;
|
|
}
|
|
setThumbnailFile(file);
|
|
setClearThumbnail(false);
|
|
};
|
|
|
|
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,
|
|
thumbnail: thumbnailFile,
|
|
clear_thumbnail: clearThumbnail,
|
|
});
|
|
|
|
toast.success(t.projects?.updateSuccess || "Project updated successfully.");
|
|
window.dispatchEvent(new CustomEvent("project_updated", { detail: updated }));
|
|
onClose();
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error(t.projects?.updateError || "Failed to update project.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleArchiveToggle = async () => {
|
|
if (!project) return;
|
|
setLoading(true);
|
|
try {
|
|
const updated = await toggleArchiveProject(project.id);
|
|
toast.success(
|
|
project?.is_archived
|
|
? t.projects?.restoreSuccess || t.projects?.updateSuccess || "Project updated successfully."
|
|
: t.projects?.archiveSuccess || t.projects?.updateSuccess || "Project updated successfully.",
|
|
);
|
|
window.dispatchEvent(new CustomEvent("project_updated", { detail: updated }));
|
|
onClose();
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error(t.projects?.updateError || "Failed to update project.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const footer = (
|
|
<div className="flex justify-between w-full">
|
|
{canArchiveProject ? (
|
|
<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 />
|
|
)}
|
|
|
|
<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 form="edit-project-form" disabled={loading || !formData.name} type="submit" 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>
|
|
);
|
|
|
|
if (!canEditProject) return null;
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} title={t.projects.editProject} footer={footer}>
|
|
<form id="edit-project-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.workspace?.thumbnailLabel || "Thumbnail"}
|
|
</label>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-2xl text-sm font-semibold text-white" style={{ backgroundColor: formData.color || "#3B82F6" }}>
|
|
{thumbnailPreview ? (
|
|
<img src={thumbnailPreview} alt="" className="h-full w-full object-cover" />
|
|
) : !clearThumbnail && thumbnailUrl ? (
|
|
<img src={thumbnailUrl} alt="" className="h-full w-full object-cover" />
|
|
) : (
|
|
formData.name.trim().charAt(0).toUpperCase() || "P"
|
|
)}
|
|
</div>
|
|
<Input type="file" accept="image/jpeg,image/png,image/webp" onChange={(event) => handleThumbnailChange(event.target.files?.[0] || null)} />
|
|
{(thumbnailFile || (!clearThumbnail && thumbnailUrl)) ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setThumbnailFile(null);
|
|
setClearThumbnail(true);
|
|
}}
|
|
className="rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600"
|
|
>
|
|
{t.remove || "Remove"}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<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.noClient },
|
|
...clients.map(c => ({ value: c.id, label: c.name }))
|
|
]}
|
|
isLoading={loadingClients}
|
|
className="w-full"
|
|
buttonClassName="w-full"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
};
|