Feat/handlebars template

package.json

@@ -60,6 +60,7 @@
     "codemirror-lang-ejs": "^0.1.5",
     "ejs": "^3.1.8",
     "graphql": "^16.6.0",
+    "handlebars": "^4.7.7",
     "history": "^5.0.0",
     "i18next": "^22.4.6",
     "i18next-browser-languagedetector": "^7.0.1",

src/api/services/MenuItemService.ts

@@ -11,6 +11,11 @@ export default class MenuItemService {
         parentId
         template
         templateFormat
+        defaultTemplate {
+          json
+          xml
+          plain
+        }
         enabled
         startPublication
         endPublication

src/api/services/MenuService.ts

@@ -37,6 +37,11 @@ meta {
 }
 template
 templateFormat
+defaultTemplate {
+  json
+  xml
+  plain
+}
 items {
   id
   label
@@ -46,6 +51,11 @@ items {
   menuId
   templateFormat
   template
+  defaultTemplate {
+    json
+    xml
+    plain
+  }
   enabled
   startPublication
   endPublication
@@ -132,4 +142,19 @@ export default class MenuService {
       }
     }
   `;
+
+  static RENDER_MENU_TEMPLATE: DocumentNode = gql`
+    query RenderMenuTemplate($input: RenderMenuTemplateInput!) {
+      renderMenuTemplate(renderMenuTemplateInput: $input)
+    }
+  `;
+
+  static RENDER_MENU_ITEM_TEMPLATE: DocumentNode = gql`
+    query RenderMenuItemTemplate(
+      $item: RenderMenuItemTemplateInput!
+      $menu: RenderMenuTemplateInput!
+    ) {
+      renderMenuItemTemplate(renderMenuItemTemplateInput: $item, renderMenuTemplateInput: $menu)
+    }
+  `;
 }

src/components/CodeViewer/CodeViewer.tsx

@@ -14,6 +14,7 @@ interface Props {
 }
 
 const CodeViewer = ({ code, language, lineNumbers = true }: Props) => {
+  language = language === 'plain' ? 'json' : language;
   useEffect(() => {
     Prism.highlightAll();
   }, [code]);

src/components/Menu/Items/OperationScreen.tsx

@@ -100,7 +100,18 @@ export const OperationScreen = ({
     const formatNodes = (nodes: INode[]) =>
       nodes
         .map(node => {
-          const { id, children, original, parentId, ...rest } = node;
+          const {
+            id,
+            children,
+            original,
+            parentId,
+            createdAt,
+            updatedAt,
+            version,
+            menuId,
+            defaultTemplate,
+            ...rest
+          } = node;
           const meta = Object.keys(rest.meta).reduce((acc, key) => {
             const meta = rest.meta[key];
             if (meta == null || meta === '') {

src/components/Menu/Revisions/Diff.tsx

@@ -198,6 +198,7 @@ export const MenuRevisionsDiff = ({ id, diff, snapshot, renderTemplateChanges }:
         field === 'parentId' ||
         field === 'menuId' ||
         field === 'menu' ||
+        field === 'defaultTemplate' ||
         field === 'createdAt' ||
         field === 'updatedAt' ||
         field === 'deletedAt' ||
@@ -284,8 +285,8 @@ export const MenuRevisionsDiff = ({ id, diff, snapshot, renderTemplateChanges }:
       );
     return Object.keys(items)
       .sort((a, b) => {
-        const aOrder = items[a].order;
-        const bOrder = items[b].order;
+        const aOrder = items[a]?.order;
+        const bOrder = items[b]?.order;
         if (!aOrder || !bOrder) return Number(a) - Number(b);
         if (aOrder < bOrder) return -1;
         if (aOrder > bOrder) return 1;

src/i18n/locales/en/translation.json

@@ -270,7 +270,7 @@
       "title": "Edit Template",
       "templateFormat": {
         "title": "Template Format",
-        "description": "The template format defines how it will be rendered before sending it to your application. You can use the variables below to define the template using the <2>EJS</2> (Embedded JavaScript) syntax.",
+        "description": "The template format defines how it will be rendered before sending it to your application. You can use the variables below to define the template using the <2>Handlebars</2> syntax.",
         "formats": {
           "json": "JSON",
           "xml": "XML",
@@ -354,7 +354,8 @@
       "notification": {
         "success": "The menu version was published successfully"
       },
-      "noChanges": "No changes were made to the menu."
+      "noChanges": "No changes were made to the menu.",
+      "noTemplate": "The menu version does not have a template."
     }
   }
 }

src/i18n/locales/pt-BR/translation.json

@@ -270,7 +270,7 @@
       "title": "Editar Template",
       "templateFormat": {
         "title": "Formato do Template",
-        "description": "O formato do template define como ele será renderizado antes de enviar para a sua aplicação. Você pode usar as variáveis abaixo para definir o template usando a sintaxe do <2>EJS</2> (Embedded JavaScript).",
+        "description": "O formato do template define como ele será renderizado antes de enviar para a sua aplicação. Você pode usar as variáveis abaixo para definir o template usando a sintaxe do <2>Handlebars</2>.",
         "formats": {
           "json": "JSON",
           "xml": "XML",
@@ -353,7 +353,8 @@
       "notification": {
         "success": "Versão do menu publicada com sucesso"
       },
-      "noChanges": "Nenhuma alteração foi feita no menu."
+      "noChanges": "Nenhuma alteração foi feita no menu.",
+      "noTemplate": "A versão do menu não possui um template definido."
     }
   }
 }