@zeedhi/common 1.100.1 → 1.101.1

package/dist/zd-common.esm.js

@@ -1,4 +1,4 @@
-import { AccessorManager, Event, KeyMap, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, MethodNotAssignedError, Loader, Config, dayjs, Utils, DateHelper, Router, InstanceNotFoundError, ViewService, MemoryDatasource, URL as URL$1, Http, Cookie, VersionService } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, MethodNotAssignedError, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, Loader, Config, dayjs, Utils, DateHelper, Router, InstanceNotFoundError, ViewService, MemoryDatasource, URL as URL$1, Http, Cookie, VersionService } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
@@ -112,7 +112,7 @@ class Component {
         if (this.viewFocus) {
             return this.viewFocus();
         }
-        throw new Error('viewFocus method not assigned');
+        throw new MethodNotAssignedError('viewFocus');
     }
     /**
      * Retrieves initial value for the attribute and if it is an accessor,
@@ -1403,6 +1403,18 @@ class Carousel extends ComponentRender {
         this.nextButton = this.changeDefaultButtonName(this.nextButton);
         this.createAccessors();
     }
+    setViewUpdate(viewFn) {
+        this.viewUpdate = viewFn;
+    }
+    /**
+     * Updates the Carousel rendered elements
+     */
+    update() {
+        if (!this.viewUpdate) {
+            throw new MethodNotAssignedError('viewUpdate');
+        }
+        this.viewUpdate();
+    }
     /**
      * After the transitionDuration time, set isSliding to false
      */
@@ -1789,7 +1801,7 @@ class Form extends ComponentRender {
         if (this.viewResetValidation) {
             return this.viewResetValidation();
         }
-        throw new Error('viewResetValidation method not assigned');
+        throw new MethodNotAssignedError('viewResetValidation');
     }
 }
 
@@ -1964,7 +1976,7 @@ class Input extends ComponentRender {
         if (this.viewResetValidation) {
             return this.viewResetValidation();
         }
-        throw new Error('viewResetValidation method not assigned');
+        throw new MethodNotAssignedError('viewResetValidation');
     }
     /**
      * Adds parsed validations based on field validations.
@@ -6550,6 +6562,18 @@ class NotEditingError extends Error {
     }
 }
 
+class GridEditableController {
+    constructor(grid) {
+        this.grid = grid;
+    }
+    get hasAddedRows() {
+        return this.grid.getAddedRows().length > 0;
+    }
+    isAddedRow({ row }) {
+        return this.grid.isAdded(row);
+    }
+}
+
 /**
  * Base class for Grid component
  */
@@ -6591,12 +6615,16 @@ class GridEditable extends Grid {
             },
         };
         this.viewEnterEdit = null;
+        this.showCancelColumn = false;
         this.newRowIdentifier = '__added_row';
+        this.createGridController();
         this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
         this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
         this.editingNewRows = this.getInitValue('editingNewRows', props.editingNewRows, this.editingNewRows);
         this.singleEdit = this.getInitValue('singleEdit', props.singleEdit, this.singleEdit);
+        this.showCancelColumn = this.getInitValue('showCancelColumn', props.showCancelColumn, this.showCancelColumn);
         this.createAccessors();
