Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gmmastros on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Copy details of searched reference to table using Angular JS

Status
Not open for further replies.

TheLazyPig

Programmer
Sep 26, 2019
95
PH
Hi!

I have a dropdown where I can choose the reference type. JV has a different column while others are all the same.
img1_s8dwcg.jpg

Code:
//TPL
<table class="flform">
  <tbody>
    <tr>
      <th>REFERENCE TYPE</th>
      <th>REFERENCE NUMBER</th>
      <th></th>
    </tr>
    <tr>
      <td class="w-20">
	<select ng-model="searchParams.refType" ng-change="selectJVRef(searchParams.refType)">
          <option ng-repeat="refType in library.data.payoutReftype" value="{{refType.KEYSEQNO}}" ng-selected="searchParams.refType == refType.KEYSEQNO">{{refType.KEYDESC}}</option>
	  <option value="checkNo">Check Number</option>
	</select>
      </td>
      <td class="w-65"><input type="text" ng-model="searchParams.refNo" ng-keyup="$event.keyCode === 13 && search()" /></td>
      <td class="w-15"><button class="flbtn primary w-100" ng-click="search()">Search</button></td>
    </tr>
  </tbody>
</table>

Example that I choose JV then input a reference no. and click search. Details from the reference no. will view.
img2_zksfhv.jpg

Code:
//TPL
<div class="flbox scroll-y-300">
  <table class="fltbl stick-head">
    <thead ng-show="showv">
	  <tr>
	    <th class="w-5"></th>
		<th class="w-10">Reference Number</th>
		<th class="w-10">Check Number</th>
	    <th class="w-10">Check Bank</th>
	    <th class="w-10">Check Date</th>
	    <th class="w-20">Payee</th>
	    <th class="w-10">Amount</th>
	    <th class="w-10">Status</th>
	    <th class="w-25">Remarks</th>
	    <th>User</th>
	    <th>Transaction Date</th>
	  </tr>
	</thead ng-show="showv">
	<tbody ng-show="showv">
	  <tr class="center" ng-show="searches.length > 0" ng-repeat="data in searches">
	    <td><button class="flbtn sm success" ng-click="addInfo(data)" ng-disabled="isAlreadyAdded(data)" ng-class="isAlreadyAdded(data) ? 'crsr-dsbld' : ''">Add</button></td>
	    <td>{{data.refNo}}</td>
	    <td>{{data.checkNo}}</td>
	    <td>{{data.checkBank}}</td>
	    <td>{{data.checkDate}}</td>
	    <td>{{data.payee}}</td>
	    <td>{{data.amount|number:2}}</td>
	    <td>{{data.status}}</td>
	    <td><input type="text" ng-model="data.remarks"/></td>
	    <td>{{data.tranUser}}</td>
	    <td>{{data.tranDate}}</td>		
	  </tr>
	  <tr class="center" ng-show="searches.length < 1">
		<td colspan="11">No Data Found</td>
	  </tr>
	</tbody ng-show="showv">
	<!-- FOR JV  -->
	<div>
	  <thead ng-show="!showv">
	    <tr>
          <th class="w-5"></th>
          <th class="w-10">Reference Number</th>
          <th class="w-15">Payee</th>
          <th class="w-10">Credit</th>
          <th class="w-10">Debit</th>
          <th class="w-10">Status</th>
          <th class="w-20">Particulars</th>
          <th class="w-20">Remarks</th
		</tr>
	  </thead ng-show="!showv">
	  <tbody ng-show="!showv">
		<tr class="center" ng-show="searches.length > 0" ng-repeat="data in searches">
          <td><button class="flbtn sm success" ng-click="addInfo(data)" ng-disabled="isAlreadyAdded(data)" ng-class="isAlreadyAdded(data) ? 'crsr-dsbld' : ''">Add</button></td>
          <td>{{data.refNo}}</td>
          <td>{{data.payee}}</td>
          <td>{{data.credit|number:2}}</td>
          <td>{{data.debit|number:2}}</td>
          <td>{{data.status}}</td>
          <td>{{data.particulars}}</td>
          <td><input type="text" ng-model="data.remarks"/></td>
		</tr>
		<tr class="center" ng-show="searches.length < 1">
		  <td colspan="11">No Data Found</td>
		</tr>
	  </tbody ng-show="!showv">
	</div>
  </table>
