fix(editors): Editors should work with undefined item properties (#25)

* fix(editors): Editors should work with undefined item properties

* fix(footer): text are not displayed properly when the grid is empty

README.md

@@ -159,4 +159,3 @@ yarn run test:watch
 - [ ] Check why `DOM Purify` doesn't work in SF
 - [ ] Search for any left "todo" in the entire solution
 - [ ] The Pagination/Footer width is a little off sometime compare to the width of the grid container
-- [ ] Check why we need to click twice on a Date Editor to get date picker to open when the date is initially empty

packages/common/src/editors/autoCompleteEditor.ts

@@ -171,7 +171,7 @@ export class AutoCompleteEditor implements Editor {
       // is the field a complex object, "address.streetNumber"
       const isComplexObject = fieldName.indexOf('.') > 0;
 
-      if (item && this.columnDef && (item.hasOwnProperty(fieldName) || isComplexObject)) {
+      if (item && fieldName !== undefined) {
         const data = (isComplexObject) ? getDescendantProperty(item, fieldName) : item[fieldName];
         this._currentValue = data;
         this._defaultTextValue = typeof data === 'string' ? data : data[this.labelName];

packages/common/src/editors/checkboxEditor.ts

@@ -116,7 +116,7 @@ export class CheckboxEditor implements Editor {
       // is the field a complex object, "address.streetNumber"
       const isComplexObject = fieldName.indexOf('.') > 0;
 
-      if (item && this.columnDef && (item.hasOwnProperty(fieldName) || isComplexObject)) {
+      if (item && fieldName !== undefined) {
         const value = (isComplexObject) ? getDescendantProperty(item, fieldName) : item[fieldName];
         this.originalValue = value;
         if (this.originalValue) {

packages/common/src/editors/dateEditor.ts

@@ -212,7 +212,7 @@ export class DateEditor implements Editor {
       // is the field a complex object, "address.streetNumber"
       const isComplexObject = fieldName.indexOf('.') > 0;
 
-      if (item && this.columnDef && (item.hasOwnProperty(fieldName) || isComplexObject)) {
+      if (item && fieldName !== undefined) {
         const value = (isComplexObject) ? getDescendantProperty(item, fieldName) : item[fieldName];
         this.originalDate = value;
         this.flatInstance.setDate(value);

packages/common/src/editors/dualInputEditor.ts

@@ -260,7 +260,7 @@ export class DualInputEditor implements Editor {
     const inputVarPosition = (position === 'leftInput') ? '_leftInput' : '_rightInput';
     const isComplexObject = fieldName && fieldName.indexOf('.') > 0;
 
-    if (item && fieldName !== undefined && this.columnDef && (item.hasOwnProperty(fieldName) || isComplexObject)) {
+    if (item && fieldName !== undefined) {
       const itemValue = (isComplexObject) ? getDescendantProperty(item, fieldName) : (item.hasOwnProperty(fieldName) ? item[fieldName] : '');
       this[originalValuePosition] = itemValue;
       if (this.editorParams[position].type === 'float') {

packages/common/src/editors/floatEditor.ts

@@ -162,7 +162,7 @@ export class FloatEditor implements Editor {
       // is the field a complex object, "address.streetNumber"
       const isComplexObject = fieldName.indexOf('.') > 0;
 
-      if (item && this.columnDef && (item.hasOwnProperty(fieldName) || isComplexObject)) {
+      if (item && fieldName !== undefined) {
         const value = (isComplexObject) ? getDescendantProperty(item, fieldName) : item[fieldName];
         this.originalValue = value;
         const decPlaces = this.getDecimalPlaces();

packages/common/src/editors/integerEditor.ts

@@ -139,7 +139,7 @@ export class IntegerEditor implements Editor {
       // is the field a complex object, "address.streetNumber"
       const isComplexObject = fieldName.indexOf('.') > 0;
 
-      if (item && this.columnDef && (item.hasOwnProperty(fieldName) || isComplexObject)) {
+      if (item && fieldName !== undefined) {
         const value = (isComplexObject) ? getDescendantProperty(item, fieldName) : item[fieldName];
         this.originalValue = (isNaN(value) || value === null || value === undefined) ? value : `${value}`;
         this._input.value = `${this.originalValue}`;

packages/common/src/editors/longTextEditor.ts

@@ -171,7 +171,7 @@ export class LongTextEditor implements Editor {
       // is the field a complex object, "address.streetNumber"
       const isComplexObject = fieldName.indexOf('.') > 0;
 
-      if (item && fieldName !== undefined && this.columnDef && (item.hasOwnProperty(fieldName) || isComplexObject)) {
+      if (item && fieldName !== undefined) {
         const value = (isComplexObject) ? getDescendantProperty(item, fieldName) : item[fieldName];
         this.defaultValue = value;
         this._$textarea.val(this.defaultValue);

packages/common/src/editors/selectEditor.ts

@@ -361,7 +361,7 @@ export class SelectEditor implements Editor {
     // is the field a complex object, "address.streetNumber"
     const isComplexObject = fieldName !== undefined && fieldName.indexOf('.') > 0;
 
-    if (item && this.columnDef && fieldName !== undefined && (item.hasOwnProperty(fieldName) || isComplexObject)) {
+    if (item && fieldName !== undefined) {
       // when it's a complex object, user could override the object path (where the editable object is located)
       // else we use the path provided in the Field Column Definition
       const objectPath = this.columnEditor && this.columnEditor.complexObjectPath || fieldName;

packages/common/src/editors/sliderEditor.ts

@@ -146,7 +146,7 @@ export class SliderEditor implements Editor {
     // is the field a complex object, "address.streetNumber"
     const isComplexObject = fieldName && fieldName.indexOf('.') > 0;
 
-    if (item && fieldName && this.columnDef && (item.hasOwnProperty(fieldName) || isComplexObject)) {
+    if (item && fieldName !== undefined) {
       let value = (isComplexObject) ? getDescendantProperty(item, fieldName) : (item.hasOwnProperty(fieldName) && item[fieldName]);
       if (value === '' || value === null || value === undefined) {
         value = this.defaultValue; // load default value when item doesn't have any value

packages/common/src/editors/textEditor.ts

@@ -133,7 +133,7 @@ export class TextEditor implements Editor {
     // is the field a complex object, "address.streetNumber"
     const isComplexObject = fieldName && fieldName.indexOf('.') > 0;
 
-    if (item && fieldName !== undefined && this.columnDef && (item.hasOwnProperty(fieldName) || isComplexObject)) {
+    if (item && fieldName !== undefined) {
       const value = (isComplexObject) ? getDescendantProperty(item, fieldName) : (item.hasOwnProperty(fieldName) && item[fieldName] || '');
       this.originalValue = value;
       this._input.value = this.originalValue;

packages/vanilla-bundle/src/components/slick-footer.ts

@@ -124,7 +124,7 @@ export class SlickFooterComponent {
 
     const itemCountElm = document.createElement('span');
     itemCountElm.className = 'item-count';
-    itemCountElm.textContent = `${this.metrics?.itemCount ?? ''}`;
+    itemCountElm.textContent = `${this.metrics?.itemCount ?? '0'}`;
 
     // last update elements
     rightFooterElm.appendChild(lastUpdateElm);
@@ -133,18 +133,18 @@ export class SlickFooterComponent {
     // total count element (unless hidden)
     if (!this.customFooterOptions.hideTotalItemCount) {
       const textOfElm = document.createElement('span');
-      textOfElm.textContent = ` ${this.customFooterOptions.metricTexts?.of ?? ''} `;
+      textOfElm.textContent = ` ${this.customFooterOptions.metricTexts?.of ?? 'of'} `;
       rightFooterElm.appendChild(textOfElm);
 
       const totalCountElm = document.createElement('span');
       totalCountElm.className = 'total-count';
-      totalCountElm.textContent = `${this.metrics?.totalItemCount ?? ''} items`;
+      totalCountElm.textContent = `${this.metrics?.totalItemCount ?? '0'}`;
 
       rightFooterElm.appendChild(totalCountElm);
     }
 
     const textItemsElm = document.createElement('span');
-    textItemsElm.textContent = ` ${this.customFooterOptions.metricTexts?.items ?? ''} `;
+    textItemsElm.textContent = ` ${this.customFooterOptions.metricTexts?.items ?? 'items'} `;
     rightFooterElm.appendChild(textItemsElm);
 
     return rightFooterElm;
@@ -153,7 +153,7 @@ export class SlickFooterComponent {
   /** Create the Right Section Last Update Timestamp */
   private createFooterLastUpdate(): HTMLSpanElement {
     // get translated text & last timestamp
-    const lastUpdateText = this.customFooterOptions?.metricTexts?.lastUpdate ?? '';
+    const lastUpdateText = this.customFooterOptions?.metricTexts?.lastUpdate ?? 'Last Update';
     const lastUpdateTimestamp = moment(this.metrics?.endTime).format(this.customFooterOptions.dateFormat);
 
     const lastUpdateElm = document.createElement('span');