← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 21069: event-capture: file type dataelements - WIP

 

------------------------------------------------------------
revno: 21069
committer: Abyot Asalefew Gizaw <abyota@xxxxxxxxx>
branch nick: dhis2
timestamp: Mon 2015-11-16 16:48:46 +0100
message:
  event-capture: file type dataelements - WIP
modified:
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/i18n/i18n_app.properties
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/controllers.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/directives.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/services.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/eventList.html


--
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-event-capture/i18n/i18n_app.properties'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/i18n/i18n_app.properties	2015-10-20 12:54:44 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/i18n/i18n_app.properties	2015-11-16 15:48:46 +0000
@@ -23,6 +23,7 @@
 save_and_add_new=Save and add new
 save_and_close=Save and close
 save_and_back=Save and go back
+upload=Upload
 delete=Delete
 cancel=Cancel
 close=Close

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/controllers.js	2015-11-12 19:53:13 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/controllers.js	2015-11-16 15:48:46 +0000
@@ -12,6 +12,7 @@
                 $modal,
                 $translate,
                 $anchorScroll,
+                $window,
                 orderByFilter,
                 SessionStorageService,
                 Paginator,
@@ -61,7 +62,8 @@
     $scope.currentElement = {id: '', update: false};
     $scope.optionSets = [];
     $scope.proceedSelection = true;
-    $scope.formUnsaved = false;    
+    $scope.formUnsaved = false;
+    $scope.fileNames = {};
     
     //notes
     $scope.note = {};
@@ -1092,4 +1094,24 @@
         }
         return 'form-control';
     };
+    
+    $scope.getClickFunction = function(dhis2Event, column){
+        
+        if(column.id === 'comment'){
+            return "showNotes(" + dhis2Event + ")"; 
+        }
+        else{
+            if(dhis2Event.event ===$scope.currentEvent.evnet){
+                return '';
+            }
+            else{
+                return "showEventList(" + dhis2Event + ")"; 
+            }
+        }        
+        return '';        
+    };
+    
+    $scope.downloadFile = function(eventUid, dataElementUid) {        
+        $window.open('../api/events/files?eventUid=' + eventUid +'&dataElementUid=' + dataElementUid, '_blank', '');  
+    };
 });
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/directives.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/directives.js	2015-10-23 08:08:54 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/directives.js	2015-11-16 15:48:46 +0000
@@ -1,3 +1,5 @@
+/* global selection, angular */
+
 'use strict';
 
 /* Directives */
@@ -29,4 +31,99 @@
             }
         }
     };
-});
\ No newline at end of file
+})
+
+.directive('d2FileInputField', function () {
+
+    return {
+        restrict: 'E',
+        templateUrl: 'views/file-input.html',
+        link: function (scope, element, attrs) {}
+    };
+})
+
+.directive('d2FileInput', function($parse, $timeout, FileService, DialogService){
+    
+    return {
+        restrict: "A",
+        link: function (scope, element, attrs) { 
+            var modelGetter = $parse(attrs.d2FileInput);
+            var modelSetter = modelGetter.assign;
+            
+            var nameGetter = $parse(attrs.d2FileInputName);
+            var nameSetter = nameGetter.assign;
+ 
+            var updateModel = function () {
+                FileService.upload(element[0].files[0]).then(function(data){
+                    if(data && data.status === 'OK' && data.response && data.response.fileResource && data.response.fileResource.id){
+                        $timeout(function(){
+                            modelSetter(scope, data.response.fileResource.id);
+                            nameSetter(scope, element[0].files[0].name);
+                            scope.$apply();
+                        });
+                    }
+                    else{
+                        var dialogOptions = {
+                            headerText: 'error',
+                            bodyText: 'file_upload_failed'
+                        };		
+                        DialogService.showDialog({}, dialogOptions);
+                    }
+                    
+                });                 
+            };             
+            element.bind('change', updateModel);            
+        }
+    };    
+})
+
+.directive('d2FileInputDelete', function($parse, $timeout, ModalService, FileService, DialogService){
+    
+    return {
+        restrict: "A",
+        link: function (scope, element, attrs) {
+            var modelGetter = $parse(attrs.d2FileInputDelete);
+            var modelSetter = modelGetter.assign;
+            var nameGetter = $parse(attrs.d2FileInputName);
+            var nameSetter = nameGetter.assign;
+            
+            if(modelGetter(scope)) {
+                FileService.get(modelGetter(scope)).then(function(data){
+                    if(data && data.name && data.id){
+                        $timeout(function(){
+                            nameSetter(scope, data.name);
+                            scope.$apply();
+                        });
+                    }
+                    else{
+                        var dialogOptions = {
+                            headerText: 'error',
+                            bodyText: 'file_missing'
+                        };		
+                        DialogService.showDialog({}, dialogOptions);
+                    }                    
+                });                 
+            }            
+            
+            var deleteFile = function () {
+                var modalOptions = {
+                    closeButtonText: 'cancel',
+                    actionButtonText: 'remove',
+                    headerText: 'remove',
+                    bodyText: 'are_you_sure_to_remove'
+                };
+
+                ModalService.showModal({}, modalOptions).then(function(result){
+                    $timeout(function(){
+                        modelSetter(scope, '');
+                        nameSetter(scope, '');
+                        scope.$apply();
+                    });
+                });
+            };
+             
+            element.bind('click', deleteFile);            
+        }
+    };    
+});
+

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/services.js	2015-10-01 10:07:00 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/services.js	2015-11-16 15:48:46 +0000
@@ -17,6 +17,34 @@
     };
 })
 
