← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 21155: Better support for entering events in table-view mode

 

------------------------------------------------------------
revno: 21155
committer: Markus Bekken <markus.bekken@xxxxxxxxx>
branch nick: dhis2
timestamp: Sun 2015-11-22 21:50:10 +0100
message:
  Better support for entering events in table-view mode
modified:
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/table-entry-form.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js	2015-11-18 21:57:07 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js	2015-11-22 20:50:10 +0000
@@ -51,6 +51,12 @@
     $scope.valueLabel = $translate.instant('value');
     $scope.providedElsewhereLabel = $translate.instant('provided_elsewhere');
     
+    $scope.EVENTSTATUSCOMPLETELABEL = "COMPLETED";
+    $scope.EVENTSTATUSSKIPPEDLABEL = "SKIPPED";
+    $scope.EVENTSTATUSVISITEDLABEL = "VISITED";
+    $scope.EVENTSTATUSACTIVELABEL = "ACTIVE";
+    $scope.EVENTSTATUSSCHEDULELABEL = "SCHEDULE";
+    $scope.validatedDateSetForEvent = {};
 
     var userProfile = SessionStorageService.get('USER_PROFILE');
     var storedBy = userProfile && userProfile.username ? userProfile.username : '';
@@ -607,9 +613,11 @@
     };
 
     $scope.saveEventDateForEvent = function (eventToSave) {
+       
         $scope.eventDateSaved = false;
         if (eventToSave.eventDate === '') {
             $scope.invalidDate = eventToSave.event;
+            $scope.validatedDateSetForEvent = {date: '', event: eventToSave};
             return false;
         }
 
@@ -618,6 +626,7 @@
 
         if (rawDate !== convertedDate) {
             $scope.invalidDate = true;
+            $scope.validatedDateSetForEvent = {date: '', event: eventToSave};
             return false;
         }
 
@@ -631,13 +640,14 @@
             eventDate: DateUtils.formatFromUserToApi(eventToSave.eventDate),
             trackedEntityInstance: eventToSave.trackedEntityInstance
         };
-
+        
         DHIS2EventFactory.updateForEventDate(e).then(function (data) {
             eventToSave.sortingDate = eventToSave.eventDate;
             $scope.invalidDate = false;
             $scope.eventDateSaved = eventToSave.event;
             eventToSave.statusColor = EventUtils.getEventStatusColor(eventToSave); 
             sortEventsByStage('UPDATE');
+            $scope.validatedDateSetForEvent = {date: eventToSave.eventDate, event: eventToSave};
         });
     };
 
@@ -751,6 +761,81 @@
             });
         }
     };
+    
+    $scope.notesModal = function(){
+                
+        var bodyList = [];
+        for(i = 0; i < $scope.currentEvent.notes.length; i++){
+            var currentNote = $scope.currentEvent.notes[i];            
+            bodyList.push({value1: currentNote.storedDate, value2: currentNote.value});
+        }
+        
+        var dialogOptions = {
+            closeButtonText: 'Close',            
+            textAreaButtonText: 'Add',
+            textAreaButtonShow: $scope.currentEvent.status === $scope.EVENTSTATUSSKIPPEDLABEL ? false : true,
+            headerText: 'Notes',
+            bodyTextAreas: [{model: 'note', placeholder: 'Add another note here', required: true, show: $scope.currentEvent.status === $scope.EVENTSTATUSSKIPPEDLABEL ? false : true}],
+            bodyList: bodyList,
+            currentEvent: $scope.currentEvent
+        };        
+        
+        var dialogDefaults = {
+            
+            templateUrl: 'views/list-with-textarea-modal.html',
+            controller: function ($scope, $modalInstance, DHIS2EventFactory) {                    
+                    $scope.modalOptions = dialogOptions;
+                    $scope.formSubmitted = false;
+                    $scope.currentEvent = $scope.modalOptions.currentEvent;
+                    $scope.textAreaValues = [];
+                    
+                    $scope.textAreaButtonClick = function(){                                               
+                        if($scope.textAreaModalForm.$valid){                                
+                            $scope.note = $scope.textAreaValues["note"];
+                            $scope.addNote();
+                            $scope.textAreaModalForm.$setUntouched();
+                            $scope.formSubmitted = false;                            
+                        }
+                        else {
+                            $scope.formSubmitted = true;
+                        }
+                    }                   
+                                        
+                    $scope.modalOptions.close = function(){                        
+                        $modalInstance.close();
+                    };
+                    
+                    $scope.addNote = function(){
+                                                
+                        newNote = {value: $scope.note};
+                        
+                        if (angular.isUndefined($scope.modalOptions.bodyList) || $scope.modalOptions.bodyList.length === 0) {
+                            $scope.modalOptions.bodyList = [{value1: today, value2: $scope.note}];
+                        }
+                        else {
+                            $scope.modalOptions.bodyList.splice(0, 0, {value1: today, value2: $scope.note});
+                        }
+                        
+                        var e = {event: $scope.currentEvent.event,
+                                program: $scope.currentEvent.program,
+                                programStage: $scope.currentEvent.programStage,
+                                orgUnit: $scope.currentEvent.orgUnit,
+                                trackedEntityInstance: $scope.currentEvent.trackedEntityInstance,
+                                notes: [newNote]
+                        };
+
+                        DHIS2EventFactory.updateForNote(e).then(function (data) {
+                            $scope.note = '';
+                        });
+                        
+                        $scope.note = $scope.textAreaValues["note"] = "";
+                    };                    
+                }            
+        };
+        
+        DialogService.showDialog(dialogDefaults, dialogOptions);
+        
+    }
 
     $scope.clearNote = function () {
         $scope.note = '';
@@ -978,9 +1063,19 @@
                         index = i;
                     }
                 }
