feat(projects): editable notes with edit stamp + NoteCard bubble component
- author-only note editing (PUT /projects/:id/notes/:noteId, strict schema, audit with old/new content); edits stamped via new edited_at column (migration 20260612160000) and shown as '· upraveno <datum>' - note deletion tightened to admin-only server-side (was any projects.edit holder via direct API) - new NoteCard component: chat-bubble note row (initials avatar, wrapping header, inline editor, actions in the bubble corner so they don't squeeze content on mobile), table-matching edit/delete icons - Odin project detail carries the edited_at stamp; route-level tests cover author-edit, foreign-edit 403, validation, admin-only delete Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
BOHA
249
src/admin/components/NoteCard.tsx
Normal file
249
src/admin/components/NoteCard.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
import { useState } from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Button from "@mui/material/Button";
|
||||
|
||||
/**
|
||||
* Chat-bubble style note row (author avatar + bubble), shared by the
|
||||
* project notes list. Mobile-first: the header wraps (name / timestamp),
|
||||
* the action icons live in the bubble's top-right corner so they never
|
||||
* squeeze the content column, and editing happens inline in the bubble.
|
||||
*/
|
||||
|
||||
const initialsOf = (name: string): string =>
|
||||
name
|
||||
.split(/\s+/)
|
||||
.filter(Boolean)
|
||||
.slice(0, 2)
|
||||
.map((p) => p[0]?.toUpperCase() ?? "")
|
||||
.join("");
|
||||
|
||||
// Same edit/delete glyphs as the data tables (AttendanceShiftTable & co.).
|
||||
const EditIcon = (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const DeleteIcon = (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6" />
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
function formatNoteDate(dateStr: string | null | undefined): string {
|
||||
if (!dateStr) return "";
|
||||
const d = new Date(dateStr);
|
||||
if (isNaN(d.getTime())) return "";
|
||||
const hours = String(d.getHours()).padStart(2, "0");
|
||||
const mins = String(d.getMinutes()).padStart(2, "0");
|
||||
return `${d.getDate()}. ${d.getMonth() + 1}. ${d.getFullYear()} ${hours}:${mins}`;
|
||||
}
|
||||
|
||||
export interface NoteCardProps {
|
||||
authorName: string;
|
||||
createdAt: string;
|
||||
editedAt?: string | null;
|
||||
content: string;
|
||||
canEdit?: boolean;
|
||||
canDelete?: boolean;
|
||||
deleting?: boolean;
|
||||
/** Reject (throw) to keep the editor open — the caller shows the alert. */
|
||||
onSave?: (content: string) => Promise<void>;
|
||||
onDelete?: () => void;
|
||||
}
|
||||
|
||||
export default function NoteCard({
|
||||
authorName,
|
||||
createdAt,
|
||||
editedAt,
|
||||
content,
|
||||
canEdit = false,
|
||||
canDelete = false,
|
||||
deleting = false,
|
||||
onSave,
|
||||
onDelete,
|
||||
}: NoteCardProps) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [draft, setDraft] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const startEdit = () => {
|
||||
setDraft(content);
|
||||
setEditing(true);
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
if (!onSave || !draft.trim() || saving) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await onSave(draft.trim());
|
||||
setEditing(false);
|
||||
} catch {
|
||||
// Caller already alerted; keep the editor open with the draft.
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", gap: 1, alignItems: "flex-start" }}>
|
||||
<Box
|
||||
aria-hidden
|
||||
sx={(t) => ({
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: "50%",
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: 700,
|
||||
bgcolor: `rgba(${t.vars!.palette.primary.mainChannel} / 0.12)`,
|
||||
color: "primary.main",
|
||||
})}
|
||||
>
|
||||
{initialsOf(authorName)}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
bgcolor: "action.hover",
|
||||
borderRadius: 2,
|
||||
borderTopLeftRadius: 4,
|
||||
p: 1.5,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{ display: "flex", alignItems: "flex-start", gap: 1, mb: 0.5 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
display: "flex",
|
||||
alignItems: "baseline",
|
||||
columnGap: 1,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{authorName}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{formatNoteDate(createdAt)}
|
||||
{editedAt && (
|
||||
<Box component="span" sx={{ fontStyle: "italic" }}>
|
||||
{" "}
|
||||
· upraveno {formatNoteDate(editedAt)}
|
||||
</Box>
|
||||
)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{!editing && (canEdit || canDelete) && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: 0.25,
|
||||
flexShrink: 0,
|
||||
mt: -0.5,
|
||||
mr: -0.5,
|
||||
}}
|
||||
>
|
||||
{canEdit && (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={startEdit}
|
||||
title="Upravit poznámku"
|
||||
aria-label="Upravit poznámku"
|
||||
>
|
||||
{EditIcon}
|
||||
</IconButton>
|
||||
)}
|
||||
{canDelete && (
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
onClick={onDelete}
|
||||
title="Smazat poznámku"
|
||||
aria-label="Smazat poznámku"
|
||||
disabled={deleting}
|
||||
>
|
||||
{DeleteIcon}
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{editing ? (
|
||||
<Box>
|
||||
<TextField
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
multiline
|
||||
minRows={2}
|
||||
maxRows={16}
|
||||
fullWidth
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && e.ctrlKey && draft.trim()) save();
|
||||
if (e.key === "Escape") setEditing(false);
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ mt: 1, display: "flex", gap: 1 }}>
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
onClick={save}
|
||||
disabled={saving || !draft.trim()}
|
||||
>
|
||||
{saving ? "Ukládání…" : "Uložit"}
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
color="inherit"
|
||||
onClick={() => setEditing(false)}
|
||||
disabled={saving}
|
||||
>
|
||||
Zrušit
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ whiteSpace: "pre-wrap", lineHeight: 1.5 }}
|
||||
>
|
||||
{content}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -5,8 +5,10 @@ import apiFetch from "../../utils/api";
|
||||
export interface ProjectNote {
|
||||
id: number;
|
||||
content: string;
|
||||
user_id: number | null;
|
||||
user_name: string;
|
||||
created_at: string;
|
||||
edited_at: string | null;
|
||||
}
|
||||
|
||||
export interface ProjectData {
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useApiMutation } from "../lib/queries/mutations";
|
||||
import apiFetch from "../utils/api";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
|
||||
import {
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
import { userListOptions, type User as ApiUser } from "../lib/queries/users";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
import ProjectFileManager from "../components/ProjectFileManager";
|
||||
import NoteCard from "../components/NoteCard";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
@@ -49,17 +50,6 @@ const STATUS_COLORS: Record<
|
||||
zruseny: "default",
|
||||
};
|
||||
|
||||
function formatNoteDate(dateStr: string) {
|
||||
if (!dateStr) return "";
|
||||
const d = new Date(dateStr);
|
||||
const day = d.getDate();
|
||||
const month = d.getMonth() + 1;
|
||||
const year = d.getFullYear();
|
||||
const hours = String(d.getHours()).padStart(2, "0");
|
||||
const mins = String(d.getMinutes()).padStart(2, "0");
|
||||
return `${day}. ${month}. ${year} ${hours}:${mins}`;
|
||||
}
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
@@ -86,28 +76,12 @@ const BackIcon = (
|
||||
</svg>
|
||||
);
|
||||
|
||||
const TrashIcon = (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6" />
|
||||
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
|
||||
<path d="M10 11v6M14 11v6" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default function ProjectDetail() {
|
||||
const { id } = useParams();
|
||||
const alert = useAlert();
|
||||
const { hasPermission, isAdmin } = useAuth();
|
||||
const { hasPermission, isAdmin, user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const qc = useQueryClient();
|
||||
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [form, setForm] = useState<ProjectForm>({
|
||||
@@ -278,6 +252,30 @@ export default function ProjectDetail() {
|
||||
}
|
||||
};
|
||||
|
||||
// Throws on failure so NoteCard keeps its editor open with the draft.
|
||||
const saveNoteEdit = async (noteId: number, content: string) => {
|
||||
// Raw apiFetch: the body must carry ONLY content (strict schema), the
|
||||
// note id lives in the URL — useApiMutation sends its whole input.
|
||||
let res: Response;
|
||||
try {
|
||||
res = await apiFetch(`${API_BASE}/projects/${id}/notes/${noteId}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ content }),
|
||||
});
|
||||
} catch {
|
||||
alert.error("Chyba připojení");
|
||||
throw new Error("network");
|
||||
}
|
||||
const body = await res.json().catch(() => null);
|
||||
if (!res.ok) {
|
||||
alert.error(body?.error || "Uložení selhalo");
|
||||
throw new Error(body?.error || "Uložení selhalo");
|
||||
}
|
||||
qc.invalidateQueries({ queryKey: ["projects"] });
|
||||
alert.success("Poznámka upravena");
|
||||
};
|
||||
|
||||
if (isPending) {
|
||||
return <LoadingState />;
|
||||
}
|
||||
@@ -493,61 +491,18 @@ export default function ProjectDetail() {
|
||||
{(notes.length > 0 || project.notes) && (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
||||
{notes.map((note) => (
|
||||
<Box
|
||||
<NoteCard
|
||||
key={note.id}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
bgcolor: "action.hover",
|
||||
borderRadius: 2,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
mb: 0.5,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{note.user_name}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{formatNoteDate(note.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ whiteSpace: "pre-wrap", lineHeight: 1.5 }}
|
||||
>
|
||||
{note.content}
|
||||
</Typography>
|
||||
</Box>
|
||||
{isAdmin && (
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
onClick={() => handleDeleteNote(note.id)}
|
||||
title="Smazat poznámku"
|
||||
aria-label="Smazat poznámku"
|
||||
disabled={deletingNoteId === note.id}
|
||||
sx={{ flexShrink: 0 }}
|
||||
>
|
||||
{TrashIcon}
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
authorName={note.user_name}
|
||||
createdAt={note.created_at}
|
||||
editedAt={note.edited_at}
|
||||
content={note.content || ""}
|
||||
canEdit={user?.id === note.user_id}
|
||||
canDelete={isAdmin}
|
||||
deleting={deletingNoteId === note.id}
|
||||
onSave={(content) => saveNoteEdit(note.id, content)}
|
||||
onDelete={() => handleDeleteNote(note.id)}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user