2022-03-02 16:44:11 +00:00
|
|
|
import {
|
|
|
|
AlignHorizontalCenter,
|
|
|
|
AlignVerticalCenter,
|
|
|
|
Download,
|
|
|
|
FilterCenterFocus,
|
|
|
|
InsertPageBreak,
|
|
|
|
Link,
|
|
|
|
ViewSidebar,
|
|
|
|
ZoomIn,
|
|
|
|
ZoomOut,
|
|
|
|
} from '@mui/icons-material';
|
2022-03-05 09:08:28 +00:00
|
|
|
import { ButtonBase, Divider, Tooltip, useMediaQuery, useTheme } from '@mui/material';
|
2022-03-02 16:44:11 +00:00
|
|
|
import clsx from 'clsx';
|
|
|
|
import { get } from 'lodash';
|
|
|
|
import { useTranslation } from 'next-i18next';
|
|
|
|
import toast from 'react-hot-toast';
|
|
|
|
import { useMutation } from 'react-query';
|
|
|
|
import { ReactZoomPanPinchRef } from 'react-zoom-pan-pinch';
|
|
|
|
|
|
|
|
import { ServerError } from '@/services/axios';
|
|
|
|
import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer';
|
|
|
|
import { togglePageBreakLine, togglePageOrientation, toggleSidebar } from '@/store/build/buildSlice';
|
|
|
|
import { useAppDispatch, useAppSelector } from '@/store/hooks';
|
|
|
|
import getResumeUrl from '@/utils/getResumeUrl';
|
|
|
|
|
|
|
|
import styles from './ArtboardController.module.scss';
|
|
|
|
|
|
|
|
const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, centerView }) => {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
|
2022-03-05 09:08:28 +00:00
|
|
|
const theme = useTheme();
|
2022-03-02 16:44:11 +00:00
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
|
|
|
|
const resume = useAppSelector((state) => state.resume);
|
2022-03-05 09:08:28 +00:00
|
|
|
const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));
|
2022-03-02 16:44:11 +00:00
|
|
|
const { left, right } = useAppSelector((state) => state.build.sidebar);
|
|
|
|
const orientation = useAppSelector((state) => state.build.page.orientation);
|
|
|
|
|
|
|
|
const { mutateAsync, isLoading } = useMutation<string, ServerError, PrintResumeAsPdfParams>(printResumeAsPdf);
|
|
|
|
|
|
|
|
const handleTogglePageBreakLine = () => dispatch(togglePageBreakLine());
|
|
|
|
|
|
|
|
const handleTogglePageOrientation = () => dispatch(togglePageOrientation());
|
|
|
|
|
|
|
|
const handleToggleSidebar = () => {
|
|
|
|
dispatch(toggleSidebar({ sidebar: 'left' }));
|
|
|
|
dispatch(toggleSidebar({ sidebar: 'right' }));
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleCopyLink = async () => {
|
|
|
|
const url = getResumeUrl(resume, { withHost: true });
|
|
|
|
await navigator.clipboard.writeText(url);
|
|
|
|
|
|
|
|
toast.success(t('common.toast.success.resume-link-copied'));
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleExportPDF = async () => {
|
|
|
|
const download = (await import('downloadjs')).default;
|
|
|
|
|
|
|
|
const slug = get(resume, 'slug');
|
|
|
|
const username = get(resume, 'user.username');
|
|
|
|
|
|
|
|
const url = await mutateAsync({ username, slug });
|
|
|
|
|
2022-03-09 17:55:17 +00:00
|
|
|
download(`/api${url}`);
|
2022-03-02 16:44:11 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={clsx({
|
|
|
|
[styles.container]: true,
|
|
|
|
[styles.pushLeft]: left.open,
|
|
|
|
[styles.pushRight]: right.open,
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
<div className={styles.controller}>
|
2022-03-11 07:43:20 +00:00
|
|
|
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-in') as string}>
|
2022-03-02 16:44:11 +00:00
|
|
|
<ButtonBase onClick={() => zoomIn(0.25)}>
|
|
|
|
<ZoomIn fontSize="medium" />
|
|
|
|
</ButtonBase>
|
|
|
|
</Tooltip>
|
|
|
|
|
2022-03-11 07:43:20 +00:00
|
|
|
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-out') as string}>
|
2022-03-02 16:44:11 +00:00
|
|
|
<ButtonBase onClick={() => zoomOut(0.25)}>
|
|
|
|
<ZoomOut fontSize="medium" />
|
|
|
|
</ButtonBase>
|
|
|
|
</Tooltip>
|
|
|
|
|
2022-03-11 07:43:20 +00:00
|
|
|
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.center-artboard') as string}>
|
2022-03-02 16:44:11 +00:00
|
|
|
<ButtonBase onClick={() => centerView(0.95)}>
|
|
|
|
<FilterCenterFocus fontSize="medium" />
|
|
|
|
</ButtonBase>
|
|
|
|
</Tooltip>
|
|
|
|
|
|
|
|
<Divider />
|
|
|
|
|
2022-03-05 09:08:28 +00:00
|
|
|
{isDesktop && (
|
|
|
|
<>
|
2022-03-11 07:43:20 +00:00
|
|
|
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation') as string}>
|
2022-03-05 09:08:28 +00:00
|
|
|
<ButtonBase onClick={handleTogglePageOrientation}>
|
|
|
|
{orientation === 'vertical' ? (
|
|
|
|
<AlignHorizontalCenter fontSize="medium" />
|
|
|
|
) : (
|
|
|
|
<AlignVerticalCenter fontSize="medium" />
|
|
|
|
)}
|
|
|
|
</ButtonBase>
|
|
|
|
</Tooltip>
|
|
|
|
|
2022-03-11 07:43:20 +00:00
|
|
|
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-page-break-line') as string}>
|
2022-03-05 09:08:28 +00:00
|
|
|
<ButtonBase onClick={handleTogglePageBreakLine}>
|
|
|
|
<InsertPageBreak fontSize="medium" />
|
|
|
|
</ButtonBase>
|
|
|
|
</Tooltip>
|
|
|
|
|
2022-03-11 07:43:20 +00:00
|
|
|
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-sidebars') as string}>
|
2022-03-05 09:08:28 +00:00
|
|
|
<ButtonBase onClick={handleToggleSidebar}>
|
|
|
|
<ViewSidebar fontSize="medium" />
|
|
|
|
</ButtonBase>
|
|
|
|
</Tooltip>
|
|
|
|
|
|
|
|
<Divider />
|
|
|
|
</>
|
|
|
|
)}
|
2022-03-02 16:44:11 +00:00
|
|
|
|
2022-03-11 07:43:20 +00:00
|
|
|
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.copy-link') as string}>
|
2022-03-02 16:44:11 +00:00
|
|
|
<ButtonBase onClick={handleCopyLink}>
|
|
|
|
<Link fontSize="medium" />
|
|
|
|
</ButtonBase>
|
|
|
|
</Tooltip>
|
|
|
|
|
2022-03-11 07:43:20 +00:00
|
|
|
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.export-pdf') as string}>
|
2022-03-02 16:44:11 +00:00
|
|
|
<ButtonBase onClick={handleExportPDF} disabled={isLoading}>
|
|
|
|
<Download fontSize="medium" />
|
|
|
|
</ButtonBase>
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ArtboardController;
|