+/* Service for uploading/downloading file */
+.service('FileService', function ($http) {
+
+    return {
+        get: function (uid) {
+            var promise = $http.get('../api/fileResources/' + uid).then(function (response) {
+                return response.data;
+            });
+            return promise;
+        },
+        download: function (fileName) {
+            var promise = $http.get(fileName).then(function (response) {
+                return response.data;
+            });
+            return promise;
+        },
+        upload: function(file){
+            var formData = new FormData();
+            formData.append('file', file);
+            var headers = {transformRequest: angular.identity, headers: {'Content-Type': undefined}};
+            var promise = $http.post('../api/fileResources', formData, headers).then(function(response){
+                return response.data;
+            });
+            return promise;
+        }
+    };
+})
+
 .factory('OfflineECStorageService', function($http, $q, $rootScope, ECStorageService){
     return {        
         hasLocalData: function() {

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css	2015-10-15 14:54:15 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css	2015-11-16 15:48:46 +0000
@@ -376,4 +376,31 @@
 .ui-datepicker-group .ui-datepicker-header {
     //height: 1.5em; 
     height: inherit;  //this is to make it play nice with bootstrap
-}
\ No newline at end of file
+}
+
+.btn-file {
+    position: relative;
+    overflow: hidden;
+}
+.btn-file input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 100%;
+    min-height: 100%;
+    font-size: 100px;
+    text-align: right;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    background: red;
+    cursor: inherit;
+    display: block;
+}
+/*.file-input input[readonly] {
+    background-color: white !important;
+    cursor: text !important;
+}*/
+
+/*input[type='file'] {
+    opacity:0
+}*/
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html	2015-10-20 09:25:25 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html	2015-11-16 15:48:46 +0000
@@ -187,6 +187,30 @@
                                        input-field-id={{eventGridColumn.id}} 
                                        ng-change="saveDatavalue()" />
                             </div>
+                            <div ng-switch-when="FILE_RESOURCE">                                
+                                <div class="input-group">
+                                    <div class="form-control">
+                                        <a href ng-click="downloadFile(currentEvent.event, eventGridColumn.id)">{{fileNames[eventGridColumn.id]}}</a>                                        
+                                    </div>
+                                    <span class="input-group-btn">
+                                        <span class="btn btn-primary btn-file">
+                                            <span ng-if="currentEvent[eventGridColumn.id]" title="{{'delete' | translate}}" d2-file-input-name="fileNames[eventGridColumn.id]" d2-file-input-delete="currentEvent[eventGridColumn.id]">
+                                                <i class="fa fa-trash"></i>
+                                            </span>
+                                            <span ng-if="!currentEvent[eventGridColumn.id]" title="{{'upload' | translate}}">
+                                                <i class="fa fa-upload"></i>
+                                                <input type="file" 
+                                                       ng-required={{eventGridColumn.compulsory}}
+                                                       ng-disabled="assignedFields[eventGridColumn.id]"
+                                                       name="foo"
+                                                       input-field-id={{eventGridColumn.id}}
+                                                       d2-file-input="currentEvent[eventGridColumn.id]" 
+                                                       d2-file-input-name="fileNames[eventGridColumn.id]">
+                                            </span>                                                
+                                        </span>
+                                    </span>                
+                                </div>
+                            </div>
                             <div ng-switch-default>
                                 <input type="text"                                             
                                     ng-model="currentEvent[eventGridColumn.id]"                                        
@@ -407,6 +431,30 @@
                                            input-field-id={{de.dataElement.id}}
                                            ng-change="saveDatavalue()" />
                                 </div>
+                                <div ng-switch-when="FILE_RESOURCE">
+                                    <div class="input-group">
+                                        <div class="form-control">
+                                            <a href ng-click="downloadFile(currentEvent.event, de.dataElement.id)">{{fileNames[de.dataElement.id]}}</a>                                        
+                                        </div>
+                                        <span class="input-group-btn">
+                                            <span class="btn btn-primary btn-file">
+                                                <span ng-if="currentEvent[de.dataElement.id]" title="{{'delete' | translate}}" d2-file-input-name="fileNames[de.dataElement.id]" d2-file-input-delete="currentEvent[de.dataElement.id]">
+                                                    <i class="fa fa-trash"></i>
+                                                </span>
+                                                <span ng-if="!currentEvent[de.dataElement.id]" title="{{'upload' | translate}}">
+                                                    <i class="fa fa-upload"></i>
+                                                    <input type="file" 
+                                                           ng-required={{eventGridColumn.compulsory}}
+                                                           ng-disabled="assignedFields[de.dataElement.id]"
+                                                           name="foo"
+                                                           input-field-id={{de.dataElement.id}}
+                                                           d2-file-input="currentEvent[de.dataElement.id]" 
+                                                           d2-file-input-name="fileNames[de.dataElement.id]">
+                                                </span>                                                
+                                            </span>
+                                        </span>                
+                                    </div>                                    
+                                </div>
                                 <div ng-switch-default>
                                     <input type="text"                                                  
                                         ng-model="currentEvent[de.dataElement.id]"                                                 

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/eventList.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/eventList.html	2015-10-15 15:09:49 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/eventList.html	2015-11-16 15:48:46 +0000
@@ -54,82 +54,79 @@
                 <table class="listTable dhis2-table-striped-border dhis2-table-hover">
                     <thead>                        
                         <tr>
-                            <th ng-repeat="eventGridColumn in eventGridColumns | filter: {show: true}">                                
-                                <span ng-if="eventGridColumn.id !== 'comment'">
-                                    
-                                    <!-- sort icon begins -->                                
-                                    <span ng-hide="eventGridColumn.showFilter" class="bold" ng-click="sortEventGrid(eventGridColumn)">
-                                        <span ng-class="{true: 'red'} [sortHeader.id == eventGridColumn.id]"><i class="fa fa-sort"></i></span>
-                                        <span ng-if="eventGridColumn.id !== 'uid'">{{eventGridColumn.name}}</span>
-                                        <span ng-if="eventGridColumn.id == 'uid'">{{eventGridColumn.name | translate}}</span>
-                                    </span>
-                                    <!-- sort icon ends -->
-
-                                    <!-- filter icon begins -->
-                                    <span class='pull-right hideInPrint'>
-                                        <span ng-show="!eventGridColumn.filterWithRange">
-                                            <a href ng-click="searchInGrid(eventGridColumn)" title="{{searchLabel}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [filterText[eventGridColumn.id] == undefined || filterText[eventGridColumn.id] == '']"><i class="fa fa-search"></i></span></a>
-                                        </span>
-                                        <span ng-show="eventGridColumn.filterWithRange">                                            
-                                            <a href ng-click="searchInGrid(eventGridColumn)" title="{{searchLabel}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [(filterText[eventGridColumn.id].start == undefined || filterText[eventGridColumn.id].start == '') && (filterText[eventGridColumn.id].end == undefined || filterText[eventGridColumn.id].end == '')]"><i class="fa fa-search"></i></span></a>
-                                        </span>                                                    
-                                    </span>
-                                    <!-- filter icon ends -->
-                                    
-                                    <!-- filter input field begins -->
-                                    <span ng-show="eventGridColumn.showFilter">                                          
-                                        <span ng-switch="eventGridColumn.valueType">                                            
-                                            <span ng-switch-when="NUMBER">
-                                                <input style="width: 45%;" placeholder="{{'lower_limit' | translate}}" type="number" ng-model="filterText[eventGridColumn.id].start" ng-blur="searchInGrid(eventGridColumn)">
-                                                <input style="width: 45%;" placeholder="{{'upper_limit' | translate}}" type="number" ng-model="filterText[eventGridColumn.id].end" ng-blur="searchInGrid(eventGridColumn)">
-                                            </span>
-                                            <span ng-switch-when="INTEGER">
-                                                <input style="width: 45%;" placeholder="{{'lower_limit' | translate}}" type="number" ng-model="filterText[eventGridColumn.id].start" ng-blur="searchInGrid(eventGridColumn)">
-                                                <input style="width: 45%;" placeholder="{{'upper_limit' | translate}}" type="number" ng-model="filterText[eventGridColumn.id].end" ng-blur="searchInGrid(eventGridColumn)">
-                                            </span>
-                                            <span ng-switch-when="INTEGER_POSITIVE">
-                                                <input style="width: 45%;" placeholder="{{'lower_limit' | translate}}" type="number" min="1" ng-model="filterText[eventGridColumn.id].start" ng-blur="searchInGrid(eventGridColumn)">
-                                                <input style="width: 45%;" placeholder="{{'upper_limit' | translate}}" type="number" min="1" ng-model="filterText[eventGridColumn.id].end" ng-blur="searchInGrid(eventGridColumn)">
-                                            </span>
-                                            <span ng-switch-when="INTEGER_NEGATIVE">
-                                                <input style="width: 45%;" placeholder="{{'lower_limit' | translate}}" type="number" max="-1" ng-model="filterText[eventGridColumn.id].start" ng-blur="searchInGrid(eventGridColumn)">
-                                                <input style="width: 45%;" placeholder="{{'upper_limit' | translate}}" type="number" max="-1" ng-model="filterText[eventGridColumn.id].end" ng-blur="searchInGrid(eventGridColumn)">
-                                            </span>
-                                            <span ng-switch-when="INTEGER_ZERO_OR_POSITIVE">
-                                                <input style="width: 45%;" placeholder="{{'lower_limit' | translate}}" type="number" min="0" ng-model="filterText[eventGridColumn.id].start" ng-blur="searchInGrid(eventGridColumn)">
-                                                <input style="width: 45%;" placeholder="{{'upper_limit' | translate}}" type="number" min="0" ng-model="filterText[eventGridColumn.id].end" ng-blur="searchInGrid(eventGridColumn)">
-                                            </span>
-                                            <span ng-switch-when="DATE">
-                                                <input style="width: 70%;" placeholder="{{'start_date' | translate}}" type="text" ng-model="filterText[eventGridColumn.id].start" d2-date readonly="readonly">
-                                                <span ng-hide="!filterText[eventGridColumn.id].start || filterText[eventGridColumn.id].start == undefined || filterText[eventGridColumn.id].start == ''">
-                                                    <a href ng-click='removeStartFilterText(eventGridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>                                                        
-                                                </span>
-                                                <input style="width: 70%;" placeholder="{{'end_date' | translate}}" type="text" ng-model="filterText[eventGridColumn.id].end" d2-date readonly="readonly">
-                                                <span ng-hide="!filterText[eventGridColumn.id].end || filterText[eventGridColumn.id].end == undefined || filterText[eventGridColumn.id].end == ''">
-                                                    <a href ng-click='removeEndFilterText(eventGridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>                                                        
-                                                </span> 
-                                            </span>
-                                            <span ng-switch-default>
-                                                <input type="text" style="width: 90%;" ng-model="filterText[eventGridColumn.id]" ng-blur="searchInGrid(eventGridColumn)">
+                            <th ng-repeat="eventGridColumn in eventGridColumns | filter: {show: true}" ng-if="eventGridColumn.id !== 'comment'">                                    
+                                <!-- sort icon begins -->                                
+                                <span ng-hide="eventGridColumn.showFilter" class="bold" ng-click="sortEventGrid(eventGridColumn)">
+                                    <span ng-class="{true: 'red'} [sortHeader.id == eventGridColumn.id]"><i class="fa fa-sort"></i></span>
+                                    <span ng-if="eventGridColumn.id !== 'uid'">{{eventGridColumn.name}}</span>
+                                    <span ng-if="eventGridColumn.id == 'uid'">{{eventGridColumn.name | translate}}</span>
+                                </span>
+                                <!-- sort icon ends -->
+
+                                <!-- filter icon begins -->
+                                <span class='pull-right hideInPrint'>
+                                    <span ng-show="!eventGridColumn.filterWithRange">
+                                        <a href ng-click="searchInGrid(eventGridColumn)" title="{{searchLabel}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [filterText[eventGridColumn.id] == undefined || filterText[eventGridColumn.id] == '']"><i class="fa fa-search"></i></span></a>
+                                    </span>
+                                    <span ng-show="eventGridColumn.filterWithRange">                                            
+                                        <a href ng-click="searchInGrid(eventGridColumn)" title="{{searchLabel}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [(filterText[eventGridColumn.id].start == undefined || filterText[eventGridColumn.id].start == '') && (filterText[eventGridColumn.id].end == undefined || filterText[eventGridColumn.id].end == '')]"><i class="fa fa-search"></i></span></a>
+                                    </span>                                                    
+                                </span>
+                                <!-- filter icon ends -->
+
+                                <!-- filter input field begins -->
+                                <span ng-show="eventGridColumn.showFilter">                                          
+                                    <span ng-switch="eventGridColumn.valueType">                                            
+                                        <span ng-switch-when="NUMBER">
+                                            <input style="width: 45%;" placeholder="{{'lower_limit' | translate}}" type="number" ng-model="filterText[eventGridColumn.id].start" ng-blur="searchInGrid(eventGridColumn)">
+                                            <input style="width: 45%;" placeholder="{{'upper_limit' | translate}}" type="number" ng-model="filterText[eventGridColumn.id].end" ng-blur="searchInGrid(eventGridColumn)">
+                                        </span>
+                                        <span ng-switch-when="INTEGER">
+                                            <input style="width: 45%;" placeholder="{{'lower_limit' | translate}}" type="number" ng-model="filterText[eventGridColumn.id].start" ng-blur="searchInGrid(eventGridColumn)">
+                                            <input style="width: 45%;" placeholder="{{'upper_limit' | translate}}" type="number" ng-model="filterText[eventGridColumn.id].end" ng-blur="searchInGrid(eventGridColumn)">
+                                        </span>
+                                        <span ng-switch-when="INTEGER_POSITIVE">
+                                            <input style="width: 45%;" placeholder="{{'lower_limit' | translate}}" type="number" min="1" ng-model="filterText[eventGridColumn.id].start" ng-blur="searchInGrid(eventGridColumn)">
+                                            <input style="width: 45%;" placeholder="{{'upper_limit' | translate}}" type="number" min="1" ng-model="filterText[eventGridColumn.id].end" ng-blur="searchInGrid(eventGridColumn)">
+                                        </span>
+                                        <span ng-switch-when="INTEGER_NEGATIVE">
+                                            <input style="width: 45%;" placeholder="{{'lower_limit' | translate}}" type="number" max="-1" ng-model="filterText[eventGridColumn.id].start" ng-blur="searchInGrid(eventGridColumn)">
+                                            <input style="width: 45%;" placeholder="{{'upper_limit' | translate}}" type="number" max="-1" ng-model="filterText[eventGridColumn.id].end" ng-blur="searchInGrid(eventGridColumn)">
+                                        </span>
+                                        <span ng-switch-when="INTEGER_ZERO_OR_POSITIVE">
+                                            <input style="width: 45%;" placeholder="{{'lower_limit' | translate}}" type="number" min="0" ng-model="filterText[eventGridColumn.id].start" ng-blur="searchInGrid(eventGridColumn)">
+                                            <input style="width: 45%;" placeholder="{{'upper_limit' | translate}}" type="number" min="0" ng-model="filterText[eventGridColumn.id].end" ng-blur="searchInGrid(eventGridColumn)">
+                                        </span>
+                                        <span ng-switch-when="DATE">
+                                            <input style="width: 70%;" placeholder="{{'start_date' | translate}}" type="text" ng-model="filterText[eventGridColumn.id].start" d2-date readonly="readonly">
+                                            <span ng-hide="!filterText[eventGridColumn.id].start || filterText[eventGridColumn.id].start == undefined || filterText[eventGridColumn.id].start == ''">
+                                                <a href ng-click='removeStartFilterText(eventGridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>                                                        
+                                            </span>
+                                            <input style="width: 70%;" placeholder="{{'end_date' | translate}}" type="text" ng-model="filterText[eventGridColumn.id].end" d2-date readonly="readonly">
+                                            <span ng-hide="!filterText[eventGridColumn.id].end || filterText[eventGridColumn.id].end == undefined || filterText[eventGridColumn.id].end == ''">
+                                                <a href ng-click='removeEndFilterText(eventGridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>                                                        
                                             </span> 
-                                        </span>                                                    
-                                    </span>
-                                    <!-- filter input field ends -->
-                                </span>
-                                <span ng-if="eventGridColumn.id === 'comment'">
-                                    {{'comment' | translate}}
-                                </span>
-                            </th> 
+                                        </span>
+                                        <span ng-switch-default>
+                                            <input type="text" style="width: 90%;" ng-model="filterText[eventGridColumn.id]" ng-blur="searchInGrid(eventGridColumn)">
+                                        </span> 
+                                    </span>                                                    
+                                </span>
+                                <!-- filter input field ends -->                                
+                            </th>
+                            <!-- visible when comment exisits -->
+                            <th ng-repeat="eventGridColumn in eventGridColumns | filter: {show: true}" ng-if="eventGridColumn.id === 'comment'">                                
+                                {{'comment' | translate}}
+                            </th>
+                            <!-- visible when comment exisits -->
                         </tr>                        
                     </thead>
                     <tbody id="list">
                         <tr title="{{'click_for_action' | translate}}" ng-repeat="dhis2Event in dhis2Events | orderBy:d2Sort:reverse | gridFilter:filterText:filterTypes">                           
-                            <td ng-repeat="eventGridColumn in eventGridColumns | filter: {show: true}">
+                            <td d2-context-menu ng-click="showEventList(dhis2Event)" ng-repeat="eventGridColumn in eventGridColumns | filter: {show: true}" ng-if="eventGridColumn.id !== 'comment'">
                                 
                                 <!-- Visible when event is not under editing -->                                
-                                <div d2-context-menu 
-                                    ng-click="showEventList(dhis2Event)"
-                                    ng-show="currentEvent.event !== dhis2Event.event && eventGridColumn.id !== 'comment'">
+                                <div ng-show="currentEvent.event !== dhis2Event.event">
                                     <span ng-switch="eventGridColumn.valueType">
                                         <span ng-switch-when="BOOLEAN">
                                             <span ng-if="dhis2Event[eventGridColumn.id] == 'false'">{{noLabel}}</span>
@@ -146,8 +143,7 @@
                                 <!-- Visible when event is not under editing -->                                
                                 
                                 <!-- Visible when event is under editing in grid -->
-                                <div style="cursor:default;"
-                                    ng-if="(currentEvent.event == dhis2Event.event) && eventGridColumn.id !== 'comment'">
+                                <div ng-if="currentEvent.event === dhis2Event.event" style="cursor:default;">
                                     <ng-form name="innerFormGrid">
                                         <div ng-if="eventGridColumn.id === 'uid'">
                                             <input type="text"
@@ -326,11 +322,11 @@
                                                 </div>
                                                 <div ng-switch-default>
                                                     <input type="text"
-                                                               ng-model="currentEvent[eventGridColumn.id]" 
-                                                               ng-required={{eventGridColumn.compulsory}}
-                                                               ng-blur="updateEventDataValue(dhis2Event, eventGridColumn.id)" 
-                                                               name="foo" 
-                                                               ng-class="getInputNotifcationClass(eventGridColumn.id,false)"/>                                                    
+                                                            ng-model="currentEvent[eventGridColumn.id]" 
+                                                            ng-required={{eventGridColumn.compulsory}}
+                                                            ng-blur="updateEventDataValue(dhis2Event, eventGridColumn.id)" 
+                                                            name="foo" 
+                                                            ng-class="getInputNotifcationClass(eventGridColumn.id,false)"/>                                                    
                                                 </div>
                                                 <div ng-messages="innerFormGrid.foo.$error" ng-if="interacted(innerFormGrid.foo)" class="required" ng-messages-include="../dhis-web-commons/angular-forms/error-messages.html">
                                                 </div>
@@ -339,13 +335,12 @@
                                     </ng-form>
                                 </div>
                                 <!-- Visible when event is under editing in grid -->
-                                
-                                <!-- visible when comment exisits -->
-                                <span ng-if="eventGridColumn.id === 'comment'" >                                
-                                    <a href ng-click="showNotes(dhis2Event)" title="{{'show_comments'| translate}}" ng-if="dhis2Event.notes"><i class="fa fa-info-circle"></i></a>
-                                </span>    
-                                <!-- visible when comment exisits -->                                
-                            </td>
+                            </td>
+                            <!-- visible when comment exisits -->
+                            <td ng-repeat="eventGridColumn in eventGridColumns | filter: {show: true}" ng-if="eventGridColumn.id === 'comment'">
+                                <a href ng-click="showNotes(dhis2Event)" title="{{'show_comments'| translate}}" ng-if="dhis2Event.notes"><i class="fa fa-info-circle"></i></a>
+                            </td>
+                            <!-- visible when comment exisits -->
                         </tr>
                     </tbody>        
                 </table>