@genesislcap/blank-app-seed 3.24.0 → 3.25.0

package/.genx/package.json

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

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

@@ -1,10 +1,9 @@
-<section style="height: 100%; width: 100%;">
-  <ng-container *ngIf="hasUserPermission('{{config.permissions.viewRight}}'); else notPermitted{{ config.index }}">
     <rapid-grid-pro
       header-case-type="capitalCase"
       only-template-col-defs
       enable-row-flashing
       enable-cell-flashing
+      [ngStyle]="{ display: hasUserPermission('{{config.permissions.viewRight}}') ? 'block' : 'none' }"
       >
       <grid-pro-genesis-datasource
         resource-name="{{config.resourceName}}"
@@ -22,13 +21,16 @@
       <grid-pro-column *ngFor="let columnDef of tile{{ config.index }}.gridOptions?.columnDefs" [definition]="columnDef"></grid-pro-column>
       {{/if}}
     </rapid-grid-pro>
-  </ng-container>
-
-  <ng-template #notPermitted{{ config.index }}>
+  <section 
+    [ngStyle]="{ 
+      height: '100%',
+      width: '100%',
+      display: !hasUserPermission('{{config.permissions.viewRight}}') ? 'block' : 'none'
+    }"
+  >
     <app-error-message
       style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
       elementType="h3"
       message="You do not have access to view this component.">
     </app-error-message>
-  </ng-template>
-</section>
+  </section>

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

@@ -4,6 +4,10 @@ import { User, getUser } from '@genesislcap/foundation-user';
 import { GridOptionsConfig } from "@genesislcap/rapid-grid-pro";
 import { getDateFormatter, getNumberFormatter, getViewUpdateRightComponent } from '../../utils';
 import { ErrorMessageComponent } from '../../components/error-message/error-message.component';
+import { environment } from '../../../environments/environment';
+{{#if route.FDC3EventHandlersEnabled}}
+import { sendEventOnChannel } from '../../utils';
+{{/if}}
 
 @Component({
   selector: 'app-{{pascalCase route.name}}',
@@ -17,7 +21,11 @@ import { ErrorMessageComponent } from '../../components/error-message/error-mess
   styleUrls: ['./{{kebabCase route.name}}.component.css'],
 })
 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}}

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