+        this.addCancelColumn();
     }
     setViewEnterEdit(viewEnterEdit) {
         this.viewEnterEdit = viewEnterEdit;
@@ -6616,6 +6644,46 @@ class GridEditable extends Grid {
     getColumns(columns) {
         return columns.map((column) => new GridColumnEditable(column));
     }
+    addCancelColumn() {
+        if (!this.showCancelColumn)
+            return;
+        const deleteColumn = this.instantiateCancelColumn();
+        this.columns.push(deleteColumn);
+    }
+    getCancelColumnProps() {
+        return {
+            name: `cancel_action_${this.name}`,
+            type: 'action',
+            align: 'center',
+            actionFixed: true,
+            isVisible: `{{GridEditableController_${this.name}.hasAddedRows}}`,
+            children: [
+                {
+                    name: 'cancel_btn',
+                    component: 'ZdButton',
+                    icon: true,
+                    iconName: 'clear',
+                    small: true,
+                    conditions: {
+                        isVisible: `{{GridEditableController_${this.name}.isAddedRow}}`,
+                    },
+                    events: {
+                        click: ({ row }) => {
+                            const { uniqueKey } = this.datasource;
+                            this.cancelAddedRow(row[uniqueKey]);
+                        },
+                    },
+                },
+            ],
+        };
+    }
+    instantiateCancelColumn() {
+        return new GridColumnEditable(this.getCancelColumnProps());
+    }
+    createGridController() {
+        const controller = new GridEditableController(this);
+        Loader.addController(`GridEditableController_${this.name}`, controller);
+    }
     /**
      * Changes column order
      * @async
@@ -6846,17 +6914,24 @@ class GridEditable extends Grid {
             if (component)
                 column.checkOutValues(component, row, newRow[key]);
             this.editedRows = Object.assign(Object.assign({}, this.editedRows), newRow);
+            if (this.isAdded(row)) {
+                this.addedRows = Object.assign(Object.assign({}, this.addedRows), newRow);
+            }
         }
         else if (this.editedRows[key]) {
             const rows = Object.assign({}, this.editedRows);
-            delete rows[key][columnName];
-            delete rows[key][`${columnName}_original`];
+            const newRow = rows[key];
+            delete newRow[columnName];
+            delete newRow[`${columnName}_original`];
             if (component)
-                column.checkOutValues(component, row, rows[key]);
-            if (Object.keys(rows[key]).length === 1 && rows[key].originalRow) {
+                column.checkOutValues(component, row, newRow);
+            if (Object.keys(newRow).length === 1 && newRow.originalRow) {
                 delete rows[key];
             }
             this.editedRows = rows;
+            if (this.isAdded(row)) {
+                this.addedRows = Object.assign(Object.assign({}, this.addedRows), { [key]: newRow });
+            }
         }
     }
     updateOriginalRow(key, row) {
@@ -6874,6 +6949,14 @@ class GridEditable extends Grid {
         return this.editedRows[key]
             && this.editedRows[key][column.name] !== this.editedRows[key][`${column.name}_original`];
     }
+    /**
+     * Checks if row is an added row
+     * @param row Row
+     */
+    isAdded(row) {
+        const key = row[this.datasource.uniqueKey];
+        return !!this.addedRows[key];
+    }
     /**
      * Checks if column is valid
      * @param column Column
@@ -6911,6 +6994,27 @@ class GridEditable extends Grid {
             this.invalidComponents = {};
         });
     }
+    /**
+     * cancelAddedRow
+     */
+    cancelAddedRow(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const cloneEditedRows = Object.assign({}, this.editedRows);
+            const cloneAddedRows = Object.assign({}, this.addedRows);
+            delete cloneEditedRows[key];
+            delete cloneAddedRows[key];
+            this.editedRows = cloneEditedRows;
+            this.addedRows = cloneAddedRows;
+            let { data } = this.datasource;
+            if (this.datasource instanceof MemoryDatasource) {
+                data = this.datasource.allData;
+            }
+            const { uniqueKey } = this.datasource;
+            const index = data.findIndex((row) => row[uniqueKey] === key);
+            data.splice(index, 1);
+            return this.datasource.updateData(data);
+        });
+    }
     cancelAddedRows() {
         return __awaiter(this, void 0, void 0, function* () {
             const { data } = this.datasource;
@@ -6973,6 +7077,24 @@ class GridEditable extends Grid {
         });
         return editedRows;
     }
+    /**
+     * getAddedRows
+     */
+    getAddedRows() {
+        const addedRows = [];
+        Object.keys(this.addedRows).forEach((key) => {
+            const row = Object.assign(Object.assign({}, this.addedRows[key].originalRow), this.addedRows[key]);
+            delete row.originalRow;
+            delete row[this.newRowIdentifier];
+            Object.keys(row).forEach((attr) => {
+                if (Object.prototype.hasOwnProperty.call(row, `${attr}_original`)) {
+                    delete row[`${attr}_original`];
+                }
+            });
+            addedRows.push(row);
+        });
+        return addedRows;
+    }
     /**
      * Checks whether the grid is valid or not
      * @param revalidate Defines if the fields should be revalidated
@@ -7049,12 +7171,12 @@ class GridEditable extends Grid {
             else {
                 data.push(row);
             }
-            yield this.datasource.updateData(data);
             const id = row[this.datasource.uniqueKey];
             if (id) {
                 this.editedRows = Object.assign(Object.assign({}, this.editedRows), { [id]: Object.assign({}, row) });
                 this.addedRows = Object.assign(Object.assign({}, this.addedRows), { [id]: Object.assign({}, row) });
             }
+            yield this.datasource.updateData(data);
             this.editing = true;
         });
     }
@@ -7163,7 +7285,7 @@ class GridEditable extends Grid {
      */
     enterEdit(rowKey, columnName) {
         if (!this.viewEnterEdit) {
-            throw new Error('viewEnterEdit method not assigned');
+            throw new MethodNotAssignedError('viewEnterEdit');
         }
         this.viewEnterEdit(rowKey, columnName);
     }
@@ -11398,6 +11520,18 @@ class Modal extends Component {
         this.isVisible = false;
         ViewService.nextTick(() => this.callEvent('onHide', { component: this }));
     }
+    /**
+     * transitionStart event
+     */
+    transitionStart(event) {
+        this.callEvent('onTransitionStart', { event, component: this });
+    }
+    /**
+     * transitionEnd event
+     */
+    transitionEnd(event) {
+        this.callEvent('onTransitionEnd', { event, component: this });
+    }
 }
 
 /**
@@ -15107,7 +15241,7 @@ class TreeGridEditable extends TreeGrid {
      */
     enterEdit(rowKey, columnName) {
         if (!this.viewEnterEdit) {
-            throw new Error('viewEnterEdit method not assigned');
+            throw new MethodNotAssignedError('viewEnterEdit');
         }
         this.viewEnterEdit(rowKey, columnName);
     }