</div>
Code:
//JS
ngApp.controller('SearchOPRFPController',function SearchOPRFPController($scope,$rootScope,ClaimService,LibraryService,fn){
    $scope.library  = LibraryService;
    $scope.visible = false;
    $scope.showjv = false;
    $scope.info = {};
    $scope.searchParams = {
        refType : "",
        refNo   : ""
    };
    $scope.searches = [];

    $scope.isAlreadyAdded = function(data,toReverseDeletion){
        if($scope.info.payout.length == 0) return false;
        
        toReverseDeletion = fn.isEmpty(toReverseDeletion) ? false : toReverseDeletion;

        for (let x in $scope.info.payout){
            if($scope.info.payout[x].refType == data.refType
                && $scope.info.payout[x].refSeqno == data.refSeqno
                && $scope.info.payout[x].payeeid == data.payeeid
                && (fn.isEmpty($scope.info.payout[x].benefitPolRef) || $scope.info.payout[x].benefitPolRef == data.benefitPolRef)
            ){
                if (toReverseDeletion == true) {
                    $scope.info.payout[x].deleted = false;
                    return "reversed";
                }
                if (fn.isEmpty($scope.info.payout[x].deleted) || (!fn.isEmpty($scope.info.payout[x].deleted) && $scope.info.payout[x].deleted == false))
                    return true;
            }
        }
        return false;
    };
    
    $scope.selectJVRef = function(showv){
    	console.log(showv);
    	
    	if(showv==60006){
    		$scope.showv = false;
    	}
    	else{
    		$scope.showv = true;
    	}
    }

    $scope.search = function(){
        if(isClaimProcessing) return;
        isClaimProcessing = true;

        $rootScope.$broadcast(cast.LOAD_ALERT,{load_msg : "LOADING . . ."});

        if($scope.searchParams.refType == 60006){
        	ClaimService.searchJV($scope.searchParams,function(success,data){
                $rootScope.$broadcast(cast.LOAD_ALERT,{load_msg : ""});
                isClaimProcessing = false;

                if(!success){
                    $rootScope.$broadcast(cast.SHOW_MESSAGE,4,{message : data});
                    return;
                }
                if(data.length == 0){
                    $rootScope.$broadcast(cast.SHOW_MESSAGE,3,{message : "No Data Found."});
                }

                $scope.resultsFound = data.length > 0 ? data.length + ' Found' : '';
                $scope.searches = data;
            });
        } else {
	        ClaimService.searchOP_RFP($scope.searchParams,function(success,data){
	            $rootScope.$broadcast(cast.LOAD_ALERT,{load_msg : ""});
	            isClaimProcessing = false;
	
	            if(!success){
	                $rootScope.$broadcast(cast.SHOW_MESSAGE,4,{message : data});
	                return;
	            }
	            if(data.length == 0){
	                $rootScope.$broadcast(cast.SHOW_MESSAGE,3,{message : "No Data Found."});
	            }
	
	            $scope.resultsFound = data.length > 0 ? data.length + ' Found' : '';
	            $scope.searches = data;
	        });
        }
    };

    let errMsg = "Unknown Error Occurred";
    let isValidData = function(data){
        if(fn.isEmpty(data.refType) || fn.isEmpty(data.refSeqno) || fn.isEmpty(data.payeeid)){
            errMsg = "Invalid Reference. Cannot Save";
            return false;
        }
        return true;
    };
      
    $scope.addInfo = function(data){
    	if(isClaimProcessing) return;
    	
    	alert('FOR OP');
    	
    	if(!isValidData(data)){
	       $rootScope.$broadcast(cast.SHOW_MESSAGE,3,{message : errMsg});
	       return;
	    }
    	
    	let toReverse = $scope.isAlreadyAdded(data,true);
		if(toReverse == "reversed") return;
		$scope.info.payout.push(angular.copy(data));
    };
      
      
    $scope.$on(cast.SEARCH_OP_RFP,function(){
        if(isClaimProcessing) return;
        $scope.searchParams.refType = LibraryService.data.payoutReftype[0].KEYSEQNO;
        $scope.info = ClaimService.info;

        fn.setHtmlNoScroll(true);
        $scope.visible = true;
    });

    $scope.exitMdl = function(){
        fn.setHtmlNoScroll(false);
        $scope.visible = false;
    };
    $scope.esc = function($event){
        if($event.keyCode == 27) $scope.exitMdl();
    };
});


After I click add button, details should be viewed only on JV Payout Information table instead it was added to both table/s.
img3_q5mrk7.jpg

