@genesislcap/blank-app-seed 3.26.0 → 3.27.0

package/.genx/package.json

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

package/.genx/templates/angular/chart.hbs

@@ -2,7 +2,7 @@
   <ng-container *ngIf="hasUserPermission('{{config.permissions.viewRight}}'); else notPermitted{{ config.index }}">
     <rapid-g2plot-chart
       type="{{ config.type }}"
-      [config]="tile{{ config.index }}.chartConfig"
+      [config]="chartConfig"
     >
       <chart-datasource
         resourceName="{{ config.resourceName }}"

package/.genx/templates/angular/component/component.column.defs.hbs

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

package/.genx/templates/angular/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/angular/component/component.gridOptions.hbs

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

package/.genx/templates/angular/component/component.hbs

@@ -0,0 +1,48 @@
+import { Component, Input, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { getUser } from '@genesislcap/foundation-user';
+import { GridOptionsConfig } from "@genesislcap/rapid-grid-pro";
+import { getViewUpdateRightComponent } from '../../../utils';
+{{#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}}
+
+@Component({
+  selector: 'app-{{kebabCase tile.componentName}}',
+  templateUrl: './{{kebabCase tile.title}}.component.html',
+  styleUrl: './{{kebabCase tile.title}}.component.css',
+  standalone: true,
+  imports: [
+    CommonModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class {{pascalCase tile.componentName}} {
+  hasUserPermission = (permissionCode: string) => getViewUpdateRightComponent(getUser(), permissionCode);{{#if tile.config.createFormUiSchema}}
+  createFormSchema = createFormSchema;{{/if}}{{#if tile.config.uischema}}
+  uischema = createFormSchema;{{/if}}{{#if tile.config.updateFormUiSchema}}
+  updateFormSchema = updateFormSchema;{{/if}}{{#if tile.config.columns}}
+  columnDefs = columnDefs;{{/if}}{{#if tile.config.gridOptions}}
+  gridOptions = gridOptions as GridOptionsConfig;{{/if}}{{#if tile.config.reqrep}}
+  reqrep = { pollingInterval: 5000 };{{/if}}{{#if tile.config.type}}
+  chartConfig = { {{#ifEquals this.config.type 'pie'}}
+      "radius": 0.75,
+      "angleField": "value",
+      "colorField": "groupBy",{{else}}
+      "xField": "groupBy",
+      "yField": "value",{{/ifEquals}}
+  };{{/if}}
+  
+}

package/.genx/templates/angular/component/component.index.hbs

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

package/.genx/templates/angular/component/component.styles.hbs

@@ -0,0 +1,3 @@
+:host {
+  /* insert css styles here */
+}

package/.genx/templates/angular/component/component.template.hbs

@@ -0,0 +1 @@
+{{> (lookup tile 'type') tile}}

package/.genx/templates/angular/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/angular/entityManager.hbs

@@ -12,13 +12,13 @@
       {{#if config.createEvent}}
       [createEvent]="hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.createEvent }}' : undefined"
       {{#if config.createFormUiSchema}}
-      [createFormUiSchema]="tile{{ config.index }}.createFormUiSchema"
+      [createFormUiSchema]="createFormSchema"
       {{/if}}
       {{/if}}
       {{#if config.updateEvent}}
       [updateEvent]="hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.updateEvent }}' : undefined"
       {{#if config.updateFormUiSchema}}
-      [updateFormUiSchema]="tile{{ config.index }}.updateFormUiSchema"
+      [updateFormUiSchema]="updateFormSchema"
       {{/if}}
       {{/if}}
       {{#if config.deleteEvent}}
@@ -31,10 +31,10 @@
       [datasourceConfig]="{ isSnapshot: {{ config.snapshot }} }"
       {{/if}}
       {{#if config.reqrep}}
-      [datasourceConfig]="tile{{ config.index }}.reqrep"
+      [datasourceConfig]="reqrep"
       {{/if}}
       {{#if config.columns}}
-      [columns]="tile{{ config.index }}.columns"
+      [columns]="columnDefs"
       {{/if}}
       {{#if config.modalPosition}}
       modal-position="{{ config.modalPosition }}"

package/.genx/templates/angular/form.hbs

@@ -4,7 +4,7 @@
       design-system-prefix="rapid"
       resourceName="{{config.resourceName}}"
       {{#if config.uischema}}
-      [uischema]="tile{{ config.index }}.uischema"
+      [uischema]="uischema"
       {{/if}}
     >
     </foundation-form>

package/.genx/templates/angular/grid.hbs

@@ -11,14 +11,14 @@
         isSnapshot="{{config.snapshot}}"
         {{/if}}
         {{#if config.reqrep}}
-        [datasourceConfig]="tile{{ config.index }}.reqrep"
+        [datasourceConfig]="reqrep"
         {{/if}}
         {{#if config.gridOptions}}
-        [deferredGridOptions]="{ onRowClicked: tile{{ config.index }}.gridOptions.onRowClicked }"
+        [deferredGridOptions]="{ onRowClicked: gridOptions.onRowClicked }"
         {{/if}}
       ></grid-pro-genesis-datasource>
       {{#if config.gridOptions}}
-      <grid-pro-column *ngFor="let columnDef of tile{{ config.index }}.gridOptions?.columnDefs" [definition]="columnDef"></grid-pro-column>
+      <grid-pro-column *ngFor="let columnDef of gridOptions?.columnDefs" [definition]="columnDef"></grid-pro-column>
       {{/if}}
     </rapid-grid-pro>
   <section 

package/.genx/templates/angular/gridLayout.hbs

@@ -3,12 +3,12 @@
     {{#each route.tiles}}
         {{#ifEquals @index 0}}
         <rapid-layout-item title="{{../title}}">
-            {{> (lookup ../this 'type') ../this}}
+            <app-{{kebabCase ../componentName}}></app-{{kebabCase ../componentName}}>
         </rapid-layout-item>
         {{/ifEquals}}
         {{#ifEquals @index 1}}
         <rapid-layout-item title="{{../title}}">
-            {{> (lookup ../this 'type') ../this}}
+            <app-{{kebabCase ../componentName}}></app-{{kebabCase ../componentName}}>
         </rapid-layout-item>
         {{/ifEquals}}
     {{/each}}
@@ -17,12 +17,12 @@
     {{#each route.tiles}}
         {{#ifEquals @index 2}}
         <rapid-layout-item title="{{../title}}">
-            {{> (lookup ../this 'type') ../this}}
+            <app-{{kebabCase ../componentName}}></app-{{kebabCase ../componentName}}>
         </rapid-layout-item>
         {{/ifEquals}}
         {{#ifEquals @index 3}}
         <rapid-layout-item title="{{../title}}">
-            {{> (lookup ../this 'type') ../this}}
+            <app-{{kebabCase ../componentName}}></app-{{kebabCase ../componentName}}>
         </rapid-layout-item>
         {{/ifEquals}}
     {{/each}}

package/.genx/templates/angular/horizontalLayout.hbs

@@ -1,7 +1,7 @@
 <rapid-layout-region>
     {{#each route.tiles}}
     <rapid-layout-item title="{{this.title}}">
-        {{> (lookup . 'type') }}
+        <app-{{kebabCase this.componentName}}></app-{{kebabCase this.componentName}}>
     </rapid-layout-item>
     {{/each}}
 </rapid-layout-region>

package/.genx/templates/angular/route.hbs

@@ -1,20 +1,20 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { User, getUser } from '@genesislcap/foundation-user';
-import { GridOptionsConfig } from '@genesislcap/rapid-grid-pro';
-import { getNumberFormatter, getDateFormatter } from '@genesislcap/foundation-utils';
-import { getViewUpdateRightComponent } from '../../utils';
 import { ErrorMessageComponent } from '../../components/error-message/error-message.component';
+{{#each route.tiles}}
+import { {{pascalCase this.componentName}} } from './{{kebabCase this.title}}-{{this.componentType}}';
+{{/each}}
 import { environment } from '../../../environments/environment';
-{{#if route.FDC3EventHandlersEnabled}}
-import { sendEventOnChannel } from '../../utils';
-{{/if}}
+
 
 @Component({
-  selector: 'app-{{pascalCase route.name}}',
+  selector: 'app-{{kebabCase route.name}}',
   standalone: true,
   imports: [
     ErrorMessageComponent,
+    {{#each route.tiles}}
+    {{pascalCase this.componentName}},
+    {{/each}}
     CommonModule,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -23,26 +23,4 @@ import { sendEventOnChannel } from '../../utils';
 })
 export class {{pascalCase route.name}}Component {
   environment = environment;
-  hasUserPermission = (permissionCode: string) => getViewUpdateRightComponent(getUser(), permissionCode);
-{{#if route.FDC3EventHandlersEnabled}}
-  sendEventOnChannel = sendEventOnChannel;
-{{/if}}
-
-  {{#each route.tiles}}
-  tile{{this.config.index}} = { {{#if this.config.createFormUiSchema}}
-    "createFormUiSchema": {{{ this.config.createFormUiSchema }}},{{/if}}{{#if this.config.updateFormUiSchema}}
-    "updateFormUiSchema": {{{ this.config.updateFormUiSchema }}},{{/if}}{{#if this.config.uischema}}
-    "uischema": {{{ this.config.uischema }}},{{/if}}{{#if this.config.gridOptions}}
-    "gridOptions": {{{ this.config.gridOptions }}} as GridOptionsConfig,{{/if}}{{#if this.config.reqrep}}
-    "reqrep": {{{ this.config.reqrep }}},{{/if}}{{#if this.config.columns}}
-    "columns": {{{ this.config.columns }}},{{/if}}{{#if this.config.type}}
-    "chartConfig": { {{#ifEquals this.config.type 'pie'}}
-      "radius": 0.75,
-      "angleField": "value",
-      "colorField": "groupBy",{{else}}
-      "xField": "groupBy",
-      "yField": "value",{{/ifEquals}}
-    },{{/if}}
-  }{{#unless @last}};{{/unless}}
-  {{/each}}
 }

package/.genx/utils/generateRoute.js

@@ -73,8 +73,13 @@ const generateRoute = (route, { changeCase, writeFileWithData }, framework) => {
     );
   });
 
-  // Remove condition after adding changes for angular & react
-  if (framework === FRAMEWORK_WEB_COMPONENTS_ALIAS && route?.tiles?.length) {
+  // Remove condition after adding changes for react
+  if (
+    [FRAMEWORK_WEB_COMPONENTS_ALIAS, FRAMEWORK_ANGULAR_ALIAS].includes(
+      framework,
+    ) &&
+    route?.tiles?.length
+  ) {
     route.tiles.forEach((tile) => {
       generateTile(tile, route, { changeCase, writeFileWithData }, framework);
     });

package/.genx/utils/generateTile.js

@@ -6,37 +6,44 @@ const {
   DIR_TEMPLATE_BY_FRAMEWORK,
 } = require('../static');
 
+const defaultPathGetters = {
+  index: (componentPath) => `${componentPath}/index.ts`,
+  addForm: (componentPath, tile) =>
+    `${componentPath}/${tile.name}.create.form.schema.ts`,
+  updateForm: (componentPath, tile) =>
+    `${componentPath}/${tile.name}.update.form.schema.ts`,
+  columnDefs: (componentPath, tile) =>
+    `${componentPath}/${tile.name}.column.defs.ts`,
+  gridOptions: (componentPath, tile) =>
+    `${componentPath}/${tile.name}.gridOptions.ts`,
+};
+
 const getPathByFramework = {
   [FRAMEWORK_WEB_COMPONENTS_ALIAS]: {
+    ...defaultPathGetters,
     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`,
+    route: (clientSrcPath, tile, routeName) =>
+      `${clientSrcPath}/${routeName}/${tile.name}-${tile.componentType}`,
+    component: (componentPath, tile) => `${componentPath}/${tile.name}.ts`,
+    template: (componentPath, tile) =>
+      `${componentPath}/${tile.name}.template.ts`,
+    style: (componentPath, tile) => `${componentPath}/${tile.name}.styles.ts`,
+  },
+  [FRAMEWORK_ANGULAR_ALIAS]: {
+    ...defaultPathGetters,
+    clientSrcPath: `../../client/src/app/pages`,
+    route: (clientSrcPath, tile, routeName) =>
+      `${clientSrcPath}/${routeName}/${tile.name}-${tile.componentType}`,
+    component: (componentPath, tile) =>
+      `${componentPath}/${tile.name}.component.ts`,
+    template: (componentPath, tile) =>
+      `${componentPath}/${tile.name}.component.html`,
+    style: (componentPath, tile) =>
+      `${componentPath}/${tile.name}.component.css`,
   },
-  // Placeholder for angular part
-  [FRAMEWORK_ANGULAR_ALIAS]: {},
 };
 
-const getFilesToWrite = (
-  tile,
-  tileName,
-  routeName,
-  path,
-  sourceTemplateDir,
-) => {
+const getFilesToWrite = (tileData, routeName, path, sourceTemplateDir) => {
   const {
     clientSrcPath,
     route: getRouteDir,
@@ -50,51 +57,46 @@ const getFilesToWrite = (
     gridOptions: getGridOptionsTarget,
   } = path;
 
-  const routeDir = getRouteDir(
-    clientSrcPath,
-    tileName,
-    tile.componentType,
-    routeName,
-  );
+  const routeDir = getRouteDir(clientSrcPath, tileData, routeName);
 
   const componentIndexFile = {
     source: `${sourceTemplateDir}/component/component.index.hbs`,
-    target: getComponentIndexTarget(routeDir, tileName),
+    target: getComponentIndexTarget(routeDir, tileData),
   };
 
   const componentFile = {
     source: `${sourceTemplateDir}/component/component.hbs`,
-    target: getComponentTarget(routeDir, tileName),
+    target: getComponentTarget(routeDir, tileData),
   };
 
   const componentTemplateFile = {
     source: `${sourceTemplateDir}/component/component.template.hbs`,
-    target: getTemplateTarget(routeDir, tileName),
+    target: getTemplateTarget(routeDir, tileData),
   };
 
   const componentStylesFile = {
     source: `${sourceTemplateDir}/component/component.styles.hbs`,
-    target: getStyleTarget(routeDir, tileName),
+    target: getStyleTarget(routeDir, tileData),
   };
 
   const componentAddFormFile = {
     source: `${sourceTemplateDir}/component/component.create.form.hbs`,
-    target: getAddFormTarget(routeDir, tileName),
+    target: getAddFormTarget(routeDir, tileData),
   };
 
   const componentUpdateFormFile = {
     source: `${sourceTemplateDir}/component/component.update.form.hbs`,
-    target: getUpdateFormTarget(routeDir, tileName),
+    target: getUpdateFormTarget(routeDir, tileData),
   };
 
   const componentColumnsFile = {
     source: `${sourceTemplateDir}/component/component.column.defs.hbs`,
-    target: getColumnDefsTarget(routeDir, tileName),
+    target: getColumnDefsTarget(routeDir, tileData),
   };
 
   const componentGridOptionsFile = {
     source: `${sourceTemplateDir}/component/component.gridOptions.hbs`,
-    target: getGridOptionsTarget(routeDir, tileName),
+    target: getGridOptionsTarget(routeDir, tileData),
   };
 
   const filesToWrite = [
@@ -104,23 +106,23 @@ const getFilesToWrite = (
     componentStylesFile,
   ];
 
-  switch (tile.type) {
+  switch (tileData.type) {
     case 'entity-manager':
-      if (tile.config?.columns) {
+      if (tileData.config?.columns) {
         filesToWrite.push(componentColumnsFile);
       }
-      if (tile.config?.gridOptions) {
+      if (tileData.config?.gridOptions) {
         filesToWrite.push(componentGridOptionsFile);
       }
-      if (tile.config?.createFormUiSchema) {
+      if (tileData.config?.createFormUiSchema) {
         filesToWrite.push(componentAddFormFile);
       }
-      if (tile.config?.updateFormUiSchema) {
+      if (tileData.config?.updateFormUiSchema) {
         filesToWrite.push(componentUpdateFormFile);
       }
       break;
     case 'grid-pro':
-      if (tile.config?.gridOptions) {
+      if (tileData.config?.gridOptions) {
         filesToWrite.push(componentGridOptionsFile);
       }
       break;
@@ -140,20 +142,19 @@ const generateTile = (
   { changeCase, writeFileWithData },
   framework,
 ) => {
-  const tileName = changeCase.paramCase(tile.title);
+  const tileData = {
+    ...tile,
+    name: changeCase.paramCase(tile.title),
+    componentType: tile.componentType,
+    config: tile.config,
+  };
   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 routeDir = getRouteDir(clientSrcPath, tileData, routeName);
 
   const filesToWrite = getFilesToWrite(
-    tile,
-    tileName,
+    tileData,
     routeName,
     getPathByFramework[framework],
     sourceTemplateDir,

package/.genx/utils/isString.js

@@ -0,0 +1,8 @@
+const isString = (input) => {
+  return (
+    typeof input === 'string' &&
+    Object.prototype.toString.call(input) === '[object String]'
+  );
+};
+
+module.exports = isString;

package/.genx/utils/validateFrameworkAlias.js

@@ -1,7 +1,12 @@
 const { FRAMEWORKS_ALIAS } = require('../static');
 const normalizeFrameworkAlias = require('./normalizeFrameworkAlias');
+const isString = require('./isString');
 
 const validateFrameworkAlias = (alias) => {
+  if (!isString(alias)) {
+    return false;
+  }
+
   return FRAMEWORKS_ALIAS.includes(normalizeFrameworkAlias(alias));
 };
 

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.27.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.26.0...v3.27.0) (2024-07-25)
+
+
+### Features
+
+* Implement the generated UI code structure proposal (angular) (#287) 6d61502, closes FUI-2099 FUI-2099 FUI-2099
+
 ## [3.26.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.25.2...v3.26.0) (2024-07-24)
 
 

package/package.json

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