cesnimda
428 lines
20 KiB
TypeScript
428 lines
20 KiB
TypeScript
import React, { useMemo, useState } from "react";
|
|
|
|
import {
|
|
Alert,
|
|
Box,
|
|
Card,
|
|
CardContent,
|
|
Chip,
|
|
IconButton,
|
|
ListSubheader,
|
|
Menu,
|
|
MenuItem,
|
|
Paper,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
|
|
|
import { api, getApiErrorMessage } from "../api";
|
|
import ViewStateNotice from "./ViewStateNotice";
|
|
import { JobApplication } from "../types";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
import { useViewResource } from "../hooks/useViewResource";
|
|
import {
|
|
GROUP_ENTRY_STATUS,
|
|
PIPELINE_GROUPS,
|
|
PIPELINE_STATUSES,
|
|
PipelineGroup,
|
|
PipelineStatus,
|
|
groupOf,
|
|
normalizeStatus,
|
|
statusLabel,
|
|
statusTone,
|
|
} from "../pipeline";
|
|
|
|
type Status = PipelineStatus;
|
|
|
|
// The board shows one column per group rather than one per stage: ten columns is unreadable, and
|
|
// the stage detail is preserved on each card's chip. "Other" collects custom statuses, which
|
|
// belong to no group, and only appears when something is actually in it.
|
|
type ColumnKey = PipelineGroup | "Other";
|
|
|
|
const TONE_PALETTE: Record<string, (theme: any) => string> = {
|
|
error: (theme) => (theme.vars?.palette ?? theme.palette).error.main,
|
|
warning: (theme) => (theme.vars?.palette ?? theme.palette).warning.main,
|
|
success: (theme) => (theme.vars?.palette ?? theme.palette).success.main,
|
|
info: (theme) => (theme.vars?.palette ?? theme.palette).info.main,
|
|
primary: (theme) => (theme.vars?.palette ?? theme.palette).primary.main,
|
|
default: (theme) => (theme.vars?.palette ?? theme.palette).primary.main,
|
|
};
|
|
|
|
function toneColor(theme: any, status: Status | "Other"): string {
|
|
return TONE_PALETTE[statusTone(status)](theme);
|
|
}
|
|
|
|
// Mockup's Applied-column cards carry small skill-tag pills ("React", "TS") sourced from the
|
|
// job's own `tags` field (JSON array string) -- no new data, just parsed for display.
|
|
function parseTags(raw?: string): string[] {
|
|
if (!raw) return [];
|
|
try {
|
|
const parsed = JSON.parse(raw);
|
|
return Array.isArray(parsed) ? parsed.filter((x) => typeof x === "string").slice(0, 2) : [];
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
type PillTone = "error" | "warning" | "success" | "info";
|
|
|
|
// Mockup's single status pill per card ("Reply due in 2d", "Tomorrow 14:00", "720k NOK / yr").
|
|
// Built entirely from fields the board already fetches (needsFollowUp/followUpAt/salary/deadline)
|
|
// -- there's no interview-datetime field on the board's JobApplication shape, so an "Interview
|
|
// tomorrow 14:00"-style pill isn't reproducible; deadline is used as the closest real fallback.
|
|
function cardPill(job: JobApplication, t: (key: any, params?: any) => string): { text: string; tone: PillTone } | null {
|
|
if (job.needsFollowUp) {
|
|
const due = job.followUpAt ? new Date(job.followUpAt) : null;
|
|
if (!due || due.getTime() <= Date.now()) return { text: t("kanbanFollowUpNow"), tone: "error" };
|
|
const days = Math.max(1, Math.ceil((due.getTime() - Date.now()) / 86400000));
|
|
return { text: t("kanbanReplyDueIn", { days }), tone: "warning" };
|
|
}
|
|
if (job.salary) return { text: job.salary, tone: "success" };
|
|
if (job.deadline) return { text: new Date(job.deadline).toLocaleDateString(), tone: "info" };
|
|
return null;
|
|
}
|
|
|
|
export default function KanbanBoard() {
|
|
const theme = useTheme();
|
|
const palette = theme.vars?.palette ?? theme.palette;
|
|
const customShadows = (theme.vars as any)?.customShadows ?? (theme as any).customShadows;
|
|
const { t } = useI18n();
|
|
const [dragJobId, setDragJobId] = useState<number | null>(null);
|
|
const [dragOverColumn, setDragOverColumn] = useState<ColumnKey | null>(null);
|
|
const [moveError, setMoveError] = useState("");
|
|
const [announcement, setAnnouncement] = useState("");
|
|
const [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null);
|
|
const [menuJobId, setMenuJobId] = useState<number | null>(null);
|
|
|
|
const jobsResource = useViewResource(
|
|
async () => {
|
|
const response = await api.get<JobApplication[]>("/jobapplications/board");
|
|
return response.data;
|
|
},
|
|
{
|
|
initialData: [],
|
|
errorMessage: t("kanbanLoadFailed"),
|
|
deps: [t],
|
|
},
|
|
);
|
|
|
|
const jobs = jobsResource.data;
|
|
|
|
const groups = useMemo(() => {
|
|
const map = new Map<ColumnKey, JobApplication[]>();
|
|
PIPELINE_GROUPS.forEach((g) => map.set(g.key, []));
|
|
map.set("Other", []);
|
|
for (const j of jobs) {
|
|
map.get(groupOf(j.status) ?? "Other")!.push(j);
|
|
}
|
|
map.forEach((arr, k) => {
|
|
// Sort by stage first so a column reads in pipeline order (Saved before Preparing), then by
|
|
// recency. Fall back to savedAt: unapplied jobs have no dateApplied, and treating that as
|
|
// the epoch would sink them to the bottom.
|
|
arr.sort((a, b) => {
|
|
const stageDelta = PIPELINE_STATUSES.indexOf(normalizeStatus(a.status) as Status)
|
|
- PIPELINE_STATUSES.indexOf(normalizeStatus(b.status) as Status);
|
|
if (stageDelta !== 0) return stageDelta;
|
|
return +new Date(b.dateApplied ?? b.savedAt) - +new Date(a.dateApplied ?? a.savedAt);
|
|
});
|
|
map.set(k, arr);
|
|
});
|
|
return map;
|
|
}, [jobs]);
|
|
|
|
// A group is not a status, so dropping onto a column applies that group's entry stage. Precise
|
|
// stages stay on the card menu.
|
|
const onDropTo = async (group: PipelineGroup) => {
|
|
if (!dragJobId) return;
|
|
const movingJobId = dragJobId;
|
|
const status = GROUP_ENTRY_STATUS[group];
|
|
setDragJobId(null);
|
|
setDragOverColumn(null);
|
|
setMoveError("");
|
|
try {
|
|
await api.patch(`/jobapplications/${movingJobId}/status`, { status });
|
|
jobsResource.setData((prev) => prev.map((j) => (j.id === movingJobId ? { ...j, status } : j)));
|
|
setAnnouncement(t("kanbanMoveSucceeded", { status: statusLabel(t, status) }));
|
|
} catch (error: any) {
|
|
setMoveError(getApiErrorMessage(error, t("kanbanMoveFailed")));
|
|
setAnnouncement(t("kanbanMoveFailedAnnouncement"));
|
|
}
|
|
};
|
|
|
|
const setStatus = async (id: number, status: Status) => {
|
|
setMoveError("");
|
|
try {
|
|
await api.patch(`/jobapplications/${id}/status`, { status });
|
|
jobsResource.setData((prev) => prev.map((j) => (j.id === id ? { ...j, status } : j)));
|
|
setAnnouncement(t("kanbanMoveSucceeded", { status: statusLabel(t, status) }));
|
|
} catch (error: any) {
|
|
setMoveError(getApiErrorMessage(error, t("kanbanMoveFailed")));
|
|
setAnnouncement(t("kanbanMoveFailedAnnouncement"));
|
|
}
|
|
};
|
|
|
|
const currentMenuStatus = menuJobId == null ? null : normalizeStatus(jobs.find((j) => j.id === menuJobId)?.status ?? "");
|
|
|
|
// "Other" (custom statuses) only earns a column when something is in it, and is not a drop
|
|
// target — there is no single custom status to assign.
|
|
const columns = useMemo(() => {
|
|
const base: { key: ColumnKey; label: string; droppable: boolean }[] = PIPELINE_GROUPS.map((g) => ({
|
|
key: g.key,
|
|
label: t(g.labelKey as any),
|
|
droppable: true,
|
|
}));
|
|
if ((groups.get("Other") ?? []).length > 0) {
|
|
base.push({ key: "Other", label: t("kanbanGroupOther"), droppable: false });
|
|
}
|
|
return base;
|
|
}, [groups, t]);
|
|
|
|
return (
|
|
<Box sx={{ mt: 2, width: "100%", minWidth: 0, maxWidth: "100%", overflowX: "clip", contain: "inline-size" }}>
|
|
<Typography variant="body2" sx={{ color: "text.secondary", mb: 1 }}>
|
|
{t("kanbanHint")}
|
|
</Typography>
|
|
|
|
<ViewStateNotice
|
|
loading={jobsResource.loading}
|
|
error={jobsResource.error}
|
|
title={t("kanbanLoadFailed")}
|
|
description={t("kanbanLoadFailedBody")}
|
|
onRetry={jobsResource.reload}
|
|
/>
|
|
|
|
{!jobsResource.loading && !jobsResource.error ? (
|
|
<Box
|
|
sx={{
|
|
display: { xs: "flex", md: "grid" },
|
|
width: "100%",
|
|
maxWidth: "100%",
|
|
minWidth: 0,
|
|
gridTemplateColumns: { md: "repeat(3, 1fr)" },
|
|
gap: 2,
|
|
alignItems: "start",
|
|
overflowX: { xs: "auto", md: "visible" },
|
|
scrollSnapType: { xs: "x mandatory", md: "none" },
|
|
pb: { xs: 1, md: 0 },
|
|
WebkitOverflowScrolling: "touch",
|
|
}}
|
|
>
|
|
{columns.map(({ key, label, droppable }) => {
|
|
const list = groups.get(key) ?? [];
|
|
// Colour the column by its entry stage so the header dot still carries meaning.
|
|
const c = droppable ? toneColor(theme, GROUP_ENTRY_STATUS[key as PipelineGroup]) : palette.text.disabled;
|
|
const isDragActive = dragJobId !== null;
|
|
const isActiveTarget = dragOverColumn === key;
|
|
return (
|
|
<Paper
|
|
key={key}
|
|
component="section"
|
|
role="group"
|
|
aria-label={`${label} column${droppable ? "" : ", not a drop target"}`}
|
|
aria-disabled={isDragActive && !droppable ? true : undefined}
|
|
tabIndex={isDragActive ? 0 : -1}
|
|
data-drop-state={isActiveTarget ? (droppable ? "active" : "invalid") : isDragActive ? (droppable ? "valid" : "invalid") : "idle"}
|
|
onFocus={() => { if (isDragActive) setDragOverColumn(key); }}
|
|
onBlur={() => { if (dragOverColumn === key) setDragOverColumn(null); }}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Escape" && isDragActive) {
|
|
event.preventDefault(); setDragJobId(null); setDragOverColumn(null); setAnnouncement(t("kanbanKeyboardMoveCancelled"));
|
|
} else if ((event.key === "Enter" || event.key === " ") && isDragActive) {
|
|
event.preventDefault();
|
|
if (droppable) void onDropTo(key as PipelineGroup);
|
|
else setAnnouncement(t("kanbanInvalidDropTarget", { status: label }));
|
|
}
|
|
}}
|
|
onDragEnter={() => { if (isDragActive) setDragOverColumn(key); }}
|
|
onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDragOverColumn(null); }}
|
|
onDragOver={(e) => { if (droppable) e.preventDefault(); }}
|
|
onDrop={() => { if (droppable) void onDropTo(key as PipelineGroup); }}
|
|
sx={{
|
|
p: 1.5,
|
|
borderRadius: 3,
|
|
minHeight: 220,
|
|
flex: { xs: "0 0 85vw", md: "none" },
|
|
scrollSnapAlign: { xs: "start", md: "none" },
|
|
border: `1px ${isDragActive ? "dashed" : "solid"} ${isActiveTarget ? palette.primary.main : palette.divider}`,
|
|
outline: isActiveTarget ? `2px solid ${droppable ? palette.primary.main : palette.error.main}` : "none",
|
|
outlineOffset: 2,
|
|
opacity: isDragActive && !droppable ? 0.65 : 1,
|
|
backgroundColor: isActiveTarget && droppable ? palette.action.hover : palette.grey[100],
|
|
transition: "background-color .15s, border-color .15s, outline-color .15s, opacity .15s",
|
|
"&:focus-visible": { boxShadow: customShadows?.focus },
|
|
}}
|
|
>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.25, px: 0.25 }}>
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
|
<Box sx={{ width: 9, height: 9, borderRadius: "50%", backgroundColor: c, flexShrink: 0 }} />
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 800 }}>
|
|
{label}
|
|
</Typography>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
minWidth: 22,
|
|
textAlign: "center",
|
|
px: 0.75,
|
|
py: 0.15,
|
|
borderRadius: 999,
|
|
backgroundColor: palette.grey[300],
|
|
}}
|
|
>
|
|
<Typography variant="caption" sx={{ color: "text.secondary", fontWeight: 700 }}>
|
|
{list.length}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
|
{list.map((j) => {
|
|
const pill = cardPill(j, t);
|
|
const tags = parseTags(j.tags);
|
|
// The column is a group, so each card names its own stage — grouping collapses
|
|
// the columns, not the information.
|
|
const cardStatus = normalizeStatus(j.status);
|
|
const cardColor = toneColor(theme, cardStatus);
|
|
return (
|
|
<Card
|
|
key={j.id}
|
|
draggable
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-pressed={dragJobId === j.id}
|
|
aria-label={t(dragJobId === j.id ? "kanbanCardPickedUpLabel" : "kanbanCardPickUpLabel", { title: j.jobTitle, status: statusLabel(t, j.status) })}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Escape" && dragJobId === j.id) {
|
|
event.preventDefault(); setDragJobId(null); setDragOverColumn(null); setAnnouncement(t("kanbanKeyboardMoveCancelled"));
|
|
} else if (event.key === " ") {
|
|
event.preventDefault();
|
|
const pickingUp = dragJobId !== j.id;
|
|
setDragJobId(pickingUp ? j.id : null);
|
|
setDragOverColumn(null);
|
|
setAnnouncement(pickingUp ? t("kanbanPickedUpAnnouncement", { title: j.jobTitle }) : t("kanbanKeyboardMoveCancelled"));
|
|
}
|
|
}}
|
|
onDragStart={() => { setDragJobId(j.id); setAnnouncement(t("kanbanDragStartedAnnouncement", { title: j.jobTitle })); }}
|
|
onDragEnd={() => { setDragJobId(null); setDragOverColumn(null); }}
|
|
sx={{
|
|
cursor: "grab",
|
|
borderRadius: 2.5,
|
|
borderLeft: `4px solid ${cardColor}`,
|
|
transition: "box-shadow .15s, transform .15s",
|
|
outline: dragJobId === j.id ? `2px solid ${palette.primary.main}` : "none",
|
|
outlineOffset: 2,
|
|
"&:hover": { boxShadow: 4, transform: "translateY(-1px)" },
|
|
"&:focus-visible": { boxShadow: customShadows?.focus },
|
|
"&:active": { cursor: "grabbing" },
|
|
}}
|
|
>
|
|
<CardContent sx={{ p: 1.25, "&:last-child": { pb: 1.25 } }}>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", gap: 1 }}>
|
|
<Typography sx={{ fontWeight: 800, lineHeight: 1.25 }}>
|
|
{j.jobTitle}
|
|
</Typography>
|
|
<IconButton
|
|
size="small"
|
|
aria-label={`Change status for ${j.jobTitle}`}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setMenuJobId(j.id);
|
|
setMenuAnchor(e.currentTarget);
|
|
}}
|
|
>
|
|
<MoreHorizIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
<Typography variant="body2" sx={{ color: "text.secondary" }}>
|
|
{[j.company?.name, j.location].filter(Boolean).join(" · ")}
|
|
</Typography>
|
|
|
|
<Box sx={{ mt: 0.75 }}>
|
|
<Chip
|
|
size="small"
|
|
label={statusLabel(t, j.status)}
|
|
sx={{
|
|
height: 22,
|
|
fontWeight: 700,
|
|
backgroundColor: `color-mix(in srgb, ${cardColor} 14%, transparent)`,
|
|
color: cardColor,
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
{tags.length > 0 && (
|
|
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.75 }}>
|
|
{tags.map((tag) => (
|
|
<Chip
|
|
key={tag}
|
|
size="small"
|
|
label={tag}
|
|
sx={{ height: 22, backgroundColor: palette.action.hover, color: "primary.main", fontWeight: 700 }}
|
|
/>
|
|
))}
|
|
</Box>
|
|
)}
|
|
|
|
{pill && (
|
|
<Box sx={{ mt: 0.75 }}>
|
|
<Chip
|
|
size="small"
|
|
label={pill.text}
|
|
sx={{
|
|
height: 24,
|
|
fontWeight: 700,
|
|
backgroundColor: `color-mix(in srgb, ${palette[pill.tone].main} 14%, transparent)`,
|
|
color: palette[pill.tone].main,
|
|
}}
|
|
/>
|
|
</Box>
|
|
)}
|
|
|
|
{j.daysSince != null ? (
|
|
<Typography variant="caption" sx={{ display: "block", color: "text.secondary", mt: 0.75 }}>
|
|
{t("kanbanAppliedAgo", { days: j.daysSince })}
|
|
</Typography>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
{list.length === 0 && (
|
|
<Typography variant="body2" sx={{ color: "text.secondary", py: 1 }}>
|
|
{t("kanbanDropHere")}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
})}
|
|
</Box>
|
|
) : null}
|
|
|
|
{moveError ? <Alert severity="error" variant="outlined" sx={{ mt: 2, color: "text.primary" }} onClose={() => setMoveError("")}>{moveError}</Alert> : null}
|
|
<Box component="span" sx={{ position: "absolute", width: "1px", height: "1px", p: 0, m: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: 0 }} aria-live="polite">
|
|
{announcement}
|
|
</Box>
|
|
|
|
{/* Dragging is coarse (group entry stage only), so the menu carries every precise stage. */}
|
|
<Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={() => { setMenuAnchor(null); setMenuJobId(null); }}>
|
|
{PIPELINE_GROUPS.flatMap((g) => {
|
|
const options = g.statuses.filter((s) => s !== currentMenuStatus);
|
|
if (options.length === 0) return [];
|
|
return [
|
|
<ListSubheader key={`${g.key}-header`} sx={{ lineHeight: "32px", backgroundColor: "transparent" }}>
|
|
{t(g.labelKey as any)}
|
|
</ListSubheader>,
|
|
...options.map((s) => (
|
|
<MenuItem key={s} onClick={() => { if (menuJobId) void setStatus(menuJobId, s); setMenuAnchor(null); setMenuJobId(null); }}>
|
|
{t("jobTableSetStatus", { status: statusLabel(t, s) })}
|
|
</MenuItem>
|
|
)),
|
|
];
|
|
})}
|
|
</Menu>
|
|
</Box>
|
|
);
|
|
}
|