@genesislcap/blank-app-seed 5.2.0-prerelease.15 → 5.2.0-prerelease.16

package/.genx/package.json

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

package/.genx/templates/react/component/component.events.config.hbs

@@ -1,8 +1,9 @@
 import { CustomEventHandler } from "../../../utils/customEvents";
+import { UiSchema } from '@genesislcap/foundation-forms';
 
 {{#each tile.config.customEvents}}
 {{#if this.hasForm}}
-export const {{camelCase this.name}}FormSchema = {{{this.uischema}}};
+export const {{camelCase this.name}}FormSchema: UiSchema = {{{this.uischema}}};
 {{/if}}
 {{/each}}
 

package/.genx/templates/react/component/component.hbs

@@ -19,9 +19,9 @@ import { createPortal } from 'react-dom';
 import { getConnect } from '@genesislcap/foundation-comms';
 import type { ActionRendererParams } from '@genesislcap/rapid-grid-pro';
 import { RapidAgActionRenderer } from '@genesislcap/rapid-grid-pro';
-import { Modal } from '@genesislcap/rapid-design-system';
+import { UiSchema } from '@genesislcap/foundation-forms';
 import { customEvents, customEventFormSchemas } from './{{pascalCase tile.title}}EventsConfig';
-import { useCustomEvent, type CustomEventHandler, type CustomEventState } from '../../../utils/customEvents';
+import { useCustomEvent, type CustomEventState } from '../../../utils/customEvents';
 {{/if}}
 {{#if tile.config.createFormUiSchema~}}
 import { createFormSchema as createFormSchemaTile } from './{{pascalCase tile.title}}CreateFormSchema';
@@ -80,22 +80,28 @@ export const {{pascalCase tile.componentName}}: React.FC = () => {
       maxWidth: 50,
       headerTooltip: '{{this.tooltip}}',
       pinned: 'right',
+      suppressCellFlash: true,
       cellRenderer: RapidAgActionRenderer,
       cellRendererParams: {
         actionClick: async (rowData) => {
+          setIsModalVisible(false);
+
           const customEvent = customEvents.find(e => e.name === '{{this.name}}');
           if (customEvent) {
             const handleCustomEvent = useCustomEvent(
               customEvent,
               rowData,
               setCustomEventFormData,
-              setActiveCustomEvent
+              setActiveCustomEvent,
+              setResourceName,
+              setUiSchema,
+              customEventFormSchemas
             );
             await handleCustomEvent();
           }
         },
         contentTemplate: `
-          <rapid-icon name="{{this.icon}}"></rapid-icon>
+          <rapid-icon name="{{this.icon}}" title="{{this.name}}"></rapid-icon>
         `,
       } as ActionRendererParams,
     },
@@ -132,63 +138,31 @@ export const {{pascalCase tile.componentName}}: React.FC = () => {
   {{/if}}
 
   {{#if tile.config.customEvents}}
-  const customEventModalRef = useRef<Modal>(null);
   const [activeCustomEvent, setActiveCustomEvent] = useState<CustomEventState | null>(null);
   const [customEventFormData, setCustomEventFormData] = useState<Record<string, any>>({});
+  const [resourceName, setResourceName] = useState<string>('');
+  const [uiSchema, setUiSchema] = useState<UiSchema | null>(null);
+  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
   useEffect(() => {
     if (activeCustomEvent) {
-      customEventModalRef.current?.show();
-    } else {
-      customEventModalRef.current?.close();
+      setIsModalVisible(true);
     }
   }, [activeCustomEvent]);
 
-  const handleCustomEventSubmit = () => {
-    setActiveCustomEvent(null);
-    setCustomEventFormData({});
-  };
-
-  const getActiveCustomEvent = () => {
-    if (!activeCustomEvent) return null;
-    return customEvents.find(e => e.name === activeCustomEvent.name);
-  };
-
-  const getCustomEventModalTitle = () => {
-    const customEvent = getActiveCustomEvent();
-    return customEvent?.name || 'Custom Event';
-  };
-
-  const getCustomEventResourceName = () => {
-    if (!activeCustomEvent) return '';
-    return `EVENT_${activeCustomEvent.event}`;
-  };
-
-  const getCustomEventUiSchema = () => {
-    const customEvent = getActiveCustomEvent();
-    return customEvent && customEvent.name in customEventFormSchemas
-      ? customEventFormSchemas[customEvent.name as keyof typeof customEventFormSchemas]
-      : null;
-  };
-
   const renderFormModal = () => {
     if (!activeCustomEvent) return null;
 
     return createPortal(
-      <rapid-modal
-        ref={customEventModalRef}
-        onCloseCallback={() => setActiveCustomEvent(null)}
-      >
-        <h4 slot="top">{getCustomEventModalTitle()}</h4>
-        <foundation-form
-          resourceName={getCustomEventResourceName()}
-          uischema={getCustomEventUiSchema()}
-          data={customEventFormData}
-          onsubmit-success={handleCustomEventSubmit}
-          onsubmit={submitFailureNotification}
-          onsubmit-failure={submitFailureNotification}
-        ></foundation-form>
-      </rapid-modal>,
+      <smart-form-modal
+        entityLabel="{{ tile.config.entityName }}"
+        modal-position="{{ tile.config.modalPosition }}"
+        modalFormType={isModalVisible && 'update'}
+        editModalVisible={isModalVisible}
+        formResourceName={resourceName}
+        formUiSchema={uiSchema}
+        editedEntity={customEventFormData}
+      ></smart-form-modal>,
       document.querySelector('rapid-design-system-provider')!
     );
   };

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

@@ -49,6 +49,9 @@ hasUserPermission('{{config.permissions.viewRight}}') ? (
     {{#if config.columns~}}
     columns={columnDefs}
     {{/if}}
+    {{#if config.entityName}}
+    entityLabel="{{ config.entityName }}"
+    {{/if}}
     {{#if config.modalPosition~}}
     modal-position="{{ config.modalPosition }}"
     {{/if}}

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

@@ -10,7 +10,6 @@ import { ColDef } from '@ag-grid-community/core';
 {{#if tile.config.customEvents}}
 import type { ActionRendererParams } from '@genesislcap/rapid-grid-pro';
 import { RapidAgActionRenderer } from '@genesislcap/rapid-grid-pro';
-import { Modal } from '@genesislcap/rapid-design-system';
 import { customEvents, customEventFormSchemas } from './{{kebabCase tile.title}}.events.config';
 import { handleFormCustomEvent, handleNonFormCustomEvent, showCustomEventConfirmation, type CustomEventHandler, type CustomEventState } from '../../../utils/customEvents';
 {{/if}}
@@ -34,35 +33,24 @@ export class {{pascalCase tile.componentName}} extends GenesisElement {
   @Connect connect!: Connect;
 
   {{#if tile.config.customEvents}}
-  customEventModal: Modal;
   @observable customEvents: CustomEventHandler[] = customEvents;
   @observable activeCustomEvent: CustomEventState | null = null;
   @observable customEventFormData: Record<string, any> = {};
 
-  async handleCustomEventSubmit() {
-    this.activeCustomEvent = null;
-    this.customEventFormData = {};
-    this.customEventModal.close();
-  }
-
   async handleCustomEventClick(eventName: string, rowData: any) {
-    const customEvent = this.customEvents.find(e => e.name === eventName);
+    const customEvent = this.customEvents.find((e) => e.name === eventName);
     if (!customEvent) return;
 
     if (customEvent.hasForm) {
       handleFormCustomEvent(
         customEvent,
         rowData,
-        (data) => this.customEventFormData = data,
-        (event) => this.activeCustomEvent = event,
-        () => this.customEventModal.show()
+        (data) => (this.customEventFormData = data),
+        (event) => (this.activeCustomEvent = event),
       );
     } else {
-      await handleNonFormCustomEvent(
-        this.connect,
-        customEvent,
-        rowData,
-        (onConfirm) => showCustomEventConfirmation(customEvent, onConfirm)
+      await handleNonFormCustomEvent(this.connect, customEvent, rowData, (onConfirm) =>
+        showCustomEventConfirmation(customEvent, onConfirm),
       );
     }
   }
@@ -72,11 +60,6 @@ export class {{pascalCase tile.componentName}} extends GenesisElement {
     return this.customEvents.find(e => e.name === this.activeCustomEvent.name);
   }
 
-  getCustomEventModalTitle() {
-    const customEvent = this.getActiveCustomEvent();
-    return customEvent?.name || 'Custom Event';
-  }
-
   getCustomEventResourceName() {
     if (!this.activeCustomEvent) return '';
     return `EVENT_${this.activeCustomEvent.event}`;
@@ -100,13 +83,14 @@ export class {{pascalCase tile.componentName}} extends GenesisElement {
       maxWidth: 50,
       headerTooltip: '{{this.tooltip}}',
       pinned: 'right',
+      suppressCellFlash: true,
       cellRenderer: RapidAgActionRenderer,
       cellRendererParams: <ActionRendererParams>{
         actionClick: async (rowData) => {
           await this.handleCustomEventClick('{{this.name}}', rowData);
         },
         contentTemplate: `
-          <rapid-icon name="{{this.icon}}"></rapid-icon>
+          <rapid-icon name="{{this.icon}}" title="{{this.name}}"></rapid-icon>
         `,
       },
     },

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

@@ -1,8 +1,5 @@
-import { html, when, whenElse, ref, repeat } from '@genesislcap/web-core';
-{{#if tile.config.customEvents}}
-import { customEvent } from '@genesislcap/foundation-events';
-{{/if}}
-import { getViewUpdateRightComponent{{#if tile.config.customEvents}}, submitFailureNotification{{/if}} } from '../../../utils';
+import { html, whenElse, repeat } 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';

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

@@ -51,25 +51,15 @@ ${whenElse(
             {{/if}}
         ></entity-management>
         {{#if config.customEvents}}
-        <rapid-modal
-          ${ref('customEventModal')}
-          :onCloseCallback=${(x) => (x.activeCustomEvent = null)}
-        >
-          <h4 slot="top">${(x) => x.getCustomEventModalTitle()}</h4>
-          ${when(
-            (x) => x.activeCustomEvent,
-            html`
-              <foundation-form
-                resourceName=${(x) => x.getCustomEventResourceName()}
-                :uischema=${(x) => x.getCustomEventUiSchema()}
-                :data=${(x) => x.customEventFormData}
-                @submit-success=${(x) => x.handleCustomEventSubmit()}
-                @submit=${(_, c) => submitFailureNotification(customEvent(c))}
-                @submit-failure=${(_, c) => submitFailureNotification(customEvent(c))}
-              ></foundation-form>
-            `,
-          )}
-        </rapid-modal>
+        <smart-form-modal
+            entityLabel="{{ config.entityName }}"
+            modal-position="{{ config.modalPosition }}"
+            :modalFormType=${(x) => !!x.activeCustomEvent && 'update'}
+            :editModalVisible=${(x) => !!x.activeCustomEvent}
+            :formResourceName=${(x) => x.getCustomEventResourceName()}
+            :formUiSchema=${(x) => x.getCustomEventUiSchema()}
+            :editedEntity=${(x) => x.customEventFormData}
+        ></smart-form-modal>
         {{/if}}
     `,
     html`

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [5.2.0-prerelease.16](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v5.2.0-prerelease.15...v5.2.0-prerelease.16) (2025-07-10)
+
+
+### Features
+
+* smart-form-modal react GENC-1162 d82bf2b
+* use smart-form-modal GENC-1162 (#485) 744ad5b
+
+
+### Bug Fixes
+
+* update type for customEventFormSchemas GENC-1162 9985837
+* use smart-form-modal GENC-1162 d4d112f
+
 ## [5.2.0-prerelease.15](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v5.2.0-prerelease.14...v5.2.0-prerelease.15) (2025-07-09)
 
 

package/client-tmp/react/package.json

@@ -44,12 +44,16 @@
     {{#if FDC3.includeDependencies}}
     "@genesislcap/foundation-fdc3": "{{versions.UI}}",
     {{/if}}
+    "@genesislcap/foundation-events": "{{versions.UI}}",
+    "@genesislcap/foundation-forms": "{{versions.UI}}",
     "@genesislcap/foundation-header": "{{versions.UI}}",
     "@genesislcap/foundation-layout": "{{versions.UI}}",
     "@genesislcap/foundation-logger": "{{versions.UI}}",
     "@genesislcap/foundation-login": "{{versions.UI}}",
+    "@genesislcap/foundation-notifications": "{{versions.UI}}",
     "@genesislcap/foundation-shell": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
+    "@genesislcap/foundation-user": "{{versions.UI}}",
     "@genesislcap/foundation-utils": "{{versions.UI}}",
     "@genesislcap/foundation-zero-grid-tabulator": "{{versions.UI}}",
     "@genesislcap/rapid-design-system": "{{versions.UI}}",

package/client-tmp/react/src/custom-elements.d.ts

@@ -8,6 +8,7 @@ declare module "react/jsx-runtime" {
       'rapid-design-system-provider': CustomElement;
       'entity-management': CustomElement;
       'foundation-form': CustomElement;
+      'smart-form-modal': CustomElement;
       'rapid-grid-pro': CustomElement;
       'grid-pro-genesis-datasource': CustomElement;
       'grid-pro-column': CustomElement;

package/client-tmp/react/src/share/genesis-components.ts

@@ -1,4 +1,4 @@
-import { EntityManagement } from '@genesislcap/foundation-entity-management';
+import { EntityManagement, SmartFormModal } from '@genesislcap/foundation-entity-management';
 import { Form } from '@genesislcap/foundation-forms';
 import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
 import { getApp } from '@genesislcap/foundation-shell/app';
@@ -13,6 +13,7 @@ import { FoundationRouter } from '@genesislcap/foundation-ui';
 FoundationRouter;
 EntityManagement;
 Form;
+SmartFormModal;
 
 /**
  * registerComponents.

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

@@ -1,4 +1,5 @@
 import { getConnect } from '@genesislcap/foundation-comms';
+import { UiSchema } from '@genesislcap/foundation-forms';
 import { showNotification, showNotificationDialog } from '@genesislcap/foundation-notifications';
 
 interface ConfirmSubmit {
@@ -150,7 +151,10 @@ export const useCustomEvent =
     customEvent: CustomEventHandler,
     rowData: any,
     setFormData: (data: Record<string, any>) => void,
-    setActiveEvent: (event: CustomEventState | null) => void
+    setActiveEvent: (event: CustomEventState | null) => void,
+    setResourceName?: (name: string) => void,
+    setUiSchema?: (schema: UiSchema) => void,
+    customEventFormSchemas?: Record<string, UiSchema>
   ) =>
   async () => {
     if (customEvent.hasForm) {
@@ -162,6 +166,15 @@ export const useCustomEvent =
         event: customEvent.baseEvent,
         rowData,
       });
+      
+      if (setResourceName) {
+        setResourceName(`EVENT_${customEvent.baseEvent}`);
+      }
+      
+      if (setUiSchema && customEventFormSchemas) {
+        const uiSchema = customEventFormSchemas[customEvent.name];
+        setUiSchema(uiSchema || null);
+      }
     } else {
       if (customEvent.confirmSubmit?.state === 'enabled') {
         showCustomEventConfirmation(customEvent, () =>

package/client-tmp/web-components/src/components/components.ts

@@ -1,4 +1,4 @@
-import { EntityManagement } from '@genesislcap/foundation-entity-management';
+import { EntityManagement, SmartFormModal } from '@genesislcap/foundation-entity-management';
 import { Form } from '@genesislcap/foundation-forms';
 import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
 import { getApp } from '@genesislcap/foundation-shell/app';
@@ -16,6 +16,7 @@ FoundationRouter;
 EntityManagement;
 Form;
 NotPermittedComponent;
+SmartFormModal;
 
 /**
  * registerComponents.

package/client-tmp/web-components/src/utils/customEvents.ts

@@ -144,14 +144,12 @@ export const handleFormCustomEvent = (
   rowData: any,
   setFormData: (data: Record<string, any>) => void,
   setActiveEvent: (event: CustomEventState) => void,
-  showModal: () => void,
 ): void => {
   const defaultValues = customEvent.defaultValues || {};
   const formData = mapDefaultValues(defaultValues, rowData);
 
   setFormData(formData);
   setActiveEvent({ name: customEvent.name, event: customEvent.baseEvent, rowData });
-  showModal();
 };
 
 export const handleNonFormCustomEvent = async (

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed",
   "description": "Genesis Blank App Seed",
-  "version": "5.2.0-prerelease.15",
+  "version": "5.2.0-prerelease.16",
   "license": "Apache-2.0",
   "scripts": {
     "release": "semantic-release"