Tag: data

Hi, I’m block with 2 points and need some of help with my development first it’s how to get data from backend with the pagination server procedure, i see multiple examples but nothing with the backend results of the httpclient get call.

The api to use data works with this:

http://localhost:8080/users?size=10&page=100

1.- I get the values but i don’t know really how to implements the HttpParams to get the values with the angular material table paginator.

My other problem its the object its a container but i can’t access into the content of the data to retrieve the values of users.

{
  "content": ({
        "id": 343,
        "name": "name1",
        "email": "a.dasgeasslo@asdf.com",
        "imageUrl": null,
        "emailVerified": true,
        "sapUserId": "adangesslo",
        "provider": "google",
        "providerId": null,
        "createdBy": "Admin",
        "updatedBy": "Admin",
        "createDate": "2020-05-05T12:15:42.744+0000",
        "updateDate": "2020-05-05T12:15:42.744+0000",
        "lastLoginDate": null,
        "roles": ({
          "id": 9,
          "name": "site_prod_shift",
          "type": "site_prod_shift",
          "description": "site_prod_shift",
          "createdBy": "Admin",
          "updatedBy": "Admin",
          "createDate": "2020-05-04T18:37:58.302+0000",
          "updateDate": "2020-05-04T18:37:58.302+0000"
        }),
        "plants": ({
          "plantId": 4,
          "name": "asdf (asdf e asdf)",
          "code": "MG",
          "smartsheetLink": "",
          "type": {
            "id": 1,
            "name": "asf Plant"
          },
          "createDate": "2020-05-04T18:02:15.333+0000",
          "updateDate": "2020-05-04T18:02:15.333+0000",
          "createdBy": "Admin",
          "updatedBy": "Admin",
          "opcoId": 1
        })
      },




  ),
  "pageable": {
    "sort": {
      "unsorted": true,
      "sorted": false,
      "empty": true
    },
    "offset": 0,
    "pageNumber": 0,
    "pageSize": 20,
    "unpaged": false,
    "paged": true
  },
  "totalPages": 104,
  "totalElements": 2065,
  "last": false,
  "size": 20,
  "number": 0,
  "sort": {
    "unsorted": true,
    "sorted": false,
    "empty": true
  },
  "numberOfElements": 20,
  "first": true,
  "empty": false
}

My user.service:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { User } from '../model/user';
import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
import { environment } from './../../environments/environment.prod';
import { ToasterService } from 'angular2-toaster';
import { AddDialogComponent } from '../main/users/dialogs/add/add.dialog.component';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  dataChange: BehaviorSubject<User()> = new BehaviorSubject<User()>(());
  // Temporarily stores data from dialogs
  dialogData: any;
  apiurl = environment.apiUrl;
  items: any;
  AddDialogComponent: AddDialogComponent;
  AllDataObj: any;
  AllData_Arr: string;

  constructor(private httpClient: HttpClient) { }

  get data(): User() {
    return this.dataChange.value;
  }

  getDialogData() {
    return this.dialogData;
  }

  /** CRUD METHODS http://localhost:8080/users?size=1&page=1  */

  getAllUsers(): void {
    this.httpClient.get<User()>(this.apiurl + "/users?",
      {
        params: new HttpParams()
          .set('size', "5")
          .set('page', "5")
        //}).subscribe((data: User()) => {
        }).subscribe(data => {
        this.dataChange.next(data);
        console.log(this.data);
      },
        (error: HttpErrorResponse) => {
          console.log(error.name + ' ' + error.message);
        });
  }
  // getAllUsers(): void{
  //   this.httpClient.get<User()>(this.apiurl+"https://es.stackoverflow.com/users").subscribe((data: User())=> {
  //     console.log(data);
  //     this.dataChange.next(data);
  //     //this.AllDataObj = data;
  //     //this.AllData_Arr= JSON.stringify(this.AllDataObj);
  //     //console.log(this.AllData_Arr);
  //     },
  //     (error: HttpErrorResponse) => {
  //     console.log (error.name + ' ' + error.message);
  //     });
  // }

  // DEMO ONLY, you can find working methods below
  addUser(user: User): void {
    this.httpClient.post(this.apiurl + "/createuser", user).subscribe(data => {
      this.dialogData = user;
      // this.toasterService.pop('Successfully added');
    },
      (err: HttpErrorResponse) => {
        console.log(err.name + ' ' + err.message)
        //this.ToasterService.pop('Error occurred. Details: ' + err.name + ' ' + err.message);
      });
  }

  updateUser(user: User): void {
    this.dialogData = user;
  }

  deleteUser(id: number): void {
    console.log(id);
  }

  getConfig(): Observable<User()> {
    return this.httpClient.get<User()>(this.apiurl + "https://es.stackoverflow.com/users");
  }

}