-                $scope.eventsByStage[$scope.currentEvent.programStage].splice(index, 1);
-                sortEventsByStage('REMOVE');
-                $scope.currentEvent = null;
+                               
+                var programStageID = $scope.currentEvent.programStage;
+                
+                if($scope.displayCustomForm === "TABLE"){
+                    $scope.currentEvent = {};                
+                }
+                else {
+                    $scope.currentEvent = null;
+                }
+
+                $scope.eventsByStage[programStageID].splice(index, 1);
+                $scope.currentStageEvents = $scope.eventsByStage[programStageID];
+                sortEventsByStage('REMOVE');                                
             });
         });
     };
@@ -1106,7 +1201,7 @@
         if (event) {
             $scope.showDataEntry(event, false);
         }
-
+        
     };
 
     $scope.showMap = function (event) {
@@ -1138,7 +1233,8 @@
         }
         return status;
     };
-
+    
+    
 })
 
 .controller('EventCreationController',
@@ -1245,4 +1341,106 @@
     $scope.cancel = function () {
         $modalInstance.close();
     };
+})
+
+.controller('EventOptionsInTableController', function($scope){
+    
+    var COMPLETE = "Complete";
+    var INCOMPLETE = "Incomplete";
+    var VALIDATE = "Validate";
+    var DELETE = "Delete";    
+    var SKIP = "Skip";
+    var UNSKIP = "Unskip";
+    var NOTE = "Note";
+    
+    $scope.eventTableOptions = {};    
+    $scope.eventTableOptions[COMPLETE] = {text: "Complete", tooltip: 'Complete', icon: "<span class='glyphicon glyphicon-check'></span>", value: COMPLETE, onClick: $scope.completeIncompleteEvent, sort: 0};
+    $scope.eventTableOptions[INCOMPLETE] = {text: "Reopen", tooltip: 'Reopen', icon: "<span class='glyphicon glyphicon-pencil'></span>", value: INCOMPLETE, onClick: $scope.completeIncompleteEvent, sort: 1};
+    $scope.eventTableOptions[VALIDATE] = {text: "Validate", tooltip: 'Validate', icon: "<span class='glyphicon glyphicon-cog'></span>", value: VALIDATE, onClick: $scope.validateEvent, sort: 2};    
+    $scope.eventTableOptions[DELETE] = {text: "Delete", tooltip: 'Delete', icon: "<span class='glyphicon glyphicon-floppy-remove'></span>", value: DELETE, onClick: $scope.deleteEvent, sort: 3};
+    $scope.eventTableOptions[SKIP] = {text: "Skip", tooltip: 'Skip', icon: "<span class='glyphicon glyphicon-step-forward'></span>", value: SKIP, onClick: $scope.skipUnskipEvent, sort: 4};
+    $scope.eventTableOptions[UNSKIP] = {text: "Schedule back", tooltip: 'Schedule back', icon: "<span class='glyphicon glyphicon-step-backward'></span>", value: UNSKIP, onClick: $scope.skipUnskipEvent, sort: 5};
+    $scope.eventTableOptions[NOTE] = {text: "Notes", tooltip: 'Show notes', icon: "<span class='glyphicon glyphicon-list-alt'></span>", value: NOTE, onClick: $scope.notesModal, sort: 6};
+    
+    $scope.eventRow.validatedEventDate = $scope.eventRow.eventDate;   
+    
+    updateEventTableOptions();
+    
+    $scope.$watch("eventRow.status", function(newValue, oldValue){        
+                
+        if(newValue !== oldValue){
+            updateEventTableOptions();
+        }    
+        
+    });
+    
+    $scope.$watch("validatedDateSetForEvent", function(newValue, oldValue){                        
+        
+        if(angular.isDefined(newValue)){
+            if(!angular.equals(newValue, {})){
+                var updatedEvent = newValue.event;
+                if(updatedEvent === $scope.eventRow){                    
+                        $scope.eventRow.validatedEventDate = newValue.date; 
+                        updateEventTableOptions();                    
+                }
+            }
+        }        
+        
+    });
+    
+    function updateEventTableOptions(){
+        
+        var eventRow = $scope.eventRow;        
+        
+        for(var key in $scope.eventTableOptions){
+            $scope.eventTableOptions[key].show = true;
+            $scope.eventTableOptions[key].disabled = false;
+        }
+        
+        $scope.eventTableOptions[UNSKIP].show = false;        
+        
+        switch(eventRow.status){
+            case $scope.EVENTSTATUSCOMPLETELABEL:
+                $scope.eventTableOptions[COMPLETE].show = false;
+                $scope.eventTableOptions[SKIP].show = false; 
+                $scope.eventTableOptions[DELETE].show = false;
+                $scope.eventTableOptions[VALIDATE].show = false;                
+                $scope.defaultOption = $scope.eventTableOptions[INCOMPLETE];
+                break;
+            case $scope.EVENTSTATUSSKIPPEDLABEL:
+                $scope.eventTableOptions[COMPLETE].show = false;
+                $scope.eventTableOptions[INCOMPLETE].show = false;
+                $scope.eventTableOptions[VALIDATE].show = false;                
+                $scope.eventTableOptions[SKIP].show = false;
+                
+                $scope.eventTableOptions[UNSKIP].show = true;
+                $scope.defaultOption = $scope.eventTableOptions[UNSKIP];
+                break;            
+            default:                 
+                if(eventRow.validatedEventDate){
+                    $scope.eventTableOptions[INCOMPLETE].show = false;
+                    $scope.defaultOption = $scope.eventTableOptions[COMPLETE];
+                }
+                else {
+                    $scope.eventTableOptions[INCOMPLETE].show = false;                    
+                    $scope.eventTableOptions[VALIDATE].show = false;
+                    $scope.eventTableOptions[COMPLETE].disabled = true;
+                    $scope.defaultOption = $scope.eventTableOptions[COMPLETE];
+                }                          
+                break;
+        }
+        
+        createOptionsArray();
+    }
+    
+    function createOptionsArray(){
+        
+        $scope.eventTableOptionsArr = [];        
+        
+        for(var key in $scope.eventTableOptions){
+            $scope.eventTableOptionsArr[$scope.eventTableOptions[key].sort] = $scope.eventTableOptions[key];
+        }
+    }        
 });
