CODEWITHSUNDEEP
angularjsnode.jsdatabasepostgresqlangular-ui-grid
Aric Peters
Aric Peters

Reputation: 111

update database from angular-ui-grid

I am trying to change a row in my database when the user clicks the delete button in my angular ui-grid. When the button is clicked, the row should be removed from the grid, and the table in the database should be updated with a value so that the row will no longer appear in the grid, but it will still be in the database (soft-delete). My table is called applicants and has rows id, firstname, lastname, email, position, resume, and deleted. Deleted is a boolean column defaulted to false, if true, the row should not appear in my ui-grid. I have this portion completed, however I cannot get my code to update the deleted column in the database when the button is pressed on the grid. This is the controller for the grid (gets the applicants from the database):

angular.module('myApp')
.controller('gridController',['$scope','$http','$log',function ($scope, $http,$log){

    $scope.deleteRow = function(row) {
        var index = $scope.gridOptions.data.indexOf(row.entity);
        $scope.gridOptions.data.splice(index, 1);


        $http({
            method:'POST',
            url:'/directives/updateApplicant'
        })
    }

    $scope.gridOptions = {
        enableFiltering:true,
        columnDefs: [
            {name: 'id', field:'id'},
            {name:'firstName',field:'firstName'},
            {name:'lastName',field:'lastName'},
            {name:'email',field:'email'},
            {name:'position',field:'position'},
            {name:'resume', field:'resumeFileName', cellTemplate:'<div class="ui-grid-cell-contents"><a href="/directives/resume/{{COL_FIELD}}" target="_self">{{ COL_FIELD }}</a></div>'},
            {name:'delete',cellTemplate: '<button class="btn primary" ng-click="grid.appScope.deleteRow(row)">Delete</button>', enableFiltering:false}
        ]
    }

    $scope.data = []
    $http({
        method:'GET',
        url:'/directives/applicants'
    }).then(function(success){
        $scope.gridOptions.data = success.data;
    },function(reason){
        $scope.error = reason.data;
        $log.info(reason);
    })
}])

when it hits the post route this code runs:

module.exports.updateApplicant = function(req,res){
    applicant.forge({id: '31'})
    .fetch({require:true})
    .then(function(applicant){
        applicant.save({
            deleted:'true'
        })

    .then(function(){
        res.json({error:false,data:{message:'applicant details updated'}})
    })
    .catch(function(err){
        res.status(500).json({error:true, data:{message: err.message}})
    });
    })
    .catch(function(err){
        res.status(500).json({error:true,data:{message:err.message}})
    })
}

this works just fine the only problem is that i have the ID hardcoded. Is there a way i can pass the ID from the selected row in the grid to this variable?

Upvotes: 0

Views: 618

Answers (1)

SunriseM
SunriseM

Reputation: 995

Send http request when you click button

    $scope.deleteRow = function(row) {
      var index = $scope.gridOptions.data.indexOf(row.entity);
      $scope.gridOptions.data.splice(index, 1);


      $http({
        method:'POST',
        url:'/directives/updateApplicant',
        data: $scope.gridOptions.data[index],
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      }).success(function (data, status, headers, config) {
            console.log("success");
      }).error(function (data, status, headers, config) {
           console.log(status);
      })
  }

you need install body-parser and use it as middleware (app.use(bodyParser.urlencoded({ extended: false })) to get the POST body. 

module.exports.updateApplicant = function(req,res){

    var bid = req.body.id;         

    applicant.forge({id: bid})
    .fetch({require:true})
    .then(function(applicant){
        applicant.save({
            deleted:'true'
        })

    .then(function(){
        res.json({error:false,data:{message:'applicant details updated'}})
    })
    .catch(function(err){
        res.status(500).json({error:true, data:{message: err.message}})
    });
    })
    .catch(function(err){
        res.status(500).json({error:true,data:{message:err.message}})
    })
}

Upvotes: 1

Related Questions