Hello Guys i managed to get it to calculate the total based on range of dates thanks to your help. One thing though, when the application my List Component is not populated with data until i select a date from the date field. Is there a way to fix the problem? Below is the updated code
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" width="100%" height="100%" verticalAlign="top" verticalGap="0" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0" xmlns:ns1="ascript.*" creationComplete="init();" initialize="initDate();" xmlns:ns2="components.*"> <mx:Style source="css/styleSheet.css"/> <mx:Script> <![CDATA[ import components.newEntryForm; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.managers.CursorManager; import mx.managers.PopUpManager; import mx.rpc.events.ResultEvent; import mx.events.CollectionEvent; protected const MAX_DATE:Date=new Date(2020, 11, 31); /******************* code to Filter based on Date Range *****************************/ protected const MIN_DATE:Date=new Date(2014, 0, 1); /******************* Start Pop Ups *****************************/ private var add_win:newEntryForm; /******************* code to get Expense Details *****************************/ private var expenseAr:ArrayCollection = new ArrayCollection; [Bindable] private var filteredAr:ArrayCollection=new ArrayCollection(); protected function arrColl_filterFunc(item:Object):Boolean { var cDate:Number=Date.parse(item.hireDate); if (!sDate || !eDate) { return true; } if (sDate.selectedDate && eDate.selectedDate) { return (sDate.selectedDate.time <= cDate) && (eDate.selectedDate.time >= cDate); } else if (sDate.selectedDate) { return sDate.selectedDate.time <= cDate; } else if (eDate.selectedDate) { return eDate.selectedDate.time >= cDate; } else { return true; } } protected function initDate():void { sDate.selectedDate=MIN_DATE; sDate.selectableRange={rangeStart: MIN_DATE, rangeEnd: MAX_DATE}; eDate.selectedDate=MAX_DATE; eDate.selectableRange=sDate.selectableRange; } private function createdaddPopup():void { add_win=newEntryForm(PopUpManager.createPopUp(this, newEntryForm, true)); } private function expenseResult(event:ResultEvent):void { expenseAr=event.result as ArrayCollection; expenseAr.addEventListener(CollectionEvent.COLLECTION_CHANGE, calculateSum); } private function filterList():void { expenseAr.filterFunction=arrColl_filterFunc; expenseAr.refresh(); for (var i:int=expenseAr.length - 1; i >= 0; i--) { if (!filteredAr.contains(expenseAr[i])) { filteredAr.addItem(expenseAr[i]); } } for (i=filteredAr.length - 1; i >= 0; i--) { if (!expenseAr.contains(filteredAr[i])) { filteredAr.removeItemAt(i); } } } private function init():void { moRentalsSvc.getExpense(); } public function calculateSum(event:CollectionEvent):void { var amt:Number=0; var n:int=expenseAr.length; for (var i:int=0; i < n; i++) { var expenseEntry:Object=expenseAr.getItemAt(i); amt+=Number(expenseEntry.subTotal); } sum.text=ugxftr.format(amt.toString()); } ]]> </mx:Script> <mx:RemoteObject id="moRentalsSvc" destination="ColdFusion" source="moRentals.src.CFCs.crud" showBusyCursor="true" fault="CursorManager.removeBusyCursor();Alert.show(event.fault.message)"> <mx:method name="getExpense" result="expenseResult(event)"/> </mx:RemoteObject> <mx:DefaultTileListEffect id="dtle0" fadeOutDuration="500" fadeInDuration="500" moveDuration="500" color="0xe7e7e8"/> <mx:CurrencyFormatter id="ugxftr" precision="0" thousandsSeparatorTo="," useThousandsSeparator="true" rounding="up" currencySymbol="UGX "/> <mx:DateFormatter id="dateFormat" formatString="MMMM DD, YYYY"/> <mx:HBox styleName="header" width="100%" height="50" verticalAlign="middle" verticalGap="0"> <mx:Image source="assets/logo.png"/> <mx:Spacer width="100%"/> <mx:Label text="Logged in as: Aaliyah Ntulo"/> <mx:Image source="assets/power.png"/> </mx:HBox> <mx:HBox width="100%" height="100%" horizontalGap="0"> <mx:VBox width="200" height="100%" verticalGap="0" backgroundColor="#818284" horizontalAlign="center"> <ns2:menuButton> <mx:Image source="assets/dashboard.png"/> <mx:Label text="Dashboard"/> </ns2:menuButton> <ns2:menuButton> <mx:Image source="assets/drivers.png"/> <mx:Spacer/> <mx:Label text="Drivers"/> </ns2:menuButton> <ns2:menuButton> <mx:Image source="assets/car.png"/> <mx:Spacer/> <mx:Label text="Vehicles"/> </ns2:menuButton> <ns2:customBtn/> </mx:VBox> <mx:VBox height="100%" backgroundColor="#FFFFFF" verticalGap="0"> <mx:HBox width="100%" paddingLeft="40" paddingRight="45" verticalAlign="middle" height="66"> <mx:Label text="Filter From:" styleName="listLabel"/> <mx:DateField id="sDate" change="filterList();"/> <mx:Label text="To:" styleName="listLabel"/> <mx:DateField id="eDate" change="filterList();"/> <mx:Spacer width="100%"/> <mx:Button label="New Entry" click="createdaddPopup()"/> </mx:HBox> <mx:HRule width="100%"/> <mx:HBox width="100%" paddingLeft="40" paddingRight="46" verticalAlign="middle" height="36"> <mx:Label text="DATE" width="120" styleName="listLabelHeading"/> <mx:Label text="MACHINE" width="90" styleName="listLabelHeading"/> <mx:Label text="OPERATOR" width="130" styleName="listLabelHeading"/> <mx:Label text="INCOME" width="90" styleName="listLabelHeading"/> <mx:Label text="EXPENDITURE" width="90" styleName="listLabelHeading"/> <mx:Label text="PROFIT" width="90" styleName="listLabelHeading"/> </mx:HBox> <mx:HRule width="100%"/> <ns1:transparentList id="expenseList" width="100%" dataProvider="{filteredAr}" itemRenderer="renderers.expenseListRenderer" selectedIndex="0" height="100%" paddingBottom="0" borderSkin="{null}" itemsChangeEffect="{dtle0}"/> <mx:HBox width="100%" backgroundColor="#0F76BB" height="35" verticalAlign="middle" paddingLeft="20" paddingRight="20"> <mx:Label text="Opening Balance:"/> <mx:Label text="UGX 30,000,000"/> <mx:Spacer width="100%"/> <mx:Label text="Total for the Day"/> <mx:Label id="sum"/> </mx:HBox> </mx:VBox> <mx:VBox width="100%" height="100%" backgroundColor="#E7E7E8" verticalGap="0"> <mx:HBox width="430" verticalAlign="middle" height="73" backgroundColor="#818284" paddingLeft="24"> <mx:Label x="10" y="10" text="Details of Hired Machine"/> </mx:HBox> <mx:Spacer height="10"/> <mx:HBox width="100%" paddingLeft="24"> <mx:Image width="80" height="80" source="assets/drivers/{expenseList.selectedItem.picture}"/> <mx:VBox width="100%" height="80"> <mx:HBox width="100%"> <mx:Label text="Operator:" styleName="listLabel"/> <mx:Text text="{expenseList.selectedItem.fullname}"/> </mx:HBox> <mx:HRule width="100%"/> <mx:HBox width="100%" height="100%" verticalAlign="middle"> <mx:Image source="assets/add.png"/> <mx:Text text="Add"/> <mx:Spacer width="15"/> <mx:Image source="assets/statistics.png"/> <mx:Text text="Statistics"/> <mx:Spacer width="15"/> <mx:Image source="assets/edit1.png"/> <mx:Text text="Edit"/> </mx:HBox> <mx:HRule width="100%"/> </mx:VBox> </mx:HBox> <mx:Spacer height="15"/> <mx:VBox width="100%" paddingLeft="24"> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Date of Hire:" styleName="listLabel" width="125"/> <mx:Text text="{dateFormat.format(expenseList.selectedItem.hireDate)}"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Machine:" styleName="listLabel" width="125"/> <mx:Text text="{expenseList.selectedItem.machineNumber}"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Distance Moved:" styleName="listLabel" width="125"/> <mx:Text text="{expenseList.selectedItem.distanceMoved} Km(s)"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Meter Reading:" styleName="listLabel" width="125"/> <mx:Text text="{expenseList.selectedItem.mileage} Km(s)"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Amount Hired:" styleName="listLabel" width="125"/> <mx:Text text="{ugxftr.format(expenseList.selectedItem.revenue)}"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Expense:" styleName="listLabel" width="125"/> <mx:Text text="{ugxftr.format(expenseList.selectedItem.expense)}"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Reason for Expense:" styleName="listLabel" width="125"/> <mx:Text text="{expenseList.selectedItem.expenseReason}" width="100%"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Total:" styleName="listLabel" width="125"/> <mx:Text text="{ugxftr.format(expenseList.selectedItem.subTotal)}"/> </mx:HBox> </mx:VBox> <mx:Spacer height="10"/> <mx:HBox width="430" height="35" backgroundColor="#818284" verticalAlign="middle" paddingLeft="24"> <mx:Label text="Job Description"/> </mx:HBox> <mx:Spacer height="10"/> <mx:Text text="{expenseList.selectedItem.description}" width="430" paddingLeft="24" paddingRight="24"/> </mx:VBox> </mx:HBox> </mx:Application>
