@zeedhi/teknisa-components-common 1.97.3 → 1.97.6

package/dist/tek-components-common.esm.js

@@ -1455,6 +1455,22 @@ class GridController {
     }
 }
 
+/**
+ * Extracts properties from an object based on a list of properties
+ * @param obj object whose properties will be extracted
+ * @param props array of strings with the properties to be extracted
+ * @returns object containing the extracted properties
+ */
+const extractProperties = (obj, props) => {
+    const result = {};
+    props.forEach((prop) => {
+        if (obj[prop] !== undefined) {
+            result[prop] = obj[prop];
+        }
+    });
+    return result;
+};
+
 const DynamicFilterOperations = {
     CONTAINS: true,
     NOT_CONTAINS: true,
@@ -2101,6 +2117,19 @@ class TekGridColumn extends GridColumnEditable {
     }
 }
 
+/**
+ * Thrown when a row has incomplete group information.
+ * Provides details about the missing groups and the problematic row.
+ */
+class IncompleteGroupsError extends Error {
+    constructor(row, missingGroups) {
+        const rowPreview = JSON.stringify(row);
+        const message = `Row groups are incomplete. Missing groups: ${missingGroups.join(', ')}.\nRow data:\n${rowPreview}`;
+        super(message);
+        this.name = 'IncompleteGroupsError';
+    }
+}
+
 /* TekGrid Class */
 class TekGrid extends GridEditable {
     /**
@@ -2524,9 +2553,10 @@ class TekGrid extends GridEditable {
             this.groups.forEach((group) => {
                 group.lastGroupHeaderRow.children.push(row);
             });
-            this.groupedData.push(Object.assign(Object.assign({}, row), { groupHeaders: this.groups
-                    .map((group) => group.lastGroupHeaderRow)
-                    .filter(Boolean) }));
+            const groupHeaders = this.groups
+                .map((group) => group.lastGroupHeaderRow)
+                .filter(Boolean);
+            this.groupedData.push(Object.assign(Object.assign({}, row), { groupHeaders }));
             this.calcSummary(row);
         });
         if (this.groupedData.length > 0) {
@@ -2582,14 +2612,14 @@ class TekGrid extends GridEditable {
             return;
         }
         for (let i = this.groups.length - 1; i >= groupIndex; i -= 1) {
-            if (this.groups[i].initialized) {
-                const groupFooterRow = Object.assign({ groupFooter: true, groupIndex: i, groupHeaders: [], groupLabel: this.groups[i].lastGroupHeaderRow.groupLabel, groupValue: this.groups[i].lastGroupHeaderRow.groupValue }, this.summaryData(this.groups[i].footer));
-                // add header for outer groups
-                for (let g = 0; g < i; g += 1) {
-                    groupFooterRow.groupHeaders.push(this.groups[g].lastGroupHeaderRow);
-                }
-                this.groupedData.push(groupFooterRow);
+            if (!this.groups[i].initialized)
+                return;
+            const groupFooterRow = Object.assign({ groupFooter: true, groupIndex: i, groupHeaders: [], groupLabel: this.groups[i].lastGroupHeaderRow.groupLabel, groupValue: this.groups[i].lastGroupHeaderRow.groupValue }, this.summaryData(this.groups[i].footer));
+            // add header for outer groups
+            for (let g = 0; g < i; g += 1) {
+                groupFooterRow.groupHeaders.push(this.groups[g].lastGroupHeaderRow);
             }
+            this.groupedData.push(groupFooterRow);
         }
     }
     resetFooterVariables(group) {
@@ -2826,6 +2856,7 @@ class TekGrid extends GridEditable {
      */
     groupRowClick(row, event, element) {
         if (!this.preventRowClick) {
+            this.datasource.currentRow = row;
             this.callEvent('groupRowClick', {
                 event,
                 element,
@@ -2869,6 +2900,157 @@ class TekGrid extends GridEditable {
     getFilterInputs(columnName) {
         return this.gridBase.getFilterInputs(columnName);
     }
+    /**
+     * Adds new row to the datasource data and pushes it to the editedRows
+     * @param row Row
+     * @param position whether the new Row will be inserted at the beginning or end of the data array
+     */
+    addNewRow(row, position = 'end') {
+        const _super = Object.create(null, {
+            addNewRow: { get: () => super.addNewRow }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.groupColumns.length) {
+                yield _super.addNewRow.call(this, row, position);
+                return;
+            }
+            this.insertRowInDatasource(row, position);
+            this.saveRowReference(row);
+            this.addGroupedRow(row, position);
+            this.editing = true;
+        });
+    }
+    /**
+     * Takes a row and adds it to the selected group (datasource.currentRow)
+     * @param row the new row to be added
+     * @param position the position, at the beginning of the group or at the end
+     */
+    addToSelection(row, position = 'end') {
+        const { currentRow } = this.datasource;
+        // if the currentRow is a group, use the groupRow as reference
+        const referenceRow = this.isGroupHeader(currentRow) ? currentRow.groupRow : currentRow;
+        // extract the group properties from the referenceRow to add to the new row
+        const groupProperties = extractProperties(referenceRow, this.groupColumnNames);
+        const rowWithGroups = Object.assign(Object.assign({}, row), groupProperties);
+        return this.addNewRow(rowWithGroups, position);
+    }
+    /**
+     * Adds a new row to the groupedData array
+     * @param row the new row to be added
+     * @param position the position, at the beginning of the group or at the end
+     */
+    addGroupedRow(row, position) {
+        const missingGroups = this.findMissingGroups(row);
+        if (missingGroups.length > 0) {
+            throw new IncompleteGroupsError(row, missingGroups);
+        }
+        const { index, group } = this.findLastGroupingIndex(row);
+        const groupHeaders = [...group.groupHeaders, group];
+        const newGroupedRow = Object.assign(Object.assign({}, row), { groupHeaders });
+        if (position === 'end') {
+            const childrenLength = group.children.length;
+            this.groupedData.splice(index + childrenLength + 1, 0, newGroupedRow);
+        }
+        else {
+            this.groupedData.splice(index + 1, 0, newGroupedRow);
+        }
+        groupHeaders.forEach((groupHeader) => {
+            // open all groups, making the new row visible to the user
+            groupHeader.groupOpened = true;
+            this.addRowToGroupChildren(row, groupHeader, position);
+        });
+    }
+    findMissingGroups(row) {
+        return this.groupColumnNames.filter((group) => row[group] === undefined);
+    }
+    /**
+     * Finds the last group (most internal group) where a row should be inserted
+     * @param row to be inserted
+     * @returns the index and the group where the row should be inserted
+     */
+    findLastGroupingIndex(row) {
+        const index = this.groupedData.findIndex((groupRow) => {
+            // ignore rows that are not headers or not the last grouping (most internal groping)
+            if (!this.isGroupHeader(groupRow) || !this.isLastGrouping(groupRow))
+                return false;
+            // if the new added row is not part of the group, ignore it
+            if (groupRow.groupValue !== row[groupRow.groupColumnName])
+                return false;
+            if (this.groupColumns.length === 1)
+                return true;
+            const matchHeaders = groupRow.groupHeaders.every((groupHeader) => (groupHeader.groupValue === row[groupHeader.groupColumnName]));
+            return matchHeaders;
+        });
+        if (index === -1) {
+            // No existing group found, so we create the full group hierarchy
+            return this.createGroupHierarchyForRow(row);
+        }
+        const group = this.groupedData[index];
+        return { index, group };
+    }
+    /**
+     * Creates a group hierarchy for a new row, creating intermediate groups if needed
+     * @param row to be inserted
+     * @returns the index and the group where the row should be inserted
+     */
+    createGroupHierarchyForRow(row) {
+        let groupHeaders = [];
+        let insertionIndex = this.groupedData.length; // default to end
+        this.groups.forEach((column) => {
+            const groupValue = row[column.name];
+            const existingGroupIndex = this.groupedData.findIndex((groupRow) => this.isGroupHeader(groupRow)
+                && groupRow.groupColumnName === column.name
+                && groupRow.groupValue === groupValue
+                && groupRow.groupHeaders.every((h, j) => h.groupValue === groupHeaders[j].groupValue));
+            if (existingGroupIndex !== -1) {
+                const existingGroup = this.groupedData[existingGroupIndex];
+                groupHeaders = [...existingGroup.groupHeaders, existingGroup];
+                insertionIndex = existingGroupIndex;
+                return;
+            }
+            // Create new group header
+            const newGroup = {
+                group: true,
+                groupHeader: true,
+                groupValue,
+                groupColumnName: column.name,
+                groupHeaders: [...groupHeaders],
+                children: [],
+                groupRow: row,
+                groupIndex: groupHeaders.length,
+                groupLabel: I18n.translate(column.label),
+                groupOpened: true,
+            };
+            // Insert right after last insertionIndex
+            insertionIndex += 1;
+            this.groupedData.splice(insertionIndex, 0, newGroup);
+            groupHeaders.push(newGroup);
+        });
+        const group = groupHeaders[groupHeaders.length - 1]; // the most inner group
+        return { index: insertionIndex, group };
+    }
+    /**
+     * Adds a row to the children of a group
+     */
+    addRowToGroupChildren(row, group, position) {
+        if (position === 'end') {
+            group.children.push(row);
+            return;
+        }
+        group.children.unshift(row);
+    }
+    /**
+     * Checks if a row is a group header, adding typescript type-checking
+     */
+    isGroupHeader(row) {
+        return row.groupHeader;
+    }
+    /**
+     * Checks if a row is the last grouping of the grid (the most internal grouping)
+     */
+    isLastGrouping(group) {
+        return group.groupColumnName === this.groupColumns[this.groupColumns.length - 1].name;
+    }
 }
 
 class TekGridColumnsButtonController extends IterableColumnsButtonController {

package/dist/tek-components-common.umd.js

@@ -1459,6 +1459,22 @@
       }
   }
 
+  /**
+   * Extracts properties from an object based on a list of properties
+   * @param obj object whose properties will be extracted
+   * @param props array of strings with the properties to be extracted
+   * @returns object containing the extracted properties
+   */
+  const extractProperties = (obj, props) => {
+      const result = {};
+      props.forEach((prop) => {
+          if (obj[prop] !== undefined) {
+              result[prop] = obj[prop];
+          }
+      });
+      return result;
+  };
+
   const DynamicFilterOperations = {
       CONTAINS: true,
       NOT_CONTAINS: true,
@@ -2105,6 +2121,19 @@
       }
   }
 
+  /**
+   * Thrown when a row has incomplete group information.
+   * Provides details about the missing groups and the problematic row.
+   */
+  class IncompleteGroupsError extends Error {
+      constructor(row, missingGroups) {
+          const rowPreview = JSON.stringify(row);
+          const message = `Row groups are incomplete. Missing groups: ${missingGroups.join(', ')}.\nRow data:\n${rowPreview}`;
+          super(message);
+          this.name = 'IncompleteGroupsError';
+      }
+  }
+
   /* TekGrid Class */
   class TekGrid extends common.GridEditable {
       /**
@@ -2528,9 +2557,10 @@
               this.groups.forEach((group) => {
                   group.lastGroupHeaderRow.children.push(row);
               });
-              this.groupedData.push(Object.assign(Object.assign({}, row), { groupHeaders: this.groups
-                      .map((group) => group.lastGroupHeaderRow)
-                      .filter(Boolean) }));
+              const groupHeaders = this.groups
+                  .map((group) => group.lastGroupHeaderRow)
+                  .filter(Boolean);
+              this.groupedData.push(Object.assign(Object.assign({}, row), { groupHeaders }));
               this.calcSummary(row);
           });
           if (this.groupedData.length > 0) {
@@ -2586,14 +2616,14 @@
               return;
           }
           for (let i = this.groups.length - 1; i >= groupIndex; i -= 1) {
-              if (this.groups[i].initialized) {
-                  const groupFooterRow = Object.assign({ groupFooter: true, groupIndex: i, groupHeaders: [], groupLabel: this.groups[i].lastGroupHeaderRow.groupLabel, groupValue: this.groups[i].lastGroupHeaderRow.groupValue }, this.summaryData(this.groups[i].footer));
-                  // add header for outer groups
-                  for (let g = 0; g < i; g += 1) {
-                      groupFooterRow.groupHeaders.push(this.groups[g].lastGroupHeaderRow);
-                  }
-                  this.groupedData.push(groupFooterRow);
+              if (!this.groups[i].initialized)
+                  return;
+              const groupFooterRow = Object.assign({ groupFooter: true, groupIndex: i, groupHeaders: [], groupLabel: this.groups[i].lastGroupHeaderRow.groupLabel, groupValue: this.groups[i].lastGroupHeaderRow.groupValue }, this.summaryData(this.groups[i].footer));
+              // add header for outer groups
+              for (let g = 0; g < i; g += 1) {
+                  groupFooterRow.groupHeaders.push(this.groups[g].lastGroupHeaderRow);
               }
+              this.groupedData.push(groupFooterRow);
           }
       }
       resetFooterVariables(group) {
@@ -2830,6 +2860,7 @@
        */
       groupRowClick(row, event, element) {
           if (!this.preventRowClick) {
+              this.datasource.currentRow = row;
               this.callEvent('groupRowClick', {
                   event,
                   element,
@@ -2873,6 +2904,157 @@
       getFilterInputs(columnName) {
           return this.gridBase.getFilterInputs(columnName);
       }
+      /**
+       * Adds new row to the datasource data and pushes it to the editedRows
+       * @param row Row
+       * @param position whether the new Row will be inserted at the beginning or end of the data array
+       */
+      addNewRow(row, position = 'end') {
+          const _super = Object.create(null, {
+              addNewRow: { get: () => super.addNewRow }
+          });
+          return __awaiter(this, void 0, void 0, function* () {
+              if (!this.groupColumns.length) {
+                  yield _super.addNewRow.call(this, row, position);
+                  return;
+              }
+              this.insertRowInDatasource(row, position);
+              this.saveRowReference(row);
+              this.addGroupedRow(row, position);
+              this.editing = true;
+          });
+      }
+      /**
+       * Takes a row and adds it to the selected group (datasource.currentRow)
+       * @param row the new row to be added
+       * @param position the position, at the beginning of the group or at the end
+       */
+      addToSelection(row, position = 'end') {
+          const { currentRow } = this.datasource;
+          // if the currentRow is a group, use the groupRow as reference
+          const referenceRow = this.isGroupHeader(currentRow) ? currentRow.groupRow : currentRow;
+          // extract the group properties from the referenceRow to add to the new row
+          const groupProperties = extractProperties(referenceRow, this.groupColumnNames);
+          const rowWithGroups = Object.assign(Object.assign({}, row), groupProperties);
+          return this.addNewRow(rowWithGroups, position);
+      }
+      /**
+       * Adds a new row to the groupedData array
+       * @param row the new row to be added
+       * @param position the position, at the beginning of the group or at the end
+       */
+      addGroupedRow(row, position) {
+          const missingGroups = this.findMissingGroups(row);
+          if (missingGroups.length > 0) {
+              throw new IncompleteGroupsError(row, missingGroups);
+          }
+          const { index, group } = this.findLastGroupingIndex(row);
+          const groupHeaders = [...group.groupHeaders, group];
+          const newGroupedRow = Object.assign(Object.assign({}, row), { groupHeaders });
+          if (position === 'end') {
+              const childrenLength = group.children.length;
+              this.groupedData.splice(index + childrenLength + 1, 0, newGroupedRow);
+          }
+          else {
+              this.groupedData.splice(index + 1, 0, newGroupedRow);
+          }
+          groupHeaders.forEach((groupHeader) => {
+              // open all groups, making the new row visible to the user
+              groupHeader.groupOpened = true;
+              this.addRowToGroupChildren(row, groupHeader, position);
+          });
+      }
+      findMissingGroups(row) {
+          return this.groupColumnNames.filter((group) => row[group] === undefined);
+      }
+      /**
+       * Finds the last group (most internal group) where a row should be inserted
+       * @param row to be inserted
+       * @returns the index and the group where the row should be inserted
+       */
+      findLastGroupingIndex(row) {
+          const index = this.groupedData.findIndex((groupRow) => {
+              // ignore rows that are not headers or not the last grouping (most internal groping)
+              if (!this.isGroupHeader(groupRow) || !this.isLastGrouping(groupRow))
+                  return false;
+              // if the new added row is not part of the group, ignore it
+              if (groupRow.groupValue !== row[groupRow.groupColumnName])
+                  return false;
+              if (this.groupColumns.length === 1)
+                  return true;
+              const matchHeaders = groupRow.groupHeaders.every((groupHeader) => (groupHeader.groupValue === row[groupHeader.groupColumnName]));
+              return matchHeaders;
+          });
+          if (index === -1) {
+              // No existing group found, so we create the full group hierarchy
+              return this.createGroupHierarchyForRow(row);
+          }
+          const group = this.groupedData[index];
+          return { index, group };
+      }
+      /**
+       * Creates a group hierarchy for a new row, creating intermediate groups if needed
+       * @param row to be inserted
+       * @returns the index and the group where the row should be inserted
+       */
+      createGroupHierarchyForRow(row) {
+          let groupHeaders = [];
+          let insertionIndex = this.groupedData.length; // default to end
+          this.groups.forEach((column) => {
+              const groupValue = row[column.name];
+              const existingGroupIndex = this.groupedData.findIndex((groupRow) => this.isGroupHeader(groupRow)
+                  && groupRow.groupColumnName === column.name
+                  && groupRow.groupValue === groupValue
+                  && groupRow.groupHeaders.every((h, j) => h.groupValue === groupHeaders[j].groupValue));
+              if (existingGroupIndex !== -1) {
+                  const existingGroup = this.groupedData[existingGroupIndex];
+                  groupHeaders = [...existingGroup.groupHeaders, existingGroup];
+                  insertionIndex = existingGroupIndex;
+                  return;
+              }
+              // Create new group header
+              const newGroup = {
+                  group: true,
+                  groupHeader: true,
+                  groupValue,
+                  groupColumnName: column.name,
+                  groupHeaders: [...groupHeaders],
+                  children: [],
+                  groupRow: row,
+                  groupIndex: groupHeaders.length,
+                  groupLabel: core.I18n.translate(column.label),
+                  groupOpened: true,
+              };
+              // Insert right after last insertionIndex
+              insertionIndex += 1;
+              this.groupedData.splice(insertionIndex, 0, newGroup);
+              groupHeaders.push(newGroup);
+          });
+          const group = groupHeaders[groupHeaders.length - 1]; // the most inner group
+          return { index: insertionIndex, group };
+      }
+      /**
+       * Adds a row to the children of a group
+       */
+      addRowToGroupChildren(row, group, position) {
+          if (position === 'end') {
+              group.children.push(row);
+              return;
+          }
+          group.children.unshift(row);
+      }
+      /**
+       * Checks if a row is a group header, adding typescript type-checking
+       */
+      isGroupHeader(row) {
+          return row.groupHeader;
+      }
+      /**
+       * Checks if a row is the last grouping of the grid (the most internal grouping)
+       */
+      isLastGrouping(group) {
+          return group.groupColumnName === this.groupColumns[this.groupColumns.length - 1].name;
+      }
   }
 
   class TekGridColumnsButtonController extends common.IterableColumnsButtonController {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.97.3",
+  "version": "1.97.6",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "~1.97.0"
   },
-  "gitHead": "2aea0238fb3917e862b21fd096f2851f74e44337"
+  "gitHead": "8f016098621c6cc389bb9a761fe52d8f169d07e2"
 }