@inventreedb/ui 0.0.1

package/src/components/editors/TemplateEditor/CodeEditor/CodeEditor.tsx

@@ -0,0 +1,158 @@
+import { liquid } from '@codemirror/lang-liquid';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode';
+import { EditorView, hoverTooltip, useCodeMirror } from '@uiw/react-codemirror';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react';
+
+import type { EditorComponent } from '../TemplateEditor';
+
+type Tag = {
+  label: string;
+  description: string;
+  args: string[];
+  kwargs: { [name: string]: string };
+  returns: string;
+};
+
+const tags: Tag[] = [
+  {
+    label: 'qrcode',
+    description: 'Generate a QR code image',
+    args: ['data'],
+    kwargs: {
+      version: 'QR code version, (None to auto detect) (default = None)',
+      error_correction:
+        "Error correction level (L: 7%, M: 15%, Q: 25%, H: 30%) (default = 'Q')",
+      box_size:
+        'pixel dimensions for one black square pixel in the QR code (default = 20)',
+      border:
+        'count white QR square pixels around the qr code, needed as padding (default = 1)',
+      optimize:
+        'data will be split into multiple chunks of at least this length using different modes (text, alphanumeric, binary) to optimize the QR code size. Set to `0` to disable. (default = 1)',
+      format: "Image format (default = 'PNG')",
+      fill_color: 'Fill color (default = "black")',
+      back_color: 'Background color (default = "white")'
+    },
+    returns: 'base64 encoded qr code image data'
+  },
+  {
+    label: 'barcode',
+    description: 'Generate a barcode image',
+    args: ['data'],
+    kwargs: {
+      barcode_class: 'Barcode code',
+      type: 'Barcode type (default = code128)',
+      format: 'Format (default = PNG)'
+    },
+    returns: 'base64 encoded barcode image data'
+  }
+];
+const tagsMap = Object.fromEntries(tags.map((tag) => [tag.label, tag]));
+
+const renderHelp = (tag: Tag) => {
+  const dom = document.createElement('div');
+  dom.style.whiteSpace = 'pre-line';
+  dom.style.width = '400px';
+  dom.style.padding = '5px';
+  dom.style.height = '200px';
+  dom.style.overflowY = 'scroll';
+  dom.style.border = '1px solid #000';
+
+  const argsStr = tag.args
+    .map((arg) => `  - <code style="color: #9cdcfe;">${arg}</code>`)
+    .join('\n');
+
+  const kwargsStr = Object.entries(tag.kwargs)
+    .map(
+      ([name, description]) =>
+        `  - <code style="color: #9cdcfe;">${name}</code>: <small>${description}</small>`
+    )
+    .join('\n');
+
+  dom.innerHTML = `Name: <code style="color: #4ec9b0;">${tag.label}</code>
+<small>${tag.description}</small>
+Arguments:
+${argsStr}
+Keyword arguments:
+${kwargsStr}
+Returns: <small>${tag.returns}</small>`;
+
+  return dom;
+};
+
+const tooltips = hoverTooltip((view, pos, side) => {
+  // extract the word at the current hover position into the variable text
+  let { from, to, text } = view.state.doc.lineAt(pos);
+  let start = pos;
+  let end = pos;
+  while (start > from && /\w/.test(text[start - from - 1])) start--;
+  while (end < to && /\w/.test(text[end - from])) end++;
+  if ((start == pos && side < 0) || (end == pos && side > 0)) return null;
+  text = text.slice(start - from, end - from);
+
+  if (!(text in tagsMap)) return null;
+  return {
+    pos: start,
+    end,
+    above: true,
+    create(view) {
+      return { dom: renderHelp(tagsMap[text]) };
+    }
+  };
+});
+
+const extensions = [
+  liquid({
+    tags: Object.values(tagsMap).map((tag) => {
+      return {
+        label: tag.label,
+        type: 'function',
+        info: () => renderHelp(tag),
+        boost: 99
+      };
+    })
+  }),
+  tooltips,
+  EditorView.theme({
+    '&.cm-editor': {
+      height: '100%'
+    }
+  })
+];
+
+export const CodeEditorComponent: EditorComponent = forwardRef((props, ref) => {
+  const editor = useRef<HTMLDivElement | null>(null);
+  const [code, setCode] = useState('');
+  const { setContainer } = useCodeMirror({
+    container: editor.current,
+    extensions,
+    value: code,
+    onChange: (value) => setCode(value),
+    theme: vscodeDark
+  });
+
+  useImperativeHandle(ref, () => ({
+    setCode: (code) => setCode(code),
+    getCode: () => code
+  }));
+
+  useEffect(() => {
+    if (editor.current) {
+      setContainer(editor.current);
+    }
+  }, [editor.current]);
+
+  return (
+    <div style={{ display: 'flex', flex: '1', position: 'relative' }}>
+      <div
+        style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}
+        ref={editor}
+      />
+    </div>
+  );
+});