package/dist/zd-common.umd.js

@@ -119,7 +119,7 @@
           if (this.viewFocus) {
               return this.viewFocus();
           }
-          throw new Error('viewFocus method not assigned');
+          throw new core.MethodNotAssignedError('viewFocus');
       }
       /**
        * Retrieves initial value for the attribute and if it is an accessor,
@@ -1410,6 +1410,18 @@
           this.nextButton = this.changeDefaultButtonName(this.nextButton);
           this.createAccessors();
       }
+      setViewUpdate(viewFn) {
+          this.viewUpdate = viewFn;
+      }
+      /**
+       * Updates the Carousel rendered elements
+       */
+      update() {
+          if (!this.viewUpdate) {
+              throw new core.MethodNotAssignedError('viewUpdate');
+          }
+          this.viewUpdate();
+      }
       /**
        * After the transitionDuration time, set isSliding to false
        */
@@ -1796,7 +1808,7 @@
           if (this.viewResetValidation) {
               return this.viewResetValidation();
           }
-          throw new Error('viewResetValidation method not assigned');
+          throw new core.MethodNotAssignedError('viewResetValidation');
       }
   }
 
@@ -1971,7 +1983,7 @@
           if (this.viewResetValidation) {
               return this.viewResetValidation();
           }
-          throw new Error('viewResetValidation method not assigned');
+          throw new core.MethodNotAssignedError('viewResetValidation');
       }
       /**
        * Adds parsed validations based on field validations.
@@ -6557,6 +6569,18 @@
       }
   }
 
+  class GridEditableController {
+      constructor(grid) {
+          this.grid = grid;
+      }
+      get hasAddedRows() {
+          return this.grid.getAddedRows().length > 0;
+      }
+      isAddedRow({ row }) {
+          return this.grid.isAdded(row);
+      }
+  }
+
   /**
    * Base class for Grid component
    */