@@ -1,5 +1,5 @@
   {{#if route.tiles}}
-  <rapid-layout auto-save-key="{{route.layoutKey}}">
+  <rapid-layout [auto-save-key]="environment.production ? '{{route.layoutKey}}' : null">
      {{> (lookup ./route 'layoutType') }}
   </rapid-layout>
   {{else}}

package/.genx/utils/generateTile.js

@@ -1,7 +1,6 @@
 const { resolve } = require('node:path');
 const makeDirectory = require('./makeDirectory');
 const {
-  COMPONENT_TYPE,
   FRAMEWORK_WEB_COMPONENTS_ALIAS,
   FRAMEWORK_ANGULAR_ALIAS,
   DIR_TEMPLATE_BY_FRAMEWORK,
@@ -10,119 +9,155 @@ const {
 const getPathByFramework = {
   [FRAMEWORK_WEB_COMPONENTS_ALIAS]: {
     clientSrcPath: `../../client/src/routes`,
-    route: (clientSrcPath, tileName, tileType, routeName) => `${clientSrcPath}/${routeName}/${tileName}-${tileType}`,
+    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`,
+    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 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);
       }
-
-      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;
+      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;
+};
 
-    return filesToWrite
-}
-
-const generateTile = (tile, route, { changeCase, writeFileWithData }, framework) => {
+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 {
+  const { clientSrcPath, route: getRouteDir } = getPathByFramework[framework];
+  const routeDir = getRouteDir(
     clientSrcPath,
-    route: getRouteDir,
-  } = getPathByFramework[framework];
-  const routeDir = getRouteDir(clientSrcPath, tileName, tile.componentType, routeName);
-
-  const filesToWrite = getFilesToWrite(tile, tileName, routeName, getPathByFramework[framework], sourceTemplateDir)
+    tileName,
+    tile.componentType,
+    routeName,
+  );
+
+  const filesToWrite = getFilesToWrite(
+    tile,
+    tileName,
+    routeName,
+    getPathByFramework[framework],
+    sourceTemplateDir,
+  );
 
   makeDirectory(resolve(__dirname, routeDir));
   filesToWrite.forEach(({ source, target }) => {

package/.genx/utils/registerPartials.js

@@ -1,13 +1,8 @@
 const { resolve } = require('node:path');
-const {
-  DIR_TEMPLATE_ROOT_ALIAS,
-  DIRS_MAP,
-  DIR_TEMPLATE_BY_FRAMEWORK,
-} = require('../static');
+const { DIR_TEMPLATE_BY_FRAMEWORK } = 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(

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.25.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.24.0...v3.25.0) (2024-07-18)
+
+
+### Features
+
+* FDC3 support in angular - [FUI-2068](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/2068) (#281) 8d30d4c
+
 ## [3.24.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.23.0...v3.24.0) (2024-07-16)
 
 

package/client-tmp/angular/angular.json

@@ -140,6 +140,7 @@
     }
   },
   "cli": {
+    "analytics": false,
     "schematicCollections": ["@angular-eslint/schematics"]
   }
 }

package/client-tmp/angular/package.json

@@ -40,6 +40,9 @@
     "@angular/platform-browser": "^18.0.4",
     "@angular/platform-browser-dynamic": "^18.0.4",
     "@angular/router": "^18.0.4",
+    {{#if FDC3.includeDependencies}}
+    "@genesislcap/foundation-fdc3": "{{versions.UI}}",
+    {{/if}}
     "@genesislcap/foundation-comms": "{{versions.UI}}",
     "@genesislcap/foundation-login": "{{versions.UI}}",
     "@genesislcap/foundation-entity-management": "{{versions.UI}}",

package/client-tmp/angular/src/app/app.component.ts

@@ -1,8 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, AfterViewInit } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import getLayoutNameByRoute from './utils/getLayoutNameByRoute';
 import type { LayoutComponentName } from './types/layout';
 import { configureFoundationLogin } from './share/foundation-login';
+{{#if FDC3.channels.length}}
+import { listenToChannel, onFDC3Ready } from './utils';
+{{/if}}
 
 // Genesis Components
 import './share/genesis-components';
@@ -12,7 +15,7 @@ import './share/genesis-components';
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
-export class AppComponent {
+export class AppComponent implements AfterViewInit {
   layoutName?: LayoutComponentName;
   title = '{{capitalCase appName}}';
 
@@ -28,4 +31,22 @@ export class AppComponent {
       }
     });
   }
+
+  ngAfterViewInit() {
+    {{#if FDC3.channels.length}}
+    onFDC3Ready(this.FDC3ReadyHandler);
+    {{/if}}
+  }
+
+  {{#if FDC3.channels.length}}
+  FDC3ReadyHandler = () => {
+    {{#each FDC3.channels}}
+    listenToChannel('{{this.name}}', '{{this.type}}', (result) => {
+      console.log('Received FDC3 channel message on: {{this.name}} channel, type: {{this.type}}', result);
+      // TODO: Add your listener logic here
+      // E.g. open a modal or route to specific page: Route.path.push(`[Route name]`);
+    });
+    {{/each}}
+  };
+  {{/if}}
 }

package/client-tmp/angular/src/app/utils/fdc3.ts

@@ -0,0 +1,32 @@
+{{#if FDC3.includeDependencies}}
+import { DefaultFDC3 } from '@genesislcap/foundation-fdc3';
+{{/if}}
+export const isFDC3 = (): boolean => !!(window as any).fdc3;
+{{#if FDC3.includeDependencies}}
+
+export const onFDC3Ready = async (FDC3ReadyCb: () => any): Promise<void> => {
+  isFDC3()
+    ? await FDC3ReadyCb()
+    : window.addEventListener('fdc3Ready', async () => {
+      await FDC3ReadyCb();
+    });
+};
+
+export const listenToChannel = async (
+  channelName: string,
+  type: string,
+  callback: (result: any) => void,
+): Promise<void> => {
+  const fdc3Service = new DefaultFDC3();
+  fdc3Service.addChannelListener(channelName, type, callback);
+};
+
+export const sendEventOnChannel = (channelName: string, type: string) => {
+  return async (e: any) => {
+    const fdc3Service = new DefaultFDC3();
+    // check for ag-grid-specific events, fall back to standard events
+    const payload = e.data || e.detail;
+    await fdc3Service.broadcastOnChannel(channelName, type, payload);
+  };
+};
+{{/if}}

package/client-tmp/angular/src/app/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './formatters';
 export * from './getLayoutNameByRoute';
 export * from './permissions';
+export * from './fdc3';

package/client-tmp/react/package.json

@@ -10,7 +10,6 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "serve": "vite preview",
     "clean": "rm -rf node_modules dist",
-
     "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix"
   },
   "dependencies": {

package/client-tmp/react/src/layouts/blank/BlankLayout.tsx

@@ -17,9 +17,9 @@ const BlankLayout: React.FC<BlankLayoutProps> = ({ children }) =>{
   }, []);
 
   return (
-  <zero-design-system-provider className={styles['blank-layout']}>
+  <rapid-design-system-provider className={styles['blank-layout']}>
     <section className={styles.content}>{children}</section>
-  </zero-design-system-provider>
+  </rapid-design-system-provider>
 );
 };
 

package/package.json

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

package/client-tmp/react/src/utils/navigation.ts

@@ -1,5 +0,0 @@
-import { history } from './history';
-
-export const navigateTo = (path: string): void => {
-  history.push(path);
-};