+
+

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html	2015-11-20 09:12:59 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html	2015-11-22 20:50:10 +0000
@@ -1,7 +1,7 @@
 <div class="panel panel-info" ng-controller="DataEntryController">
     <div class="panel-heading handle bold">
         {{dataentryWidget.title| translate}}        
-
+        
         <span class="pull-right widget-link">
 
             <a href ng-click="toggleEventsTableDisplay()" title="{{showEventsAsTables ? 'toggle_table_view_off' : 'toggle_table_view_on'| translate}}" ng-show="stagesCanBeShownAsTable"><span ng-if="!showEventsAsTables"><i class="fa fa-bars vertical-center"></i></span><span ng-if="showEventsAsTables"><i class="fa fa-square vertical-center"></i></span></a>
@@ -32,11 +32,11 @@
                 <thead>
                     <tr>
                         <th class="active" style="vertical-align:middle" ng-repeat="stage in programStages">                            
-                            {{stage.name}}  
+                            {{stage.name}}
 
                             <!-- event add/filter icon begins -->
                             <span class='pull-right'>
-
+                                
                                 <span ng-if="stageNeedsEvent(stage) && selectedEnrollment.status === 'ACTIVE'">
                                     <a href title="{{'create_new_event'| translate}}" ng-click="showCreateEvent(stage)" style="vertical-align:middle"><i class="fa fa-plus"></i></a>
                                 </span>
