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!

Register Log in
  • Congratulations Chris Miller 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

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.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
497
xwb
xwb
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
441
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
454
malpa
malpa
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
924
Mike Lewis
Mike Lewis
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
409
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top