Code:
//TPL
<div class="flframe" ng-controller="PayoutInformationController">
  <div class="title">Payout Information</div>
  <table class="fltbl">
    <thead>
      <tr>
        <th class="w-5"></th>
        <th class="w-5">Ref Type</th>
        <th class="w-10">Reference Number</th>
        <th class="w-5">Check Number</th>
        <th class="w-10">Check Bank</th>
        <th class="w-10">Check Date</th>
        <th class="w-25">Payee</th>
        <th class="w-10">Amount</th>
        <th class="w-25">Remarks</th>
        <th>Added By</th>
        <th>Date Added</th>
	  </tr>
	</thead>
    <tbody>
	  <tr class="center" ng-show="hasInfo() && payout.deleted != true" ng-repeat="payout in info().payout">
        <td><button class="flbtn error sm" ng-click="removePayoutInfo(payout)" ng-disabled="!can_edit()" ng-show="payout.refTypeDesc != 'OP'">Remove</button></td>
        <td>{{payout.refTypeDesc}}</td>
        <td>{{payout.refNo}}</td>
        <td>{{payout.checkNo}}</td>
        <td>{{payout.checkBank}}</td>
        <td>{{payout.checkDate}}</td>
        <td>{{payout.payee}}</td>
        <td>{{payout.amount|number:2}}</td>
        <td>{{payout.remarks}}</td>
        <td>{{payout.tranUser}}</td>
        <td>{{payout.tranDate}}</td>
	  </tr>
	  <tr class="center" ng-show="!hasInfo()">
	    <td colspan="11">No Data Found</td>
	  </tr>
	 </tbody>
   </table>
</div>
<!-- FOR JV -->
<div class="flframe" ng-controller="PayoutInformationController">
  <div class="title">JV Payout Information</div>
  <table class="fltbl">
    <thead>
	  <tr>
        <th class="w-5"></th>
        <th class="w-10">Ref Type</th>
        <th class="w-10">Reference Number</th>
        <th class="w-15">Payee</th>
        <th class="w-10">Credit</th>
        <th class="w-10">Debit</th>
        <th class="w-25">Particulars</th>
        <th class="w-25">Remarks</th>
      </tr>
	</thead>
    <tbody>
	  <tr class="center" ng-show="hasInfo() && payout.deleted != true" ng-repeat="payout in info().payout">
        <td><button class="flbtn error sm" ng-click="removePayoutInfo(payout)" ng-disabled="!can_edit()" ng-show="payout.refTypeDesc != 'OP'">Remove</button></td>
        <td>{{payout.refTypeDesc}}</td>
        <td>{{payout.refNo}}</td>
        <td>{{payout.payee}}</td>
        <td>{{payout.credit|number:2}}</td>
        <td>{{payout.debit|number:2}}</td>
        <td>{{payout.particulars}}</td>
        <td>{{payout.remarks}}</td>
	  </tr>
	  <tr class="center" ng-show="!hasInfo()">
		<td colspan="11">No Data Found</td>
	  </tr>
    </tbody>
  </table>
</div>
Code:
//JS
ngApp.controller('PayoutInformationController',function PayoutInformationController($scope,$rootScope,ClaimService,fn){
    $scope.info = function(){
        return ClaimService.getInfo();
    };
    $scope.isEmpty = function(value){
        return fn.isEmpty(value);
    };

    $scope.removePayoutInfo = function(data){
        if(fn.isEmpty(data)) return;
        
        if(!confirm('Are you sure you want to remove this payout information from the registry?')) return;
        	
        for (let x in $scope.info().payout){
            if($scope.info().payout[x].polRef == data.polRef
                && $scope.info().payout[x].refType == data.refType
                && $scope.info().payout[x].refSeqno == data.refSeqno
                && $scope.info().payout[x].payeeid == data.payeeid
                && $scope.info().payout[x].benefitPolRef == data.benefitPolRef
            ){
                $scope.info().payout[x].deleted = true;
            }
        }
    };

    $scope.hasInfo = function(){
        if(!fn.isEmpty($scope.info().payout) && $scope.info().payout.length == 0) return false;

        for (let x in $scope.info().payout){
        	if(fn.isEmpty($scope.info().payout[x].deleted) || (!fn.isEmpty($scope.info().payout[x].deleted) && $scope.info().payout[x].deleted == false)) return true;
        }
        return false;
    };
    $scope.can_edit = function(){
        return !fn.isEmpty(ClaimService.getInfo().regNo) && ClaimService.can_edit(2).can_edit;
    };
    $scope.addRemarks = function(polRef){
        $rootScope.$broadcast(cast.ADD_REMARKS,polRef);
    };
});

Since the project was created first using Angular JS I'm not yet familiar with it.

Thank you in advance!!!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top