From f45baa69f17fe4881ee975b6f4ff098bbcc1355a Mon Sep 17 00:00:00 2001 From: Daniel Schmidt Date: Fri, 9 Feb 2024 19:45:44 +0100 Subject: [PATCH] fix: data sources tab of generator --- .../src/js/core/monaco/completion-nunjucks.ts | 16 +++++++++++++--- frontend/src/js/core/templating.ts | 4 +++- .../src/js/ui/components/editor/generator.ts | 4 +++- frontend/src/js/ui/components/editor/template.ts | 3 +++ .../js/ui/components/print-preview-template.ts | 1 + .../ui/components/view-layout/property-header.ts | 2 +- .../src/js/ui/views/extern-print/generator.ts | 8 +++++++- .../src/js/ui/views/extern-print/template.ts | 8 +++++++- frontend/src/js/ui/views/generator/create.ts | 2 +- frontend/src/js/ui/views/template/single.ts | 1 + 10 files changed, 40 insertions(+), 9 deletions(-) diff --git a/frontend/src/js/core/monaco/completion-nunjucks.ts b/frontend/src/js/core/monaco/completion-nunjucks.ts index 8b1cdf9b..9fe50299 100644 --- a/frontend/src/js/core/monaco/completion-nunjucks.ts +++ b/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)), })); }), ); diff --git a/frontend/src/js/core/templating.ts b/frontend/src/js/core/templating.ts index 4dee68bb..0f2edf12 100644 --- a/frontend/src/js/core/templating.ts +++ b/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; }; @@ -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; }; diff --git a/frontend/src/js/ui/components/editor/generator.ts b/frontend/src/js/ui/components/editor/generator.ts index 72707355..904cb3df 100644 --- a/frontend/src/js/ui/components/editor/generator.ts +++ b/frontend/src/js/ui/components/editor/generator.ts @@ -92,7 +92,8 @@ export default (): m.Component => { 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 => { config: state.config, images: attrs.generator.images, settings: settings.value, + sources: attrs.generator.dataSources, }), errors: state.errors, onChange: (value) => { diff --git a/frontend/src/js/ui/components/editor/template.ts b/frontend/src/js/ui/components/editor/template.ts index 225e6d88..22411eec 100644 --- a/frontend/src/js/ui/components/editor/template.ts +++ b/frontend/src/js/ui/components/editor/template.ts @@ -89,6 +89,7 @@ export default (): m.Component => { val, { it: attrs.template.skeletonData, + sources: attrs.template.dataSources, config: state.config, settings: settings.value, images: {}, @@ -348,6 +349,7 @@ export default (): m.Component => { 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 => { it: attrs.template.skeletonData, images: attrs.template.images, settings: settings.value, + sources: attrs.template.dataSources, }), onChange: (value) => { attrs.onChange({ ...attrs.template, listTemplate: value }); diff --git a/frontend/src/js/ui/components/print-preview-template.ts b/frontend/src/js/ui/components/print-preview-template.ts index 24552808..c0f416c5 100644 --- a/frontend/src/js/ui/components/print-preview-template.ts +++ b/frontend/src/js/ui/components/print-preview-template.ts @@ -70,6 +70,7 @@ export default (): m.Component => { 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, diff --git a/frontend/src/js/ui/components/view-layout/property-header.ts b/frontend/src/js/ui/components/view-layout/property-header.ts index fa4f2695..49316250 100644 --- a/frontend/src/js/ui/components/view-layout/property-header.ts +++ b/frontend/src/js/ui/components/view-layout/property-header.ts @@ -12,7 +12,7 @@ type HeaderProps = { export default (): m.Component => ({ 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' }), diff --git a/frontend/src/js/ui/views/extern-print/generator.ts b/frontend/src/js/ui/views/extern-print/generator.ts index 91fab7e1..09cc4a3c 100644 --- a/frontend/src/js/ui/views/extern-print/generator.ts +++ b/frontend/src/js/ui/views/extern-print/generator.ts @@ -35,7 +35,13 @@ export default (): m.Component => { API.exec(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; }) diff --git a/frontend/src/js/ui/views/extern-print/template.ts b/frontend/src/js/ui/views/extern-print/template.ts index 0eb5313b..3f962582 100644 --- a/frontend/src/js/ui/views/extern-print/template.ts +++ b/frontend/src/js/ui/views/extern-print/template.ts @@ -33,7 +33,13 @@ export default (): m.Component => { API.exec