@genesislcap/blank-app-seed 3.20.5 → 3.21.0

package/.genx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "3.20.5",
+  "version": "3.21.0",
   "license": "Apache-2.0",
   "scripts": {
     "lint": "eslint .",

package/.genx/static.js

@@ -54,6 +54,13 @@ const DIR_TEMPLATE_BY_FRAMEWORK = {
   [FRAMEWORK_ANGULAR_ALIAS]: DIRS_MAP.get(DIR_TEMPLATE_ANGULAR_ALIAS),
 };
 
+const COMPONENT_TYPE = {
+  'entity-manager': 'manager',
+  'grid-pro': 'grid',
+  'smart-form': 'form',
+  'chart': 'chart'
+}
+
 const TEXTS = {
   INTRO_API_HOST:
     'You can override the default Genesis server URL used during local developent.',
@@ -77,6 +84,7 @@ const TEXTS = {
 };
 
 module.exports = {
+  COMPONENT_TYPE,
   FRAMEWORK_WEB_COMPONENTS_ALIAS,
   FRAMEWORK_ANGULAR_ALIAS,
   FRAMEWORK_REACT_ALIAS,

package/.genx/templates/web-components/component/component.column.defs.hbs

@@ -0,0 +1,6 @@
+import { ColDef } from '@ag-grid-community/core';
+import { getDateFormatter, getNumberFormatter{{#if route.FDC3EventHandlersEnabled}}, sendEventOnChannel{{/if}} } from '../../../utils';
+
+{{#if tile.config.columns}}
+export const columnDefs: ColDef[] = {{{ tile.config.columns }}}
+{{/if}}

package/.genx/templates/web-components/component/component.create.form.hbs

@@ -0,0 +1,8 @@
+import { UiSchema } from '@genesislcap/foundation-forms';
+
+{{#if tile.config.createFormUiSchema}}
+export const createFormSchema: UiSchema = {{{ tile.config.createFormUiSchema }}}
+{{/if}}
+{{#if tile.config.uischema}}
+export const createFormSchema: UiSchema = {{{ tile.config.uischema }}}
+{{/if}}

package/.genx/templates/web-components/component/component.gridOptions.hbs

@@ -0,0 +1,6 @@
+import { GridOptionsConfig } from '@genesislcap/rapid-grid-pro';
+import { getDateFormatter, getNumberFormatter{{#if route.FDC3EventHandlersEnabled}}, sendEventOnChannel{{/if}} } from '../../../utils';
+
+{{#if tile.config.gridOptions}}
+export const gridOptions: GridOptionsConfig = {{{ tile.config.gridOptions }}}
+{{/if}}

package/.genx/templates/web-components/component/component.hbs

@@ -0,0 +1,13 @@
+import { User } from '@genesislcap/foundation-user';
+import { customElement, GenesisElement } from '@genesislcap/web-core';
+import { {{pascalCase tile.title}}Styles as styles } from './{{kebabCase tile.title}}.styles';
+import { {{pascalCase tile.title}}Template as template } from './{{kebabCase tile.title}}.template';
+
+@customElement({
+  name: '{{kebabCase tile.componentName}}',
+  template,
+  styles,
+})
+export class {{pascalCase tile.componentName}} extends GenesisElement {
+  @User user: User;
+}

package/.genx/templates/web-components/component/component.index.hbs

@@ -0,0 +1 @@
+export * from './{{kebabCase tile.title}}';

package/.genx/templates/web-components/component/component.styles.hbs

@@ -0,0 +1,7 @@
+import { css } from '@genesislcap/web-core';
+
+export const {{pascalCase tile.title}}Styles = css`
+  :host {
+    /* insert css styles here */
+  }
+`;

package/.genx/templates/web-components/component/component.template.hbs

@@ -0,0 +1,23 @@
+import { html, whenElse } from '@genesislcap/web-core';
+import { getViewUpdateRightComponent } from '../../../utils';
+import type { {{pascalCase tile.componentName}} } from './{{kebabCase tile.title}}';
+{{#if tile.config.createFormUiSchema}}
+import { createFormSchema } from './{{kebabCase tile.title}}.create.form.schema';
+{{/if}}
+{{#if tile.config.uischema}}
+import { createFormSchema } from './{{kebabCase tile.title}}.create.form.schema';
+{{/if}}
+{{#if tile.config.updateFormUiSchema}}
+import { updateFormSchema } from './{{kebabCase tile.title}}.update.form.schema';
+{{/if}}
+{{#if tile.config.columns}}
+import { columnDefs } from './{{kebabCase tile.title}}.column.defs';
+{{/if}}
+{{#if tile.config.gridOptions}}
+import { gridOptions } from './{{kebabCase tile.title}}.gridOptions';
+{{/if}}
+
+
+export const {{pascalCase tile.title}}Template = html<{{pascalCase tile.componentName}}>`
+    {{> (lookup tile 'type') tile}}
+`;

package/.genx/templates/web-components/component/component.update.form.hbs

@@ -0,0 +1,5 @@
+import { UiSchema } from '@genesislcap/foundation-forms';
+
+{{#if tile.config.updateFormUiSchema}}
+export const updateFormSchema: UiSchema = {{{ tile.config.updateFormUiSchema }}}
+{{/if}}

package/.genx/templates/web-components/entityManager.hbs

@@ -12,26 +12,20 @@ ${whenElse(
             {{#if config.createEvent}}
             createEvent="${(x) => getViewUpdateRightComponent(x.user, '{{config.permissions.updateRight}}', '{{ config.createEvent }}')}"
             {{#if config.createFormUiSchema}}
-            :createFormUiSchema=${() => (
-                {{{ config.createFormUiSchema }}}
-            )}
+            :createFormUiSchema=${() => createFormSchema }
             {{/if}}
             {{/if}}
             {{#if config.updateEvent}}
             updateEvent="${(x) => getViewUpdateRightComponent(x.user, '{{config.permissions.updateRight}}', '{{ config.updateEvent }}')}"
             {{#if config.updateFormUiSchema}}
-            :updateFormUiSchema=${() => (
-                {{{ config.updateFormUiSchema }}}
-            )}
+            :updateFormUiSchema=${() => updateFormSchema}
             {{/if}}
             {{/if}}
             {{#if config.deleteEvent}}
             deleteEvent="${(x) => getViewUpdateRightComponent(x.user, '{{config.permissions.updateRight}}', '{{ config.deleteEvent }}')}"
             {{/if}}
             {{#if config.gridOptions}}
-            :gridOptions=${() => (
-            {{{config.gridOptions}}}
-            )}
+            :gridOptions=${() => gridOptions }
             {{/if}}
             {{#if config.snapshot}}
             :datasourceConfig=${() => ({isSnapshot: {{ config.snapshot }} })}
@@ -40,7 +34,7 @@ ${whenElse(
             :datasourceConfig=${() => ({pollingInterval: 5000 })}
             {{/if}}
             {{#if config.columns}}
-            :columns=${() => {{{ config.columns }}} }
+            :columns=${() => columnDefs }
             {{/if}}
             {{#if config.modalPosition}}
             modal-position="{{ config.modalPosition }}"

package/.genx/templates/web-components/form.hbs

@@ -5,9 +5,7 @@ ${whenElse(
         design-system-prefix="rapid"
         resourceName="{{config.resourceName}}"
         {{#if config.uischema}}
-        :uischema=${() => (
-          {{{config.uischema}}}
-        )}
+        :uischema=${() => createFormSchema }
         {{/if}}
       >
       </foundation-form>

package/.genx/templates/web-components/grid.hbs

@@ -14,9 +14,7 @@ ${whenElse(
           :datasourceConfig=${() => ({pollingInterval: 5000 })}
           {{/if}}
           {{#if config.gridOptions}}
-          :deferredGridOptions=${() => (
-            {{{config.gridOptions}}}
-          )}
+          :deferredGridOptions=${() => gridOptions}
           {{/if}}
         >
         </grid-pro-genesis-datasource>

package/.genx/templates/web-components/gridLayout.hbs

@@ -0,0 +1,30 @@
+<rapid-layout-region type="horizontal">
+    <rapid-layout-region type="vertical">
+    {{#each route.tiles}}
+        {{#ifEquals @index 0}}
+        <rapid-layout-item title="{{../title}}">
+            <{{kebabCase ../componentName}}></{{kebabCase ../componentName}}>
+        </rapid-layout-item>
+        {{/ifEquals}}
+        {{#ifEquals @index 1}}
+        <rapid-layout-item title="{{../title}}">
+            <{{kebabCase ../componentName}}></{{kebabCase ../componentName}}>
+        </rapid-layout-item>
+        {{/ifEquals}}
+    {{/each}}
+    </rapid-layout-region>
+    <rapid-layout-region type="vertical">
+    {{#each route.tiles}}
+        {{#ifEquals @index 2}}
+        <rapid-layout-item title="{{../title}}">
+            <{{kebabCase ../componentName}}></{{kebabCase ../componentName}}>
+        </rapid-layout-item>
+        {{/ifEquals}}
+        {{#ifEquals @index 3}}
+        <rapid-layout-item title="{{../title}}">
+            <{{kebabCase ../componentName}}></{{kebabCase ../componentName}}>
+        </rapid-layout-item>
+        {{/ifEquals}}
+    {{/each}}
+    </rapid-layout-region>
+</rapid-layout-region>

package/.genx/templates/web-components/horizontalLayout.hbs

@@ -0,0 +1,7 @@
+<rapid-layout-region>
+    {{#each route.tiles}}
+    <rapid-layout-item title="{{this.title}}">
+        <{{kebabCase this.componentName}}></{{kebabCase this.componentName}}>
+    </rapid-layout-item>
+    {{/each}}
+</rapid-layout-region>

package/.genx/templates/web-components/route.template.hbs

@@ -1,7 +1,13 @@
 import { isDev } from '@genesislcap/foundation-utils';
-import { html, whenElse } from '@genesislcap/web-core';
-import { getDateFormatter, getNumberFormatter, getViewUpdateRightComponent{{#if route.FDC3EventHandlersEnabled}}, sendEventOnChannel{{/if}} } from '../../utils';
+import { html } from '@genesislcap/web-core';
 import type { {{pascalCase route.name}} } from './{{kebabCase route.name}}';
+{{#each route.tiles}}
+import { {{pascalCase this.componentName}} } from './{{kebabCase this.title}}-{{this.componentType}}';
+{{/each}}
+
+{{#each route.tiles}}
+{{pascalCase this.componentName}};
+{{/each}}
 
 export const {{pascalCase route.name}}Template = html<{{pascalCase route.name}}>`
   {{#if route.tiles}}

package/.genx/templates/web-components/tabsLayout.hbs

@@ -0,0 +1,7 @@
+<rapid-layout-region type="tabs">
+    {{#each route.tiles}}
+    <rapid-layout-item title="{{this.title}}">
+        <{{kebabCase this.componentName}}></{{kebabCase this.componentName}}>
+    </rapid-layout-item>
+    {{/each}}
+</rapid-layout-region>

package/.genx/utils/formatRouteData.js

@@ -4,6 +4,7 @@ const {
 } = require('./gridSerializers');
 const formatJSONValue = require('./formatJSONValue');
 const getLayoutType = require('./getLayoutType');
+const { COMPONENT_TYPE } = require('../static');
 
 const formatRouteData = (route) => {
   const layoutKey = route?.layoutKey || `${route.name}_${Date.now()}`;
@@ -15,6 +16,8 @@ const formatRouteData = (route) => {
   );
   const tiles = route.tiles?.map((tile, index) => {
     const config = tile.config || {};
+    const componentType = COMPONENT_TYPE[tile.type];
+    const componentName = `${route.name}-${tile.title.replace(/[^0-9a-z]/gi, '')}-${componentType}`;
     const {
       gridOptions,
       createFormUiSchema,
@@ -25,6 +28,8 @@ const formatRouteData = (route) => {
 
     return {
       ...tile,
+      componentName,
+      componentType,
       config: {
         ...config,
         index,

package/.genx/utils/generateRoute.js

@@ -1,5 +1,6 @@
 const { resolve } = require('node:path');
 const makeDirectory = require('./makeDirectory');
+const generateTile = require('./generateTile');
 const {
   FRAMEWORK_WEB_COMPONENTS_ALIAS,
   FRAMEWORK_ANGULAR_ALIAS,
@@ -59,6 +60,13 @@ const generateRoute = (route, { changeCase, writeFileWithData }, framework) => {
       resolve(__dirname, source),
     );
   });
+
+  // Remove condition after adding changes for angular
+  if (framework === FRAMEWORK_WEB_COMPONENTS_ALIAS && route?.tiles?.length) {
+    route.tiles.forEach((tile) => {
+      generateTile(tile, route, { changeCase, writeFileWithData }, framework);
+    });
+  }
 };
 
 module.exports = generateRoute;

package/.genx/utils/generateTile.js

@@ -0,0 +1,137 @@
+const { resolve } = require('node:path');
+const makeDirectory = require('./makeDirectory');
+const {
+  COMPONENT_TYPE,
+  FRAMEWORK_WEB_COMPONENTS_ALIAS,
+  FRAMEWORK_ANGULAR_ALIAS,
+  DIR_TEMPLATE_BY_FRAMEWORK,
+} = require('../static');
+
+const getPathByFramework = {
+  [FRAMEWORK_WEB_COMPONENTS_ALIAS]: {
+    clientSrcPath: `../../client/src/routes`,
+    route: (clientSrcPath, tileName, tileType, routeName) => `${clientSrcPath}/${routeName}/${tileName}-${tileType}`,
+    index: (componentPath) => `${componentPath}/index.ts`,
+    component: (componentPath, tileName) => `${componentPath}/${tileName}.ts`,
+    template: (componentPath, tileName) => `${componentPath}/${tileName}.template.ts`,
+    style: (componentPath, tileName) => `${componentPath}/${tileName}.styles.ts`,
+    addForm: (componentPath, tileName) => `${componentPath}/${tileName}.create.form.schema.ts`,
+    updateForm: (componentPath, tileName) => `${componentPath}/${tileName}.update.form.schema.ts`,
+    columnDefs: (componentPath, tileName) => `${componentPath}/${tileName}.column.defs.ts`,
+    gridOptions: (componentPath, tileName) => `${componentPath}/${tileName}.gridOptions.ts`,
+  },
+  // Placeholder for angular part
+  [FRAMEWORK_ANGULAR_ALIAS]: {},
+};
+
+const getFilesToWrite = (tile, tileName, routeName, path, sourceTemplateDir) => {
+    const {
+        clientSrcPath,
+        route: getRouteDir,
+        index: getComponentIndexTarget,
+        component: getComponentTarget,
+        template: getTemplateTarget,
+        style: getStyleTarget,
+        addForm: getAddFormTarget,
+        updateForm: getUpdateFormTarget,
+        columnDefs: getColumnDefsTarget,
+        gridOptions: getGridOptionsTarget,
+      } = path;
+
+      const routeDir = getRouteDir(clientSrcPath, tileName, tile.componentType, routeName);
+
+      const componentIndexFile = {
+        source: `${sourceTemplateDir}/component/component.index.hbs`,
+        target: getComponentIndexTarget(routeDir, tileName),
+      };
+      
+      const componentFile = {
+        source: `${sourceTemplateDir}/component/component.hbs`,
+        target: getComponentTarget(routeDir, tileName),
+      };
+
+      const componentTemplateFile = {
+        source: `${sourceTemplateDir}/component/component.template.hbs`,
+        target: getTemplateTarget(routeDir, tileName),
+      };
+
+      const componentStylesFile = {
+        source: `${sourceTemplateDir}/component/component.styles.hbs`,
+        target: getStyleTarget(routeDir, tileName),
+      };
+
+      const componentAddFormFile = {
+        source: `${sourceTemplateDir}/component/component.create.form.hbs`,
+        target: getAddFormTarget(routeDir, tileName),
+      };
+
+      const componentUpdateFormFile = {
+        source: `${sourceTemplateDir}/component/component.update.form.hbs`,
+        target: getUpdateFormTarget(routeDir, tileName),
+      }
+
+      const componentColumnsFile = {
+        source: `${sourceTemplateDir}/component/component.column.defs.hbs`,
+        target: getColumnDefsTarget(routeDir, tileName),
+      };
+
+      const componentGridOptionsFile = {
+        source: `${sourceTemplateDir}/component/component.gridOptions.hbs`,
+        target: getGridOptionsTarget(routeDir, tileName),
+      };
+
+      const filesToWrite = [componentIndexFile, componentFile, componentTemplateFile, componentStylesFile];
+      
+      switch (tile.type) {
+        case 'entity-manager':
+          if (tile.config?.columns) {
+            filesToWrite.push(componentColumnsFile);
+          }
+          if (tile.config?.gridOptions) {
+            filesToWrite.push(componentGridOptionsFile);
+          }
+          if (tile.config?.createFormUiSchema) {
+             filesToWrite.push(componentAddFormFile);
+          }
+          if (tile.config?.updateFormUiSchema) {
+            filesToWrite.push(componentUpdateFormFile);
+          }
+          break;
+        case 'grid-pro':
+          if (tile.config?.gridOptions) {
+            filesToWrite.push(componentGridOptionsFile);
+          }
+        break;
+        case 'smart-form':
+          filesToWrite.push(componentAddFormFile);
+          break
+        default:
+          break;
+      }
+
+    return filesToWrite
+}
+
+const generateTile = (tile, route, { changeCase, writeFileWithData }, framework) => {
+  const tileName = changeCase.paramCase(tile.title);
+  const routeName = changeCase.paramCase(route.name);
+  const sourceTemplateDir = `../${DIR_TEMPLATE_BY_FRAMEWORK[framework]}`;
+  const {
+    clientSrcPath,
+    route: getRouteDir,
+  } = getPathByFramework[framework];
+  const routeDir = getRouteDir(clientSrcPath, tileName, tile.componentType, routeName);
+
+  const filesToWrite = getFilesToWrite(tile, tileName, routeName, getPathByFramework[framework], sourceTemplateDir)
+
+  makeDirectory(resolve(__dirname, routeDir));
+  filesToWrite.forEach(({ source, target }) => {
+    writeFileWithData(
+      resolve(__dirname, target),
+      { tile, route },
+      resolve(__dirname, source),
+    );
+  });
+};
+
+module.exports = generateTile;

package/.genx/utils/gridSerializers.js

@@ -1,45 +1,45 @@
 const formatJSONValue = require('./formatJSONValue');
 
-function gridColumnsSerializer(columns, pad = '      ') {
+function gridColumnsSerializer(columns, pad) {
   if (!columns) {
     return undefined;
   }
 
   try {
     const columnsSerialized = columns.map((column) => {
-      return gridOptionsSerializer(column);
+      return gridOptionsSerializer(column, pad);
     });
-    return `[\n${pad}${columnsSerialized}]`;
+    return `[${columnsSerialized}\n]`;
   } catch (e) {
     console.error('Error serializing grid columns:', e.message);
     throw e;
   }
 }
 
-function gridOptionsSerializer(options, pad = '      ') {
+function gridOptionsSerializer(options, pad = '  ') {
   if (!options) {
     return undefined;
   }
 
   try {
-    let output = `{\n`;
+    let output = `\n${pad}{\n`;
     Object.keys(options).forEach((key) => {
       const value = options[key];
       if (key === 'columns') {
-        output += `${pad}${'columnDefs'}: ${gridColumnsSerializer(value)},\n`;
+        output += `${pad}${pad}${'columnDefs'}: ${gridColumnsSerializer(value, '     ')},\n`;
       } else if (
         value?.type === 'function' ||
         value?.type === 'valueFormatter'
       ) {
         const args = value.arguments?.map(JSON.stringify).join(', ');
-        output += `${pad}${key}: ${value.name}(${args}),\n`;
+        output += `${pad}${pad}${key}: ${value.name}(${args}),\n`;
       } else if (key === 'hide') {
-        output += `${pad}${key}: ${value},\n`;
+        output += `${pad}${pad}${key}: ${value},\n`;
       } else {
-        output += `${pad}${key}: ${formatJSONValue(value)},\n`;
+        output += `${pad}${pad}${key}: ${formatJSONValue(value)},\n`;
       }
     });
-    output += `${pad}}\n`;
+    output += `${pad}}`;
     return output;
   } catch (e) {
     console.error('Error serializing grid options:', e.message);

package/.genx/utils/registerPartials.js

@@ -6,20 +6,21 @@ const {
 } = require('../static');
 
 const registerPartials = ({ registerPartial }, framework) => {
+  // It can be reverted after adding changes for angular
   const rootTemplateDir = `../${DIRS_MAP.get(DIR_TEMPLATE_ROOT_ALIAS)}`;
   const sourceTemplateDir = `../${DIR_TEMPLATE_BY_FRAMEWORK[framework]}`;
 
   registerPartial(
     'grid-layout',
-    resolve(__dirname, `${rootTemplateDir}/gridLayout.hbs`),
+    resolve(__dirname, `${sourceTemplateDir}/gridLayout.hbs`),
   );
   registerPartial(
     'tabs-layout',
-    resolve(__dirname, `${rootTemplateDir}/tabsLayout.hbs`),
+    resolve(__dirname, `${sourceTemplateDir}/tabsLayout.hbs`),
   );
   registerPartial(
     'horizontal-layout',
-    resolve(__dirname, `${rootTemplateDir}/horizontalLayout.hbs`),
+    resolve(__dirname, `${sourceTemplateDir}/horizontalLayout.hbs`),
   );
   registerPartial(
     'smart-form',

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.21.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.20.5...v3.21.0) (2024-07-09)
+
+
+### Features
+
+* implement the generated UI code structure proposal GENC-533 (#275) 9bc3847
+
 ## [3.20.5](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.20.4...v3.20.5) (2024-07-09)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed",
   "description": "Genesis Blank App Seed",
-  "version": "3.20.5",
+  "version": "3.21.0",
   "license": "Apache-2.0",
   "scripts": {
     "release": "semantic-release"