@@ -162,8 +162,9 @@
 
                 <!-- data entry form ends -->
 
-                <!-- data entry/event buttons begins -->
-                <div class="form-group">
+                <!-- data entry/event buttons begins -->                
+                
+                <div class="form-group" ng-if="displayCustomForm !== 'TABLE'">
                     <div class='row'><hr></div>
                     <a href ng-click="completeIncompleteEvent()" 
                        class="btn btn-warning" 
@@ -190,39 +191,41 @@
             </div>
         </form>
 
-        <div ng-show="currentEvent" class='remove-default-padding overflow-ellipsis'>
-            <div class='row'><hr></div>
-            <div class="add-default-padding">
-                <textarea class="form-control" rows="3" ng-model="note" placeholder="{{'add_new_note_here'| translate}}"></textarea> 
-                <div class="vertical-spacing">
-                    <button type="button" 
-                            class="btn btn-primary"
-                            ng-click="addNote()">
-                        {{'add'| translate}}
-                    </button>        
-                    <button type="button" 
-                            class="btn btn-default small-horizonal-spacing" 
-                            ng-click="clearNote()">
-                        {{'clear'| translate}}
-                    </button>
+        <div ng-if="displayCustomForm !== 'TABLE'">
+            <div ng-show="currentEvent" class='remove-default-padding overflow-ellipsis'>
+                <div class='row'><hr></div>
+                <div class="add-default-padding">
+                    <textarea class="form-control" rows="3" ng-model="note" placeholder="{{'add_new_note_here'| translate}}"></textarea> 
+                    <div class="vertical-spacing">
+                        <button type="button" 
+                                class="btn btn-primary"
+                                ng-click="addNote()">
+                            {{'add'| translate}}
+                        </button>        
+                        <button type="button" 
+                                class="btn btn-default small-horizonal-spacing" 
+                                ng-click="clearNote()">
+                            {{'clear'| translate}}
+                        </button>
+                    </div>
                 </div>
+                <table class="table table-striped dhis2-table-hover">
+                    <tr ng-repeat="note in currentEvent.notes">
+                        <td class="add-default-left-padding">
+                            <d2-pop-over content="note" template="popover.html" details="{{'details'| translate}}">
+                                <!--div>{{note.value}}</div -->
+                            </d2-pop-over>
+                            <script type="text/ng-template" id="popover.html">
+                                <p>{{content.value}}</p>
+                                <hr>
+                                <p><strong>{{'created_by' | translate}}: </strong>{{content.storedBy}}</p>
+                                <p><strong>{{'date' | translate}}: </strong>{{content.storedDate}}</p>                           
+                            </script>
+                        </td> 
+                    </tr>
+                </table>
             </div>
-            <table class="table table-striped dhis2-table-hover">
-                <tr ng-repeat="note in currentEvent.notes">
-                    <td class="add-default-left-padding">
-                        <d2-pop-over content="note" template="popover.html" details="{{'details'| translate}}">
-                            <!--div>{{note.value}}</div -->
-                        </d2-pop-over>
-                        <script type="text/ng-template" id="popover.html">
-                            <p>{{content.value}}</p>
-                            <hr>
-                            <p><strong>{{'created_by' | translate}}: </strong>{{content.storedBy}}</p>
-                            <p><strong>{{'date' | translate}}: </strong>{{content.storedDate}}</p>                           
-                        </script>
-                    </td> 
-                </tr>
-            </table>
+            <div ng-show="currentEvent && !currentEvent.notes" class="alert alert-warning">{{'no_notes_exist'| translate}}</div> 
         </div>
-        <div ng-show="currentEvent && !currentEvent.notes" class="alert alert-warning">{{'no_notes_exist'| translate}}</div> 
     </div>        
 </div>

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/table-entry-form.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/table-entry-form.html	2015-10-20 09:44:15 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/table-entry-form.html	2015-11-22 20:50:10 +0000
@@ -1,7 +1,7 @@
 <form name="tableEntryOuterForm" novalidate>          
     <table class="table-borderless table-striped" ng-if='currentEvent'>
         <thead>
