@genesislcap/blank-app-seed 3.21.0 → 3.23.0

package/.genx/package.json

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

package/.genx/static.js

@@ -52,14 +52,15 @@ const DIR_TEMPLATE_BY_FRAMEWORK = {
     DIR_TEMPLATE_WEB_COMPONENT_ALIAS,
   ),
   [FRAMEWORK_ANGULAR_ALIAS]: DIRS_MAP.get(DIR_TEMPLATE_ANGULAR_ALIAS),
+  [FRAMEWORK_REACT_ALIAS]: DIRS_MAP.get(FRAMEWORK_REACT_ALIAS),
 };
 
 const COMPONENT_TYPE = {
   'entity-manager': 'manager',
   'grid-pro': 'grid',
   'smart-form': 'form',
-  'chart': 'chart'
-}
+  chart: 'chart',
+};
 
 const TEXTS = {
   INTRO_API_HOST:

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

@@ -1,9 +1,21 @@
-<rapid-g2plot-chart
-  type="{{ config.type }}"
-  [config]="tile{{ config.index }}.chartConfig"
->
-  <chart-datasource
-    resourceName="{{ config.resourceName }}"
-    server-fields="{{ config.xField }} {{ config.yField }}"
-  ></chart-datasource>
-</rapid-g2plot-chart>
+<section style="height: 100%; width: 100%;">
+  <ng-container *ngIf="hasUserPermission('{{config.permissions.viewRight}}'); else notPermitted{{ config.index }}">
+    <rapid-g2plot-chart
+      type="{{ config.type }}"
+      [config]="tile{{ config.index }}.chartConfig"
+    >
+      <chart-datasource
+        resourceName="{{ config.resourceName }}"
+        server-fields="{{ config.xField }} {{ config.yField }}"
+      ></chart-datasource>
+    </rapid-g2plot-chart>
+  </ng-container>
+
+  <ng-template #notPermitted{{ config.index }}>
+    <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>

package/.genx/templates/angular/entityManager.hbs

@@ -1,45 +1,57 @@
-<entity-management
-    design-system-prefix="rapid"
-    enable-row-flashing
-    enable-cell-flashing
-    {{#if config.title}}
-    title="{{ config.title }}"
-    {{/if}}
-    resourceName="{{ config.resourceName }}"
-    {{#if config.createEvent}}
-    createEvent="{{ config.createEvent }}"
-    {{#if config.createFormUiSchema}}
-    [createFormUiSchema]="tile{{ config.index }}.createFormUiSchema"
-    {{/if}}
-    {{/if}}
-    {{#if config.updateEvent}}
-    updateEvent="{{ config.updateEvent }}"
-    {{#if config.updateFormUiSchema}}
-    [updateFormUiSchema]="tile{{ config.index }}.updateFormUiSchema"
-    {{/if}}
-    {{/if}}
-    {{#if config.deleteEvent}}
-    deleteEvent="{{ config.deleteEvent }}"
-    {{/if}}
-    {{#if config.gridOptions}}
-    [gridOptions]="{{ config.gridOptions }}"
-    {{/if}}
-    {{#if config.snapshot}}
-    [datasourceConfig]="{ isSnapshot: {{ config.snapshot }} }"
-    {{/if}}
-    {{#if config.reqrep}}
-    [datasourceConfig]="tile{{ config.index }}.reqrep"
-    {{/if}}
-    {{#if config.columns}}
-    [columns]="tile{{ config.index }}.columns"
-    {{/if}}
-    {{#if config.modalPosition}}
-    modal-position="{{ config.modalPosition }}"
-    {{/if}}
-    {{#if config.sizeColumnsToFit}}
-    size-columns-to-fit
-    {{/if}}
-    {{#if config.enableSearchBar}}
-    enable-search-bar
-    {{/if}}
-></entity-management>
+<section style="height: 100%; width: 100%;">
+  <ng-container *ngIf="hasUserPermission('{{config.permissions.viewRight}}'); else notPermitted{{ config.index }}">
+    <entity-management
+      design-system-prefix="rapid"
+      enable-row-flashing
+      enable-cell-flashing
+      {{#if config.title}}
+      title="{{ config.title }}"
+      {{/if}}
+      resourceName="{{ config.resourceName }}"
+      {{#if config.createEvent}}
+      [createEvent]="hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.createEvent }}' : undefined"
+      {{#if config.createFormUiSchema}}
+      [createFormUiSchema]="tile{{ config.index }}.createFormUiSchema"
+      {{/if}}
+      {{/if}}
+      {{#if config.updateEvent}}
+      [updateEvent]="hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.updateEvent }}' : undefined"
+      {{#if config.updateFormUiSchema}}
+      [updateFormUiSchema]="tile{{ config.index }}.updateFormUiSchema"
+      {{/if}}
+      {{/if}}
+      {{#if config.deleteEvent}}
+      [deleteEvent]="hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.deleteEvent }}' : undefined"
+      {{/if}}
+      {{#if config.gridOptions}}
+      [gridOptions]="{{ config.gridOptions }}"
+      {{/if}}
+      {{#if config.snapshot}}
+      [datasourceConfig]="{ isSnapshot: {{ config.snapshot }} }"
+      {{/if}}
+      {{#if config.reqrep}}
+      [datasourceConfig]="tile{{ config.index }}.reqrep"
+      {{/if}}
+      {{#if config.columns}}
+      [columns]="tile{{ config.index }}.columns"
+      {{/if}}
+      {{#if config.modalPosition}}
+      modal-position="{{ config.modalPosition }}"
+      {{/if}}
+      {{#if config.sizeColumnsToFit}}
+      size-columns-to-fit
+      {{/if}}
+      {{#if config.enableSearchBar}}
+      enable-search-bar
+      {{/if}}
+    ></entity-management>
+  </ng-container>
+
+  <ng-template #notPermitted{{ config.index }}>
+    <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>

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

@@ -1,8 +1,21 @@
-<foundation-form
-  design-system-prefix="rapid"
-  resourceName="{{config.resourceName}}"
-  {{#if config.uischema}}
-  [uischema]="tile{{ config.index }}.uischema"
-  {{/if}}
->
-</foundation-form>
+<section style="height: 100%; width: 100%;">
+  <ng-container *ngIf="hasUserPermission('{{config.permissions.updateRight}}'); else notPermitted{{ config.index }}">
+    <foundation-form
+      design-system-prefix="rapid"
+      resourceName="{{config.resourceName}}"
+      {{#if config.uischema}}
+      [uischema]="tile{{ config.index }}.uischema"
+      {{/if}}
+    >
+    </foundation-form>
+  </ng-container>
+  
+  <ng-template #notPermitted{{ config.index }}>
+    <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>
+

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

@@ -1,18 +1,30 @@
-<rapid-grid-pro
-  enable-row-flashing
-  enable-cell-flashing
-  >
-  <grid-pro-genesis-datasource
-    resource-name="{{config.resourceName}}"
-    {{#if config.snapshot}}
-    isSnapshot="{{config.snapshot}}"
-    {{/if}}
-    {{#if config.reqrep}}
-    [datasourceConfig]="tile{{ config.index }}.reqrep"
-    {{/if}}
-    {{#if config.gridOptions}}
-    [deferredGridOptions]="tile{{ config.index }}.gridOptions"
-    {{/if}}
-  >
-  </grid-pro-genesis-datasource>
-</rapid-grid-pro>
+<section style="height: 100%; width: 100%;">
+  <ng-container *ngIf="hasUserPermission('{{config.permissions.viewRight}}'); else notPermitted{{ config.index }}">
+    <rapid-grid-pro
+      enable-row-flashing
+      enable-cell-flashing
+      >
+      <grid-pro-genesis-datasource
+        resource-name="{{config.resourceName}}"
+        {{#if config.snapshot}}
+        isSnapshot="{{config.snapshot}}"
+        {{/if}}
+        {{#if config.reqrep}}
+        [datasourceConfig]="tile{{ config.index }}.reqrep"
+        {{/if}}
+        {{#if config.gridOptions}}
+        [deferredGridOptions]="tile{{ config.index }}.gridOptions"
+        {{/if}}
+      >
+      </grid-pro-genesis-datasource>
+    </rapid-grid-pro>
+  </ng-container>
+
+  <ng-template #notPermitted{{ config.index }}>
+    <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>

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

@@ -1,13 +1,14 @@
-import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {CommonModule} from '@angular/common';
-{{#if route.tiles}}
-import { getDateFormatter, getNumberFormatter } from '../../utils';
-{{/if}}
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { User, getUser } from '@genesislcap/foundation-user';
+import { getDateFormatter, getNumberFormatter, getViewUpdateRightComponent } from '../../utils';
+import { ErrorMessageComponent } from '../../components/error-message/error-message.component';
 
 @Component({
   selector: 'app-{{pascalCase route.name}}',
   standalone: true,
   imports: [
+    ErrorMessageComponent,
     CommonModule,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -15,6 +16,8 @@ import { getDateFormatter, getNumberFormatter } from '../../utils';
   styleUrls: ['./{{kebabCase route.name}}.component.css'],
 })
 export class {{pascalCase route.name}}Component {
+  hasUserPermission = (permissionCode: string) => getViewUpdateRightComponent(getUser(), permissionCode);
+  
   {{#each route.tiles}}
   tile{{this.config.index}} = { {{#if this.config.createFormUiSchema}}
     "createFormUiSchema": {{{ this.config.createFormUiSchema }}},{{/if}}{{#if this.config.updateFormUiSchema}}

package/.genx/templates/react/chart.hbs

@@ -0,0 +1,9 @@
+<rapid-g2plot-chart
+  type="{{ config.type }}"
+  config={tile{{ config.index }}.chartConfig}
+>
+  <chart-datasource
+    resourceName="{{ config.resourceName }}"
+    server-fields="{{ config.xField }} {{ config.yField }}"
+  ></chart-datasource>
+</rapid-g2plot-chart>

package/.genx/templates/react/entityManager.hbs

@@ -0,0 +1,45 @@
+<entity-management
+    design-system-prefix="rapid"
+    enable-row-flashing
+    enable-cell-flashing
+    {{#if config.title}}
+    title="{{ config.title }}"
+    {{/if}}
+    resourceName="{{ config.resourceName }}"
+    {{#if config.createEvent}}
+    createEvent="{{ config.createEvent }}"
+    {{#if config.createFormUiSchema}}
+    createFormUiSchema={tile{{ config.index }}.createFormUiSchema}
+    {{/if}}
+    {{/if}}
+    {{#if config.updateEvent}}
+    updateEvent="{{ config.updateEvent }}"
+    {{#if config.updateFormUiSchema}}
+    updateFormUiSchema={tile{{ config.index }}.updateFormUiSchema}
+    {{/if}}
+    {{/if}}
+    {{#if config.deleteEvent}}
+    deleteEvent="{{ config.deleteEvent }}"
+    {{/if}}
+    {{#if config.gridOptions}}
+    gridOptions={{{ config.gridOptions }}}
+    {{/if}}
+    {{#if config.snapshot}}
+    datasourceConfig={ isSnapshot: {{ config.snapshot }} }
+    {{/if}}
+    {{#if config.reqrep}}
+    datasourceConfig={tile{{ config.index }}.reqrep}
+    {{/if}}
+    {{#if config.columns}}
+    columns={tile{{ config.index }}.columns}
+    {{/if}}
+    {{#if config.modalPosition}}
+    modal-position="{{ config.modalPosition }}"
+    {{/if}}
+    {{#if config.sizeColumnsToFit}}
+    size-columns-to-fit
+    {{/if}}
+    {{#if config.enableSearchBar}}
+    enable-search-bar
+    {{/if}}
+></entity-management>

package/.genx/templates/react/form.hbs

@@ -0,0 +1,8 @@
+<foundation-form
+  design-system-prefix="rapid"
+  resourceName="{{config.resourceName}}"
+  {{#if config.uischema}}
+  uischema={tile{{ config.index }}.uischema}
+  {{/if}}
+>
+</foundation-form>

package/.genx/templates/react/grid.hbs

@@ -0,0 +1,18 @@
+<rapid-grid-pro
+  enable-row-flashing
+  enable-cell-flashing
+  >
+  <grid-pro-genesis-datasource
+    resource-name="{{config.resourceName}}"
+    {{#if config.snapshot}}
+    isSnapshot="{{config.snapshot}}"
+    {{/if}}
+    {{#if config.reqrep}}
+    [datasourceConfig]="tile{{ config.index }}.reqrep"
+    {{/if}}
+    {{#if config.gridOptions}}
+    [deferredGridOptions]="tile{{ config.index }}.gridOptions"
+    {{/if}}
+  >
+  </grid-pro-genesis-datasource>
+</rapid-grid-pro>

package/.genx/templates/react/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}}">
+            {{> (lookup ../this 'type') ../this}}
+        </rapid-layout-item>
+        {{/ifEquals}}
+        {{#ifEquals @index 1}}
+        <rapid-layout-item title="{{../title}}">
+            {{> (lookup ../this 'type') ../this}}
+        </rapid-layout-item>
+        {{/ifEquals}}
+    {{/each}}
+    </rapid-layout-region>
+    <rapid-layout-region type="vertical">
+    {{#each route.tiles}}
+        {{#ifEquals @index 2}}
+        <rapid-layout-item title="{{../title}}">
+            {{> (lookup ../this 'type') ../this}}
+        </rapid-layout-item>
+        {{/ifEquals}}
+        {{#ifEquals @index 3}}
+        <rapid-layout-item title="{{../title}}">
+            {{> (lookup ../this 'type') ../this}}
+        </rapid-layout-item>
+        {{/ifEquals}}
+    {{/each}}
+    </rapid-layout-region>
+</rapid-layout-region>

package/.genx/templates/react/horizontalLayout.hbs

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

package/.genx/templates/react/route.hbs

@@ -0,0 +1,35 @@
+import './{{pascalCase route.name}}.css';
+
+const {{pascalCase route.name}} = () => {
+  {{#each route.tiles}}
+  const 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 }}},{{/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}}
+  };
+  {{/each}}
+
+  return (
+    <section className="{{kebabCase route.name}}-page">
+      {{#if route.tiles}}
+      <rapid-layout auto-save-key="{{route.layoutKey}}">
+        {{> (lookup ./route 'layoutType') }}
+      </rapid-layout>
+      {{else}}
+      Welcome to {{sentenceCase route.name}}
+      {{/if}}
+    </section>
+  );
+};
+
+export default {{pascalCase route.name}};

package/.genx/templates/react/route.styles.hbs

@@ -0,0 +1,3 @@
+:host {
+  height: 100%;
+}

package/.genx/templates/react/tabsLayout.hbs

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

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

@@ -48,6 +48,6 @@ ${whenElse(
         ></entity-management>
     `,
     html`
-        <not-permitted-component></not-permitted-component>
+      <not-permitted-component></not-permitted-component>
     `,
 )}

package/.genx/utils/generateRoute.js

@@ -4,6 +4,7 @@ const generateTile = require('./generateTile');
 const {
   FRAMEWORK_WEB_COMPONENTS_ALIAS,
   FRAMEWORK_ANGULAR_ALIAS,
+  FRAMEWORK_REACT_ALIAS,
   DIR_TEMPLATE_BY_FRAMEWORK,
 } = require('../static');
 
@@ -23,11 +24,17 @@ const getPathByFramework = {
       `${routeDir}/${routeName}.component.html`,
     style: (routePath, routeName) => `${routePath}/${routeName}.component.css`,
   },
+  [FRAMEWORK_REACT_ALIAS]: {
+    clientSrcPath: `../../client/src/pages`,
+    route: (clientSrcPath, routeName) => `${clientSrcPath}/${routeName}`,
+    component: (routeDir, routeName, changeCase) =>
+      `${routeDir}/${changeCase.pascalCase(routeName)}.jsx`,
+    style: (routePath, routeName, changeCase) =>
+      `${routePath}/${changeCase.pascalCase(routeName)}.css`,
+  },
 };
 
 const generateRoute = (route, { changeCase, writeFileWithData }, framework) => {
-  const routeName = changeCase.paramCase(route.name);
-  const sourceTemplateDir = `../${DIR_TEMPLATE_BY_FRAMEWORK[framework]}`;
   const {
     clientSrcPath,
     route: getRouteDir,
@@ -35,23 +42,28 @@ const generateRoute = (route, { changeCase, writeFileWithData }, framework) => {
     template: getTemplateTarget,
     style: getStyleTarget,
   } = getPathByFramework[framework];
+  const routeName = changeCase.paramCase(route.name);
+  const sourceTemplateDir = `../${DIR_TEMPLATE_BY_FRAMEWORK[framework]}`;
   const routeDir = getRouteDir(clientSrcPath, routeName);
 
   const filesToWrite = [
     {
       source: `${sourceTemplateDir}/route.hbs`,
-      target: getComponentTarget(routeDir, routeName),
-    },
-    {
-      source: `${sourceTemplateDir}/route.template.hbs`,
-      target: getTemplateTarget(routeDir, routeName),
+      target: getComponentTarget(routeDir, routeName, changeCase),
     },
     {
       source: `${sourceTemplateDir}/route.styles.hbs`,
-      target: getStyleTarget(routeDir, routeName),
+      target: getStyleTarget(routeDir, routeName, changeCase),
     },
   ];
 
+  if (getTemplateTarget) {
+    filesToWrite.push({
+      source: `${sourceTemplateDir}/route.template.hbs`,
+      target: getTemplateTarget(routeDir, routeName),
+    });
+  }
+
   makeDirectory(resolve(__dirname, routeDir));
   filesToWrite.forEach(({ source, target }) => {
     writeFileWithData(
@@ -61,7 +73,7 @@ const generateRoute = (route, { changeCase, writeFileWithData }, framework) => {
     );
   });
 
-  // Remove condition after adding changes for angular
+  // Remove condition after adding changes for angular & react
   if (framework === FRAMEWORK_WEB_COMPONENTS_ALIAS && route?.tiles?.length) {
     route.tiles.forEach((tile) => {
       generateTile(tile, route, { changeCase, writeFileWithData }, framework);

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [3.23.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.22.0...v3.23.0) (2024-07-15)
+
+
+### Features
+
+* react blank-app-seed (#278) 83b1767
+
+## [3.22.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.21.0...v3.22.0) (2024-07-15)
+
+
+### Features
+
+* angular handle route, component view/update permissions - [FUI-2066](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/2066) (#273) 8c73b16
+
 ## [3.21.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.20.5...v3.21.0) (2024-07-09)
 
 

package/client-tmp/angular/angular.json

@@ -13,12 +13,6 @@
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
-            "customWebpackConfig": {
-              "path": "./custom-webpack.config.js",
-              "mergeStrategies": {
-                "externals": "replace"
-              }
-            },
             "outputPath": "dist/{{pkgName}}",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -39,7 +33,9 @@
               "size-sensor",
               "pdfast",
               "fmin",
-              "@json-schema-tools/dereferencer"
+              "@json-schema-tools/dereferencer",
+              "numeral",
+              "numeral/locales"
             ]
           },
           "configurations": {
@@ -107,13 +103,26 @@
         },
         "test": {
           "builder": "@angular-builders/custom-webpack:karma",
-          "options": {
-            "customWebpackConfig": {
-              "path": "./custom-webpack.config.js",
-              "mergeStrategies": {
-                "externals": "replace"
+          "configurations": {
+            "production": {
+              "customWebpackConfig": {
+                "path": "./webpack.prod.config.js",
+                "mergeStrategies": {
+                  "externals": "replace"
+                }
               }
             },
+            "development": {
+              "customWebpackConfig": {
+                "path": "./webpack.dev.config.js",
+                "mergeStrategies": {
+                  "externals": "replace"
+                }
+              }
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "assets": ["src/favicon.ico", "src/assets"],