Batch operations on restapi from angular

Question

I wanted to do the bulk operations on my JSON from angular using httpclient. But when I am doing it it's unable to update the JSON rather it's only updating the last checked record.

Need your support to fix the code.

I think I need to write a bulk operation in services similar to updateUser carrying multiple records and post to service.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class CommonService {

  constructor(private http:HttpClient) { }

  createUser(user: any) {
    return this.http.post("http://localhost:3000/users", user);
  }

  getAllUser() {
    return this.http.get("http://localhost:3000/users");
  }

  updateUser(user: any): Observable {
    return this.http.put("http://localhost:3000/users/" + user.id, user);
  }

  deleteUser(user: any) {
    return this.http.delete("http://localhost:3000/users/" + user.id);
  }

}

app.component.ts

import { Component } from '@angular/core';
import { CommonService } from './common.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'db-poc1';
  allUser: any;
  isEdit = false;
  isView = false;
  isBatchEdit = false;
  totalRecords: any;
  page: Number = 1;
  currentImpact: string = '';

  userObj = {
    id: '', first_name: '', last_name: '', email: '', gender: '', ip_address: '', impact: ''
  }

  impactCount = {
    applicable: 0, notapplicable: 0, fyi: 0 
  }

  batchUpdateUsers = [];

  constructor(private commonService: CommonService) {}

  ngOnInit() {
    this.getLatestUser();
  }
  
  checkboxClicked() {
    this.batchUpdateUsers = this.allUser.filter(row => row.checked);
    this.isView  = false;
    this.isBatchEdit = this.batchUpdateUsers.length > 0;
    this.currentImpact = this.userObj.impact;
  }

  addUser(formObj: any) {
    this.commonService.createUser(formObj).subscribe((response) => {
      this.getLatestUser();
    })
  }

  getLatestUser() {
    this.commonService.getAllUser().subscribe((response) => {
      this.allUser = response;
      this.totalRecords = this.allUser.length;
      this.getApplicableCounts();
      this.allUser.forEach(row => row.checked = false);
    })
  }

  getApplicableCounts() {
    this.impactCount = {applicable: 0,notapplicable: 0,fyi: 0}
    this.allUser.forEach(row => {
      if (row.impact === 'Applicable') {
        this.impactCount.applicable++;
      } else if (row.impact === 'Not Applicable') {
         this.impactCount.notapplicable++;
      } else if (row.impact === 'FYI') {
        this.impactCount.fyi++;
      }
    });
  }

  editUser(user: any) {
    this.isEdit = true;
    this.userObj = user;
    this.allUser.forEach(user => user.checked = false);
    this.currentImpact = user.impact;
  }

  deleteUser(user: any) {
    this.commonService.deleteUser(user).subscribe(() => {      
      this.getLatestUser();
    })
  }

  updateUser() {
    this.isEdit = !this.isEdit;
    this.userObj.impact = this.currentImpact;
    this.commonService.updateUser(this.userObj).subscribe(() => {
      this.getLatestUser();
    })
    this.getApplicableCounts();
  }

  cancelEdit() {
    this.isEdit = false;
    this.isView = false;
  }

  viewUser(user: any) {
    this.isView = true;
    this.userObj = user;
  }

  cancelBatchEdit() {
    this.isBatchEdit = false;
    this.allUser.forEach(user => {user.checked = false});
  }

  batchUpdateUser() {
    this.isBatchEdit = false;
    const batchUpdateUserList = [];
    this.allUser.forEach(user => {
      if (user.checked) {
        user.impact = this.currentImpact
        batchUpdateUserList.push(user);
        user.checked = false;
      }
    });

    this.commonService.updateUser(this.userObj).subscribe(() => {
      this.getLatestUser();
    })

    this.getApplicableCounts();
  }

}

app.component.html


    Total: {{totalRecords}}
      
        Male: {{genderCount.male}} 
        Female: {{genderCount.female}}
        Other: {{genderCount.other}}
      
        Applicable: {{impactCount.applicable}}
        Not Applicable: {{impactCount.notApplicable}}
        FYI: {{impactCount.fyi}}
      
      
        
          
            Edit
            First Name
            Last Name
            Email
            Gender
            ID Address
    Impact  
    
  


  
    
    {{user.first_name}}
    {{user.last_name}}
    {{user.email}}
    {{user.gender}}
    {{user.ip_address}}
    {{user.impact}}
    
      
    
  




  
    First Name: {{userObj.first_name}}
    Last Name: {{userObj.last_name}}
    Email: {{userObj.email}}
    Gender: {{userObj.gender}}
    IP Address: {{userObj.ip_address}}
    Impact: {{userObj.impact}}

https://stackblitz.com/edit/angular-ivy-bsrwmh?file=src/app/app.component.html

Batch operations on restapi from angular

Answers (1)

Related Questions