admin/task-team
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

i18n: integrate translations into components

Browse Source 
- StatusBadge, TaskForm, tasks page use i18n hook
- All 4 language files complete (cs, he, ru, ua)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude CLI Agent
2026-03-29 13:13:34 +00:00
parent fea4d38ce8
commit 235bcab97f
4 changed files with 56 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/tasks/app/tasks/page.tsx
View File

@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback, useMemo } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth"; import { useAuth } from "@/lib/auth";
import { getTasks, getGroups, createTask, updateTask, Task, Group } from "@/lib/api"; import { getTasks, getGroups, createTask, updateTask, Task, Group } from "@/lib/api";
import { useTranslation } from "@/lib/i18n";
import TaskCard from "@/components/TaskCard"; import TaskCard from "@/components/TaskCard";
import GroupSelector from "@/components/GroupSelector"; import GroupSelector from "@/components/GroupSelector";
import TaskModal from "@/components/TaskModal"; import TaskModal from "@/components/TaskModal";
@@ -13,6 +14,7 @@ type StatusFilter = "all" | "pending" | "in_progress" | "done" | "cancelled";
export default function TasksPage() { export default function TasksPage() {
const { token } = useAuth(); const { token } = useAuth();
const { t } = useTranslation();
const router = useRouter(); const router = useRouter();
const [tasks, setTasks] = useState<Task[]>([]); const [tasks, setTasks] = useState<Task[]>([]);
const [groups, setGroups] = useState<Group[]>([]); const [groups, setGroups] = useState<Group[]>([]);
@@ -47,7 +49,7 @@ export default function TasksPage() {
setTasks(tasksRes.data || []); setTasks(tasksRes.data || []);
setGroups(groupsRes.data || []); setGroups(groupsRes.data || []);
} catch (err) { } catch (err) {
console.error("Chyba pri nacitani:", err); console.error("Load error:", err);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -73,7 +75,7 @@ export default function TasksPage() {
// Show overlay // Show overlay
if (newGroupId === null) { if (newGroupId === null) {
setSwipeOverlay({ name: "Vse", icon: null }); setSwipeOverlay({ name: t("tasks.all"), icon: null });
} else { } else {
const group = groups.find((g) => g.id === newGroupId); const group = groups.find((g) => g.id === newGroupId);
setSwipeOverlay({ name: group?.name || "", icon: group?.icon || null }); setSwipeOverlay({ name: group?.name || "", icon: group?.icon || null });
@@ -87,7 +89,7 @@ export default function TasksPage() {
setSwipeDirection(null); setSwipeDirection(null);
}, 600); }, 600);
}, },
[groupOrder, currentGroupIndex, groups] [groupOrder, currentGroupIndex, groups, t]
); );
// Swipe handlers for cycling groups // Swipe handlers for cycling groups
@@ -114,16 +116,16 @@ export default function TasksPage() {
await updateTask(token, taskId, { status: "done" }); await updateTask(token, taskId, { status: "done" });
loadData(); loadData();
} catch (err) { } catch (err) {
console.error("Chyba pri dokoncovani:", err); console.error("Complete error:", err);
} }
} }
const statusOptions: { value: StatusFilter; label: string }[] = [ const statusOptions: { value: StatusFilter; label: string }[] = [
{ value: "all", label: "Vse" }, { value: "all", label: t("tasks.all") },
{ value: "pending", label: "Ceka" }, { value: "pending", label: t("tasks.status.pending") },
{ value: "in_progress", label: "Probiha" }, { value: "in_progress", label: t("tasks.status.in_progress") },
{ value: "done", label: "Hotovo" }, { value: "done", label: t("tasks.status.done") },
{ value: "cancelled", label: "Zruseno" }, { value: "cancelled", label: t("tasks.status.cancelled") },
]; ];
if (!token) return null; if (!token) return null;
@@ -189,9 +191,9 @@ export default function TasksPage() {
) : tasks.length === 0 ? ( ) : tasks.length === 0 ? (
<div className="text-center py-16"> <div className="text-center py-16">
<div className="text-5xl mb-4 opacity-50">&#9744;</div> <div className="text-5xl mb-4 opacity-50">&#9744;</div>
<p className="text-muted text-lg font-medium">Zadne ukoly</p> <p className="text-muted text-lg font-medium">{t("tasks.noTasks")}</p>
<p className="text-muted text-sm mt-1"> <p className="text-muted text-sm mt-1">
Vytvorte prvni ukol pomoci tlacitka + {t("tasks.createFirst")}
</p> </p>
</div> </div>
) : ( ) : (
@@ -212,7 +214,7 @@ export default function TasksPage() {
<button <button
onClick={() => setShowForm(true)} onClick={() => setShowForm(true)}
className="fixed bottom-20 sm:bottom-6 right-4 sm:right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white rounded-full shadow-lg hover:shadow-xl active:shadow-md transition-all duration-200 flex items-center justify-center z-40 hover:scale-105 active:scale-95" className="fixed bottom-20 sm:bottom-6 right-4 sm:right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white rounded-full shadow-lg hover:shadow-xl active:shadow-md transition-all duration-200 flex items-center justify-center z-40 hover:scale-105 active:scale-95"
aria-label="Pridat ukol" aria-label={t("tasks.add")}
> >
<svg <svg
className="w-7 h-7" className="w-7 h-7"

15
apps/tasks/components/StatusBadge.tsx
View File

@@ -1,37 +1,34 @@
"use client"; "use client";
import { useTranslation } from "@/lib/i18n";
interface StatusBadgeProps { interface StatusBadgeProps {
status: string; status: string;
size?: "sm" | "md"; size?: "sm" | "md";
} }
const STATUS_MAP: Record<string, { label: string; bg: string; text: string; dot: string }> = { const STATUS_STYLES: Record<string, { bg: string; text: string; dot: string }> = {
pending: { pending: {
label: "Čeká",
bg: "bg-yellow-100 dark:bg-yellow-900/30", bg: "bg-yellow-100 dark:bg-yellow-900/30",
text: "text-yellow-800 dark:text-yellow-300", text: "text-yellow-800 dark:text-yellow-300",
dot: "bg-yellow-500", dot: "bg-yellow-500",
}, },
in_progress: { in_progress: {
label: "Probíhá",
bg: "bg-blue-100 dark:bg-blue-900/30", bg: "bg-blue-100 dark:bg-blue-900/30",
text: "text-blue-800 dark:text-blue-300", text: "text-blue-800 dark:text-blue-300",
dot: "bg-blue-500", dot: "bg-blue-500",
}, },
done: { done: {
label: "Hotovo",
bg: "bg-green-100 dark:bg-green-900/30", bg: "bg-green-100 dark:bg-green-900/30",
text: "text-green-800 dark:text-green-300", text: "text-green-800 dark:text-green-300",
dot: "bg-green-500", dot: "bg-green-500",
}, },
completed: { completed: {
label: "Hotovo",
bg: "bg-green-100 dark:bg-green-900/30", bg: "bg-green-100 dark:bg-green-900/30",
text: "text-green-800 dark:text-green-300", text: "text-green-800 dark:text-green-300",
dot: "bg-green-500", dot: "bg-green-500",
}, },
cancelled: { cancelled: {
label: "Zrušeno",
bg: "bg-gray-100 dark:bg-gray-800/30", bg: "bg-gray-100 dark:bg-gray-800/30",
text: "text-gray-600 dark:text-gray-400", text: "text-gray-600 dark:text-gray-400",
dot: "bg-gray-400", dot: "bg-gray-400",
@@ -39,15 +36,17 @@ const STATUS_MAP: Record<string, { label: string; bg: string; text: string; dot:
}; };
export default function StatusBadge({ status, size = "sm" }: StatusBadgeProps) { export default function StatusBadge({ status, size = "sm" }: StatusBadgeProps) {
const s = STATUS_MAP[status] || STATUS_MAP.pending; const { t } = useTranslation();
const s = STATUS_STYLES[status] || STATUS_STYLES.pending;
const sizeClass = size === "sm" ? "px-2 py-0.5 text-xs" : "px-3 py-1 text-sm"; const sizeClass = size === "sm" ? "px-2 py-0.5 text-xs" : "px-3 py-1 text-sm";
const label = t(`tasks.status.${status}`) || status;
return ( return (
<span <span
className={`inline-flex items-center gap-1.5 rounded-full font-medium ${s.bg} ${s.text} ${sizeClass}`} className={`inline-flex items-center gap-1.5 rounded-full font-medium ${s.bg} ${s.text} ${sizeClass}`}
> >
<span className={`w-1.5 h-1.5 rounded-full ${s.dot}`} /> <span className={`w-1.5 h-1.5 rounded-full ${s.dot}`} />
{s.label} {label}
</span> </span>
); );
} }

58
apps/tasks/components/TaskForm.tsx
View File

@@ -2,6 +2,7 @@
import { useState } from "react"; import { useState } from "react";
import { Group, Task } from "@/lib/api"; import { Group, Task } from "@/lib/api";
import { useTranslation } from "@/lib/i18n";
interface TaskFormProps { interface TaskFormProps {
groups: Group[]; groups: Group[];
@@ -11,27 +12,14 @@ interface TaskFormProps {
submitLabel?: string; submitLabel?: string;
} }
const STATUSES = [
{ value: "pending", label: "Čeká" },
{ value: "in_progress", label: "Probíhá" },
{ value: "done", label: "Hotovo" },
{ value: "cancelled", label: "Zrušeno" },
];
const PRIORITIES = [
{ value: "low", label: "Nízká" },
{ value: "medium", label: "Střední" },
{ value: "high", label: "Vysoká" },
{ value: "urgent", label: "Urgentní" },
];
export default function TaskForm({ export default function TaskForm({
groups, groups,
initial, initial,
onSubmit, onSubmit,
onCancel, onCancel,
submitLabel = "Uložit", submitLabel,
}: TaskFormProps) { }: TaskFormProps) {
const { t } = useTranslation();
const [title, setTitle] = useState(initial?.title || ""); const [title, setTitle] = useState(initial?.title || "");
const [description, setDescription] = useState(initial?.description || ""); const [description, setDescription] = useState(initial?.description || "");
const [status, setStatus] = useState(initial?.status || "pending"); const [status, setStatus] = useState(initial?.status || "pending");
@@ -43,10 +31,24 @@ export default function TaskForm({
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const STATUSES = [
{ value: "pending", label: t("tasks.status.pending") },
{ value: "in_progress", label: t("tasks.status.in_progress") },
{ value: "done", label: t("tasks.status.done") },
{ value: "cancelled", label: t("tasks.status.cancelled") },
];
const PRIORITIES = [
{ value: "low", label: t("tasks.priority.low") },
{ value: "medium", label: t("tasks.priority.medium") },
{ value: "high", label: t("tasks.priority.high") },
{ value: "urgent", label: t("tasks.priority.urgent") },
];
async function handleSubmit(e: React.FormEvent) { async function handleSubmit(e: React.FormEvent) {
e.preventDefault(); e.preventDefault();
if (!title.trim()) { if (!title.trim()) {
setError("Název je povinný"); setError(t("tasks.form.titleRequired"));
return; return;
} }
setLoading(true); setLoading(true);
@@ -62,7 +64,7 @@ export default function TaskForm({
}); });
} catch (err) { } catch (err) {
setError( setError(
err instanceof Error ? err.message : "Chyba při ukládání" err instanceof Error ? err.message : t("tasks.form.saveError")
); );
} finally { } finally {
setLoading(false); setLoading(false);
@@ -78,31 +80,31 @@ export default function TaskForm({
)} )}
<div> <div>
<label className="block text-sm font-medium mb-1">Název *</label> <label className="block text-sm font-medium mb-1">{t("tasks.form.title")} *</label>
<input <input
type="text" type="text"
value={title} value={title}
onChange={(e) => setTitle(e.target.value)} onChange={(e) => setTitle(e.target.value)}
className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-shadow" className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-shadow"
placeholder="Co je třeba udělat..." placeholder={t("tasks.form.placeholder")}
autoFocus autoFocus
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium mb-1">Popis</label> <label className="block text-sm font-medium mb-1">{t("tasks.form.description")}</label>
<textarea <textarea
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
rows={3} rows={3}
className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none transition-shadow" className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none transition-shadow"
placeholder="Podrobnosti..." placeholder={t("tasks.form.descPlaceholder")}
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium mb-1">Stav</label> <label className="block text-sm font-medium mb-1">{t("tasks.form.status")}</label>
<select <select
value={status} value={status}
onChange={(e) => onChange={(e) =>
@@ -125,7 +127,7 @@ export default function TaskForm({
</div> </div>
<div> <div>
<label className="block text-sm font-medium mb-1">Priorita</label> <label className="block text-sm font-medium mb-1">{t("tasks.form.priority")}</label>
<select <select
value={priority} value={priority}
onChange={(e) => setPriority(e.target.value as any)} onChange={(e) => setPriority(e.target.value as any)}
@@ -142,13 +144,13 @@ export default function TaskForm({
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium mb-1">Skupina</label> <label className="block text-sm font-medium mb-1">{t("tasks.form.group")}</label>
<select <select
value={groupId} value={groupId}
onChange={(e) => setGroupId(e.target.value as any)} onChange={(e) => setGroupId(e.target.value as any)}
className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none min-h-[44px]" className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none min-h-[44px]"
> >
<option value="">-- Bez skupiny --</option> <option value="">{t("tasks.form.noGroup")}</option>
{groups.map((g) => ( {groups.map((g) => (
<option key={g.id} value={g.id}> <option key={g.id} value={g.id}>
{g.icon ? `${g.icon} ` : ""}{g.name} {g.icon ? `${g.icon} ` : ""}{g.name}
@@ -158,7 +160,7 @@ export default function TaskForm({
</div> </div>
<div> <div>
<label className="block text-sm font-medium mb-1">Termín</label> <label className="block text-sm font-medium mb-1">{t("tasks.form.dueDate")}</label>
<input <input
type="datetime-local" type="datetime-local"
value={dueAt} value={dueAt}
@@ -174,14 +176,14 @@ export default function TaskForm({
disabled={loading} disabled={loading}
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors disabled:opacity-50 min-h-[44px]" className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors disabled:opacity-50 min-h-[44px]"
> >
{loading ? "Ukládám..." : submitLabel} {loading ? t("tasks.form.saving") : (submitLabel || t("tasks.form.save"))}
</button> </button>
<button <button
type="button" type="button"
onClick={onCancel} onClick={onCancel}
className="px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors min-h-[44px]" className="px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors min-h-[44px]"
> >
Zrušit {t("tasks.form.cancel")}
</button> </button>
</div> </div>
</form> </form>

9
apps/tasks/components/TaskModal.tsx
View File

@@ -2,6 +2,7 @@
import { useEffect, useState, useCallback } from "react"; import { useEffect, useState, useCallback } from "react";
import { Group, Task } from "@/lib/api"; import { Group, Task } from "@/lib/api";
import { useTranslation } from "@/lib/i18n";
import TaskForm from "@/components/TaskForm"; import TaskForm from "@/components/TaskForm";
interface TaskModalProps { interface TaskModalProps {
@@ -12,6 +13,7 @@ interface TaskModalProps {
export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps) { export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps) {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const { t } = useTranslation();
const handleClose = useCallback(() => { const handleClose = useCallback(() => {
setVisible(false); setVisible(false);
@@ -41,7 +43,7 @@ export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps)
className="fixed inset-0 z-50 flex items-end sm:items-center justify-center" className="fixed inset-0 z-50 flex items-end sm:items-center justify-center"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-label="Nový úkol" aria-label={t("tasks.newTask")}
> >
{/* Backdrop */} {/* Backdrop */}
<div <div
@@ -65,11 +67,11 @@ export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps)
</div> </div>
<div className="flex items-center justify-between mb-5"> <div className="flex items-center justify-between mb-5">
<h2 className="text-lg font-semibold">Nový úkol</h2> <h2 className="text-lg font-semibold">{t("tasks.newTask")}</h2>
<button <button
onClick={handleClose} onClick={handleClose}
className="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center" className="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
aria-label="Zavřít" aria-label={t("tasks.close")}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -90,7 +92,6 @@ export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps)
groups={groups} groups={groups}
onSubmit={onSubmit} onSubmit={onSubmit}
onCancel={handleClose} onCancel={handleClose}
submitLabel="Vytvořit"
/> />
</div> </div>
</div> </div>