cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): migrate Career import review and version history

Browse Source
This commit is contained in:
cesnimda
2026-10-12 19:28:25 +02:00
parent ec23b650f7
commit 5d6e32358c
20 changed files with 10454 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/views/career/ProfileCompleteness.tsx
+42 -15
View File
@@ -1,8 +1,9 @@
import React from "react";
import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Chip, LinearProgress, Typography } from "@mui/material";
import { Accordion, AccordionDetails, AccordionSummary, Alert, Box, Button, Chip, LinearProgress, Typography } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { useI18n } from "../../i18n/I18nProvider";
import { localizeCompletenessLabel } from "./careerCompletenessLabels";
import { PageSection } from "../../layout/PageLayout";
// Display-only slice of the Career Profile page: the completeness meter, the "missing" chips, and the
// version-history accordion. Extracted from CareerProfilePage as the first step of the Phase 1
@@ -26,20 +27,41 @@ export default function ProfileCompleteness({
loading,
onRestore,
showSummary = true,
versionsLoading = false,
versionsError = null,
onRetryVersions,
restoreDisabled = false,
restoreError = null,
}: {
completeness: CareerCompletenessView | null;
versions: CareerVersionView[];
loading: boolean;
onRestore: (version: number) => void;
showSummary?: boolean;
versionsLoading?: boolean;
versionsError?: string | null;
onRetryVersions?: () => void;
restoreDisabled?: boolean;
restoreError?: string | null;
}) {
const { language, t } = useI18n();
if ((!showSummary || !completeness) && versions.length <= 1) return null;
const restoreHelpId = React.useId();
const historyRef = React.useRef<HTMLDivElement>(null);
const locale = language === "nb" ? "nb-NO" : "en";
const rows = versions.slice(0, 12).map((v) => (
<Box key={v.version} sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, flexWrap: "wrap", minWidth: 0 }}>
<Typography variant="body2" sx={{ color: "text.secondary", overflowWrap: "anywhere" }}>
v{v.version} · {v.source} · {new Date(v.createdAtUtc).toLocaleString(locale)}{v.isCurrent ? ` · ${t("profileCvVersionCurrent")}` : ""}
</Typography>
{!v.isCurrent ? (
<Button size="small" variant="text" disabled={loading || versionsLoading || restoreDisabled} aria-describedby={restoreDisabled ? restoreHelpId : undefined} onClick={() => { historyRef.current?.focus(); onRestore(v.version); }}>{t("careerRestoreVersion", { version: v.version })}</Button>
) : null}
</Box>
));
return (
<Box sx={{ mb: 2.5, p: 2, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
<Box ref={historyRef} role="group" aria-label={t("profileCvVersionHistory", { count: versions.length })} tabIndex={-1} sx={{ mb: 2 }}>
{showSummary && completeness ? (
<>
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 2, flexWrap: "wrap", mb: 1 }}>
@@ -47,6 +69,7 @@ export default function ProfileCompleteness({
<Typography variant="h6" sx={{ fontWeight: 900 }}>{completeness.percent}%</Typography>
</Box>
<LinearProgress
aria-label={t("profileCvCompletenessTitle")}
variant="determinate"
value={completeness.percent}
color={completeness.percent >= 80 ? "success" : completeness.percent >= 40 ? "primary" : "warning"}
@@ -64,27 +87,31 @@ export default function ProfileCompleteness({
)}
</>
) : null}
{versions.length > 1 ? (
<PageSection title={t("profileCvVersionHistory", { count: versions.length })} surface>
{versionsLoading ? <LinearProgress aria-label={t("careerHistoryLoading")} /> : null}
{versionsError !== null ? <Alert severity="error" action={onRetryVersions ? <Button color="inherit" disabled={versionsLoading} onClick={() => { historyRef.current?.focus(); onRetryVersions(); }}>{t("retry")}</Button> : undefined}>
<Typography component="p" variant="body2" sx={{ fontWeight: 600 }}>{t("careerHistoryLoadFailed")}</Typography>
{versionsError ? <Typography component="p" variant="body2" sx={{ overflowWrap: "anywhere" }}>{versionsError}</Typography> : null}
</Alert> : null}
{restoreError !== null ? <Alert severity="error">
<Typography component="p" variant="body2" sx={{ fontWeight: 600 }}>{t("careerRestoreFailed")}</Typography>
{restoreError ? <Typography component="p" variant="body2" sx={{ overflowWrap: "anywhere" }}>{restoreError}</Typography> : null}
</Alert> : null}
{restoreDisabled ? <Typography id={restoreHelpId} variant="body2" color="text.secondary">{t("careerSaveBeforeRestore")}</Typography> : null}
{versions.length > 1 ? (
<Accordion disableGutters elevation={0} sx={{ mt: showSummary ? 1.5 : 0, "&:before": { display: "none" }, backgroundColor: "transparent" }}>
<AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ px: 0, minHeight: 0 }}>
<Typography variant="body2" sx={{ fontWeight: 700 }}>{t("profileCvVersionHistory", { count: versions.length })}</Typography>
</AccordionSummary>
<AccordionDetails sx={{ px: 0, pt: 0 }}>
<Box sx={{ display: "grid", gap: 0.75 }}>
{versions.slice(0, 12).map((v) => (
<Box key={v.version} sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, flexWrap: "wrap" }}>
<Typography variant="body2" sx={{ color: "text.secondary" }}>
v{v.version} · {v.source} · {new Date(v.createdAtUtc).toLocaleString(locale)}{v.isCurrent ? ` · ${t("profileCvVersionCurrent")}` : ""}
</Typography>
{!v.isCurrent ? (
<Button size="small" variant="text" disabled={loading} onClick={() => onRestore(v.version)}>{t("profileCvVersionRestore")}</Button>
) : null}
</Box>
))}
{rows}
</Box>
</AccordionDetails>
</Accordion>
) : null}
) : rows}
{versions.length === 0 && !versionsLoading && versionsError === null ? <Typography variant="body2" color="text.secondary">{t("careerHistoryEmpty")}</Typography> : null}
</PageSection>
</Box>
);
}