@@ -6598,12 +6622,16 @@
               },
           };
           this.viewEnterEdit = null;
+          this.showCancelColumn = false;
           this.newRowIdentifier = '__added_row';
+          this.createGridController();
           this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
           this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
           this.editingNewRows = this.getInitValue('editingNewRows', props.editingNewRows, this.editingNewRows);
           this.singleEdit = this.getInitValue('singleEdit', props.singleEdit, this.singleEdit);
+          this.showCancelColumn = this.getInitValue('showCancelColumn', props.showCancelColumn, this.showCancelColumn);
           this.createAccessors();
+          this.addCancelColumn();
       }
       setViewEnterEdit(viewEnterEdit) {
           this.viewEnterEdit = viewEnterEdit;
@@ -6623,6 +6651,46 @@
       getColumns(columns) {
           return columns.map((column) => new GridColumnEditable(column));
       }
+      addCancelColumn() {
+          if (!this.showCancelColumn)
+              return;
+          const deleteColumn = this.instantiateCancelColumn();
+          this.columns.push(deleteColumn);
+      }
+      getCancelColumnProps() {
+          return {
+              name: `cancel_action_${this.name}`,
+              type: 'action',
+              align: 'center',
+              actionFixed: true,
+              isVisible: `{{GridEditableController_${this.name}.hasAddedRows}}`,
+              children: [
+                  {
+                      name: 'cancel_btn',
+                      component: 'ZdButton',
+                      icon: true,
+                      iconName: 'clear',
+                      small: true,
+                      conditions: {
+                          isVisible: `{{GridEditableController_${this.name}.isAddedRow}}`,
+                      },
+                      events: {
+                          click: ({ row }) => {
+                              const { uniqueKey } = this.datasource;
+                              this.cancelAddedRow(row[uniqueKey]);
+                          },
+                      },
+                  },
+              ],
+          };
+      }
+      instantiateCancelColumn() {
+          return new GridColumnEditable(this.getCancelColumnProps());
+      }
+      createGridController() {
+          const controller = new GridEditableController(this);
+          core.Loader.addController(`GridEditableController_${this.name}`, controller);
+      }
       /**
        * Changes column order
        * @async
@@ -6853,17 +6921,24 @@
               if (component)
                   column.checkOutValues(component, row, newRow[key]);
               this.editedRows = Object.assign(Object.assign({}, this.editedRows), newRow);
+              if (this.isAdded(row)) {
+                  this.addedRows = Object.assign(Object.assign({}, this.addedRows), newRow);
+              }
           }
           else if (this.editedRows[key]) {
               const rows = Object.assign({}, this.editedRows);
-              delete rows[key][columnName];
-              delete rows[key][`${columnName}_original`];
+              const newRow = rows[key];
+              delete newRow[columnName];
+              delete newRow[`${columnName}_original`];
               if (component)
-                  column.checkOutValues(component, row, rows[key]);
-              if (Object.keys(rows[key]).length === 1 && rows[key].originalRow) {
+                  column.checkOutValues(component, row, newRow);
+              if (Object.keys(newRow).length === 1 && newRow.originalRow) {
                   delete rows[key];
               }
               this.editedRows = rows;
+              if (this.isAdded(row)) {
+                  this.addedRows = Object.assign(Object.assign({}, this.addedRows), { [key]: newRow });
+              }
           }
       }
       updateOriginalRow(key, row) {
@@ -6881,6 +6956,14 @@
           return this.editedRows[key]
               && this.editedRows[key][column.name] !== this.editedRows[key][`${column.name}_original`];
       }
+      /**
+       * Checks if row is an added row
+       * @param row Row
+       */
+      isAdded(row) {
+          const key = row[this.datasource.uniqueKey];
+          return !!this.addedRows[key];
+      }
       /**
        * Checks if column is valid
        * @param column Column
@@ -6918,6 +7001,27 @@
               this.invalidComponents = {};
           });
       }
+      /**
+       * cancelAddedRow
+       */
+      cancelAddedRow(key) {
+          return __awaiter(this, void 0, void 0, function* () {
+              const cloneEditedRows = Object.assign({}, this.editedRows);
+              const cloneAddedRows = Object.assign({}, this.addedRows);
+              delete cloneEditedRows[key];
+              delete cloneAddedRows[key];
+              this.editedRows = cloneEditedRows;
+              this.addedRows = cloneAddedRows;
+              let { data } = this.datasource;
+              if (this.datasource instanceof core.MemoryDatasource) {
+                  data = this.datasource.allData;
+              }
+              const { uniqueKey } = this.datasource;
+              const index = data.findIndex((row) => row[uniqueKey] === key);
+              data.splice(index, 1);
+              return this.datasource.updateData(data);
+          });
+      }
       cancelAddedRows() {
           return __awaiter(this, void 0, void 0, function* () {
               const { data } = this.datasource;
@@ -6980,6 +7084,24 @@
           });
           return editedRows;
       }
+      /**
+       * getAddedRows
+       */
+      getAddedRows() {
+          const addedRows = [];
+          Object.keys(this.addedRows).forEach((key) => {
+              const row = Object.assign(Object.assign({}, this.addedRows[key].originalRow), this.addedRows[key]);
+              delete row.originalRow;
+              delete row[this.newRowIdentifier];
+              Object.keys(row).forEach((attr) => {
+                  if (Object.prototype.hasOwnProperty.call(row, `${attr}_original`)) {
+                      delete row[`${attr}_original`];
+                  }
+              });
+              addedRows.push(row);
+          });
+          return addedRows;
+      }
       /**
        * Checks whether the grid is valid or not
        * @param revalidate Defines if the fields should be revalidated
@@ -7056,12 +7178,12 @@
               else {
                   data.push(row);
               }
-              yield this.datasource.updateData(data);
               const id = row[this.datasource.uniqueKey];
               if (id) {
                   this.editedRows = Object.assign(Object.assign({}, this.editedRows), { [id]: Object.assign({}, row) });
                   this.addedRows = Object.assign(Object.assign({}, this.addedRows), { [id]: Object.assign({}, row) });
               }
+              yield this.datasource.updateData(data);
               this.editing = true;
           });
       }
@@ -7170,7 +7292,7 @@
        */
       enterEdit(rowKey, columnName) {
           if (!this.viewEnterEdit) {
-              throw new Error('viewEnterEdit method not assigned');
+              throw new core.MethodNotAssignedError('viewEnterEdit');
           }
           this.viewEnterEdit(rowKey, columnName);
       }
@@ -11405,6 +11527,18 @@
           this.isVisible = false;
           core.ViewService.nextTick(() => this.callEvent('onHide', { component: this }));
       }