/* REAL LIFE CRUD Methods I've used in my projects. ToasterService uses Material Toasts for displaying messages:

    // ADD, POST METHOD
    addItem(kanbanItem: KanbanItem): void {
    this.httpClient.post(this.apiurl, kanbanItem).subscribe(data => {
      this.dialogData = kanbanItem;
      this.toasterService.showToaster('Successfully added', 3000);
      },
      (err: HttpErrorResponse) => {
      this.toasterService.showToaster('Error occurred. Details: ' + err.name + ' ' + err.message, 8000);
    });
   }

    // UPDATE, PUT METHOD
     updateItem(kanbanItem: KanbanItem): void {
    this.httpClient.put(this.apiurl + kanbanItem.id, kanbanItem).subscribe(data => {
        this.dialogData = kanbanItem;
        this.toasterService.showToaster('Successfully edited', 3000);
      },
      (err: HttpErrorResponse) => {
        this.toasterService.showToaster('Error occurred. Details: ' + err.name + ' ' + err.message, 8000);
      }
    );
  }

  // DELETE METHOD
  deleteItem(id: number): void {
    this.httpClient.delete(this.apiurl + id).subscribe(data => {
      console.log(data(''));
        this.toasterService.showToaster('Successfully deleted', 3000);
      },
      (err: HttpErrorResponse) => {
        this.toasterService.showToaster('Error occurred. Details: ' + err.name + ' ' + err.message, 8000);
      }
    );
  }
*/

my user.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { UserService } from '../../services/user.service';
import { HttpClient } from '@angular/common/http';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { User } from '../../model/User';
import { DataSource } from '@angular/cdk/collections';
import {AddDialogComponent} from './dialogs/add/add.dialog.component';
import {EditDialogComponent} from './dialogs/edit/edit.dialog.component';
import {DeleteDialogComponent} from './dialogs/delete/delete.dialog.component';
import {BehaviorSubject, fromEvent, merge, Observable} from 'rxjs';
import {map} from 'rxjs/operators';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ('./users.component.scss')
})
export class UsersComponent implements OnInit {
  displayedColumns = ('id', 'Name', 'email', /*'imageUrl',*/ 'createdate', 'sapUserId', 'roles', 'actions');
  exampleDatabase: UserService | null;
  dataSource: ExampleDataSource | null;
  index: number;
  id: number;
  newid: number;

  constructor(
    public httpClient: HttpClient,
    public dialog: MatDialog, 
    public userService: UserService) {}

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;
  @ViewChild('filter',  {static: true}) filter: ElementRef;

  ngOnInit() {
    this.loadData();

    //this.getAllUsers();
    }
  //getAllUsers(){
  //  this.dataApi.getAllUsers()
  //  .subscribe(users => console.log(users)); }

  refresh() {
    this.loadData();
  }

  addNew(user?: User) {
    const dialogRef = this.dialog.open(AddDialogComponent, {
      data: {user: user} 
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result === 1) {
        // After dialog is closed we're doing frontend updates
        // For add we're just pushing a new row inside userService
        this.exampleDatabase.dataChange.value.push(this.userService.getDialogData());
        this.refreshTable();
      }
    });
  }

  startEdit(i: number, id: number, name: string, email: string, imageUrl: string, createdate: Date,  sapUserId: string, roles: ()) {
    this.id = id;
    // index row is used just for debugging proposes and can be removed
    this.index = i;
    console.log(this.index);
    const dialogRef = this.dialog.open(EditDialogComponent, {
      data: {id: id, name: name, email: email, imageUrl: imageUrl, createdate: createdate, sapUserId: sapUserId, roles: roles}
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result === 1) {
        // When using an edit things are little different, firstly we find record inside userService by id
        const foundIndex = this.exampleDatabase.dataChange.value.findIndex(x => x.id === this.id);
        // Then you update that record using data from dialogData (values you enetered)
        this.exampleDatabase.dataChange.value(foundIndex) = this.userService.getDialogData();
        // And lastly refresh table
        this.refreshTable();
      }
    });
  }

deleteItem(i: number, id: number, name: string, email: string, imageUrl: string, createdate: string, sapUserId: string, roles: ()) {
  this.index = i;
  this.id = id;
  const dialogRef = this.dialog.open(DeleteDialogComponent, {
    data: {id: id, name: name, email: email, imageUrl: imageUrl, createDate: createdate, sapUserId: sapUserId, roles: roles}
  });

  dialogRef.afterClosed().subscribe(result => {
    if (result === 1) {
      const foundIndex = this.exampleDatabase.dataChange.value.findIndex(x => x.id === this.id);
      // for delete we use splice in order to remove single object from DataService
      this.exampleDatabase.dataChange.value.splice(foundIndex, 1);
      this.refreshTable();
    }
  });
}

