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

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

@@ -1,37 +1,34 @@
"use client";
import { useTranslation } from "@/lib/i18n";
interface StatusBadgeProps {
status: string;
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: {
label: "Čeká",
bg: "bg-yellow-100 dark:bg-yellow-900/30",
text: "text-yellow-800 dark:text-yellow-300",
dot: "bg-yellow-500",
},
in_progress: {
label: "Probíhá",
bg: "bg-blue-100 dark:bg-blue-900/30",
text: "text-blue-800 dark:text-blue-300",
dot: "bg-blue-500",
},
done: {
label: "Hotovo",
bg: "bg-green-100 dark:bg-green-900/30",
text: "text-green-800 dark:text-green-300",
dot: "bg-green-500",
},
completed: {
label: "Hotovo",
bg: "bg-green-100 dark:bg-green-900/30",
text: "text-green-800 dark:text-green-300",
dot: "bg-green-500",
},
cancelled: {
label: "Zrušeno",
bg: "bg-gray-100 dark:bg-gray-800/30",
text: "text-gray-600 dark:text-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) {
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 label = t(`tasks.status.${status}`) || status;
return (
<span
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}`} />
{s.label}
{label}
</span>
);
}

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

@@ -2,6 +2,7 @@
import { useState } from "react";
import { Group, Task } from "@/lib/api";
import { useTranslation } from "@/lib/i18n";
interface TaskFormProps {
groups: Group[];
@@ -11,27 +12,14 @@ interface TaskFormProps {
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({
groups,
initial,
onSubmit,
onCancel,
submitLabel = "Uložit",
submitLabel,
}: TaskFormProps) {
const { t } = useTranslation();
const [title, setTitle] = useState(initial?.title || "");
const [description, setDescription] = useState(initial?.description || "");
const [status, setStatus] = useState(initial?.status || "pending");
@@ -43,10 +31,24 @@ export default function TaskForm({
const [loading, setLoading] = useState(false);
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) {
e.preventDefault();
if (!title.trim()) {
setError("Název je povinný");
setError(t("tasks.form.titleRequired"));
return;
}
setLoading(true);
@@ -62,7 +64,7 @@ export default function TaskForm({
});
} catch (err) {
setError(
err instanceof Error ? err.message : "Chyba při ukládání"
err instanceof Error ? err.message : t("tasks.form.saveError")
);
} finally {
setLoading(false);
@@ -78,31 +80,31 @@ export default function TaskForm({
)}
<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
type="text"
value={title}
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"
placeholder="Co je třeba udělat..."
placeholder={t("tasks.form.placeholder")}
autoFocus
/>
</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
value={description}
onChange={(e) => setDescription(e.target.value)}
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"
placeholder="Podrobnosti..."
placeholder={t("tasks.form.descPlaceholder")}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<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
value={status}
onChange={(e) =>
@@ -125,7 +127,7 @@ export default function TaskForm({
</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
value={priority}
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>
<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
value={groupId}
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]"
>
<option value="">-- Bez skupiny --</option>
<option value="">{t("tasks.form.noGroup")}</option>
{groups.map((g) => (
<option key={g.id} value={g.id}>
{g.icon ? `${g.icon} ` : ""}{g.name}
@@ -158,7 +160,7 @@ export default function TaskForm({
</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
type="datetime-local"
value={dueAt}
@@ -174,14 +176,14 @@ export default function TaskForm({
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]"
>
{loading ? "Ukládám..." : submitLabel}
{loading ? t("tasks.form.saving") : (submitLabel || t("tasks.form.save"))}
</button>
<button
type="button"
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]"
>
Zrušit
{t("tasks.form.cancel")}
</button>
</div>
</form>

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

@@ -2,6 +2,7 @@
import { useEffect, useState, useCallback } from "react";
import { Group, Task } from "@/lib/api";
import { useTranslation } from "@/lib/i18n";
import TaskForm from "@/components/TaskForm";
interface TaskModalProps {
@@ -12,6 +13,7 @@ interface TaskModalProps {
export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps) {
const [visible, setVisible] = useState(false);
const { t } = useTranslation();
const handleClose = useCallback(() => {
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"
role="dialog"
aria-modal="true"
aria-label="Nový úkol"
aria-label={t("tasks.newTask")}
>
{/* Backdrop */}
<div
@@ -65,11 +67,11 @@ export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps)
</div>
<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
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"
aria-label="Zavřít"
aria-label={t("tasks.close")}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -90,7 +92,6 @@ export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps)
groups={groups}
onSubmit={onSubmit}
onCancel={handleClose}
submitLabel="Vytvořit"
/>
</div>
</div>