package/src/components/editors/TemplateEditor/CodeEditor/index.tsx

@@ -0,0 +1,12 @@
+import { t } from '@lingui/core/macro';
+import { IconCode } from '@tabler/icons-react';
+
+import type { Editor } from '../TemplateEditor';
+import { CodeEditorComponent } from './CodeEditor';
+
+export const CodeEditor: Editor = {
+  key: 'code',
+  name: t`Code`,
+  icon: <IconCode size={18} />,
+  component: CodeEditorComponent
+};

package/src/components/editors/TemplateEditor/PdfPreview/PdfPreview.tsx

@@ -0,0 +1,90 @@
+import { Trans } from '@lingui/react/macro';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+
+import { api } from '../../../../App';
+import type { PreviewAreaComponent } from '../TemplateEditor';
+
+export const PdfPreviewComponent: PreviewAreaComponent = forwardRef(
+  (props, ref) => {
+    const [pdfUrl, setPdfUrl] = useState('');
+
+    useImperativeHandle(ref, () => ({
+      updatePreview: async (
+        code,
+        previewItem,
+        saveTemplate,
+        { templateUrl, printingUrl, template }
+      ) => {
+        if (saveTemplate) {
+          const formData = new FormData();
+
+          const filename =
+            template.template?.split('/').pop() ?? 'template.html';
+
+          formData.append('template', new File([code], filename));
+
+          const res = await api.patch(templateUrl, formData);
+          if (res.status !== 200) {
+            throw new Error(res.data);
+          }
+        }
+
+        let preview = await api.post(
+          printingUrl,
+          {
+            items: [previewItem],
+            template: template.pk
+          },
+          {
+            responseType: 'json',
+            timeout: 30000,
+            validateStatus: () => true
+          }
+        );
+
+        if (preview.status !== 200 && preview.status !== 201) {
+          if (preview.data?.non_field_errors) {
+            throw new Error(preview.data?.non_field_errors.join(', '));
+          }
+
+          throw new Error(preview.data);
+        }
+
+        if (preview?.data?.output) {
+          preview = await api.get(preview.data.output, {
+            responseType: 'blob'
+          });
+        }
+
+        const pdf = new Blob([preview.data], {
+          type: preview.headers['content-type']
+        });
+
+        const srcUrl = URL.createObjectURL(pdf);
+
+        setPdfUrl(`${srcUrl}#view=fitH`);
+      }
+    }));
+
+    return (
+      <>
+        {!pdfUrl && (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              height: '100%',
+              width: '100%'
+            }}
+          >
+            <Trans>Preview not available, click "Reload Preview".</Trans>
+          </div>
+        )}
+        {pdfUrl && (
+          <iframe src={pdfUrl} width='100%' height='100%' title='PDF Preview' />
+        )}
+      </>
+    );
+  }
+);

package/src/components/editors/TemplateEditor/PdfPreview/index.tsx

@@ -0,0 +1,12 @@
+import { t } from '@lingui/core/macro';
+import { IconFileTypePdf } from '@tabler/icons-react';
+
+import type { PreviewArea } from '../TemplateEditor';
+import { PdfPreviewComponent } from './PdfPreview';
+
+export const PdfPreview: PreviewArea = {
+  key: 'pdf-preview',
+  name: t`PDF Preview`,
+  icon: <IconFileTypePdf size={18} />,
+  component: PdfPreviewComponent
+};

