Methods not working

[luigicesena]

Hello, I'm trying from couple days to integrate your crud table in my project, I have followed the steps such as creating my service implementing DataSource etc. but I have now a few problems, I got the table to displaying my items, so the GET works, but I have an error in my console that I'll paste here. Also global filter is not working for me for some reason, and I don't know why Delete is giving me 400 Error. I'll paste here the main error which is displayed in the console as soon as I route on the component.

[mazdik]

show your sample code

[luigicesena]

Thank you so much for your time. I fixed a couple mistakes that I made and now the Delete works good, but I still get that error in the console and global filter not working, here is my service and component: Service

import { Injectable, EventEmitter } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable, of, throwError, timer, interval } from 'rxjs';
import { catchError, map, retryWhen, delayWhen, tap, flatMap, mergeMap, finalize } from 'rxjs/operators';
import { genericRetryStrategy } from './generic-retry-strategy';
import {NotifyService} from '../../lib/notify/notify.service';

import { IUser } from './User';
import {RequestMetadata, DataSource, PagedResult} from '../../lib/ng-crud-table';

@Injectable({
  providedIn: 'root'
})

export class DbContextService implements DataSource {
  private apiUrl = 'https://localhost:44304/api/users';
  public errorEmitter : EventEmitter<any> = new EventEmitter<any>();

  constructor(private api: HttpClient, private notifyService: NotifyService) { }

  getItems(requestMeta: RequestMetadata): Promise<PagedResult> {
    return this.api.get<IUser[]>(this.apiUrl)
      .pipe(
        retryWhen(genericRetryStrategy({onRetryErrorEvEmitter:this.errorEmitter}))
      ).toPromise().then(this.extractData).catch(this.handleError.bind(this));
  }

  getItem(row: any): Promise<IUser> {
    //DA CONTROLLARE
    if (row.id === 0) {
      return of(this.initializeUser()).toPromise();
    }
    const url = `${this.apiUrl}/${row.id}`;
    return this.api.get<IUser>(url)
      .pipe(
        retryWhen(genericRetryStrategy({onRetryErrorEvEmitter:this.errorEmitter}))
      ).toPromise();
  }

  post(row: any): Promise<IUser> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });    

    return this.api.post<IUser>(this.apiUrl, row, { headers: headers })
      .pipe(
        retryWhen(genericRetryStrategy({onRetryErrorEvEmitter:this.errorEmitter}))
      ).toPromise().then(res => res).catch(this.handleError.bind(this));
  }

  put(row: any): Promise<IUser> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    const url = `${this.apiUrl}/${row.id}`;
    return this.api.put<IUser>(url, row, { headers: headers })
      .pipe(
        retryWhen(genericRetryStrategy({onRetryErrorEvEmitter:this.errorEmitter}))
      ).toPromise().then(res => res).catch(this.handleError.bind(this));
  }

  delete(row: any): Promise<IUser> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    const url = `${this.apiUrl}/${row.id}`;
    return this.api.delete<IUser>(url, { headers: headers })
      .pipe(
        retryWhen(genericRetryStrategy({onRetryErrorEvEmitter:this.errorEmitter}))
      ).toPromise().catch(this.handleError.bind(this));
  }

  private extractData(res: any): PagedResult {
    const meta = {
      'totalCount': 10,
      'perPage': 10
    };
    const body = <PagedResult>{'items': res, '_meta': meta};
    return body;
  }

  private handleError(error: any) {
    const errMsg = error.message ? error.message : error.toString();
    this.notifyService.sendMessage({title: 'HttpErrorResponse', text: errMsg, severity: 'error'});
    console.error(error);
    return Promise.reject(errMsg);
  }
}

And my component code:

import {Component, OnInit} from '@angular/core';
import {Column, CdtSettings, DataManager} from '../../lib/ng-crud-table';

import { DbContextService } from '../shared/DbContext.service';

@Component({
  selector: 'app-basic-demo',
  template: `<app-crud-table [dataManager]="dataManager"></app-crud-table>`
})

export class DataTableComponent implements OnInit {

  columns: Column[];
  dataManager: DataManager;

  settings: CdtSettings = new CdtSettings({
    crud: true,
    bodyHeight: 380,
    exportAction: true,
    globalFilter: true,
    columnToggleAction: true,
    clearAllFiltersAction: true,
  });

  constructor(private testservice: DbContextService) {
    this.columns = [
      {
        title: 'Id',
        name: 'id',
        sortable: true,
        filter: true,
        frozen: true,
        width: 100,
        formHidden: true,
        type: 'number',
      },
      {
        title: 'Name',
        name: 'name',
        sortable: true,
        filter: true,
        frozen: true,
        width: 200,
        editable: true,
      },
      {
        title: 'Surname',
        name: 'surname',
        sortable: true,
        filter: true,
        type: 'select',
        editable: true,
      },
      {
        title: 'Email',
        name: 'email',
        sortable: true,
        filter: true,
        frozen: true,
        width: 200,
        editable: true,
      },
      {
        title: 'Phone',
        name: 'phone',
        sortable: true,
        filter: true,
        frozen: true,
        width: 200,
        editable: true,
      },
      {
        title: 'Location',
        name: 'location',
        sortable: true,
        filter: true,
        frozen: true,
        width: 200,
        editable: true,
      },
      {
        title: 'Language',
        name: 'language',
        sortable: true,
        filter: true,
        frozen: true,
        width: 200,
        editable: true,
      },
      {
        title: 'Note',
        name: 'note',
        sortable: true,
        filter: true,
        frozen: true,
        width: 200,
        editable: true,
      },
      {
        title: 'Privacy',
        name: 'privacy',
        sortable: true,
        frozen: true,
        width: 200,
        editable: true,
      }
    ];

    this.dataManager = new DataManager(this.columns, this.settings, this.testservice);
    this.dataManager.pager.perPage = 20;
  }

  ngOnInit() {
  }

}

[luigicesena]

Also I wanted to point out that I'm not routing directly to this component, rather I'm using this as a nested component

[mazdik]

it seems that your service does not pass parameters to the backend getItems(requestMeta: RequestMetadata)

export interface RequestMetadata {
  pageMeta: PageMetadata;
  sortMeta: SortMetadata[];
  filters: FilterMetadata;
  globalFilterValue?: string;
}

global filter should work on backend two samples

[luigicesena]

Thank you for your tip, I got everything working today, you saved me a lot of time with this code, many thanks for your work man, it's great. I just noticed one small mistake, in "../ng-crud-table-master/src/lib/ng-data-table/types.ts" there is ColumnResizeMode enum, here Animated is misspelled Aminated, this is the only mistake I've noticed so far, everything else is working now, so thank you!

[mazdik]

Thank you for pointing out the mistake. I plan to remove this setting and leave only one mode: Simple (default)