126 lines
3.3 KiB
JavaScript
126 lines
3.3 KiB
JavaScript
import { useContext } from 'react'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { pagesPlugin } from 'shared/plugins/plugin-layout-part.mjs'
|
|
import {
|
|
handleExport,
|
|
ns as exportNs,
|
|
} from 'shared/components/workbench/exporting/export-handler.mjs'
|
|
import get from 'lodash.get'
|
|
import { MovablePattern } from 'shared/components/workbench/pattern/movable/index.mjs'
|
|
import { PrintMenu, ns as menuNs } from './menu.mjs'
|
|
import { defaultPrintSettings, printSettingsPath } from './config.mjs'
|
|
import { PrintIcon, RightIcon } from 'shared/components/icons.mjs'
|
|
import { LoadingContext } from 'shared/context/loading-context.mjs'
|
|
import { useToast } from 'shared/hooks/use-toast.mjs'
|
|
|
|
const viewNs = ['print', ...exportNs]
|
|
export const ns = [...viewNs, ...menuNs]
|
|
|
|
const PageCounter = ({ pattern }) => {
|
|
const pages = pattern.setStores[0].get('pages', {})
|
|
const { cols, rows, count } = pages
|
|
|
|
return (
|
|
<div className="flex flex-row font-bold items-center text-2xl justify-center ">
|
|
<PrintIcon />
|
|
<span className="ml-2">{count}</span>
|
|
<span className="mx-6 opacity-50">|</span>
|
|
<RightIcon />
|
|
<span className="ml-2">{cols}</span>
|
|
<span className="mx-6 opacity-50">|</span>
|
|
<div className="rotate-90">
|
|
<RightIcon />
|
|
</div>
|
|
<span className="ml-2">{rows}</span>
|
|
</div>
|
|
)
|
|
}
|
|
export const PrintView = ({
|
|
design,
|
|
pattern,
|
|
patternConfig,
|
|
settings,
|
|
ui,
|
|
update,
|
|
language,
|
|
account,
|
|
DynamicDocs,
|
|
Design,
|
|
}) => {
|
|
const { t } = useTranslation(ns)
|
|
const loading = useContext(LoadingContext)
|
|
const toast = useToast()
|
|
|
|
const defaultSettings = defaultPrintSettings(settings.units)
|
|
// add the pages plugin to the draft
|
|
const pageSettings = {
|
|
...defaultSettings,
|
|
...get(ui, printSettingsPath, {}),
|
|
}
|
|
|
|
pattern.use(pagesPlugin(pageSettings))
|
|
|
|
let renderProps
|
|
try {
|
|
// draft the pattern
|
|
pattern.draft()
|
|
renderProps = pattern.getRenderProps()
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
|
|
const exportIt = () => {
|
|
handleExport({
|
|
format: 'pdf',
|
|
settings,
|
|
design,
|
|
t,
|
|
Design,
|
|
ui,
|
|
startLoading: loading.startLoading,
|
|
stopLoading: loading.stopLoading,
|
|
onComplete: () => {},
|
|
onError: (err) => toast.error(err.message),
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-row">
|
|
<div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
|
|
<div className="flex justify-between items-baseline">
|
|
<h2 className="capitalize">
|
|
{t('layoutThing', { thing: design }) + ' ' + t('forPrinting')}
|
|
</h2>
|
|
<PageCounter pattern={pattern} />
|
|
</div>
|
|
<MovablePattern
|
|
{...{
|
|
renderProps,
|
|
update,
|
|
immovable: ['pages'],
|
|
layoutPath: ['layouts', 'print'],
|
|
showButtons: !ui.hideMovableButtons,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
|
|
<PrintMenu
|
|
{...{
|
|
design,
|
|
pattern,
|
|
patternConfig,
|
|
settings,
|
|
ui,
|
|
update,
|
|
language,
|
|
account,
|
|
DynamicDocs,
|
|
exportIt,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|