feat(cv): redesign editor frame and section navigation
This commit is contained in:
cesnimda
@@ -81,6 +81,93 @@ async function openContentTab() {
|
||||
fireEvent.click(screen.getByRole('tab', { name: 'Content' }));
|
||||
}
|
||||
|
||||
test('section navigation opens and focuses omitted/custom sections without changing their data', async () => {
|
||||
const settings = { ...variant.settings,
|
||||
sections: [{ key: 'skills', hidden: true }, { key: 'custom:sample', hidden: false }],
|
||||
customSections: [{ key: 'sample', title: 'Volunteer work', items: ['Bokmål: frivillig arbeid'], hidden: false }],
|
||||
};
|
||||
routeGet(() => Promise.resolve({ data: { ...variant, settings } }));
|
||||
renderAt(3);
|
||||
await openContentTab();
|
||||
const navigation = screen.getByRole('navigation', { name: 'CV section navigation' });
|
||||
fireEvent.mouseDown(within(navigation).getByRole('combobox', { name: 'Go to section' }));
|
||||
fireEvent.click(await screen.findByRole('option', { name: 'Skills · Omitted' }));
|
||||
await waitFor(() => expect(screen.getByRole('button', { name: 'Collapse Skills' })).toHaveFocus());
|
||||
expect(screen.getByRole('button', { name: 'Show Skills section' })).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Collapse Skills' }));
|
||||
fireEvent.mouseDown(within(navigation).getByRole('combobox', { name: /Go to section/ }));
|
||||
fireEvent.click(await screen.findByRole('option', { name: 'Skills · Omitted' }));
|
||||
await waitFor(() => expect(screen.getByRole('button', { name: 'Collapse Skills' })).toHaveFocus());
|
||||
fireEvent.mouseDown(within(navigation).getByRole('combobox', { name: 'Go to section' }));
|
||||
fireEvent.click(await screen.findByRole('option', { name: 'Volunteer work · Included' }));
|
||||
await waitFor(() => expect(screen.getByRole('button', { name: 'Collapse Volunteer work' })).toHaveFocus());
|
||||
expect(screen.getByDisplayValue('Bokmål: frivillig arbeid')).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole('tab', { name: 'Customize' }));
|
||||
fireEvent.click(screen.getByRole('tab', { name: 'Content' }));
|
||||
expect(within(navigation).getByRole('combobox')).toHaveTextContent('Volunteer work');
|
||||
expect(screen.getByRole('button', { name: 'Collapse Skills' })).toHaveAttribute('aria-expanded', 'true');
|
||||
expect(screen.getByRole('button', { name: 'Collapse Volunteer work' })).toHaveAttribute('aria-expanded', 'true');
|
||||
expect(mockedApi.put).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('keyboard move controls retain focus and persist the same section order shown by navigation', async () => {
|
||||
routeGet(() => Promise.resolve({ data: { ...variant, settings: { ...variant.settings,
|
||||
sections: [{ key: 'summary' }, { key: 'experience' }, { key: 'skills', hidden: true }],
|
||||
} } }));
|
||||
renderAt(3);
|
||||
await openContentTab();
|
||||
const move = screen.getByRole('button', { name: 'Move Experience section down' });
|
||||
move.focus();
|
||||
fireEvent.click(move);
|
||||
expect(move).toHaveFocus();
|
||||
fireEvent.mouseDown(screen.getByRole('combobox', { name: 'Go to section' }));
|
||||
expect(screen.getAllByRole('option').slice(0, 3).map(option => option.textContent)).toEqual([
|
||||
'Professional Summary · Included', 'Skills · Omitted', 'Experience · Included',
|
||||
]);
|
||||
fireEvent.keyDown(screen.getByRole('listbox'), { key: 'Escape' });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Save now' }));
|
||||
await screen.findByText('Saved');
|
||||
expect(mockedApi.put).toHaveBeenLastCalledWith('/cv/variants/3', expect.objectContaining({
|
||||
expectedVersion: 4, settings: expect.objectContaining({ sections: expect.arrayContaining([
|
||||
{ key: 'summary' }, { key: 'skills', hidden: true }, { key: 'experience' },
|
||||
]) }),
|
||||
}));
|
||||
expect((mockedApi.put.mock.calls[mockedApi.put.mock.calls.length - 1][1] as any).settings.sections.slice(0, 3).map((row: any) => row.key)).toEqual(['summary', 'skills', 'experience']);
|
||||
});
|
||||
|
||||
test('secondary duplicate action saves the current draft before creating the copy', async () => {
|
||||
routeGet(() => Promise.resolve({ data: variant }));
|
||||
mockedApi.post.mockImplementation((url: string) => Promise.resolve({ data: url.endsWith('/duplicate')
|
||||
? { ...variant, id: 8, name: 'Backend CV copy' } : { html: '<p>CV</p>' } } as any));
|
||||
renderAt(3);
|
||||
await openContentTab();
|
||||
fireEvent.change(screen.getByLabelText('Headline override'), { target: { value: 'Draft before copy' } });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'More document actions' }));
|
||||
fireEvent.click(screen.getByRole('menuitem', { name: 'Duplicate' }));
|
||||
await waitFor(() => expect(mockedApi.post).toHaveBeenCalledWith('/cv/variants/3/duplicate', expect.anything()));
|
||||
expect(mockedApi.put).toHaveBeenCalledWith('/cv/variants/3', expect.objectContaining({
|
||||
expectedVersion: 4, settings: expect.objectContaining({ headline: 'Draft before copy' }),
|
||||
}));
|
||||
expect(mockedApi.put.mock.invocationCallOrder[0]).toBeLessThan(mockedApi.post.mock.invocationCallOrder[
|
||||
mockedApi.post.mock.calls.findIndex(call => call[0] === '/cv/variants/3/duplicate')
|
||||
]);
|
||||
});
|
||||
|
||||
test('pane navigation focuses the existing preview without changing the pending draft', async () => {
|
||||
routeGet(() => Promise.resolve({ data: variant }));
|
||||
renderAt(3);
|
||||
await openContentTab();
|
||||
const headline = screen.getByLabelText('Headline override');
|
||||
fireEvent.change(headline, { target: { value: 'Retained draft' } });
|
||||
const preview = screen.getByRole('region', { name: 'Live preview' });
|
||||
preview.scrollIntoView = jest.fn();
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Go to preview' }));
|
||||
expect(preview).toHaveFocus();
|
||||
expect(headline).toHaveValue('Retained draft');
|
||||
expect(screen.getByText('Unsaved')).toBeInTheDocument();
|
||||
expect(mockedApi.put).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('deep link loads the exact variant named in the route', async () => {
|
||||
routeGet(() => Promise.resolve({ data: variant } as any));
|
||||
|
||||
@@ -256,12 +343,17 @@ test('restoring history uses the current version and never replaces edits made d
|
||||
expect(mockedApi.put).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('professional editor starts with templates and combines design and layout controls', async () => {
|
||||
test('Content is the primary studio panel and all advanced tabs retain their controls', async () => {
|
||||
routeGet(() => Promise.resolve({ data: variant } as any));
|
||||
renderAt(3);
|
||||
|
||||
await screen.findByDisplayValue('Backend CV');
|
||||
expect(screen.getByRole('tab', { name: 'Template' })).toHaveAttribute('aria-selected', 'true');
|
||||
const content = screen.getByRole('tab', { name: 'Content' });
|
||||
expect(content).toHaveAttribute('aria-selected', 'true');
|
||||
expect(screen.getByRole('tablist', { name: 'CV studio sections' }).firstElementChild).toBe(content);
|
||||
expect(screen.getByRole('tabpanel', { name: 'Content' })).toBeInTheDocument();
|
||||
expect(screen.getByText('This CV only')).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: 'Linked application' })).toHaveAttribute('href', '/jobs/7');
|
||||
fireEvent.click(screen.getByRole('tab', { name: 'Customize' }));
|
||||
expect(screen.getByText('Typography')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Body size')).toBeInTheDocument();
|
||||
@@ -304,6 +396,7 @@ test('choosing a template restores its own structure instead of inheriting the p
|
||||
renderAt(3);
|
||||
|
||||
await screen.findByDisplayValue('Backend CV');
|
||||
fireEvent.click(screen.getByRole('tab', { name: 'Template' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'All templates' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: /Technical/ }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Save now' }));
|
||||
|
||||
@@ -528,6 +528,15 @@ export const translations = {
|
||||
cvEditorEdit: "Edit",
|
||||
cvEditorEditingRegion: "CV editing controls",
|
||||
cvEditorStudioNavigation: "CV studio sections",
|
||||
cvEditorScope: "This CV only",
|
||||
cvEditorLinkedApplication: "Linked application",
|
||||
cvEditorShared: "Shared publicly",
|
||||
cvEditorMoreActions: "More document actions",
|
||||
cvEditorSectionNavigation: "CV section navigation",
|
||||
cvEditorGoToSection: "Go to section",
|
||||
cvEditorFocusPreview: "Go to preview",
|
||||
cvEditorIncluded: "Included",
|
||||
cvEditorOmitted: "Omitted",
|
||||
cvEditorPreview: "Preview",
|
||||
cvEditorDuplicate: "Duplicate",
|
||||
cvEditorUpdating: "Updating…",
|
||||
@@ -3066,6 +3075,15 @@ export const translations = {
|
||||
cvEditorEdit: "Rediger",
|
||||
cvEditorEditingRegion: "Redigeringskontroller for CV",
|
||||
cvEditorStudioNavigation: "Seksjoner i CV-studioet",
|
||||
cvEditorScope: "Bare denne CV-en",
|
||||
cvEditorLinkedApplication: "Tilknyttet søknad",
|
||||
cvEditorShared: "Delt offentlig",
|
||||
cvEditorMoreActions: "Flere dokumenthandlinger",
|
||||
cvEditorSectionNavigation: "Navigasjon mellom CV-seksjoner",
|
||||
cvEditorGoToSection: "Gå til seksjon",
|
||||
cvEditorFocusPreview: "Gå til forhåndsvisning",
|
||||
cvEditorIncluded: "Inkludert",
|
||||
cvEditorOmitted: "Utelatt",
|
||||
cvEditorPreview: "Forhåndsvis",
|
||||
cvEditorDuplicate: "Dupliser",
|
||||
cvEditorUpdating: "Oppdaterer…",
|
||||
|
||||
@@ -2,8 +2,8 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
||||
import { Link as RouterLink, useBlocker, useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
import {
|
||||
Alert, Box, Button, Chip, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Divider, IconButton,
|
||||
MenuItem, Paper, Skeleton, Stack, Tab, Tabs, TextField, Tooltip, Typography,
|
||||
Alert, Box, Button, Chip, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, IconButton,
|
||||
Menu, MenuItem, Paper, Skeleton, Stack, Tab, Tabs, TextField, Tooltip, Typography,
|
||||
} from "@mui/material";
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||
@@ -20,6 +20,7 @@ import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import UndoIcon from "@mui/icons-material/Undo";
|
||||
import RedoIcon from "@mui/icons-material/Redo";
|
||||
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||
import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
|
||||
import TranslateIcon from "@mui/icons-material/Translate";
|
||||
import SpellcheckIcon from "@mui/icons-material/Spellcheck";
|
||||
@@ -59,7 +60,9 @@ export default function CvBuilderEditor() {
|
||||
const [outline, setOutline] = useState<CvOutline | null>(null);
|
||||
const [isPublic, setIsPublic] = useState(false);
|
||||
const [publicSlug, setPublicSlug] = useState("");
|
||||
const [tab, setTab] = useState(0);
|
||||
const [jobApplicationId, setJobApplicationId] = useState<number | null>(null);
|
||||
const [actionsAnchor, setActionsAnchor] = useState<HTMLElement | null>(null);
|
||||
const [tab, setTab] = useState(1);
|
||||
const [html, setHtml] = useState("");
|
||||
const [zoom, setZoom] = useState(0.62);
|
||||
const [previewing, setPreviewing] = useState(false);
|
||||
@@ -127,6 +130,7 @@ export default function CvBuilderEditor() {
|
||||
latestSettings.current = variant.settings;
|
||||
setIsPublic(variant.isPublic);
|
||||
setPublicSlug(variant.publicSlug);
|
||||
setJobApplicationId(variant.jobApplicationId ?? null);
|
||||
setSaveState("saved");
|
||||
undoStack.current = [];
|
||||
redoStack.current = [];
|
||||
@@ -456,47 +460,68 @@ export default function CvBuilderEditor() {
|
||||
<Button size="small" onClick={() => void reloadSavedVariant()}>{t("cvEditorConflictReload")}</Button>
|
||||
</Stack>
|
||||
</Alert>}
|
||||
<Paper component="header" sx={{ px: { xs: 1, sm: 1.5 }, py: 1, borderRadius: 3, border: "1px solid", borderColor: "divider" }}>
|
||||
<Stack direction="row" alignItems="center" gap={1} flexWrap="wrap">
|
||||
<Tooltip title={t("cvEditorBack")}><IconButton size="small" aria-label={t("cvEditorBack")} onClick={() => navigate("/career/builder")}><ArrowBackIcon fontSize="small" /></IconButton></Tooltip>
|
||||
<TextField variant="standard" value={name} onChange={(e) => renameVariant(e.target.value)}
|
||||
error={!name.trim()} helperText={!name.trim() ? t("cvEditorNameRequired") : undefined}
|
||||
sx={{ minWidth: { xs: 150, sm: 220 }, flex: "1 1 240px", maxWidth: 420 }}
|
||||
slotProps={{ input: { style: { fontWeight: 800, fontSize: "1.05rem" } }, htmlInput: { "aria-label": t("cvEditorName") } }} />
|
||||
<SaveBadge state={saveState} canRetry={!!name.trim()} onRetry={() => void retrySave()} />
|
||||
<Divider orientation="vertical" flexItem sx={{ display: { xs: "none", sm: "block" } }} />
|
||||
<Tooltip title={t("cvEditorUndo")}><span><IconButton size="small" aria-label={t("cvEditorUndo")} disabled={!canUndo} onClick={undo}><UndoIcon fontSize="small" /></IconButton></span></Tooltip>
|
||||
<Tooltip title={t("cvEditorRedo")}><span><IconButton size="small" aria-label={t("cvEditorRedo")} disabled={!canRedo} onClick={redo}><RedoIcon fontSize="small" /></IconButton></span></Tooltip>
|
||||
{compactEditor && <Stack direction="row" sx={{ border: "1px solid", borderColor: "divider", borderRadius: 2, p: 0.25 }}>
|
||||
<Button size="small" variant={mobilePane === "edit" ? "contained" : "text"} onClick={() => setMobilePane("edit")}>{t("cvEditorEdit")}</Button>
|
||||
<Button size="small" variant={mobilePane === "preview" ? "contained" : "text"} onClick={() => setMobilePane("preview")}>{t("cvEditorPreview")}</Button>
|
||||
</Stack>}
|
||||
<Box sx={{ flex: { sm: 1 } }} />
|
||||
<Button size="small" variant="text" startIcon={<ContentCopyIcon />} disabled={!name.trim()} onClick={() => void duplicateVariant()}>{t("cvEditorDuplicate")}</Button>
|
||||
<Button size="small" variant={isPublic ? "contained" : "outlined"} startIcon={<PublicIcon />} disabled={publishing || exporting || !name.trim()} onClick={togglePublic}>
|
||||
{publishing ? t("cvEditorUpdating") : isPublic ? t("cvEditorStopSharing") : t("cvEditorShare")}
|
||||
</Button>
|
||||
{isPublic && <Button size="small" startIcon={<ContentCopyIcon />} onClick={copyPublicLink}>{t("cvEditorCopyLink")}</Button>}
|
||||
<Button size="small" variant="contained" startIcon={<PictureAsPdfIcon />} disabled={exporting || publishing || !name.trim()} onClick={exportPdf}>{exporting ? t("cvEditorExporting") : t("cvEditorDownloadPdf")}</Button>
|
||||
<Paper component="header" variant="outlined" sx={{ p: 1.5 }}>
|
||||
<Stack direction={{ xs: "column", sm: "row" }} alignItems={{ sm: "center" }} gap={1.5}>
|
||||
<Stack direction="row" alignItems="flex-start" gap={1} sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Tooltip title={t("cvEditorBack")}><IconButton size="small" aria-label={t("cvEditorBack")} onClick={() => navigate("/career/builder")}><ArrowBackIcon fontSize="small" /></IconButton></Tooltip>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<TextField variant="standard" value={name} onChange={(e) => renameVariant(e.target.value)} fullWidth
|
||||
error={!name.trim()} helperText={!name.trim() ? t("cvEditorNameRequired") : undefined}
|
||||
sx={{ "& input": { typography: "sectionTitle" } }}
|
||||
slotProps={{ htmlInput: { "aria-label": t("cvEditorName") } }} />
|
||||
<Stack direction="row" gap={1} alignItems="center" flexWrap="wrap" sx={{ mt: 0.5 }}>
|
||||
<Typography variant="caption" color="text.secondary">{t("cvEditorScope")}</Typography>
|
||||
<Typography variant="caption" color="text.secondary">{t("cvEditorVersion", { version: serverVersion.current })}</Typography>
|
||||
{jobApplicationId && <Button component={RouterLink} to={`/jobs/${jobApplicationId}`} size="small">{t("cvEditorLinkedApplication")}</Button>}
|
||||
{isPublic && <Chip size="small" icon={<PublicIcon />} label={t("cvEditorShared")} variant="outlined" />}
|
||||
<SaveBadge state={saveState} canRetry={!!name.trim()} onRetry={() => void retrySave()} />
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack direction="row" alignItems="center" gap={0.5}>
|
||||
<Button size="small" variant="contained" startIcon={<PictureAsPdfIcon />} sx={{ flex: { xs: 1, sm: "none" } }} disabled={exporting || publishing || !name.trim()} onClick={exportPdf}>{exporting ? t("cvEditorExporting") : t("cvEditorDownloadPdf")}</Button>
|
||||
<Tooltip title={t("cvEditorMoreActions")}><IconButton size="small" aria-label={t("cvEditorMoreActions")} aria-haspopup="menu" aria-expanded={!!actionsAnchor} aria-controls={actionsAnchor ? "cv-document-actions" : undefined} onClick={(event) => setActionsAnchor(event.currentTarget)}><MoreHorizIcon /></IconButton></Tooltip>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Menu id="cv-document-actions" anchorEl={actionsAnchor} open={!!actionsAnchor} onClose={() => setActionsAnchor(null)} slotProps={{ list: { "aria-label": t("cvEditorMoreActions") } }}>
|
||||
<MenuItem disabled={!name.trim()} onClick={() => { setActionsAnchor(null); void duplicateVariant(); }}><ContentCopyIcon fontSize="small" sx={{ mr: 1 }} />{t("cvEditorDuplicate")}</MenuItem>
|
||||
<MenuItem disabled={publishing || exporting || !name.trim()} onClick={() => { setActionsAnchor(null); void togglePublic(); }}><PublicIcon fontSize="small" sx={{ mr: 1 }} />{publishing ? t("cvEditorUpdating") : isPublic ? t("cvEditorStopSharing") : t("cvEditorShare")}</MenuItem>
|
||||
{isPublic && <MenuItem onClick={() => { setActionsAnchor(null); copyPublicLink(); }}><ContentCopyIcon fontSize="small" sx={{ mr: 1 }} />{t("cvEditorCopyLink")}</MenuItem>}
|
||||
</Menu>
|
||||
{compactEditor && <Stack direction="row" gap={0.5} sx={{ mt: 1.5 }}>
|
||||
<Button fullWidth size="small" aria-pressed={mobilePane === "edit"} variant={mobilePane === "edit" ? "contained" : "outlined"} onClick={() => setMobilePane("edit")}>{t("cvEditorEdit")}</Button>
|
||||
<Button fullWidth size="small" aria-pressed={mobilePane === "preview"} variant={mobilePane === "preview" ? "contained" : "outlined"} onClick={() => setMobilePane("preview")}>{t("cvEditorPreview")}</Button>
|
||||
</Stack>}
|
||||
</Paper>
|
||||
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "minmax(360px, 480px) minmax(0, 1fr)" }, gap: 1.5, alignItems: "start" }}>
|
||||
<Paper role="region" aria-label={t("cvEditorEditingRegion")} onFocusCapture={() => setMobilePane("edit")} sx={{ display: compactEditor && mobilePane !== "edit" ? "none" : "block", p: 2, borderRadius: 3, position: { md: "sticky" }, top: 12, minWidth: 0, maxHeight: { md: "calc(100vh - 104px)" }, overflowY: { md: "auto" }, scrollbarWidth: "none", "&::-webkit-scrollbar": { display: "none" }, border: "1px solid", borderColor: "divider" }}>
|
||||
|
||||
<Tabs aria-label={t("cvEditorStudioNavigation")} value={tab} onChange={(_, v) => { setTab(v); if (v === 4) loadVersions(); }} variant="scrollable" scrollButtons="auto" allowScrollButtonsMobile sx={{ mb: 1.5, minHeight: 38 }}>
|
||||
<Tab label={t("cvEditorTemplate")} />
|
||||
<Tab label={t("cvEditorContent")} />
|
||||
<Tab label={t("cvEditorCustomize")} />
|
||||
<Tab label={t("cvEditorAiTools")} />
|
||||
<Tab label={t("cvEditorHistory")} />
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "minmax(360px, 1fr) minmax(0, 1fr)" }, gap: 1.5, alignItems: "start" }}>
|
||||
<Paper variant="outlined" role="region" aria-label={t("cvEditorEditingRegion")} onFocusCapture={() => setMobilePane("edit")} sx={{ display: compactEditor && mobilePane !== "edit" ? "none" : "block", position: { md: "sticky" }, top: 12, minWidth: 0, maxHeight: { md: "calc(100vh - 104px)" }, overflowY: { md: "auto" }, scrollbarWidth: "none", "&::-webkit-scrollbar": { display: "none" } }}>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ px: 1.5, py: 0.5, borderBottom: "1px solid", borderColor: "divider" }}>
|
||||
<Typography component="h2" variant="subtitle2">{t("cvEditorEditingRegion")}</Typography>
|
||||
<Stack direction="row">
|
||||
<Tooltip title={t("cvEditorUndo")}><span><IconButton size="small" aria-label={t("cvEditorUndo")} disabled={!canUndo} onClick={undo}><UndoIcon fontSize="small" /></IconButton></span></Tooltip>
|
||||
<Tooltip title={t("cvEditorRedo")}><span><IconButton size="small" aria-label={t("cvEditorRedo")} disabled={!canRedo} onClick={redo}><RedoIcon fontSize="small" /></IconButton></span></Tooltip>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Tabs aria-label={t("cvEditorStudioNavigation")} value={tab} onChange={(_, v) => { setTab(v); if (v === 4) loadVersions(); }} variant="scrollable" scrollButtons="auto" allowScrollButtonsMobile sx={{ borderBottom: "1px solid", borderColor: "divider" }}>
|
||||
{[1, 0, 2, 3, 4].map((value) => <Tab key={value} value={value} id={`cv-studio-tab-${value}`} aria-controls={`cv-studio-panel-${value}`} label={t((["cvEditorTemplate", "cvEditorContent", "cvEditorCustomize", "cvEditorAiTools", "cvEditorHistory"] as const)[value])} />)}
|
||||
</Tabs>
|
||||
|
||||
{tab === 0 && <CvCustomizeTab mode="template" settings={settings} update={update} themes={themes} sectionLabel={(key, fallback) => sectionName(key, fallback, t)} />}
|
||||
{tab === 1 && <ContentTab settings={settings} update={update} outline={outline} />}
|
||||
{tab === 2 && <CvCustomizeTab mode="customize" settings={settings} update={update} themes={themes} sectionLabel={(key, fallback) => sectionName(key, fallback, t)} />}
|
||||
{tab === 3 && <DocumentAiTab settings={settings} outline={outline} update={update} />}
|
||||
{tab === 4 && <HistoryTab versions={versions} onRestore={restore} />}
|
||||
<Box sx={{ p: { xs: 1, sm: 1.5 } }}>
|
||||
<Box role="tabpanel" id="cv-studio-panel-1" aria-labelledby="cv-studio-tab-1" hidden={tab !== 1}>
|
||||
<ContentTab settings={settings} update={update} outline={outline} showPreviewEntry={!compactEditor} onFocusPreview={() => {
|
||||
scrollRef.current?.focus({ preventScroll: true });
|
||||
scrollRef.current?.scrollIntoView({ block: "nearest", inline: "nearest" });
|
||||
}} />
|
||||
</Box>
|
||||
{[0, 2, 3, 4].map((value) => <Box key={value} role="tabpanel" id={`cv-studio-panel-${value}`} aria-labelledby={`cv-studio-tab-${value}`} hidden={tab !== value}>
|
||||
{tab === value && <>
|
||||
{value === 0 && <CvCustomizeTab mode="template" settings={settings} update={update} themes={themes} sectionLabel={(key, fallback) => sectionName(key, fallback, t)} />}
|
||||
{value === 2 && <CvCustomizeTab mode="customize" settings={settings} update={update} themes={themes} sectionLabel={(key, fallback) => sectionName(key, fallback, t)} />}
|
||||
{value === 3 && <DocumentAiTab settings={settings} outline={outline} update={update} />}
|
||||
{value === 4 && <HistoryTab versions={versions} onRestore={restore} />}
|
||||
</>}
|
||||
</Box>)}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Box onFocusCapture={() => setMobilePane("preview")} sx={{ display: compactEditor && mobilePane !== "preview" ? "none" : "block", minWidth: 0 }}>
|
||||
@@ -562,8 +587,8 @@ function SaveBadge({ state, canRetry, onRetry }: { state: SaveState; canRetry: b
|
||||
const m = map[state];
|
||||
if (!m.label) return null;
|
||||
return (
|
||||
<Stack spacing={0.5} alignItems="flex-end" aria-live="polite">
|
||||
<Chip size="small" label={m.label} color={m.color} variant="outlined" />
|
||||
<Stack direction="row" gap={0.5} alignItems="center" aria-live="polite">
|
||||
{state === "saved" ? <Typography variant="caption" color="text.secondary">{m.label}</Typography> : <Chip size="small" label={m.label} color={m.color} variant="outlined" />}
|
||||
{(state === "unsaved" || state === "error") ? (
|
||||
<Button size="small" disabled={!canRetry} onClick={onRetry}>{t("cvEditorSaveNow")}</Button>
|
||||
) : null}
|
||||
@@ -783,14 +808,19 @@ function presetLabel(key: string, fallback: string, t: Translate) {
|
||||
return labels[key] ?? fallback;
|
||||
}
|
||||
|
||||
function ContentTab({ settings, update, outline }: {
|
||||
function ContentTab({ settings, update, outline, showPreviewEntry, onFocusPreview }: {
|
||||
settings: CvVariantSettings;
|
||||
update: (p: Partial<CvVariantSettings>) => void;
|
||||
outline: CvOutline | null;
|
||||
showPreviewEntry: boolean;
|
||||
onFocusPreview: () => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const { confirmAction } = useDialogActions();
|
||||
const [addContentOpen, setAddContentOpen] = useState(false);
|
||||
const [activeSection, setActiveSection] = useState<string | null>(null);
|
||||
const [expandedSections, setExpandedSections] = useState<Set<string>>(() => new Set());
|
||||
const sectionButtons = useRef<Record<string, HTMLButtonElement | null>>({});
|
||||
// Full section list = configured order (once touched) else default, always including every known key.
|
||||
const sectionRows: CvSectionSetting[] = useMemo(() => {
|
||||
const populated = new Set((outline?.sections ?? []).map((section) => section.key));
|
||||
@@ -813,6 +843,19 @@ function ContentTab({ settings, update, outline }: {
|
||||
|
||||
const writeSections = (rows: CvSectionSetting[]) => update({ sections: rows });
|
||||
const sectionDrag = useDragReorder((from, to) => writeSections(moveItem(sectionRows, from, to)));
|
||||
const toggleSection = (key: string) => setExpandedSections((previous) => {
|
||||
const next = new Set(previous);
|
||||
if (next.has(key)) next.delete(key); else next.add(key);
|
||||
return next;
|
||||
});
|
||||
const goToSection = (key: string) => {
|
||||
setActiveSection(key);
|
||||
setExpandedSections((previous) => new Set(previous).add(key));
|
||||
requestAnimationFrame(() => {
|
||||
sectionButtons.current[key]?.focus({ preventScroll: true });
|
||||
sectionButtons.current[key]?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
|
||||
});
|
||||
};
|
||||
|
||||
const patchSection = (key: string, patch: Partial<CvSectionSetting>) =>
|
||||
writeSections(sectionRows.map((r) => (r.key === key ? { ...r, ...patch } : r)));
|
||||
@@ -862,7 +905,19 @@ function ContentTab({ settings, update, outline }: {
|
||||
};
|
||||
return (
|
||||
<Stack spacing={2}>
|
||||
<Alert severity="info" action={<Button component={RouterLink} to="/career/profile" size="small">{t("cvEditorEditMasterProfile")}</Button>}>
|
||||
<Stack direction="row" gap={1} alignItems="center">
|
||||
<Box component="nav" aria-label={t("cvEditorSectionNavigation")} sx={{ flex: 1, minWidth: 0 }}>
|
||||
<TextField select fullWidth size="small" label={t("cvEditorGoToSection")}
|
||||
value={sectionRows.some((row) => row.key === activeSection) ? activeSection : ""}
|
||||
onChange={(event) => setActiveSection(event.target.value)}>
|
||||
{sectionRows.map((row) => <MenuItem key={row.key} value={row.key} onClick={() => goToSection(row.key)}>
|
||||
{customBySectionKey[row.key]?.title ?? row.title ?? sectionName(row.key, SECTION_LABELS[row.key] ?? row.key, t)} · {t(row.hidden ? "cvEditorOmitted" : "cvEditorIncluded")}
|
||||
</MenuItem>)}
|
||||
</TextField>
|
||||
</Box>
|
||||
{showPreviewEntry && <Button size="small" onClick={onFocusPreview}>{t("cvEditorFocusPreview")}</Button>}
|
||||
</Stack>
|
||||
<Alert severity="info" sx={{ flexWrap: "wrap", "& .MuiAlert-message": { flex: "1 1 12rem", minWidth: 0, overflowWrap: "anywhere" }, "& .MuiAlert-action": { ml: "auto" } }} action={<Button component={RouterLink} to="/career/profile" size="small">{t("cvEditorEditMasterProfile")}</Button>}>
|
||||
{t("cvEditorMasterProfileHelp")}
|
||||
</Alert>
|
||||
<TextField label={t("cvEditorHeadlineOverride")} size="small" fullWidth value={settings.headline ?? ""}
|
||||
@@ -885,6 +940,10 @@ function ContentTab({ settings, update, outline }: {
|
||||
outlineSection={outlineByKey[row.key]}
|
||||
customSection={customBySectionKey[row.key]}
|
||||
settings={settings}
|
||||
expanded={expandedSections.has(row.key)}
|
||||
onToggle={() => toggleSection(row.key)}
|
||||
onSectionFocus={() => setActiveSection(row.key)}
|
||||
toggleRef={(button) => { sectionButtons.current[row.key] = button; }}
|
||||
onMove={(d) => writeSections(moveItem(sectionRows, i, i + d))}
|
||||
onPatch={(p) => patchSection(row.key, p)}
|
||||
onRenameCustom={(title) => {
|
||||
@@ -945,7 +1004,7 @@ function AddContentCard({ title, description, added, onAdd }: { title: string; d
|
||||
}
|
||||
|
||||
function SectionRow({
|
||||
row, index, total, dragProps, dragging, over, outlineSection, customSection, settings, onMove, onPatch, onRenameCustom, onUpdateCustom, onRemoveCustom, onUpdateSettings,
|
||||
row, index, total, dragProps, dragging, over, outlineSection, customSection, settings, expanded, onToggle, onSectionFocus, toggleRef, onMove, onPatch, onRenameCustom, onUpdateCustom, onRemoveCustom, onUpdateSettings,
|
||||
}: {
|
||||
row: CvSectionSetting;
|
||||
index: number;
|
||||
@@ -956,6 +1015,10 @@ function SectionRow({
|
||||
outlineSection?: CvOutlineSection;
|
||||
customSection?: CvCustomSectionSetting;
|
||||
settings: CvVariantSettings;
|
||||
expanded: boolean;
|
||||
onToggle: () => void;
|
||||
onSectionFocus: () => void;
|
||||
toggleRef: (button: HTMLButtonElement | null) => void;
|
||||
onMove: (delta: number) => void;
|
||||
onPatch: (patch: Partial<CvSectionSetting>) => void;
|
||||
onRenameCustom: (title: string) => void;
|
||||
@@ -965,7 +1028,6 @@ function SectionRow({
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const { confirmAction } = useDialogActions();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const sectionLabel = customSection?.title ?? row.title ?? sectionName(row.key, SECTION_LABELS[row.key] ?? row.key, t);
|
||||
const sourceItems = outlineSection?.kind === "tags" ? outlineSection.tags : outlineSection?.bullets ?? [];
|
||||
const editableItems = row.items ?? sourceItems;
|
||||
@@ -975,6 +1037,7 @@ function SectionRow({
|
||||
<Paper
|
||||
variant="outlined"
|
||||
{...dragProps}
|
||||
role="group" aria-label={sectionLabel} onFocusCapture={onSectionFocus}
|
||||
sx={{
|
||||
// Hidden in the document is not disabled in the editor: keep names and
|
||||
// controls readable. The visibility icon/label still conveys inclusion.
|
||||
@@ -1001,7 +1064,7 @@ function SectionRow({
|
||||
if (customSection) onRemoveCustom();
|
||||
else void confirmAction(t("cvEditorRemoveSectionMessage", { section: sectionLabel }), { title: t("cvEditorRemoveSectionTitle"), confirmLabel: t("cvEditorRemoveFromCv"), destructive: true }).then((confirmed) => { if (confirmed) onPatch({ hidden: true }); });
|
||||
}}><DeleteOutlineIcon fontSize="small" /></IconButton>
|
||||
<IconButton size="small" aria-label={t(expanded ? "cvEditorCollapseSection" : "cvEditorExpandSection", { section: sectionLabel })} aria-expanded={expanded} onClick={() => setExpanded((value) => !value)}
|
||||
<IconButton ref={toggleRef} size="small" aria-label={t(expanded ? "cvEditorCollapseSection" : "cvEditorExpandSection", { section: sectionLabel })} aria-expanded={expanded} onClick={onToggle}
|
||||
sx={{ transform: expanded ? "rotate(180deg)" : "none", transition: "transform 150ms" }}>
|
||||
<ExpandMoreIcon fontSize="small" />
|
||||
</IconButton>
|
||||
|
||||
Reference in New Issue
Block a user