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

UI fixes: emoji icons, modal form, Czech labels, polish

Browse Source 
- Fixed group emoji icons in DB (💼🛒📚🗺️🏃✨🏠🌿)
- Added TaskModal component for + button
- Czech status labels (Čeká, Probíhá, Hotovo, Zrušeno)
- Improved TaskCard, GroupSelector, Header, StatusBadge
- Better dark/light mode transitions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude CLI Agent
2026-03-29 11:16:07 +00:00
parent 6c93ae04d0
commit 4a6b5e5498
11 changed files with 499 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,33 +12,41 @@ interface TaskFormProps {
}
const STATUSES = [
{ value: "pending", label: "Ceka" },
{ value: "in_progress", label: "Probiha" },
{ value: "pending", label: "\u010Cek\u00e1" },
{ value: "in_progress", label: "Prob\u00edh\u00e1" },
{ value: "done", label: "Hotovo" },
{ value: "cancelled", label: "Zruseno" },
{ value: "cancelled", label: "Zru\u0161eno" },
];
const PRIORITIES = [
{ value: "low", label: "Nizka" },
{ value: "medium", label: "Stredni" },
{ value: "high", label: "Vysoka" },
{ value: "urgent", label: "Urgentni" },
{ value: "low", label: "N\u00edzk\u00e1" },
{ value: "medium", label: "St\u0159edn\u00ed" },
{ value: "high", label: "Vysok\u00e1" },
{ value: "urgent", label: "Urgentn\u00ed" },
];
export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLabel = "Ulozit" }: TaskFormProps) {
export default function TaskForm({
groups,
initial,
onSubmit,
onCancel,
submitLabel = "Ulo\u017eit",
}: TaskFormProps) {
const [title, setTitle] = useState(initial?.title || "");
const [description, setDescription] = useState(initial?.description || "");
const [status, setStatus] = useState(initial?.status || "pending");
const [priority, setPriority] = useState(initial?.priority || "medium");
const [groupId, setGroupId] = useState(initial?.group_id || "");
const [dueAt, setDueAt] = useState(initial?.due_at ? initial.due_at.slice(0, 16) : "");
const [dueAt, setDueAt] = useState(
initial?.due_at ? initial.due_at.slice(0, 16) : ""
);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (!title.trim()) {
setError("Nazev je povinny");
setError("N\u00e1zev je povinn\u00fd");
return;
}
setLoading(true);
@@ -53,7 +61,9 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
due_at: dueAt ? new Date(dueAt).toISOString() : null,
});
} catch (err) {
setError(err instanceof Error ? err.message : "Chyba pri ukladani");
setError(
err instanceof Error ? err.message : "Chyba p\u0159i ukl\u00e1d\u00e1n\u00ed"
);
} finally {
setLoading(false);
}
@@ -68,13 +78,13 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
)}
<div>
<label className="block text-sm font-medium mb-1">Nazev *</label>
<label className="block text-sm font-medium mb-1">N\u00e1zev *</label>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
className="w-full px-3 py-2 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"
placeholder="Co je treba udelat..."
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\u0159eba ud\u011blat..."
autoFocus
/>
</div>
@@ -85,7 +95,7 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
value={description}
onChange={(e) => setDescription(e.target.value)}
rows={3}
className="w-full px-3 py-2 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"
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..."
/>
</div>
@@ -95,11 +105,21 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
<label className="block text-sm font-medium mb-1">Stav</label>
<select
value={status}
onChange={(e) => setStatus(e.target.value as "pending" | "in_progress" | "done" | "cancelled")}
className="w-full px-3 py-2 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"
onChange={(e) =>
setStatus(
e.target.value as
| "pending"
| "in_progress"
| "done"
| "cancelled"
)
}
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]"
>
{STATUSES.map((s) => (
<option key={s.value} value={s.value}>{s.label}</option>
<option key={s.value} value={s.value}>
{s.label}
</option>
))}
</select>
</div>
@@ -109,10 +129,12 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
<select
value={priority}
onChange={(e) => setPriority(e.target.value as any)}
className="w-full px-3 py-2 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"
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]"
>
{PRIORITIES.map((p) => (
<option key={p.value} value={p.value}>{p.label}</option>
<option key={p.value} value={p.value}>
{p.label}
</option>
))}
</select>
</div>
@@ -124,22 +146,24 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
<select
value={groupId}
onChange={(e) => setGroupId(e.target.value as any)}
className="w-full px-3 py-2 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"
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>
{groups.map((g) => (
<option key={g.id} value={g.id}>{g.name}</option>
<option key={g.id} value={g.id}>
{g.icon ? `${g.icon} ` : ""}{g.name}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium mb-1">Termin</label>
<label className="block text-sm font-medium mb-1">Term\u00edn</label>
<input
type="datetime-local"
value={dueAt}
onChange={(e) => setDueAt(e.target.value)}
className="w-full px-3 py-2 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"
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]"
/>
</div>
</div>
@@ -148,16 +172,16 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
<button
type="submit"
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"
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 ? "Ukladam..." : submitLabel}
{loading ? "Ukl\u00e1d\u00e1m..." : submitLabel}
</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"
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]"
>
Zrusit
Zru\u0161it
</button>
</div>
</form>