I have a table with checkboxes attached to each row and one checkbox in the table header to select all rows. Whenever checkbox/checkboxes have been selected a button appears, and the row(s) data that have been selected should appear within the modal when that button is clicked. When all the checkboxes have been deselected then the button should disappear.
Whenever a user initially selects one or two checkboxes, the desired row values show inside the modal, the problems start when the checkbox used to select all values comes into play, assuming the previously selected checkbox values have not been unchecked nothing is being displayed within the modal. If at first the select all button has been selected the button comes up, but then if one of the checkboxes have been deselected then the button disappears.
Help with this would be GREATLY APPRECIATED.
HTML
<div class="col-md-12">
<div class="col-sm-9">
<button type="button" class="btn btn-default" ng-click="collect(arrears)" ng-show="checkedVal">Send to Debt Collector</button>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="table-responsive">
<table id="collections-table" class="table export-table">
<thead class="z">
<th>
<label class="control c control--checkbox">
<input type="checkbox" ng-model="allItemsSelected" ng-change="selectAll()">
<div class="control__indicator"></div>
</label>
</th>
<th>
<a href="" ng-click="sortType = 'last_name'; sortReverse = !sortReverse">
<i class="fa fa-sort"></i> Due Date
</a>
</th>
<th>
<a href="" ng-click="sortType = 'last_name'; sortReverse = !sortReverse">
<i class="fa fa-sort"></i> Client Name
</a>
</th>
<th>
<a href="" ng-click="sortType = 'loan_application_id'; sortReverse = !sortReverse">
<i class="fa fa-sort"></i> Loan No.
</a>
</th>
<th>
<a href="" ng-click="sortType = 'name'; sortReverse = !sortReverse">
<i class="fa fa-sort"></i> Loan Name
</a>
</th>
<th>
<a href="" ng-click="sortType = 'loan_name'; sortReverse = !sortReverse">
<i class="fa fa-sort"></i> Total Due
</a>
</th>
<th>
<a href="" ng-click="sortType = 'principal'; sortReverse = !sortReverse">
<i class="fa fa-sort"></i> Principal Due
</a>
</th>
<th>
<a href="" ng-click="sortType = 'monthly_interest'; sortReverse = !sortReverse">
<i class="fa fa-sort"></i> Interest Due
</a>
</th>
<th>
<a href="">
<i class="fa fa-sort"></i> Fees Due
</a>
</th>
<th>
<a href="">
<i class="fa fa-sort"></i> Penalty Due
</a>
</th>
<!-- <th>
<a href="">
<i class="fa fa-sort"></i> Total Balance
</a>
</th> -->
<th>
<a href="">
<i class="fa fa-sort"></i> Last Paid Date
</a>
</th>
<th>
<a href="">
<i class="fa fa-sort"></i> Last Paid Amount
</a>
</th>
<th ng-show="cookie_coll_phone == 'true'">
<a href="" ng-click="sortType = 'mobile_phone'; sortReverse = !sortReverse">
<i class="fa fa-sort"></i> Phone
</a>
</th>
<th ng-show="cookie_coll_email == 'true'">
<a href="" ng-click="sortType = 'email'; sortReverse = !sortReverse">
<i class="fa fa-sort"></i> Email
</a>
</th>
<th ng-show="cookie_collector_name == 'true'">
<a href="" ng-click="sortType = 'collector_last_name'; sortReverse = !sortReverse">
<i class="fa fa-sort"></i> Assigned Debt Collector
</a>
</th>
<th>
<a href="" ng-click="collectionColumns()" title="Add additional columns" data-toggle="tooltip" data-placement="bottom">
<i class="fa fa-plus"></i>
</a>
</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="arrears in all_arrears| orderBy:sortType:sortReverse|filter:search">
<td>
<label id="@" class="control c control--checkbox">
<input type="checkbox" name="specificApplication" ng-model="arrears.isChecked" value="@" ng-checked="selection.indexOf(arrears.loan_application_id) > -1" ng-click="toggleSelection(arrears)">
<div class="control__indicator"></div>
</label>
</td>
<td ng-click="mgmtRedirectToLoanOverview()"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-click="mgmtRedirectToLoanOverview()"><a href="/@/loan-application/@/loan-overview">@ @</a></td>
<td ng-click="mgmtRedirectToLoanOverview()"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-click="mgmtRedirectToLoanOverview()"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-click="mgmtRedirectToLoanOverview()"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-click="mgmtRedirectToLoanOverview()"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-click="mgmtRedirectToLoanOverview()"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-click="mgmtRedirectToLoanOverview()"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-click="mgmtRedirectToLoanOverview()" ng-if="arrears.penalty != null"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-click="mgmtRedirectToLoanOverview()" ng-if="arrears.penalty == null"><a href="/@/loan-application/@/loan-overview">@0</a></td>
<!-- <td><a href="/@/loan-application/@/loan-overview">@</a></td> -->
<td ng-click="mgmtRedirectToLoanOverview()"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-click="mgmtRedirectToLoanOverview()"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-click="mgmtRedirectToLoanOverview()" ng-show="cookie_coll_phone == 'true'"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-click="mgmtRedirectToLoanOverview()" ng-show="cookie_coll_email == 'true'"><a href="/@/loan-application/@/loan-overview">@</a></td>
<td ng-if="arrears.debt_collector_id != null" ng-show="cookie_collector_name == 'true'">@ @ <a href="" ng-click="removeDebtCollector(arrears)" anchor-prevent-default class="text-danger" title="Remove Debt Collector" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-trash fa-fw"></i></a></td>
<td ng-if="arrears.debt_collector_id == null" ng-show="cookie_collector_name == 'true'"><span class="text-danger">Not Assigned</span></td>
<td ng-if="arrears.debt_collector_id != null">
<a href="" ng-click="applyPayment(arrears)" anchor-prevent-default class="text-success" title="Apply Payment" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-plus-circle fa-fw"></i></a>
</td>
<td></td>
</tr>
<tr><td colspan="14" ng-if="all_arrears.length < 1"><h4 class="text-danger text-center"><strong>No loan(s) were found to be in arrears in this period</strong></h4></td></tr>
</tbody>
</table>
</div>
</div>
JAVASCRIPT
$scope.allItemsSelected = false;
$scope.checkedVal = false;
// select and unselect checkboxes
$scope.toggleSelection = function toggleSelection(arrears) {
var idx = $scope.selection.indexOf(arrears);
if(idx > -1) {
$scope.selection.splice(idx, 1);
if($scope.selection.length < 1) {
$scope.checkedVal = false;
}
} else {
$scope.selection.push(arrears);
$scope.checkedVal = true;
}
};
//select all checkboxes
$scope.selectAll = function (arrears) {
if($scope.allItemsSelected) {
$scope.checkedVal = true;
var idx = $scope.selection.indexOf(arrears);
if(idx > -1) {
$scope.selection.splice(idx, 1);
} else {
var arrears;
angular.forEach($scope.all_arrears, function(value, key) {
arrears = value;
$scope.selection.push(arrears);
});
$scope.checkedVal = true;
}
} else {
$scope.selection.splice(idx, 1);
$scope.checkedVal = false;
}
// Loop through all the entities and set their isChecked property
for (var i = 0; i < $scope.all_arrears.length; i++) {
$scope.all_arrears[i].isChecked = $scope.allItemsSelected;
}
};
//modal
$scope.collect = function(arrears) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '/js/modals/send-to-debt-collector.html',
size: 'lg',
resolve:{
getArrears: function() {
return $scope.selection;
}
},
controller: function ($scope,$uibModalInstance, getArrears) {
//retrieve selected loans to be sent to debt collector
$scope.toggleSelection = getArrears;
// retrieve debt collectors along with assigned applications
$http.get('collections/debt-collectors').success(function(data) {
$scope.all_debt_collectors = data;
});
$scope.send = function() {
$scope.collected_info = {
'debt_collector_data':$scope.debt_collectors,
'loan_data': $scope.toggleSelection
};
$http.post('collections/assign-debt-collector', $scope.collected_info).success(function(response) {
if(response == 'error') {
swal("Error!", "Loan Applicaton(s) is already assigned. You must remove the current Debt Collector from the loan before re-assigning", "error");
$uibModalInstance.close();
}
else {
toaster.pop('success', 'Success!', 'Debt collector has been assigned.');
$uibModalInstance.close();
location.assign('/collections');
}
});
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
modalInstance.result.then(function (data) {
},function () {
});
};
MODAL
<div class="modal-header">
<h3 class="modal-title"><strong>SEND TO COLLECTOR</strong></h3>
</div>
<div class="modal-body">
<form name="sendCollectorsForm">
<div class="row">
<span class="col-sm-3">
<div class="form-group">
<label>Select Debt Collector</label>
<select name="debt_collectors" class="form-control input-sm" ng-model="debt_collectors" ng-options="debt_collector as debt_collector.first_name + ' ' + debt_collector.last_name for debt_collector in all_debt_collectors" required autofocus></select>
</div>
</span>
</div>
<div class="row">
<div class="col-sm-12">
<br><h5>Selected record(s)</h5>
<div class="table-responsive">
<table id="collections-table" class="table">
<thead class="z">
<th> Loan No.</th>
<th> Principal Due</th>
<th> Interest Due</th>
<th> Penalty Due</th>
<th> Client Name</th>
<th> Product</th>
</thead>
<tbody>
<!-- <tr ng-repeat="selected in selectedArrears"> -->
<tr ng-repeat="selected in toggleSelection">
<td></td>
<td></td>
<td></td>
<td ng-if="selected.penalty != null"></td>
<td ng-if="selected.penalty == null">0</td>
<td> </td>
<td></td>
</tr>
<tr ng-if="toggleSelection.length < 1">
<td colspan="6" class="text-danger text-center"><strong>No record(s) were selected to be sent</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-raised" type="button" ng-disabled="selectedArrears.length < 1" ng-click="send()">Send</button>
<button class="btn btn-danger btn-raised" type="button" ng-click="cancel()">Cancel</button>
</div>
Aucun commentaire:
Enregistrer un commentaire