package/src/components/editors/TemplateEditor/TemplateEditor.tsx

@@ -0,0 +1,425 @@
+import { t } from '@lingui/core/macro';
+import {
+  Alert,
+  CloseButton,
+  Code,
+  Group,
+  Overlay,
+  Stack,
+  Tabs
+} from '@mantine/core';
+import { openConfirmModal } from '@mantine/modals';
+import {
+  hideNotification,
+  notifications,
+  showNotification
+} from '@mantine/notifications';
+import {
+  IconAlertTriangle,
+  IconDeviceFloppy,
+  IconExclamationCircle,
+  IconRefresh
+} from '@tabler/icons-react';
+import Split from '@uiw/react-split';
+import type React from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import { api } from '../../../App';
+import type { TemplateI } from '../../../tables/settings/TemplateTable';
+import { Boundary } from '../../Boundary';
+import { SplitButton } from '../../buttons/SplitButton';
+import { StandaloneField } from '../../forms/StandaloneField';
+import { ModelInformationDict } from '../../render/ModelType';
+
+type EditorProps = {
+  template: TemplateI;
+};
+
+type EditorRef = {
+  setCode: (code: string) => void | Promise<void>;
+  getCode: () => (string | undefined) | Promise<string | undefined>;
+};
+
+export type EditorComponent = React.ForwardRefExoticComponent<
+  EditorProps & React.RefAttributes<EditorRef>
+>;
+
+export type Editor = {
+  key: string;
+  name: string;
+  icon?: React.ReactNode;
+  component: EditorComponent;
+};
+
+type PreviewAreaProps = {};
+
+export type PreviewAreaRef = {
+  updatePreview: (
+    code: string,
+    previewItem: string,
+    saveTemplate: boolean,
+    templateEditorProps: TemplateEditorProps
+  ) => void | Promise<void>;
+};
+
+export type PreviewAreaComponent = React.ForwardRefExoticComponent<
+  PreviewAreaProps & React.RefAttributes<PreviewAreaRef>
+>;
+
+export type PreviewArea = {
+  key: string;
+  name: string;
+  icon: React.ReactNode;
+  component: PreviewAreaComponent;
+};
+
+export type TemplateEditorProps = {
+  templateUrl: string;
+  printingUrl: string;
+  editors: Editor[];
+  previewAreas: PreviewArea[];
+  template: TemplateI;
+};
+
+export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
+  const { templateUrl, editors, previewAreas, template } = props;
+  const editorRef = useRef<EditorRef>();
+  const previewRef = useRef<PreviewAreaRef>();
+
+  const [hasSaveConfirmed, setHasSaveConfirmed] = useState(false);
+
+  const [previewItem, setPreviewItem] = useState<string>('');
+  const [errorOverlay, setErrorOverlay] = useState(null);
+  const [isPreviewLoading, setIsPreviewLoading] = useState(false);
+
+  const [editorValue, setEditorValue] = useState<null | string>(editors[0].key);
+  const [previewValue, setPreviewValue] = useState<null | string>(
+    previewAreas[0].key
+  );
+
+  const codeRef = useRef<string | undefined>();
+
+  const loadCodeToEditor = useCallback(async (code: string) => {
+    try {
+      return await Promise.resolve(editorRef.current?.setCode(code));
+    } catch (e: any) {
+      showNotification({
+        title: t`Error loading template`,
+        message: e?.message ?? e,
+        color: 'red'
+      });
+    }
+  }, []);
+
+  const getCodeFromEditor = useCallback(async () => {
+    try {
+      return await Promise.resolve(editorRef.current?.getCode());
+    } catch (e: any) {
+      showNotification({
+        title: t`Error saving template`,
+        message: e?.message ?? e,
+        color: 'red'
+      });
+      return undefined;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!templateUrl) return;
+
+    api.get(templateUrl).then((response: any) => {
+      if (response.data?.template) {
+        // Fetch the raw template file from the server
+        // Request that it is provided without any caching,
+        // to ensure that we always get the latest version
+        api
+          .get(response.data.template, {
+            headers: {
+              'Cache-Control': 'no-cache',
+              Pragma: 'no-cache',
+              Expires: '0'
+            }
+          })
+          .then((res) => {
+            codeRef.current = res.data;
+            loadCodeToEditor(res.data);
+          })
+          .catch(() => {
+            console.error(
+              `ERR: Could not load template from ${response.data.template}`
+            );
+            codeRef.current = undefined;
+            hideNotification('template-load-error');
+            showNotification({
+              id: 'template-load-error',
+              title: t`Error`,
+              message: t`Could not load the template from the server.`,
+              color: 'red'
+            });
+          });
+      }
+    });
+  }, [templateUrl]);
+
+  useEffect(() => {
+    if (codeRef.current === undefined) return;
+    loadCodeToEditor(codeRef.current);
+  }, [editorValue]);
+
+  const updatePreview = useCallback(
+    async (confirmed: boolean, saveTemplate = true) => {
+      if (!confirmed) {
+        openConfirmModal({
+          title: t`Save & Reload Preview`,
+          children: (
+            <Alert
+              color='yellow'
+              icon={<IconAlertTriangle />}
+              title={t`Are you sure you want to Save & Reload the preview?`}
+            >
+              {t`To render the preview the current template needs to be replaced on the server with your modifications which may break the label if it is under active use. Do you want to proceed?`}
+            </Alert>
+          ),
+          labels: {
+            confirm: t`Save & Reload`,
+            cancel: t`Cancel`
+          },
+          confirmProps: {
+            color: 'yellow'
+          },
+          onConfirm: () => {
+            setHasSaveConfirmed(true);
+            updatePreview(true);
+          }
+        });
+        return;
+      }
+
+      const code = await getCodeFromEditor();
+      if (code === undefined || !previewItem) return;
+
+      setIsPreviewLoading(true);
+      Promise.resolve(
+        previewRef.current?.updatePreview(
+          code,
+          previewItem,
+          saveTemplate,
+          props
+        )
+      )
+        .then(() => {
+          setErrorOverlay(null);
+
+          notifications.hide('template-preview');
+
+          showNotification({
+            title: t`Preview updated`,
+            message: t`The preview has been updated successfully.`,
+            color: 'green',
+            id: 'template-preview'
+          });
+        })
+        .catch((error) => {
+          setErrorOverlay(error.message);
+        })
+        .finally(() => {
+          setIsPreviewLoading(false);
+        });
+    },
+    [previewItem]
+  );
+
+  const previewApiUrl = useMemo(
+    () =>
+      ModelInformationDict[template.model_type ?? ModelType.stockitem]
+        .api_endpoint,
+    [template]
+  );
+
+  const templateFilters: Record<string, string> = useMemo(() => {
+    // TODO: Extract custom filters from template (make this more generic)
+    if (template.model_type === ModelType.stockitem) {
+      return { part_detail: 'true' } as Record<string, string>;
+    }
+
+    return {};
+  }, [template]);
+
+  useEffect(() => {
+    api
+      .get(apiUrl(previewApiUrl), { params: { limit: 1, ...templateFilters } })
+      .then((res) => {
+        if (res.data.results.length === 0) return;
+        setPreviewItem(res.data.results[0].pk);
+      });
+  }, [previewApiUrl, templateFilters]);
+
+  return (
+    <Boundary label='TemplateEditor'>
+      <Stack style={{ height: '100%', flex: '1' }}>
+        <Split style={{ gap: '10px' }}>
+          <Tabs
+            value={editorValue}
+            onChange={async (v) => {
+              codeRef.current = await getCodeFromEditor();
+              setEditorValue(v);
+            }}
+            keepMounted={false}
+            style={{
+              minWidth: '300px',
+              flex: '1',
+              display: 'flex',
+              flexDirection: 'column'
+            }}
+          >
+            <Tabs.List>
+              {editors.map((Editor, index) => {
+                return (
+                  <Tabs.Tab
+                    key={Editor.key}
+                    value={Editor.key}
+                    leftSection={Editor.icon}
+                  >
+                    {Editor.name}
+                  </Tabs.Tab>
+                );
+              })}
+
+              <Group justify='right' style={{ flex: '1' }} wrap='nowrap'>
+                <SplitButton
+                  loading={isPreviewLoading}
+                  defaultSelected='preview_save'
+                  name='preview-options'
+                  options={[
+                    {
+                      key: 'preview',
+                      name: t`Reload preview`,
+                      tooltip: t`Use the currently stored template from the server`,
+                      icon: IconRefresh,
+                      onClick: () => updatePreview(true, false),
+                      disabled: !previewItem || isPreviewLoading
+                    },
+                    {
+                      key: 'preview_save',
+                      name: t`Save & Reload Preview`,
+                      tooltip: t`Save the current template and reload the preview`,
+                      icon: IconDeviceFloppy,
+                      onClick: () => updatePreview(hasSaveConfirmed),
+                      disabled: !previewItem || isPreviewLoading
+                    }
+                  ]}
+                />
+              </Group>
+            </Tabs.List>
+
+            {editors.map((Editor) => (
+              <Tabs.Panel
+                key={Editor.key}
+                value={Editor.key}
+                style={{
+                  display: 'flex',
+                  flex: editorValue === Editor.key ? 1 : 0
+                }}
+              >
+                {/* @ts-ignore-next-line */}
+                <Editor.component ref={editorRef} template={props.template} />
+              </Tabs.Panel>
+            ))}
+          </Tabs>
+
+          <Tabs
+            value={previewValue}
+            onChange={setPreviewValue}
+            keepMounted={false}
+            style={{
+              minWidth: '200px',
+              display: 'flex',
+              flexDirection: 'column'
+            }}
+          >
+            <Tabs.List>
+              {previewAreas.map((PreviewArea) => (
+                <Tabs.Tab
+                  key={PreviewArea.key}
+                  value={PreviewArea.key}
+                  leftSection={PreviewArea.icon}
+                >
+                  {PreviewArea.name}
+                </Tabs.Tab>
+              ))}
+            </Tabs.List>
+
+            <div
+              style={{
+                minWidth: '100%',
+                paddingBottom: '10px',
+                paddingTop: '10px'
+              }}
+            >
+              <StandaloneField
+                fieldDefinition={{
+                  field_type: 'related field',
+                  api_url: apiUrl(previewApiUrl),
+                  description: '',
+                  label: t`Select instance to preview`,
+                  model: template.model_type,
+                  value: previewItem,
+                  filters: templateFilters,
+                  onValueChange: (value) => setPreviewItem(value)
+                }}
+              />
+            </div>
+
+            {previewAreas.map((PreviewArea) => (
+              <Tabs.Panel
+                key={PreviewArea.key}
+                value={PreviewArea.key}
+                style={{
+                  display: 'flex',
+                  flex: previewValue === PreviewArea.key ? 1 : 0
+                }}
+              >
+                <div
+                  style={{
+                    height: '100%',
+                    position: 'relative',
+                    display: 'flex',
+                    flex: '1'
+                  }}
+                >
+                  {/* @ts-ignore-next-line */}
+                  <PreviewArea.component ref={previewRef} />
+
+                  {errorOverlay && (
+                    <Overlay color='red' center blur={0.2}>
+                      <CloseButton
+                        onClick={() => setErrorOverlay(null)}
+                        style={{
+                          position: 'absolute',
+                          top: '10px',
+                          right: '10px',
+                          color: '#fff'
+                        }}
+                        variant='filled'
+                      />
+                      <Alert
+                        color='red'
+                        icon={<IconExclamationCircle />}
+                        title={t`Error rendering template`}
+                        mx='10px'
+                      >
+                        <Code>{errorOverlay}</Code>
+                      </Alert>
+                    </Overlay>
+                  )}
+                </div>
+              </Tabs.Panel>
+            ))}
+          </Tabs>
+        </Split>
+      </Stack>
+    </Boundary>
+  );
+}

package/src/components/editors/TemplateEditor/index.tsx

@@ -0,0 +1,3 @@
+export { TemplateEditor } from './TemplateEditor';
+export { CodeEditor } from './CodeEditor';
+export { PdfPreview } from './PdfPreview';