feat: test print buttons

BigJk · Sep 7, 2024 · 758abaa · 758abaa
1 parent b59cfeb
commit 758abaa
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 4 deletions.
diff --git a/frontend/src/js/ui/components/editor/generator.ts b/frontend/src/js/ui/components/editor/generator.ts
@@ -22,6 +22,7 @@ type GeneratorEditorProps = {
 	generator: Generator;
 	onChange: (updated: Generator) => void;
 	editMode: boolean;
+	onRendered?: (html: string) => void;
 };
 
 type GeneratorEditorState = {
@@ -199,6 +200,9 @@ export default (): m.Component<GeneratorEditorProps> => {
 						generator: attrs.generator,
 						config: sanitizeConfig(attrs.generator, state.config),
 						onError: (errors) => (state.errors = errors),
+						onRendered: (html) => {
+							attrs.onRendered?.(html);
+						},
 					}),
 				]),
 			];

diff --git a/frontend/src/js/ui/components/editor/template.ts b/frontend/src/js/ui/components/editor/template.ts
@@ -31,6 +31,7 @@ type TemplateEditorProps = {
 	template: Template;
 	onChange: (updated: Template) => void;
 	onJSONError?: (error: any | null) => void;
+	onRendered?: (html: string) => void;
 	editMode?: boolean;
 };
 
@@ -408,6 +409,7 @@ export default (): m.Component<TemplateEditorProps> => {
 						it: attrs.template.skeletonData,
 						config: state.config,
 						onError: (errors: PrintPreviewError[]) => (state.errorsPrint = errors),
+						onRendered: (html) => attrs.onRendered?.(html),
 					}),
 				]),
 			];

diff --git a/frontend/src/js/ui/shoelace/button.ts b/frontend/src/js/ui/shoelace/button.ts
@@ -46,6 +46,7 @@ export default (): m.Component<ButtonProps> => {
 					size: size,
 					loading: !!attrs.loading,
 					onclick: attrs.link ? () => openLink(attrs.link) : !attrs.loading ? attrs.onClick : null,
+					disabled: attrs.disabled,
 				},
 				[attrs.prefix ? m('slot', { slot: 'prefix' }, attrs.prefix) : null, finalChildren],
 			);

diff --git a/frontend/src/js/ui/views/generator/edit.ts b/frontend/src/js/ui/views/generator/edit.ts
@@ -15,14 +15,15 @@ import { openDevTools } from 'js/ui/components/print-preview';
 import Base from 'js/ui/components/view-layout/base';
 import Breadcrumbs from 'js/ui/components/view-layout/breadcrumbs';
 
-import { error } from 'js/ui/toast';
+import { error, success } from 'js/ui/toast';
 
 type EditGeneratorProps = {
 	id: string;
 };
 
 export default (): m.Component<EditGeneratorProps> => {
 	let state: Generator | null = null;
+	let lastRenderedHTML = '';
 
 	return {
 		oninit({ attrs }) {
@@ -40,7 +41,7 @@ export default (): m.Component<EditGeneratorProps> => {
 						confirm: true,
 						confirmText: 'Are you sure you want to leave this page? Changes are not saved.',
 						items: [
-							{ link: '/generator', label: 'Templates' },
+							{ link: '/generator', label: 'Generators' },
 							{ link: `/generator/${state ? buildId('generator', state) : ''}`, label: state ? state.name : m(Loader, { className: '.mh2' }) },
 							{ label: 'Edit' },
 						],
@@ -69,6 +70,7 @@ export default (): m.Component<EditGeneratorProps> => {
 							Tooltip,
 							{ content: 'Open Dev Tools' },
 							m(IconButton, {
+								className: '.mr2',
 								intend: 'primary',
 								icon: 'bug',
 								size: 'sm',
@@ -77,6 +79,20 @@ export default (): m.Component<EditGeneratorProps> => {
 								},
 							}),
 						),
+						m(
+							Tooltip,
+							{ content: 'Test Print' },
+							m(IconButton, {
+								intend: 'primary',
+								icon: 'print',
+								size: 'sm',
+								onClick: () => {
+									API.exec(API.PRINT, lastRenderedHTML)
+										.then(() => success('Test print sent!'))
+										.catch(error);
+								},
+							}),
+						),
 					]),
 					active: 'generators',
 				},
@@ -87,6 +103,9 @@ export default (): m.Component<EditGeneratorProps> => {
 								state = generator;
 								m.redraw();
 							},
+							onRendered: (html) => {
+								lastRenderedHTML = html;
+							},
 							editMode: true,
 					  })
 					: m(Loader),

