cesnimda
227 lines
13 KiB
TypeScript
227 lines
13 KiB
TypeScript
import React, { useEffect, useRef, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import {
|
|
Alert, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Menu, MenuItem, Paper, Stack, TextField, Typography,
|
|
} from "@mui/material";
|
|
import AddIcon from "@mui/icons-material/Add";
|
|
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
|
import PublicIcon from "@mui/icons-material/Public";
|
|
|
|
import { api, getApiErrorMessage } from "../api";
|
|
import { useToast } from "../toast";
|
|
import { CvTheme, CvVariantSummary, cvBuilderApi, emptyCvVariantSettings } from "../cvBuilder";
|
|
import { useDialogActions } from "../dialogs";
|
|
import CvTemplateGallery from "../components/CvTemplateGallery";
|
|
import CvTemplateThumbnail from "../components/CvTemplateThumbnail";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
import type { TranslationKey } from "../i18n/translations";
|
|
import { PageHeader } from "../layout/PageLayout";
|
|
import ViewStateNotice from "../components/ViewStateNotice";
|
|
import { useViewResource } from "../hooks/useViewResource";
|
|
|
|
export default function CvBuilderPage() {
|
|
const navigate = useNavigate();
|
|
const { toast } = useToast();
|
|
const { language, t } = useI18n();
|
|
const localeRef = useRef(t);
|
|
localeRef.current = t;
|
|
const { confirmAction, promptForValue } = useDialogActions();
|
|
const resource = useViewResource(async () => ({
|
|
variants: await cvBuilderApi.list(),
|
|
themes: await cvBuilderApi.themes().catch(() => []),
|
|
}), { initialData: { variants: [] as CvVariantSummary[], themes: [] as CvTheme[] }, errorMessage: "" });
|
|
const { variants, themes } = resource.data;
|
|
const loading = resource.loading || resource.refreshing;
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
const createTitleRef = useRef<HTMLHeadingElement>(null);
|
|
const actionBusy = useRef(false);
|
|
const actionAnchor = useRef<HTMLElement | null>(null);
|
|
const [pending, setPending] = useState(false);
|
|
const [actionError, setActionError] = useState<{ error?: unknown; key: TranslationKey } | null>(null);
|
|
const [createError, setCreateError] = useState<{ error: unknown } | null>(null);
|
|
const [menu, setMenu] = useState<{ anchor: HTMLElement; id: number } | null>(null);
|
|
const [createOpen, setCreateOpen] = useState(false);
|
|
const [newName, setNewName] = useState(t("cvDashboardUntitled"));
|
|
const [newTheme, setNewTheme] = useState("modern");
|
|
const [creating, setCreating] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (pending) contentRef.current?.focus();
|
|
else if (document.activeElement === contentRef.current && actionAnchor.current?.isConnected) actionAnchor.current.focus();
|
|
}, [pending]);
|
|
|
|
const startAction = (showPending = true) => {
|
|
if (actionBusy.current) return false;
|
|
actionBusy.current = true;
|
|
actionAnchor.current = menu?.anchor ?? null;
|
|
setMenu(null);
|
|
setActionError(null);
|
|
if (showPending) setPending(true);
|
|
return true;
|
|
};
|
|
const finishAction = () => { actionBusy.current = false; setPending(false); };
|
|
const setVariants = (update: (items: CvVariantSummary[]) => CvVariantSummary[]) => {
|
|
resource.setData((data) => ({ ...data, variants: update(data.variants) }));
|
|
};
|
|
|
|
const createNew = () => {
|
|
if (actionBusy.current) return;
|
|
setCreateOpen(true);
|
|
};
|
|
|
|
const confirmCreate = async () => {
|
|
if (!newName.trim() || actionBusy.current) return;
|
|
actionBusy.current = true;
|
|
createTitleRef.current?.focus();
|
|
setCreateError(null);
|
|
setCreating(true);
|
|
try {
|
|
const variant = await cvBuilderApi.create({ name: newName.trim(), settings: emptyCvVariantSettings(newTheme) });
|
|
setCreateOpen(false);
|
|
navigate(`/career/builder/${variant.id}`);
|
|
} catch (err) {
|
|
setCreateError({ error: err });
|
|
} finally { actionBusy.current = false; setCreating(false); }
|
|
};
|
|
|
|
const duplicate = async (id: number) => {
|
|
if (!startAction()) return;
|
|
try {
|
|
await cvBuilderApi.duplicate(id);
|
|
await resource.reload();
|
|
toast(localeRef.current("cvDashboardDuplicated"), "success");
|
|
} catch (err) {
|
|
setActionError({ error: err, key: "cvDashboardDuplicateFailed" });
|
|
} finally {
|
|
finishAction();
|
|
}
|
|
};
|
|
|
|
const remove = async (id: number) => {
|
|
if (!startAction(false)) return;
|
|
const variant = variants.find((item) => item.id === id);
|
|
try {
|
|
if (!(await confirmAction(t("cvDashboardDeleteMessage", { name: variant?.name ?? t("cvDashboardThisCv") }), {
|
|
title: t("cvDashboardDeleteCv"),
|
|
confirmLabel: t("cvDashboardDeleteCv"),
|
|
destructive: true,
|
|
}))) return;
|
|
setPending(true);
|
|
await cvBuilderApi.remove(id);
|
|
setVariants((v) => v.filter((x) => x.id !== id));
|
|
toast(localeRef.current("cvDashboardDeleted"), "success");
|
|
} catch (err) {
|
|
setActionError({ error: err, key: "cvDashboardDeleteFailed" });
|
|
} finally {
|
|
finishAction();
|
|
}
|
|
};
|
|
|
|
const rename = async (id: number) => {
|
|
if (!startAction(false)) return;
|
|
const current = variants.find((item) => item.id === id);
|
|
try {
|
|
const nextName = await promptForValue(t("cvDashboardRenameMessage"), current?.name ?? "", { title: t("cvDashboardRenameCv"), confirmLabel: t("cvDashboardRename") });
|
|
if (!nextName?.trim() || nextName.trim() === current?.name) return;
|
|
setPending(true);
|
|
const variant = await cvBuilderApi.get(id);
|
|
const updated = await cvBuilderApi.save(id, { name: nextName.trim(), settings: variant.settings, source: "manual", expectedVersion: variant.version });
|
|
setVariants((items) => items.map((item) => item.id === id ? { ...item, name: updated.name, updatedAtUtc: updated.updatedAtUtc, version: updated.version } : item));
|
|
toast(localeRef.current("cvDashboardRenamed"), "success");
|
|
} catch (err) { setActionError({ error: err, key: "cvDashboardRenameFailed" }); }
|
|
finally { finishAction(); }
|
|
};
|
|
|
|
const download = async (id: number, cvName: string) => {
|
|
if (!startAction()) return;
|
|
try {
|
|
const response = await api.post(cvBuilderApi.exportPdfUrl(id), {}, { responseType: "blob" });
|
|
const url = URL.createObjectURL(response.data as Blob);
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
link.download = `${cvName || "cv"}.pdf`;
|
|
link.click();
|
|
URL.revokeObjectURL(url);
|
|
} catch (err) {
|
|
const status = (err as { response?: { status?: number } })?.response?.status;
|
|
setActionError({ error: status === 503 || status === 504 ? undefined : err, key: status === 503 ? "cvPdfBusy" : status === 504 ? "cvPdfTimedOut" : "cvDashboardDownloadFailed" });
|
|
} finally { finishAction(); }
|
|
};
|
|
|
|
return (
|
|
<Box ref={contentRef} role="region" aria-label={t("cvDashboardTitle")} tabIndex={-1} sx={{ display: "grid", gap: "var(--app-section-gap)", minWidth: 0, overflowWrap: "anywhere" }}>
|
|
<PageHeader level="h2" title={t("cvDashboardLibraryTitle")} description={t("cvDashboardSubtitle")}
|
|
actions={<Button variant="contained" disabled={pending || loading} startIcon={<AddIcon />} onClick={createNew}>{t("cvDashboardNewCv")}</Button>} />
|
|
<ViewStateNotice title={t("cvDashboardLoadFailed")} loading={loading}
|
|
error={resource.error ? { ...resource.error, message: resource.error.message || t("cvDashboardLoadFailed") } : null}
|
|
onRetry={() => { if (actionBusy.current || loading) return; contentRef.current?.focus(); void resource.reload(); }} compact />
|
|
{actionError && <Alert severity="error">{getApiErrorMessage(actionError.error, t(actionError.key))}</Alert>}
|
|
{pending && <Typography role="status" variant="body2">{t("loading")}</Typography>}
|
|
{!loading && variants.length === 0 && !resource.error && (
|
|
<Paper variant="outlined" sx={{ p: "var(--app-card-padding)", borderRadius: 1 }}>
|
|
<Typography component="h2" variant="sectionTitle">{t("cvDashboardEmptyTitle")}</Typography>
|
|
<Typography color="text.secondary" sx={{ mb: 2 }}>{t("cvDashboardEmptyBody")}</Typography>
|
|
</Paper>
|
|
)}
|
|
|
|
<Box sx={{ display: "grid", minWidth: 0, gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "repeat(2, minmax(0, 1fr))", lg: "repeat(3, minmax(0, 1fr))" }, gap: 2 }}>
|
|
{variants.map((v) => (
|
|
<Paper
|
|
key={v.id}
|
|
role="link"
|
|
tabIndex={0}
|
|
aria-disabled={pending}
|
|
aria-label={t("cvDashboardOpenNamed", { name: v.name })}
|
|
sx={{ p: "var(--app-card-padding)", minWidth: 0, borderRadius: 1, cursor: pending ? "default" : "pointer", border: "1px solid", borderColor: "divider", "&:hover": { borderColor: "primary.main" }, "&:focus-visible": { outline: "3px solid", outlineColor: "primary.main", outlineOffset: 2 } }}
|
|
onClick={() => { if (!actionBusy.current) navigate(`/career/builder/${v.id}`); }}
|
|
onKeyDown={(event) => {
|
|
if (!actionBusy.current && event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
|
|
event.preventDefault();
|
|
navigate(`/career/builder/${v.id}`);
|
|
}
|
|
}}
|
|
>
|
|
<CvTemplateThumbnail theme={themes.find((theme) => theme.id === v.themeId)} />
|
|
<Stack direction="row" alignItems="flex-start" justifyContent="space-between">
|
|
<Typography component="h3" variant="sectionTitle" sx={{ mt: 1, minWidth: 0 }}>{v.name}</Typography>
|
|
<IconButton disabled={pending} aria-haspopup="menu" size="small" aria-label={t("cvDashboardActionsFor", { name: v.name })} onClick={(e) => { e.stopPropagation(); if (!actionBusy.current) setMenu({ anchor: e.currentTarget, id: v.id }); }}>
|
|
<MoreVertIcon fontSize="small" />
|
|
</IconButton>
|
|
</Stack>
|
|
<Stack direction="row" spacing={1} useFlexGap flexWrap="wrap" sx={{ mt: 1, minWidth: 0 }}>
|
|
<Chip size="small" label={v.themeId} />
|
|
<Chip size="small" variant="outlined" label={(v.language || "en").toUpperCase()} />
|
|
{v.isPublic && <Chip size="small" color="primary" icon={<PublicIcon />} label={t("cvEditorPublic")} />}
|
|
</Stack>
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 1 }}>
|
|
{t("cvDashboardUpdatedVersion", { date: new Date(v.updatedAtUtc).toLocaleDateString(language === "nb" ? "nb-NO" : "en-GB"), version: v.version })}
|
|
{v.jobApplicationId ? ` · ${[v.jobTitle, v.companyName].filter(Boolean).join(t("cvDashboardAt")) || t("cvDashboardJobNumber", { id: v.jobApplicationId })}` : ""}
|
|
</Typography>
|
|
</Paper>
|
|
))}
|
|
</Box>
|
|
|
|
<Menu anchorEl={menu?.anchor} open={!!menu} onClose={() => setMenu(null)}>
|
|
<MenuItem onClick={() => menu && navigate(`/career/builder/${menu.id}`)}>{t("cvDashboardOpen")}</MenuItem>
|
|
<MenuItem onClick={() => menu && duplicate(menu.id)}>{t("cvEditorDuplicate")}</MenuItem>
|
|
<MenuItem onClick={() => menu && void rename(menu.id)}>{t("cvDashboardRename")}</MenuItem>
|
|
<MenuItem onClick={() => { const cv = variants.find((item) => item.id === menu?.id); if (cv) void download(cv.id, cv.name); }}>{t("cvEditorDownloadPdf")}</MenuItem>
|
|
<MenuItem onClick={() => menu && remove(menu.id)} sx={{ color: "error.main" }}>{t("cvDashboardDelete")}</MenuItem>
|
|
</Menu>
|
|
|
|
<Dialog open={createOpen} onClose={() => { if (!actionBusy.current) setCreateOpen(false); }} fullWidth maxWidth="md" aria-labelledby="create-cv-title" aria-describedby={`create-cv-help${createError ? " create-cv-error" : ""}`}>
|
|
<DialogTitle ref={createTitleRef} tabIndex={-1} id="create-cv-title">{t("cvDashboardCreateTitle")}</DialogTitle>
|
|
<DialogContent role="region" aria-labelledby="create-cv-title" tabIndex={creating ? 0 : -1}>
|
|
<Typography id="create-cv-help" color="text.secondary" sx={{ mb: 2 }}>{t("cvDashboardCreateHelp")}</Typography>
|
|
{createError && <Alert id="create-cv-error" severity="error" sx={{ mb: 2 }}>{getApiErrorMessage(createError.error, t("cvDashboardCreateFailed"))}</Alert>}
|
|
<TextField autoFocus fullWidth disabled={creating} required label={t("cvEditorName")} value={newName} onChange={(event) => setNewName(event.target.value)} error={!newName.trim()} helperText={!newName.trim() ? t("cvDashboardEnterName") : t("cvDashboardNameExample")} sx={{ mb: 2, "& .MuiFormHelperText-root.Mui-disabled": { color: "text.secondary" } }} />
|
|
<Typography component="h3" variant="sectionTitle" sx={{ mb: 1 }}>{t("cvDashboardChooseTemplate")}</Typography>
|
|
<CvTemplateGallery disabled={creating} themes={themes.length ? themes : [{ id: "modern", name: t("cvDashboardDefaultTemplate"), category: t("cvEditorTemplate"), description: "", layout: "header-band", accent: "#3157d5", photoShape: "none", supportsIcons: false, atsFriendly: true, requiresPro: false, available: true, swatches: ["#3157d5", "#eef1f4", "#fff"] }]} selectedId={newTheme} onSelect={(theme) => { if (!actionBusy.current) setNewTheme(theme.id); }} previewHeight={125} showDescriptions={false} />
|
|
</DialogContent>
|
|
<DialogActions><Button onClick={() => setCreateOpen(false)} disabled={creating}>{t("cancel")}</Button><Button variant="contained" disabled={creating || !newName.trim()} onClick={() => void confirmCreate()}>{creating ? t("cvDashboardCreating") : t("cvDashboardCreateCv")}</Button></DialogActions>
|
|
</Dialog>
|
|
</Box>
|
|
);
|
|
}
|