-            <tr class="col-md-12">
+            <tr class="col-md-12">                
                 <th class="col-md-2" >
                     {{currentEvent.excecutionDateLabel}}
                 </th>
@@ -12,23 +12,28 @@
                         <span ng-show="showHelpText[prStDe.dataElement.id]" ><br>{{prStDes[prStDe.dataElement.id].dataElement.description}}</span>
                     </a> 
                 </th>
-            </tr>
+                <th class="col-md-2">Status</th>                
         </thead>
-        <tr ng-class="currentEvent === eventRow ? 'selected' : 'col-md-12'" ng-repeat="eventRow in currentStageEvents" ng-if="currentStageEvents" ng-click="switchToEventRow(eventRow)">
-            <td class="col-md-2">
-                <input type="text"
-                       placeholder="{{dhis2CalendarFormat.keyDateFormat}}"
-                       class="form-control" 
-                       ng-class="getInputDueDateClass(eventRow)"
-                       d2-date 
-                       ng-model="eventRow.eventDate"
-                       ng-disabled="eventRow.status === 'SKIPPED' || eventRow.enrollmentStatus !== 'ACTIVE' || eventRow.editingNotAllowed "    
-                       ng-required="true"
-                       blur-or-change="saveEventDateForEvent(eventRow)"/>
+        <tr ng-class="currentEvent === eventRow ? getEventStyle(eventRow) : 'col-md-12'" ng-repeat="eventRow in currentStageEvents" ng-if="currentStageEvents" ng-click="switchToEventRow(eventRow)">            
+            <td class="col-md-2" ng-class="{'current-event-td': currentEvent === eventRow}">
+                <div ng-if="eventRow === currentEvent && eventRow.status !== EVENTSTATUSCOMPLETELABEL && eventRow.status !== EVENTSTATUSSKIPPEDLABEL">
+                    <input type="text"
+                           placeholder="{{dhis2CalendarFormat.keyDateFormat}}"
+                           class="form-control" 
+                           ng-class="getInputDueDateClass(eventRow)"
+                           d2-date 
+                           ng-model="eventRow.eventDate"
+                           ng-disabled="eventRow.status === 'SKIPPED' || eventRow.enrollmentStatus !== 'ACTIVE' || eventRow.editingNotAllowed "    
+                           ng-required="true"
+                           blur-or-change="saveEventDateForEvent(eventRow)"/>                    
+                </div>
+                <div ng-if="eventRow !== currentEvent || eventRow.status === EVENTSTATUSCOMPLETELABEL || eventRow.status === EVENTSTATUSSKIPPEDLABEL">
+                    {{eventRow.eventDate}}
+                </div>
                 <span ng-if="invalidDate === eventRow.event" class="error">{{'date_required'| translate}}</span>
             </td>
-            <td ng-class="prStDe.dataElement.optionSetValue ? 'col-md-2 optionset' : 'col-md-2'" ng-repeat="prStDe in currentStage.programStageDataElements">
-                <ng-form ng-if="eventRow === currentEvent" name="innerform">
+            <td ng-class="{'current-event-td': currentEvent === eventRow, 'col-md-2 optionset': prStDe.dataElement.optionSetValue, 'col-md-2': !(prStDe.dataElement.optionSetValue)}" ng-repeat="prStDe in currentStage.programStageDataElements">                
+                <ng-form ng-if="eventRow === currentEvent && eventRow.status !== EVENTSTATUSCOMPLETELABEL && eventRow.status !== EVENTSTATUSSKIPPEDLABEL && eventRow.validatedEventDate" name="innerform">
                     <div ng-if="prStDe.dataElement.optionSetValue">
                         <div ng-if="!selectedProgram.dataEntryMethod || optionSets[prStDe.dataElement.optionSet.id].options.length >= 7">
                             <ui-select  ng-model="eventRow[prStDe.dataElement.id]" 
@@ -212,7 +217,7 @@
                         </div>
                     </div>
                 </ng-form>
-                <ng-form ng-if="eventRow !== currentEvent" name="innerform" >
+                <ng-form ng-if="eventRow !== currentEvent || eventRow.status === EVENTSTATUSCOMPLETELABEL || eventRow.status === EVENTSTATUSSKIPPEDLABEL || !eventRow.validatedEventDate" name="innerform" >
                     <div ng-switch="prStDe.dataElement.valueType">
                          <div ng-switch-when="BOOLEAN">
                             <select class="form-control"
