fix: data sources tab of generator

Author: BigJk

frontend/src/js/core/monaco/completion-nunjucks.ts

@@ -25,6 +25,14 @@ const buildLabel = (context: any, path: string) => {
 	return label;
 };
 
+const buildType = (value: any) => {
+	const type = typeof value;
+	if (type === 'object' && Array.isArray(value)) {
+		return 'array';
+	}
+	return type;
+};
+
 /**
  * Create a completion provider for Nunjucks templates.
  * @param context The context object containing the variables that are available in the template.
@@ -33,7 +41,7 @@ export const createNunjucksCompletionProvider = (context: any): CompletionFuncti
 	// Context is an object. We want to recursively create a string array with the paths to all the fields in the context object.
 	// We will use this to easily check if the word at the cursor matches any of the fields.
 	// Example: [a.b.c, a.b.d, a.e, f]
-	let contextFields: string[] = [];
+	let contextFields: string[] = [...Object.keys(context)];
 	let contextFieldPaths = (context: any, path: string) => {
 		if (typeof context === 'object') {
 			for (let key in context) {
@@ -49,7 +57,9 @@ export const createNunjucksCompletionProvider = (context: any): CompletionFuncti
 				}
 			}
 		} else {
-			contextFields.push(path);
+			if (!contextFields.includes(path)) {
+				contextFields.push(path);
+			}
 		}
 	};
 	contextFieldPaths(context, '');
@@ -110,7 +120,7 @@ export const createNunjucksCompletionProvider = (context: any): CompletionFuncti
 						kind: monaco.languages.CompletionItemKind.Field,
 						insertText: field,
 						range: range,
-						detail: typeof get(context, field),
+						detail: buildType(get(context, field)),
 					}));
 			}),
 		);

frontend/src/js/core/templating.ts

@@ -144,6 +144,7 @@ const aiScript = `
 export type TemplateState = {
 	it: any;
 	config: any;
+	sources: string[];
 	settings: Settings;
 	images: Record<string, string>;
 };
@@ -152,8 +153,9 @@ export type TemplateState = {
  * State object for generator rendering.
  */
 export type GeneratorState = {
-	settings: Settings;
 	config: any;
+	sources: string[];
+	settings: Settings;
 	images: Record<string, string>;
 };
 

frontend/src/js/ui/components/editor/generator.ts

@@ -92,7 +92,8 @@ export default (): m.Component<GeneratorEditorProps> => {
 									m('div.ph3', [
 										m(EditorHeader, {
 											title: 'Data Sources',
-											description: 'Add and remove data sources. Entries of these data sources will be linked to this template.',
+											description:
+												'Add and remove static data sources that should not be configurable by the user. Available under the "sources" variable in the template.',
 										}), //
 										m(
 											'div.mb3',
@@ -181,6 +182,7 @@ export default (): m.Component<GeneratorEditorProps> => {
 											config: state.config,
 											images: attrs.generator.images,
 											settings: settings.value,
+											sources: attrs.generator.dataSources,
 										}),
 										errors: state.errors,
 										onChange: (value) => {

frontend/src/js/ui/components/editor/template.ts

@@ -89,6 +89,7 @@ export default (): m.Component<TemplateEditorProps> => {
 			val,
 			{
 				it: attrs.template.skeletonData,
+				sources: attrs.template.dataSources,
 				config: state.config,
 				settings: settings.value,
 				images: {},
@@ -348,6 +349,7 @@ export default (): m.Component<TemplateEditorProps> => {
 											it: attrs.template.skeletonData,
 											images: attrs.template.images,
 											settings: settings.value,
+											sources: attrs.template.dataSources,
 										}),
 										onChange: (value) => attrs.onChange({ ...attrs.template, printTemplate: value }),
 									}),
@@ -376,6 +378,7 @@ export default (): m.Component<TemplateEditorProps> => {
 													it: attrs.template.skeletonData,
 													images: attrs.template.images,
 													settings: settings.value,
+													sources: attrs.template.dataSources,
 												}),
 												onChange: (value) => {
 													attrs.onChange({ ...attrs.template, listTemplate: value });

frontend/src/js/ui/components/print-preview-template.ts

@@ -70,6 +70,7 @@ export default (): m.Component<PrintPreviewTemplateProps> => {
 		render(printTemplate ?? '', {
 			it: it ?? {},
 			config: attrs.config ?? {},
+			sources: attrs.generator?.dataSources ?? attrs.template?.dataSources ?? [],
 			settings: settings.value,
 			images: attrs.template?.images ?? attrs.generator?.images ?? {},
 			aiEnabled: aiEnabled,

frontend/src/js/ui/components/view-layout/property-header.ts

@@ -12,7 +12,7 @@ type HeaderProps = {
 
 export default (): m.Component<HeaderProps> => ({
 	view({ attrs }) {
-		let element = [m(`div.f4.pt3.lh-copy`, attrs.title), attrs.description ? m('div.f7.text-muted.mb3', attrs.description) : null];
+		let element = [m(`div.f4.pt3.lh-copy`, attrs.title), attrs.description ? m('div.f7.text-muted.mb3.lh-copy', attrs.description) : null];
 		if (attrs.icon) {
 			return m(Flex, { items: 'center', className: `${attrs.className ?? ''}` }, [
 				m(Icon, { icon: attrs.icon, size: 3, className: '.mr3' }),

frontend/src/js/ui/views/extern-print/generator.ts

@@ -35,7 +35,13 @@ export default (): m.Component<ExternPrintProps> => {
 
 			API.exec<Generator>(API.GET_GENERATOR, state.id)
 				.then((gen) => {
-					render(gen.printTemplate, { it: state.json, images: gen.images, config: JSON.parse(atob(attrs.config)), settings: settings.value })
+					render(gen.printTemplate, {
+						it: state.json,
+						sources: gen.dataSources,
+						images: gen.images,
+						config: JSON.parse(atob(attrs.config)),
+						settings: settings.value,
+					})
 						.then((res) => {
 							state.gen = res;
 						})

frontend/src/js/ui/views/extern-print/template.ts

@@ -33,7 +33,13 @@ export default (): m.Component<ExternPrintProps> => {
 
 			API.exec<Template>(API.GET_TEMPLATE, state.id)
 				.then((tmpl) => {
-					render(tmpl.printTemplate, { it: state.json, images: tmpl.images, config: JSON.parse(atob(attrs.config)), settings: settings.value })
+					render(tmpl.printTemplate, {
+						it: state.json,
+						images: tmpl.images,
+						sources: tmpl.dataSources,
+						config: JSON.parse(atob(attrs.config)),
+						settings: settings.value,
+					})
 						.then((res) => {
 							state.tmpl = res;
 						})

frontend/src/js/ui/views/generator/create.ts

@@ -39,7 +39,7 @@ export default (): m.Component<GeneratorCreateProps> => {
 						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' },
 						],

frontend/src/js/ui/views/template/single.ts

@@ -83,6 +83,7 @@ export default (): m.Component<SingleTemplateProps> => {
 					state.template?.listTemplate!,
 					{
 						it: e.data,
+						sources: state.template?.dataSources!,
 						config: {},
 						settings: settings.value,
 						images: {}, // Don't need images for list template