diff --git a/frontend/src/js/ui/views/settings.ts b/frontend/src/js/ui/views/settings.ts
@@ -1,4 +1,5 @@
 import m from 'mithril';
+import { isEqual } from 'lodash-es';
 
 import { css } from 'goober';
 
@@ -46,6 +47,29 @@ export default (): m.Component => {
 		settings.set(settingsCopy);
 	};
 
+	const testPrint = () => {
+		API.exec(
+			API.PRINT,
+			`
+			<h1 style="font-size: 2rem;">Test print</h1>
+			<p style="font-size: 1.5rem;">Thank you for using Sales & Dungeons <3</p>
+			<pre style="font-size: 1.5rem;">${JSON.stringify(
+				{
+					...settings.value,
+					aiApiKey: 'redacted',
+					syncKey: 'redacted',
+				},
+				null,
+				2,
+			)}</pre>
+			`,
+		)
+			.then(() => {
+				success('Test print sent!');
+			})
+			.catch(error);
+	};
+
 	const fetchAiProviders = () => {
 		API.exec<string[]>(API.AI_PROVIDERS)
 			.then((providers) => {
@@ -112,7 +136,10 @@ export default (): m.Component => {
 					title: m(Title, 'Settings'),
 					active: 'settings',
 					classNameContainer: '.pa3',
-					rightElement: m(IconButton, { icon: 'checkmark-circle-outline', intend: 'success', onClick: applySettings }, 'Apply'),
+					rightElement: m(Flex, { gap: 2 }, [
+						m(IconButton, { icon: 'print', intend: 'primary', onClick: testPrint, disabled: !isEqual(settingsCopy, settings.value) }, 'Test Print'),
+						m(IconButton, { icon: 'checkmark-circle-outline', intend: 'success', onClick: applySettings }, 'Apply'),
+					]),
 				},
 				m(
 					Flex,

diff --git a/frontend/src/js/ui/views/template/edit.ts b/frontend/src/js/ui/views/template/edit.ts
@@ -15,7 +15,7 @@ import { openDevTools } from 'js/ui/components/print-preview';
 import Base from 'js/ui/components/view-layout/base';
 import Breadcrumbs from 'js/ui/components/view-layout/breadcrumbs';
 
-import { error } from 'js/ui/toast';
+import { error, success } from 'js/ui/toast';
 
 type EditTemplateProps = {
 	id: string;
@@ -24,6 +24,7 @@ type EditTemplateProps = {
 export default (): m.Component<EditTemplateProps> => {
 	let state: Template | null = null;
 	let hadJSONError = false;
+	let lastRenderedHTML = '';
 
 	return {
 		oninit({ attrs }) {
@@ -75,6 +76,7 @@ export default (): m.Component<EditTemplateProps> => {
 							Tooltip,
 							{ content: 'Open Dev Tools' },
 							m(IconButton, {
+								className: '.mr2',
 								intend: 'primary',
 								icon: 'bug',
 								size: 'sm',
@@ -83,6 +85,20 @@ export default (): m.Component<EditTemplateProps> => {
 								},
 							}),
 						),
+						m(
+							Tooltip,
+							{ content: 'Test Print' },
+							m(IconButton, {
+								intend: 'primary',
+								icon: 'print',
+								size: 'sm',
+								onClick: () => {
+									API.exec(API.PRINT, lastRenderedHTML)
+										.then(() => success('Test print sent!'))
+										.catch(error);
+								},
+							}),
+						),
 					]),
 					active: 'templates',
 				},
@@ -96,6 +112,9 @@ export default (): m.Component<EditTemplateProps> => {
 							onJSONError: (error) => {
 								hadJSONError = !!error;
 							},
+							onRendered: (html) => {
+								lastRenderedHTML = html;
+							},
 							editMode: true,
 					  })
 					: m(Loader),