feat: Implement internationalization for task management components
- Added translation support for task-related strings in ProjectTaskForm and ProjectTasksSection components. - Integrated translation for navigation items in the Navigation component. - Created ProjectCalendarWidget component with Polish translations for project statuses and deadlines. - Developed Tooltip component for enhanced user experience with tooltips. - Established a field change history logging system in the database with associated queries. - Enhanced task update logging to include translated status and priority changes. - Introduced server-side translations for system messages to improve localization.
This commit is contained in:
@@ -1,9 +1,11 @@
|
||||
import {
|
||||
getProjectWithContract,
|
||||
getNotesForProject,
|
||||
} from "@/lib/queries/projects";
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useSession } from "next-auth/react";
|
||||
import NoteForm from "@/components/NoteForm";
|
||||
import ProjectTasksSection from "@/components/ProjectTasksSection";
|
||||
import FieldWithHistory from "@/components/FieldWithHistory";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
|
||||
import Button from "@/components/ui/Button";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
@@ -15,10 +17,63 @@ import PageHeader from "@/components/ui/PageHeader";
|
||||
import ProjectStatusDropdown from "@/components/ProjectStatusDropdown";
|
||||
import ClientProjectMap from "@/components/ui/ClientProjectMap";
|
||||
|
||||
export default async function ProjectViewPage({ params }) {
|
||||
const { id } = await params;
|
||||
const project = await getProjectWithContract(id);
|
||||
const notes = await getNotesForProject(id);
|
||||
export default function ProjectViewPage() {
|
||||
const params = useParams();
|
||||
const { data: session } = useSession();
|
||||
const [project, setProject] = useState(null);
|
||||
const [notes, setNotes] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Helper function to check if user can delete a note
|
||||
const canDeleteNote = (note) => {
|
||||
if (!session?.user) return false;
|
||||
|
||||
// Admins can delete any note
|
||||
if (session.user.role === 'admin') return true;
|
||||
|
||||
// Users can delete their own notes
|
||||
return note.created_by === session.user.id;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (!params.id) return;
|
||||
|
||||
try {
|
||||
// Fetch project data
|
||||
const projectRes = await fetch(`/api/projects/${params.id}`);
|
||||
if (!projectRes.ok) {
|
||||
throw new Error('Project not found');
|
||||
}
|
||||
const projectData = await projectRes.json();
|
||||
|
||||
// Fetch notes data
|
||||
const notesRes = await fetch(`/api/notes?project_id=${params.id}`);
|
||||
const notesData = notesRes.ok ? await notesRes.json() : [];
|
||||
|
||||
setProject(projectData);
|
||||
setNotes(notesData);
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
setProject(null);
|
||||
setNotes([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [params.id]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<PageContainer>
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-gray-500">Loading...</div>
|
||||
</div>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
@@ -79,7 +134,7 @@ export default async function ProjectViewPage({ params }) {
|
||||
Powrót do projektów
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/projects/${id}/edit`}>
|
||||
<Link href={`/projects/${params.id}/edit`}>
|
||||
<Button variant="primary">
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
@@ -174,16 +229,13 @@ export default async function ProjectViewPage({ params }) {
|
||||
{project.unit || "N/A"}
|
||||
</p>
|
||||
</div>{" "}
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Termin zakończenia
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.finish_date
|
||||
? formatDate(project.finish_date)
|
||||
: "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<FieldWithHistory
|
||||
tableName="projects"
|
||||
recordId={project.project_id}
|
||||
fieldName="finish_date"
|
||||
currentValue={project.finish_date}
|
||||
label="Termin zakończenia"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
WP
|
||||
@@ -325,7 +377,7 @@ export default async function ProjectViewPage({ params }) {
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Link href={`/projects/${id}/edit`} className="block">
|
||||
<Link href={`/projects/${params.id}/edit`} className="block">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@@ -449,7 +501,7 @@ export default async function ProjectViewPage({ params }) {
|
||||
)}
|
||||
{/* Project Tasks Section */}
|
||||
<div className="mb-8">
|
||||
<ProjectTasksSection projectId={id} />
|
||||
<ProjectTasksSection projectId={params.id} />
|
||||
</div>
|
||||
{/* Notes Section */}
|
||||
<Card>
|
||||
@@ -458,7 +510,7 @@ export default async function ProjectViewPage({ params }) {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="mb-6">
|
||||
<NoteForm projectId={id} />
|
||||
<NoteForm projectId={params.id} />
|
||||
</div>
|
||||
{notes.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
@@ -486,7 +538,7 @@ export default async function ProjectViewPage({ params }) {
|
||||
{notes.map((n) => (
|
||||
<div
|
||||
key={n.note_id}
|
||||
className="border border-gray-200 p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
|
||||
className="border border-gray-200 p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors group"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -499,6 +551,44 @@ export default async function ProjectViewPage({ params }) {
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{canDeleteNote(n) && (
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (confirm('Czy na pewno chcesz usunąć tę notatkę?')) {
|
||||
try {
|
||||
const res = await fetch(`/api/notes/${n.note_id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (res.ok) {
|
||||
// Remove the note from local state instead of full page reload
|
||||
setNotes(prevNotes => prevNotes.filter(note => note.note_id !== n.note_id));
|
||||
} else {
|
||||
alert('Błąd podczas usuwania notatki');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting note:', error);
|
||||
alert('Błąd podczas usuwania notatki');
|
||||
}
|
||||
}
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity p-1 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded"
|
||||
title="Usuń notatkę"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-gray-900 leading-relaxed">{n.note}</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user