@@ -250,6 +255,32 @@
                 </ng-form>
                 <span ng-show="dataEntryOuterForm.submitted && innerform.foo.$invalid" class="error">{{'required'| translate}}</span>
             </td>
+            <td class="col-md-2" ng-class="{'current-event-td': currentEvent === eventRow}">
+                <div ng-controller="EventOptionsInTableController" ng-if="eventRow.enrollmentStatus === 'ACTIVE' && !eventRow.editingNotAllowed && eventRow.orgUnit === selectedOrgUnit.id">
+                    <div class="btn-group event-table-options-dropdown dropup" ng-show="eventRow==currentEvent">
+                      <button type="button" class="btn btn-default" ng-click="defaultOption.onClick()"  data-toggle='tooltip' title='{{defaultOption.tooltip | translate}}' ng-bind-html="defaultOption.icon" ng-disabled="defaultOption.disabled">                                   
+                      </button>
+                      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                        <span class="caret"></span>
+                        <span class="sr-only">Toggle Dropdown</span>
+                      </button>
+                      <ul class="dropdown-menu">
+                          <li ng-show="option.show && !option.disabled" ng-repeat="option in eventTableOptionsArr" ng-click="option.onClick()">
+                              <a href="">
+                                  <span ng-bind-html="option.icon"></span>
+                                  &nbsp;{{option.text | translate}}
+                              </a>
+                          </li>                                      
+                      </ul>                                                                
+                    </div>                     
+                    <div ng-show="eventRow!=currentEvent">
+                        <span class="badge event-table-options-badge" ng-class="getEventStyle(eventRow)">
+                            <span ng-show="eventRow.status == EVENTSTATUSCOMPLETELABEL" class="glyphicon glyphicon-ok event-table-options-glypicon"></span>
+                            <span ng-show="eventRow.status != EVENTSTATUSCOMPLETELABEL" class="glyphicon glyphicon-remove event-table-options-glypicon"></span>          
+                        </span>                                                
+                    </div>      
+                </div>
+            </td>
             <!--<td class="col-md-2" ng-if="allowProvidedElsewhereExists">                
                 <div class="align-center" ng-show="prStDe.allowProvidedElsewhere">
                     <input type="checkbox" 
@@ -267,4 +298,4 @@
             {{'add'| translate}}
         </button>
     </div>
-</form>
+</form>
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html	2015-10-23 15:42:36 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html	2015-11-22 20:50:10 +0000
@@ -23,7 +23,6 @@
         <script type="text/javascript" src="../dhis-web-commons/javascripts/jQuery/calendars/jquery.calendars.julian.min.js"></script>
         <script type="text/javascript" src="../dhis-web-commons/javascripts/jQuery/calendars/jquery.calendars.nepali.min.js"></script>
         <script type="text/javascript" src="../dhis-web-commons/javascripts/jQuery/calendars/jquery.calendars.thai.min.js"></script>      
-
         <link type="text/css" rel="stylesheet" href="../dhis-web-commons/javascripts/jQuery/ui/css/redmond/jquery-ui.css">
         <link type="text/css" rel="stylesheet" href="../dhis-web-commons/javascripts/jQuery/calendars/css/ui-redmond.calendars.picker.css">
         

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css	2015-11-11 15:46:28 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css	2015-11-22 20:50:10 +0000
@@ -1184,4 +1184,33 @@
 /* this is because bootstrap adds min-height of 1px for smaller sized columns to prevent them from collapsing when empty*/
 .remove-one-pix {
     margin-top: -1px;
-}
\ No newline at end of file
+}
+
+
+
+.row.row-striped:nth-of-type(odd) {
+    background: #ebf0f6;   
+}
+
+.row.null-margins {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.event-table-options-dropdown {
+    display: flex;
+    padding: 0px;
+}
+
+.badge.event-table-options-badge {
+    padding-top: 0.5;
+    padding-bottom: 0.5;
+    padding-right: 0;
+    padding-left: 0;
+    height: 19px;
+    width: 19px;
+}
+
+.table-striped > tbody > tr:nth-child(odd)> td.current-event-td {
+    background-color: inherit;        
+}   
\ No newline at end of file