+      /**
+       * transitionStart event
+       */
+      transitionStart(event) {
+          this.callEvent('onTransitionStart', { event, component: this });
+      }
+      /**
+       * transitionEnd event
+       */
+      transitionEnd(event) {
+          this.callEvent('onTransitionEnd', { event, component: this });
+      }
   }
 
   /**
@@ -15114,7 +15248,7 @@
        */
       enterEdit(rowKey, columnName) {
           if (!this.viewEnterEdit) {
-              throw new Error('viewEnterEdit method not assigned');
+              throw new core.MethodNotAssignedError('viewEnterEdit');
           }
           this.viewEnterEdit(rowKey, columnName);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.100.1",
+  "version": "1.101.1",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "1209ae3b06d2feb2b969f42ec7100f68ac8c55e0"
+  "gitHead": "0be8c3b7cc1d63fb550afcbc41e8ab97599a7333"
 }

package/types/components/zd-carousel/carousel.d.ts

@@ -131,11 +131,17 @@ export declare class Carousel extends ComponentRender implements ICarousel {
      * Carousel's left side button
      */
     prevButton: IButton;
+    viewUpdate?: () => void;
     /**
      * Creates a new Carousel
      * @param props Carousel properties
      */
     constructor(props: ICarousel);
+    setViewUpdate(viewFn: () => void): void;
+    /**
+     * Updates the Carousel rendered elements
+     */
+    update(): void;
     /**
      * After the transitionDuration time, set isSliding to false
      */

package/types/components/zd-grid/grid-editable-controller.d.ts

@@ -0,0 +1,8 @@
+import { IDictionary } from '@zeedhi/core';
+import { GridEditable } from './grid-editable';
+export declare class GridEditableController {
+    private grid;
+    constructor(grid: GridEditable);
+    get hasAddedRows(): boolean;
+    isAddedRow({ row }: IDictionary): boolean;
+}

package/types/components/zd-grid/grid-editable.d.ts

@@ -47,6 +47,7 @@ export declare class GridEditable extends Grid implements IGridEditable {
     protected cancelEditedRowsKeyMapping: IKeyMap;
     protected viewEnterEdit: ((rowKey: string, columnName: string) => void) | null;
     setViewEnterEdit(viewEnterEdit: (rowKey: string, columnName: string) => void): void;
+    showCancelColumn: boolean;
     constructor(props: IGridEditable);
     onMounted(element: any): void;
     onBeforeDestroy(): void;
@@ -55,6 +56,10 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param columns Grid columns parameter
      */
     protected getColumns(columns: IGridColumnEditable[]): GridColumnEditable[];
+    protected addCancelColumn(): void;
+    protected getCancelColumnProps(): IGridColumnEditable;
+    protected instantiateCancelColumn(): GridColumnEditable;
+    protected createGridController(): void;
     /**
      * Changes column order
      * @async
@@ -147,6 +152,11 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param row Row
      */
     isEdited(column: IGridColumnEditable, row: IDictionary): boolean;
+    /**
+     * Checks if row is an added row
+     * @param row Row
+     */
+    isAdded(row: IDictionary): boolean;
     /**
      * Checks if column is valid
      * @param column Column
@@ -158,6 +168,10 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * Cancels all edited rows and enable grid components
      */
     cancelEditedRows(): Promise<void>;
+    /**
+     * cancelAddedRow
+     */
+    cancelAddedRow(key: string | number): Promise<any>;
     private cancelAddedRows;
     private addDataRow;
     /**
@@ -172,6 +186,10 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @throws Will throw when it finds an invalid row
      */
     getEditedRows(revalidate?: boolean, silent?: boolean): IDictionary<any>[];
+    /**
+     * getAddedRows
+     */
+    getAddedRows(): IDictionary<any>[];
     /**
      * Checks whether the grid is valid or not
      * @param revalidate Defines if the fields should be revalidated

package/types/components/zd-grid/interfaces.d.ts

@@ -70,4 +70,5 @@ export interface IGridEditable extends IGrid {
         row: IDictionary<any>;
         component: GridEditable;
     }) => boolean;
+    showCancelColumn?: boolean;
 }

package/types/components/zd-modal/interfaces.d.ts

@@ -6,6 +6,8 @@ export declare type IModalEvent = IEventParam<Modal>;
 export interface IModalEvents<T = IEventParam<any>> extends IComponentEvents<T> {
     onShow?: EventDef<T>;
     onHide?: EventDef<T>;
+    onTransitionStart?: EventDef<T>;
+    onTransitionEnd?: EventDef<T>;
 }
 export interface IModalGrid {
     cols?: number | string;

package/types/components/zd-modal/modal.d.ts

@@ -50,4 +50,12 @@ export declare class Modal extends Component implements IModal {
      * Closes modal
      */
     hide(): void;
+    /**
+     * transitionStart event
+     */
+    transitionStart(event: Event): void;
+    /**
+     * transitionEnd event
+     */
+    transitionEnd(event: Event): void;
 }