private refreshTable() {
  // Refreshing table using paginator
  // Thanks yeager-j for tips
  // https://github.com/marinantonio/angular-mat-table-crud/issues/12
  this.paginator._changePageSize(this.paginator.pageSize);
}

  /*   // If you don't need a filter or a pagination this can be simplified, you just use code from else block
    // OLD METHOD:
    // if there's a paginator active we're using it for refresh
    if (this.dataSource._paginator.hasNextPage()) {
      this.dataSource._paginator.nextPage();
      this.dataSource._paginator.previousPage();
      // in case we're on last page this if will tick
    } else if (this.dataSource._paginator.hasPreviousPage()) {
      this.dataSource._paginator.previousPage();
      this.dataSource._paginator.nextPage();
      // in all other cases including active filter we do it like this
    } else {
      this.dataSource.filter = '';
      this.dataSource.filter = this.filter.nativeElement.value;
    }*/

    public loadData() {
      this.exampleDatabase = new UserService(this.httpClient);
      this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator, this.sort);
      fromEvent(this.filter.nativeElement, 'keyup')
        // .debounceTime(150)
        // .distinctUntilChanged()
        .subscribe(() => {
          if (!this.dataSource) {
            return;
          }
          this.dataSource.filter = this.filter.nativeElement.value;
        });
    }
  }

export class ExampleDataSource extends DataSource<User> {
  _filterChange = new BehaviorSubject('');

  get filter(): string {
    return this._filterChange.value;
  }

  set filter(filter: string) {
    this._filterChange.next(filter);
  }

  filteredData: User() = ();
  renderedData: User() = ();

  constructor(public _exampleDatabase: UserService,
              public _paginator: MatPaginator,
              public _sort: MatSort) {
    super();
    // Reset to the first page when the user changes the filter.
    this._filterChange.subscribe(() => this._paginator.pageIndex = 0);
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<User()> {
    // Listen for any changes in the base data, sorting, filtering, or pagination
    const displayDataChanges = (
      this._exampleDatabase.dataChange,
      this._sort.sortChange,
      this._filterChange,
      this._paginator.page
    );

    this._exampleDatabase.getAllUsers();

    return merge(...displayDataChanges).pipe(map( () => {
        // Filter data
        this.filteredData = this._exampleDatabase.data.slice().filter((user: User) => {
          const searchStr = (user.id + user.name + user.email + user.imageUrl + user.createdate + user.sapUserId + user.roles).toLowerCase();
          return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
        });

        // Sort filtered data
        const sortedData = this.sortData(this.filteredData.slice());

        // Grab the page's slice of the filtered sorted data.
        const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
        this.renderedData = sortedData.splice(startIndex, this._paginator.pageSize);
        return this.renderedData;
      }
    ));
  }

  disconnect() {}

  /** Returns a sorted copy of the database data. */
  sortData(data: User()): User() {
    if (!this._sort.active || this._sort.direction === '') {
      return data;
    }

    return data.sort((a, b) => {
      let propertyA: number | string = '';
      let propertyB: number | string = '';
      let propertyC: Date | string = '';

      switch (this._sort.active) {
        case 'id': (propertyA, propertyB) = (a.id, b.id); break;
        case 'lastname': (propertyA, propertyB) = (a.name, b.name); break;
        case 'email': (propertyA, propertyB) = (a.email, b.email); break;
        case 'photoURL': (propertyA, propertyB) = (a.imageUrl, b.imageUrl); break;
        case 'createdate': (propertyC, propertyC) = (a.createdate, b.createdate); break;
        case 'sapid': (propertyA, propertyB) = (a.sapUserId, b.sapUserId); break;
      }

      const valueA = isNaN(+propertyA) ? propertyA : +propertyA;
      const valueB = isNaN(+propertyB) ? propertyB : +propertyB;
      const valueC = isNaN(+propertyC) ? propertyC : +propertyC;

      return (valueA < valueB ? -1 : 1) * (this._sort.direction === 'asc' ? 1 : -1);
    });
  }

}

my user.ts model

export class User {
    id: number;
    name: string;
    email: string;
    imageUrl?: string;
    emailVerified?: boolean;
    sapUserId: string;
    provider?: string;
    providerId?: string;
    createdBy?: string;
    createdate?: string;
    updatedBy?: string;
    createDate?: string;
    updateDate?: string;
    lastLoginDate?: string;
    roles: string;
    plants?:any();
    totalPages?: number;
    totalElements?: number;
}

2.- The other point its how to slice or filter the content () into the json response to load the datatable.

Thanks.