Error when using MdbTableEditorDirective Filter


Topic: Error when using MdbTableEditorDirective Filter

Jordan pro premium asked 10 months ago

Expected behavior Search/filter functionality would ignore properties with a null value.

Actual behavior It appears that the filter fails when the queried data array has an object with a null property

Resources (screenshots, code snippets etc.)

https://imgur.com/bNWJL3D

https://imgur.com/VkQHelk


Bartosz Termena staff commented 10 months ago

Hi!

Could you tell me, which version of MDB are you using?

Best, Bartosz.


Jordan pro premium commented 10 months ago

MDB Version: 8.6.0


Bartosz Termena staff commented 10 months ago

Dear @Jordan

I can not reproduce your problem, could you provide your code or some demo app with existing error to my email: b.termena@mdbootstrap.com ?

Best Regards, Bartosz.


Jordan pro premium answered 10 months ago

What do you mean you can't reproduce the problem? Just assign an array of objects that has at least one null property to the directives dataArray.

It breaks on:

filterIterableArray(searchKey) { if (this.dataArray) { /** @type {?} / const filter = this.dataArray.filter((/* * @param {?} obj * @return {?} / (obj) => { return Object.keys(obj).some((/* * @param {?} key * @return {?} / (key) => { return obj[key] .toString()* .toLowerCase() .includes(searchKey); })); })); this.iterableDataArray = filter.slice(this.itemsPerPage * (this.currentPage - 1), this.itemsPerPage * (this.currentPage - 1) + this.itemsPerPage); this.nextShouldBeDisabled = this.iterableDataArray.length < this.itemsPerPage; this.updatePaginationInfo(); return this.iterableDataArray; } } /** * @param {?} searchKey * @return {?} */ performSearch(searchKey) { this._searchKey = searchKey; if (!searchKey && this.dataArray) { this.nextShouldBeDisabled = false; this.data = this.dataArray.slice(this.itemsPerPage * (this.currentPage - 1), this.itemsPerPage * (this.currentPage - 1) + this.itemsPerPage); this._iterableDataArray$.next(this.data); return this.dataArray.slice(this.itemsPerPage * (this.currentPage - 1), this.itemsPerPage * (this.currentPage - 1) + this.itemsPerPage); } else { this.data = this.filterIterableArray(searchKey.toLowerCase()); return this.filterIterableArray(searchKey.toLowerCase()); } }

import { Component, ViewChild, OnInit, } from '@angular/core';
import { MdbTableEditorDirective } from 'mdb-table-editor';

@Component
(
  {
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
export class AppComponent implements OnInit {
  public title = 'ng-uikit-pro-standard';

  @ViewChild('table', { static: true })
  public mdbTableEditor: MdbTableEditorDirective;
  public headElements = ['Id', 'Data Source Name', 'Description'];
  public searchText: string = '';
  public highlightedRow: DataSource = null;
  public sources = new Array<DataSource>();
  public source = new DataSource();
  public visibleItems: number = 10;
  public visibleItemsSelect = [
    { value: '10', label: '10', selected: true },
    { value: '25', label: '25' },
    { value: '50', label: '50' },
    { value: '100', label: '100' }
  ];

  public ngOnInit(): void {
    this.source.id = 1;
    this.source.dataGroupId = 1;
    this.source.dataSourceName = 'Data Source One';
    this.source.dataSourceDescription = 'Data Source One Description';
    this.source.dataGroup = null;

    this.sources.push(this.source);

    this.mdbTableEditor.dataArray = this.sources;
  }
}

class DataSource {
  public id!: number;
  public dataGroupId!: number;
  public dataSourceName!: string;
  public dataSourceDescription!: string;
  public dataGroup?: DataGroup | undefined;
}

class DataGroup {
  public id!: number;
  public dataGroupName!: string;
  public dataGroupDescription!: string;
}


 <div class="container-fluid">

   <div class="row mb-5">
     <div class="col-xl-12 mx-auto">

       <div class="row w-100 d-flex mb-3 ml-0">

         <form class="form-inline md-form md-bg form-sm active-searchBar-2 ml-auto p-2"
               style="margin-bottom: auto; margin-top: auto;">
           <input [(ngModel)]="searchText"
                  [ngModelOptions]="{standalone: true}"
                  aria-label="Search"
                  class="form-control form-control-sm mr-1"
                  mdbInput
                  placeholder="Search on any column..."
                  style="min-width: 300px"
                  type="text">
           <i aria-hidden="true"
              class="fas fa-search float-md-left">
           </i>
         </form>

       </div>
       <div class="z-depth-1">
         <div class="table-responsive">
           <table #table="mdbEditor"
                  (rowHighlight)="highlightedRow = $event"
                  [itemsPerPage]="visibleItems"
                  class="table table-hover table-hr-data-row"
                  mdbTableEditor>
             <thead>
               <tr>
                 <th *ngFor="let head of headElements; let i = index"
                     scope="col"> 
                   {{head}}
                 </th>
               </tr>
             </thead>
             <tbody>
               <tr *ngFor="let item of table.performSearch(this.searchText); let i = index">
                 <td>{{item.id}}</td>
                <td>{{item.dataSourceName}}</td>
                 <td>{{item.dataSourceDescription}}</td>
  </tr>
             </tbody>
             <tfoot>
               <tr>
                 <td class="align-middle"
                     colspan="7">
                   <div class="d-flex mb-3">

                     <mdb-select (ngModelChange)="visibleItems = +$event"
                                 [(ngModel)]="visibleItems"
                                 [options]="visibleItemsSelect"
                                 [outline]="true"
                                 [appendToBody]="true"
                                 class="mr-auto p-2 align-middle"
                                 placeholder="# to Display"
                                 style="max-width: 130px">
                     </mdb-select>

                     <span class="p-2 align-middle m-2"
                           style="margin-bottom: 0px">
                       Showing {{table.paginationInfo.firstItem}} to {{table.paginationInfo.lastItem}} of {{table.paginationInfo.allItems}} Data Sources
                     </span>


                     <mdb-icon (click)="table.prevPage()"
                               [ngClass]="{'disabled text-muted': table.disablePrevious()}"
                               class="p-2 align-middle"
                               fas
                               icon="angle-left"
                               mdbWavesEffect
                               size="lg">
                     </mdb-icon>
                     <mdb-icon (click)="table.nextPage()"
                               [ngClass]="{'disabled text-muted': table.disableNext()}"
                               class="p-2 align-middle"
                               fas
                               icon="angle-right"
                               mdbWavesEffect
                               size="lg">
                     </mdb-icon>
                   </div>
                 </td>
               </tr>
             </tfoot>
           </table>
         </div>
       </div>
     </div>
   </div>

  </div>

Bartosz Termena staff commented 10 months ago

Dear @Jordan

Yes, you are right, the problem occurs. We will take a closer look at that and try to solve this as soon as possible.

Best Regards, Bartosz.


Jordan pro premium commented 10 months ago

I updated to the following for the time being:

(key) => { if(obj[key]) { return obj[key] .toString() .toLowerCase() .includes(searchKey); } else{ return false; } }


Please insert min. 20 characters.