feat(editors): add onBeforeOpen optional callback to Composite Edit…

…or (#306)

packages/common/src/interfaces/compositeEditorOpenDetailOption.interface.ts

@@ -83,6 +83,9 @@ export interface CompositeEditorOpenDetailOption {
    */
   viewColumnLayout?: 1 | 2 | 3 | 'auto';
 
+  /** onBeforeOpen callback allows the user to optionally execute something before opening the modal (for example cancel any batch edits, or change/reset some validations in column definitions) */
+  onBeforeOpen?: () => void;
+
   /**
    * onClose callback allows user to add a confirm dialog or any other code before closing the modal window, returning false will cancel the modal closing.
    * NOTE: this won't be called when there's no changes done in the form.
@@ -103,7 +106,7 @@ export interface CompositeEditorOpenDetailOption {
     /** current selection of row indexes & data context Ids */
     selection: CompositeEditorSelection,
 
-    /** optional item data context that is returned only when the modal type is clone/create/edit */
+    /** optional item data context that is returned, this is only provided when the modal type is (clone, create or edit) */
     dataContext?: any
   ) => Promise<boolean>;
 }

packages/composite-editor-component/src/slick-composite-editor.component.spec.ts

@@ -485,6 +485,22 @@ describe('CompositeEditorService', () => {
       expect(compositeContainerElm2).toBeFalsy();
     });
 
+    it('should execute "onBeforeOpen" callback before opening the composite modal window', () => {
+      const mockProduct = { id: 222, address: { zip: 123456 }, product: { name: 'Product ABC', price: 12.55 } };
+      jest.spyOn(gridStub, 'getDataItem').mockReturnValue(mockProduct);
+      const mockOnBeforeCallback = jest.fn();
+
+      component = new SlickCompositeEditorComponent();
+      component.init(gridStub, container);
+      component.openDetails({ headerTitle: 'Details', onBeforeOpen: mockOnBeforeCallback });
+      const compositeContainerElm = document.querySelector('div.slick-editor-modal.slickgrid_123456') as HTMLSelectElement;
+
+      expect(mockOnBeforeCallback).toHaveBeenCalled();
+      expect(component).toBeTruthy();
+      expect(component.constructor).toBeDefined();
+      expect(compositeContainerElm).toBeTruthy();
+    });
+
     it('should execute "onClose" callback when user confirms the closing of the modal when "onClose" callback is defined', (done) => {
       const mockProduct = { id: 222, address: { zip: 123456 }, productName: 'Product ABC', price: 12.55 };
       jest.spyOn(gridStub, 'getDataItem').mockReturnValue(mockProduct);

packages/composite-editor-component/src/slick-composite-editor.component.ts

@@ -272,6 +272,11 @@ export class SlickCompositeEditorComponent implements ExternalResource {
       const gridUid = this.grid.getUID() || '';
       let headerTitle = options.headerTitle || '';
 
+      // execute callback before creating the modal window (that is in short the first event in the lifecycle)
+      if (typeof this._options.onBeforeOpen === 'function') {
+        this._options.onBeforeOpen();
+      }
+
       if (this.hasRowSelectionEnabled() && this._options.modalType === 'auto-mass' && this.grid.getSelectedRows) {
         const selectedRowsIndexes = this.grid.getSelectedRows() || [];
         if (selectedRowsIndexes.length > 0) {
@@ -551,7 +556,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
 
   /** Show a Validation Summary text (as a <div>) when a validation fails or simply hide it when there's no error */
   showValidationSummaryText(isShowing: boolean, errorMsg = '') {
-    if (isShowing) {
+    if (isShowing && errorMsg !== '') {
       this._modalBodyTopValidationElm.textContent = errorMsg;
       this._modalBodyTopValidationElm.style.display = 'block';
       this._modalBodyTopValidationElm.scrollIntoView?.();