below is the visualforce page,
<apex:page controller="CashReimbursementformController" showHeader="false" sidebar="false">
<!--CSS -->
<apex:stylesheet value="{!URLFOR($Resource.bootstrap334, 'bootstrap-3.3.4-dist/css/bootstrap.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.datepicker_bootstrap,'eternicode-bootstrap-datepicker-809a5c2/css/datepicker3.css')}"/>
<!-- JS -->
<apex:includeScript value="{!URLFOR($Resource.jquery213)}"/>
<apex:includeScript value="{!URLFOR($Resource.angular)}"/>
<apex:includeScript value="{!URLFOR($Resource.bootstrap334, 'bootstrap-3.3.4-dist/js/bootstrap.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.datepicker_bootstrap,'eternicode-bootstrap-datepicker-809a5c2/js/bootstrap-datepicker.js')}"/>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.glyphicon.spinning {
animation: spin 1s infinite linear;
-webkit-animation: spin2 1s infinite linear;
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
/* .requiredBlock {
background-color: #c00;
position: absolute;
left: -4px;
width: 3px;
top: 1px;
bottom: 1px;
} */
.requiredInput {
border-left-color: red;
border-left-width: 2px;
}
.validation{border-color: red;}
@media print {
#printarea,.container,.row,.col-lg-2{
width: 100%;
scale:46%
}
}
.container{
width:100%;
padding-left:3px;
padding-right:3px;
}
</style>
<apex:pageblock id="printarea">
<apex:outputPanel layout="block" styleclass="container">
<apex:form id="theform" enctype="multipart/form-data">
<apex:outputpanel styleclass="row well" layout="block" id="mainpanel">
<nav class="navbar navbar-default" role="navigation" style="background-color:white;border-color:ghostwhite">
<div class="">
<ul class="nav navbar-nav navbar-left">
<li><img src="{!URLFOR($Resource.FH2013, '/newCss_js/images/fairhealth_logo.png')}" style="padding:10px" class="img img-responsive" /></li>
</ul>
<!--
<ul class="nav navbar-nav navbar-right" style="margin:5px">
<li> <h4>
CASH REIMBURSEMENT REPORT</h4><hr style="margin:5px"/>
<table class="" >
<tbody>
<tr>
<td style="text-align:right;font-family:arial;font-size:12px">Mileage Rate</td>
<td style="text-align:left"><apex:inputText value="{!expense.Mileage_Rate__c}" styleClass="" /></td>
</tr>
<tr>
<td style="text-align:right;font-family:arial;font-size:12px">Meal Rate</td>
<td style="text-align:left"><apex:inputText value="{!expense.Meal_Rate__c}" styleClass="" /></td>
</tr>
<tr>
<td style="text-align:right;font-family:arial;font-size:12px">Hotel Rate</td>
<td style="text-align:left"><apex:inputText value="{!expense.Hotel_Rate__c}" styleClass="" /></td>
</tr>
<tr>
<td style="text-align:right;font-family:arial;font-size:12px"></td>
<td style="text-align:left">
</td>
</tr>
</tbody>
</table>
</li>
</ul>
-->
</div>
</nav>
<div id="main">
<div class="panel panel-primary" style="background-color:white;border-color:ghostwhite">
<div class="panel-body ">
<div class="row">
<div class="col-lg-12">
<apex:pagemessages />
</div>
</div>
<div class="row" style="overflow:auto">
<div class="col-lg-5 col-lg-offset-1">
<table class="" >
<tbody>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Name</td>
<td style="text-align:left"><apex:inputText value="{!expense.name__c}" styleClass="" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Department</td>
<td style="text-align:left"><apex:inputText value="{!expense.Department__c}" styleClass="" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Position</td>
<td style="text-align:left"><apex:inputText value="{!expense.Position__c}" styleClass="" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Manager</td>
<td style="text-align:left"><apex:inputField value="{!expense.Manager__c}" styleClass="" /></td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-6">
<table class="" >
<tbody>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Begining</td>
<td style="text-align:left"><apex:inputText value="{!begining}" styleClass="date" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Ending</td>
<td style="text-align:left"><apex:inputText value="{!ending}" styleClass="date" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Prepared By</td>
<td style="text-align:left"><apex:inputField value="{!expense.Prepared_By__c}" styleClass="" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Approved By</td>
<td style="text-align:left"><apex:inputField value="{!expense.Approved_By__c}" styleClass="" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-lg-5 col-lg-offset-1">
<br />
Business Purpose
<apex:inputTextarea value="{!expense.Business_Purpose__c}" styleClass="form-control" rows="2" />
</div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<br />
Travel Authorization
<apex:inputField value="{!expense.Travel_Authorization__c}" />
<apex:actionRegion >
<apex:commandButton action="{!addTravelAuthorization}"
value="Add expenses" />
</apex:actionRegion>
</div>
</div>
</div>
</div>
</div>
<!-- Begining of new table -->
<div id="main">
<div class="panel panel-primary" style="background-color:white;border-color:ghostwhite">
<div class="panel-body ">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<apex:outputpanel id="expenseitem_panel">
<table class="table table-hover" width="100%">
<thead style="background-color:#000040;color:white;font-weight:bold">
<tr>
<th>Category</th>
<th>Date</th>
<th>Vendor Name</th>
<th>Location</th>
<th>Quantity</th>
<th>Amount</th>
<th>Payment Type</th>
<th>Reimburse</th>
<th>Attachment</th>
</tr>
</thead>
<tbody>
<apex:repeat value="{!ewrapper_list}" var="eli">
<tr>
<td><apex:inputField value="{!eli.expitem.Category__c}" styleclass="form-control" style="width:145px" /></td>
<td><apex:inputText value="{!eli.expense_date}" styleClass="date form-control" style="width:100px" /></td>
<td><apex:inputText value="{!eli.Vendor_Name}" styleclass="form-control" style="width:100px" /></td>
<td><apex:inputText value="{!eli.Vendor_Location}" styleclass="form-control" style="width:90px" /></td>
<td><apex:inputText value="{!eli.quantity}" styleclass="form-control" style="width:90px" /></td>
<td><apex:inputText value="{!eli.Amount}" styleclass="form-control amt" style="width:90px" /></td>
<td><apex:inputField value="{!eli.expitem.Payment_Type__c}" styleclass="form-control" style="width:130px" /></td>
<td><apex:inputCheckbox value="{!eli.Reimburseable}" style="width:20px" /></td>
<td> <apex:inputFile value="{!eli.att.body}" filename="{!eli.att.name}" id="file" style="width:190px" rendered="{!if(eli.att.name==null,true,false)}" />
<apex:inputText value="{!eli.att.name}" styleclass="form-control amt" style="width:190px" rendered="{!if(eli.att.name!=null,true,false)}" />
</td>
</tr>
</apex:repeat>
<tr>
<td colspan="2">
<apex:actionRegion >
<apex:commandbutton action="{!addExpenseLineItem}" value="Add Item" />
<apex:commandbutton action="{!removeExpenseLineItem}" value="Remove Item" />
</apex:actionRegion>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="background-color:#000040">
<td></td>
<td style="color:white">Total Amount</td>
<td></td>
<td style="color:white"></td>
<td style="color:white"></td>
<td style="color:white">$<span id="result"></span></td>
<td style="color:white"></td>
<td style="color:white"></td>
<td style="color:white"></td>
</tr>
</tbody>
</table>
</apex:outputpanel>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-5">
<!--
<div class="input-group">
<span class="input-group-addon" id="basic-addon1" >Total Travel</span>
<apex:inputText styleclass="" html-placeholder="" html-aria-describedby="basic-addon1" />
</div><br />
<div class="input-group">
<span class="input-group-addon" id="basic-addon1" >Total Communication</span>
<apex:inputText styleclass="" html-placeholder="" html-aria-describedby="basic-addon1" />
</div><br />
<div class="input-group">
<span class="input-group-addon" id="basic-addon1" >Total Other</span>
<apex:inputText styleclass="" html-placeholder="" html-aria-describedby="basic-addon1" />
</div><br />
-->
<apex:commandbutton action="{!save}" value="Submit" />
<!--
<apex:commandbutton action="{!saveAttachments}" value="Submit" />
-->
</div>
<div class="col-lg-5">
</div>
</div>
</div>
</div>
</div>
<!-- ending of new table -->
</apex:outputpanel>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<button class="btn btn-primary btn-lg loadbtn center-block">
<span class="glyphicon glyphicon-refresh" id="load"></span>
<span id="loadstatus">Status</span>
</button>
</div>
</div>
</div>
</div>
</div>
</apex:form>
</apex:outputPanel>
</apex:pageblock><!-- JS -->
<apex:outputPanel id="script">.
<script type="text/javascript">
$(document).ready(function(){
$('.date').datepicker({ dateFormat: 'yy-mm-dd'});
$(".amt").change(function(){
$(calculateSum);
$('#result').text(sum);
});
$(calculateSum);
function calculateSum() {
var sum = 0;
//iterate through each td based on class and add the values
$(".amt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$('#result').text(sum);
};
});
</script>
</apex:outputPanel>
</apex:page>
Below is it's controller,
public class CashReimbursementformController {
public double mileage_rate{get;set;}
public double meal_rate{get;set;}
public double hotel_rate{get;set;}
public String name{get;set;}
public double total_reimbursement{get;set;}
public Expense__c expense{get;set;}
public String begining{get;set;}
public String ending{get;set;}
public List<ExpenseItemWrapper> ewrapper_list{get;set;}
public CashReimbursementformController(){
total_reimbursement=0.0;
expense=new Expense__c();
User u=[SELECT Id,name,department,userrole.name,managerId from User where Id=:UserInfo.getUserId() LIMIT 1];
expense.Name__c=u.Name;
expense.Department__c=u.Department;
expense.Position__c=u.userrole.name;
expense.Manager__c=u.managerId;
expense.Prepared_By__c=u.Id;
expense.Approved_By__c=u.managerId;
begining=String.valueOf(Date.today());
ending=String.valueOf(Date.today());
ewrapper_list=new List<ExpenseItemWrapper>();
ewrapper_list.add(new ExpenseItemWrapper());
}
public PageReference addTravelAuthorization(){
System.debug('travelauth Id:'+expense.Travel_Authorization__c);
List<Estimated_Expenses__c> eelist=[SELECT expense_type__c,Description__c,createddate,Amount__c FROM Estimated_Expenses__c WHERE Travel_Authorization__c=:expense.Travel_Authorization__c];
System.debug('eelist size: '+eelist.size());
for(Estimated_Expenses__c e:eelist){
ewrapper_list.add(new ExpenseItemWrapper(e.expense_type__c,e.description__c,e.createddate,e.amount__c));
}
return null;
}
public void addExpenseLineItem(){
/* if(expense.Id==null){
insert expense;
}
System.debug('expense Id'+expense.Id);
List<ExpenseLineItem__c> ellist=new List<ExpenseLineItem__c>();
for(ExpenseItemWrapper ew:ewrapper_list){
if(ew.expitem.Id==null){
ew.expitem.expense__c=expense.Id;
ew.expitem.date__c=Date.valueOf(ew.expense_date);
ew.expitem.vendor_name__c=ew.vendor_name;
ew.expitem.vendor_location__c=ew.vendor_location;
ew.expitem.description__c=ew.quantity;
ew.expitem.amount__c=ew.amount;
ew.expitem.reimburseable__c=ew.reimburseable;
ellist.add(ew.expitem);
}
}
insert ellist;
System.debug('ellist size'+ellist.size());
List<Attachment> attlist=new List<Attachment>();
Set<Id> eitemset=new Set<Id>();
for(ExpenseItemWrapper ew:ewrapper_list){
if(ew.att.body!=null && ew.att.name!=null && ew.att.Id==null){
ew.att.parentId=ew.expitem.Id;
eitemset.add(ew.expitem.Id);
attlist.add(ew.att);
}
}
if(attlist.size()!=0)
insert attlist;
ewrapper_list.clear();
System.debug('eitemset:'+eitemset);
List<ExpenseLineItem__c> eitemlist=[SELECT Id,Category__c,Payment_Type__c,date__c,vendor_name__c,vendor_location__c,description__c,amount__c,Reimburseable__c,(select name from attachments limit 1) FROM ExpenseLineItem__c WHERE Id IN:eitemset];
System.debug('eitemlist :'+eitemlist);
for(ExpenseLineItem__c e:eitemlist){
ewrapper_list.add(new ExpenseItemWrapper(e));
}*/
ewrapper_list.add(new ExpenseItemWrapper());
}
public void removeExpenseLineItem(){
if(ewrapper_list.size()!=0)
ewrapper_list.remove(ewrapper_list.size()-1);
}
class ExpenseItemWrapper{
public ExpenseLineItem__c expitem{get;set;}
public String expense_date{get;set;}
public String vendor_name{get;set;}
public String vendor_location{get;set;}
public String quantity{get;set;}
public Decimal amount{get;set;}
public boolean reimburseable{get;set;}
public Attachment att {
get {
if (att == null)
att = new Attachment();
return att;
}
set;
}
public ExpenseItemWrapper(){
att=new Attachment();
expitem=new ExpenseLineItem__c();
}
public ExpenseItemWrapper(String category,string descr,Datetime edate,Decimal amt){
expitem=new ExpenseLineItem__c();
expitem.category__c=category;
att=new Attachment();
quantity=descr;
expense_date=String.valueOf(Date.valueOf(edate));
amount=amt;
}
public ExpenseItemWrapper(ExpenseLineItem__c e){
expitem=e;
//att.name=e.attachments.get(0).name;
att=e.attachments.get(0);
}
}
public PageReference save(){
PageReference pg=null;
try{
expense.Begining__c=Date.valueOf(begining);
expense.Ending__c=Date.valueOf(ending);
insert expense;
pg=new PageReference('/'+expense.Id);
List<ExpenseLineItem__c> ellist=new List<ExpenseLineItem__c>();
for(ExpenseItemWrapper ew:ewrapper_list){
ew.expitem.expense__c=expense.Id;
ew.expitem.date__c=Date.valueOf(ew.expense_date);
ew.expitem.vendor_name__c=ew.vendor_name;
ew.expitem.vendor_location__c=ew.vendor_location;
ew.expitem.description__c=ew.quantity;
ew.expitem.amount__c=ew.amount;
ew.expitem.reimburseable__c=ew.reimburseable;
ellist.add(ew.expitem);
}
insert ellist;
List<Attachment> attlist=new List<Attachment>();
for(ExpenseItemWrapper ew:ewrapper_list){
if(ew.att.body!=null && ew.att.name!=null){
ew.att.parentId=ew.expitem.Id;
attlist.add(ew.att);
}
}
if(attlist.size()!=0)
insert attlist;
}catch(Exception e){
ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR,e.getMessage()));
System.debug(e+'\n'+e.getStackTraceString());
}
return pg;
}
/*
public PageReference saveAttachments(){
PageReference pg=null;
try{
pg=new PageReference('/'+expense.Id);
List<Attachment> attlist=new List<Attachment>();
for(ExpenseItemWrapper ew:ewrapper_list){
if(ew.att.body!=null && ew.att.name!=null){
ew.att.parentId=ew.expitem.Id;
attlist.add(ew.att);
}
}
if(attlist.size()!=0)
insert attlist;
}catch(Exception e){
ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR,e.getMessage()));
System.debug(e+'\n'+e.getStackTraceString());
}
return pg;
}
*/
}
<apex:page controller="CashReimbursementformController" showHeader="false" sidebar="false">
<!--CSS -->
<apex:stylesheet value="{!URLFOR($Resource.bootstrap334, 'bootstrap-3.3.4-dist/css/bootstrap.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.datepicker_bootstrap,'eternicode-bootstrap-datepicker-809a5c2/css/datepicker3.css')}"/>
<!-- JS -->
<apex:includeScript value="{!URLFOR($Resource.jquery213)}"/>
<apex:includeScript value="{!URLFOR($Resource.angular)}"/>
<apex:includeScript value="{!URLFOR($Resource.bootstrap334, 'bootstrap-3.3.4-dist/js/bootstrap.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.datepicker_bootstrap,'eternicode-bootstrap-datepicker-809a5c2/js/bootstrap-datepicker.js')}"/>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.glyphicon.spinning {
animation: spin 1s infinite linear;
-webkit-animation: spin2 1s infinite linear;
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
/* .requiredBlock {
background-color: #c00;
position: absolute;
left: -4px;
width: 3px;
top: 1px;
bottom: 1px;
} */
.requiredInput {
border-left-color: red;
border-left-width: 2px;
}
.validation{border-color: red;}
@media print {
#printarea,.container,.row,.col-lg-2{
width: 100%;
scale:46%
}
}
.container{
width:100%;
padding-left:3px;
padding-right:3px;
}
</style>
<apex:pageblock id="printarea">
<apex:outputPanel layout="block" styleclass="container">
<apex:form id="theform" enctype="multipart/form-data">
<apex:outputpanel styleclass="row well" layout="block" id="mainpanel">
<nav class="navbar navbar-default" role="navigation" style="background-color:white;border-color:ghostwhite">
<div class="">
<ul class="nav navbar-nav navbar-left">
<li><img src="{!URLFOR($Resource.FH2013, '/newCss_js/images/fairhealth_logo.png')}" style="padding:10px" class="img img-responsive" /></li>
</ul>
<!--
<ul class="nav navbar-nav navbar-right" style="margin:5px">
<li> <h4>
CASH REIMBURSEMENT REPORT</h4><hr style="margin:5px"/>
<table class="" >
<tbody>
<tr>
<td style="text-align:right;font-family:arial;font-size:12px">Mileage Rate</td>
<td style="text-align:left"><apex:inputText value="{!expense.Mileage_Rate__c}" styleClass="" /></td>
</tr>
<tr>
<td style="text-align:right;font-family:arial;font-size:12px">Meal Rate</td>
<td style="text-align:left"><apex:inputText value="{!expense.Meal_Rate__c}" styleClass="" /></td>
</tr>
<tr>
<td style="text-align:right;font-family:arial;font-size:12px">Hotel Rate</td>
<td style="text-align:left"><apex:inputText value="{!expense.Hotel_Rate__c}" styleClass="" /></td>
</tr>
<tr>
<td style="text-align:right;font-family:arial;font-size:12px"></td>
<td style="text-align:left">
</td>
</tr>
</tbody>
</table>
</li>
</ul>
-->
</div>
</nav>
<div id="main">
<div class="panel panel-primary" style="background-color:white;border-color:ghostwhite">
<div class="panel-body ">
<div class="row">
<div class="col-lg-12">
<apex:pagemessages />
</div>
</div>
<div class="row" style="overflow:auto">
<div class="col-lg-5 col-lg-offset-1">
<table class="" >
<tbody>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Name</td>
<td style="text-align:left"><apex:inputText value="{!expense.name__c}" styleClass="" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Department</td>
<td style="text-align:left"><apex:inputText value="{!expense.Department__c}" styleClass="" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Position</td>
<td style="text-align:left"><apex:inputText value="{!expense.Position__c}" styleClass="" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Manager</td>
<td style="text-align:left"><apex:inputField value="{!expense.Manager__c}" styleClass="" /></td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-6">
<table class="" >
<tbody>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Begining</td>
<td style="text-align:left"><apex:inputText value="{!begining}" styleClass="date" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Ending</td>
<td style="text-align:left"><apex:inputText value="{!ending}" styleClass="date" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Prepared By</td>
<td style="text-align:left"><apex:inputField value="{!expense.Prepared_By__c}" styleClass="" /></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td style="text-align:left;font-family:arial;font-size:12px">Approved By</td>
<td style="text-align:left"><apex:inputField value="{!expense.Approved_By__c}" styleClass="" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-lg-5 col-lg-offset-1">
<br />
Business Purpose
<apex:inputTextarea value="{!expense.Business_Purpose__c}" styleClass="form-control" rows="2" />
</div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<br />
Travel Authorization
<apex:inputField value="{!expense.Travel_Authorization__c}" />
<apex:actionRegion >
<apex:commandButton action="{!addTravelAuthorization}"
value="Add expenses" />
</apex:actionRegion>
</div>
</div>
</div>
</div>
</div>
<!-- Begining of new table -->
<div id="main">
<div class="panel panel-primary" style="background-color:white;border-color:ghostwhite">
<div class="panel-body ">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<apex:outputpanel id="expenseitem_panel">
<table class="table table-hover" width="100%">
<thead style="background-color:#000040;color:white;font-weight:bold">
<tr>
<th>Category</th>
<th>Date</th>
<th>Vendor Name</th>
<th>Location</th>
<th>Quantity</th>
<th>Amount</th>
<th>Payment Type</th>
<th>Reimburse</th>
<th>Attachment</th>
</tr>
</thead>
<tbody>
<apex:repeat value="{!ewrapper_list}" var="eli">
<tr>
<td><apex:inputField value="{!eli.expitem.Category__c}" styleclass="form-control" style="width:145px" /></td>
<td><apex:inputText value="{!eli.expense_date}" styleClass="date form-control" style="width:100px" /></td>
<td><apex:inputText value="{!eli.Vendor_Name}" styleclass="form-control" style="width:100px" /></td>
<td><apex:inputText value="{!eli.Vendor_Location}" styleclass="form-control" style="width:90px" /></td>
<td><apex:inputText value="{!eli.quantity}" styleclass="form-control" style="width:90px" /></td>
<td><apex:inputText value="{!eli.Amount}" styleclass="form-control amt" style="width:90px" /></td>
<td><apex:inputField value="{!eli.expitem.Payment_Type__c}" styleclass="form-control" style="width:130px" /></td>
<td><apex:inputCheckbox value="{!eli.Reimburseable}" style="width:20px" /></td>
<td> <apex:inputFile value="{!eli.att.body}" filename="{!eli.att.name}" id="file" style="width:190px" rendered="{!if(eli.att.name==null,true,false)}" />
<apex:inputText value="{!eli.att.name}" styleclass="form-control amt" style="width:190px" rendered="{!if(eli.att.name!=null,true,false)}" />
</td>
</tr>
</apex:repeat>
<tr>
<td colspan="2">
<apex:actionRegion >
<apex:commandbutton action="{!addExpenseLineItem}" value="Add Item" />
<apex:commandbutton action="{!removeExpenseLineItem}" value="Remove Item" />
</apex:actionRegion>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="background-color:#000040">
<td></td>
<td style="color:white">Total Amount</td>
<td></td>
<td style="color:white"></td>
<td style="color:white"></td>
<td style="color:white">$<span id="result"></span></td>
<td style="color:white"></td>
<td style="color:white"></td>
<td style="color:white"></td>
</tr>
</tbody>
</table>
</apex:outputpanel>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-5">
<!--
<div class="input-group">
<span class="input-group-addon" id="basic-addon1" >Total Travel</span>
<apex:inputText styleclass="" html-placeholder="" html-aria-describedby="basic-addon1" />
</div><br />
<div class="input-group">
<span class="input-group-addon" id="basic-addon1" >Total Communication</span>
<apex:inputText styleclass="" html-placeholder="" html-aria-describedby="basic-addon1" />
</div><br />
<div class="input-group">
<span class="input-group-addon" id="basic-addon1" >Total Other</span>
<apex:inputText styleclass="" html-placeholder="" html-aria-describedby="basic-addon1" />
</div><br />
-->
<apex:commandbutton action="{!save}" value="Submit" />
<!--
<apex:commandbutton action="{!saveAttachments}" value="Submit" />
-->
</div>
<div class="col-lg-5">
</div>
</div>
</div>
</div>
</div>
<!-- ending of new table -->
</apex:outputpanel>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<button class="btn btn-primary btn-lg loadbtn center-block">
<span class="glyphicon glyphicon-refresh" id="load"></span>
<span id="loadstatus">Status</span>
</button>
</div>
</div>
</div>
</div>
</div>
</apex:form>
</apex:outputPanel>
</apex:pageblock><!-- JS -->
<apex:outputPanel id="script">.
<script type="text/javascript">
$(document).ready(function(){
$('.date').datepicker({ dateFormat: 'yy-mm-dd'});
$(".amt").change(function(){
$(calculateSum);
$('#result').text(sum);
});
$(calculateSum);
function calculateSum() {
var sum = 0;
//iterate through each td based on class and add the values
$(".amt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$('#result').text(sum);
};
});
</script>
</apex:outputPanel>
</apex:page>
Below is it's controller,
public class CashReimbursementformController {
public double mileage_rate{get;set;}
public double meal_rate{get;set;}
public double hotel_rate{get;set;}
public String name{get;set;}
public double total_reimbursement{get;set;}
public Expense__c expense{get;set;}
public String begining{get;set;}
public String ending{get;set;}
public List<ExpenseItemWrapper> ewrapper_list{get;set;}
public CashReimbursementformController(){
total_reimbursement=0.0;
expense=new Expense__c();
User u=[SELECT Id,name,department,userrole.name,managerId from User where Id=:UserInfo.getUserId() LIMIT 1];
expense.Name__c=u.Name;
expense.Department__c=u.Department;
expense.Position__c=u.userrole.name;
expense.Manager__c=u.managerId;
expense.Prepared_By__c=u.Id;
expense.Approved_By__c=u.managerId;
begining=String.valueOf(Date.today());
ending=String.valueOf(Date.today());
ewrapper_list=new List<ExpenseItemWrapper>();
ewrapper_list.add(new ExpenseItemWrapper());
}
public PageReference addTravelAuthorization(){
System.debug('travelauth Id:'+expense.Travel_Authorization__c);
List<Estimated_Expenses__c> eelist=[SELECT expense_type__c,Description__c,createddate,Amount__c FROM Estimated_Expenses__c WHERE Travel_Authorization__c=:expense.Travel_Authorization__c];
System.debug('eelist size: '+eelist.size());
for(Estimated_Expenses__c e:eelist){
ewrapper_list.add(new ExpenseItemWrapper(e.expense_type__c,e.description__c,e.createddate,e.amount__c));
}
return null;
}
public void addExpenseLineItem(){
/* if(expense.Id==null){
insert expense;
}
System.debug('expense Id'+expense.Id);
List<ExpenseLineItem__c> ellist=new List<ExpenseLineItem__c>();
for(ExpenseItemWrapper ew:ewrapper_list){
if(ew.expitem.Id==null){
ew.expitem.expense__c=expense.Id;
ew.expitem.date__c=Date.valueOf(ew.expense_date);
ew.expitem.vendor_name__c=ew.vendor_name;
ew.expitem.vendor_location__c=ew.vendor_location;
ew.expitem.description__c=ew.quantity;
ew.expitem.amount__c=ew.amount;
ew.expitem.reimburseable__c=ew.reimburseable;
ellist.add(ew.expitem);
}
}
insert ellist;
System.debug('ellist size'+ellist.size());
List<Attachment> attlist=new List<Attachment>();
Set<Id> eitemset=new Set<Id>();
for(ExpenseItemWrapper ew:ewrapper_list){
if(ew.att.body!=null && ew.att.name!=null && ew.att.Id==null){
ew.att.parentId=ew.expitem.Id;
eitemset.add(ew.expitem.Id);
attlist.add(ew.att);
}
}
if(attlist.size()!=0)
insert attlist;
ewrapper_list.clear();
System.debug('eitemset:'+eitemset);
List<ExpenseLineItem__c> eitemlist=[SELECT Id,Category__c,Payment_Type__c,date__c,vendor_name__c,vendor_location__c,description__c,amount__c,Reimburseable__c,(select name from attachments limit 1) FROM ExpenseLineItem__c WHERE Id IN:eitemset];
System.debug('eitemlist :'+eitemlist);
for(ExpenseLineItem__c e:eitemlist){
ewrapper_list.add(new ExpenseItemWrapper(e));
}*/
ewrapper_list.add(new ExpenseItemWrapper());
}
public void removeExpenseLineItem(){
if(ewrapper_list.size()!=0)
ewrapper_list.remove(ewrapper_list.size()-1);
}
class ExpenseItemWrapper{
public ExpenseLineItem__c expitem{get;set;}
public String expense_date{get;set;}
public String vendor_name{get;set;}
public String vendor_location{get;set;}
public String quantity{get;set;}
public Decimal amount{get;set;}
public boolean reimburseable{get;set;}
public Attachment att {
get {
if (att == null)
att = new Attachment();
return att;
}
set;
}
public ExpenseItemWrapper(){
att=new Attachment();
expitem=new ExpenseLineItem__c();
}
public ExpenseItemWrapper(String category,string descr,Datetime edate,Decimal amt){
expitem=new ExpenseLineItem__c();
expitem.category__c=category;
att=new Attachment();
quantity=descr;
expense_date=String.valueOf(Date.valueOf(edate));
amount=amt;
}
public ExpenseItemWrapper(ExpenseLineItem__c e){
expitem=e;
//att.name=e.attachments.get(0).name;
att=e.attachments.get(0);
}
}
public PageReference save(){
PageReference pg=null;
try{
expense.Begining__c=Date.valueOf(begining);
expense.Ending__c=Date.valueOf(ending);
insert expense;
pg=new PageReference('/'+expense.Id);
List<ExpenseLineItem__c> ellist=new List<ExpenseLineItem__c>();
for(ExpenseItemWrapper ew:ewrapper_list){
ew.expitem.expense__c=expense.Id;
ew.expitem.date__c=Date.valueOf(ew.expense_date);
ew.expitem.vendor_name__c=ew.vendor_name;
ew.expitem.vendor_location__c=ew.vendor_location;
ew.expitem.description__c=ew.quantity;
ew.expitem.amount__c=ew.amount;
ew.expitem.reimburseable__c=ew.reimburseable;
ellist.add(ew.expitem);
}
insert ellist;
List<Attachment> attlist=new List<Attachment>();
for(ExpenseItemWrapper ew:ewrapper_list){
if(ew.att.body!=null && ew.att.name!=null){
ew.att.parentId=ew.expitem.Id;
attlist.add(ew.att);
}
}
if(attlist.size()!=0)
insert attlist;
}catch(Exception e){
ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR,e.getMessage()));
System.debug(e+'\n'+e.getStackTraceString());
}
return pg;
}
/*
public PageReference saveAttachments(){
PageReference pg=null;
try{
pg=new PageReference('/'+expense.Id);
List<Attachment> attlist=new List<Attachment>();
for(ExpenseItemWrapper ew:ewrapper_list){
if(ew.att.body!=null && ew.att.name!=null){
ew.att.parentId=ew.expitem.Id;
attlist.add(ew.att);
}
}
if(attlist.size()!=0)
insert attlist;
}catch(Exception e){
ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR,e.getMessage()));
System.debug(e+'\n'+e.getStackTraceString());
}
return pg;
}
*/
}
No comments:
Post a Comment