← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 20217: tracker-capture: TEI grid loading progress indicator

 

------------------------------------------------------------
revno: 20217
committer: Abyot Asalefew Gizaw <abyota@xxxxxxxxx>
branch nick: dhis2
timestamp: Thu 2015-09-17 17:26:24 +0200
message:
  tracker-capture: TEI grid loading progress indicator
modified:
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/home.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/tei.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-tracker-capture/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js	2015-09-16 14:17:44 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js	2015-09-17 15:26:24 +0000
@@ -53,10 +53,11 @@
     $scope.enrollment = {programStartDate: '', programEndDate: '', operator: $scope.defaultOperators[0]};
     $scope.searchMode = { listAll: 'LIST_ALL', freeText: 'FREE_TEXT', attributeBased: 'ATTRIBUTE_BASED' };    
     $scope.optionSets = null;
+    $scope.attributesById = null;
     $scope.doSearch = true;
     
     //Registration
-    $scope.showRegistrationDiv = false;
+    $scope.showRegistrationDiv = false;    
     
     //watch for selection of org unit from tree
     $scope.$watch('selectedOrgUnit', function() {           
@@ -65,10 +66,22 @@
             
             SessionStorageService.set('SELECTED_OU', $scope.selectedOrgUnit);
             
-            $scope.trackedEntityList = [];
+            $scope.trackedEntityList = null;
             
             $scope.optionSets = CurrentSelection.getOptionSets();
             
+            $scope.attributesById = CurrentSelection.getAttributesById();
+            
+            if(!$scope.attributesById){
+                $scope.attributesById = [];
+                MetaDataFactory.getAll('attributes').then(function(atts){                    
+                    angular.forEach(atts, function(att){
+                        $scope.attributesById[att.id] = att;
+                    });
+                    CurrentSelection.setAttributesById($scope.attributesById);
+                });
+            }
+            
             if(!$scope.optionSets){
                 $scope.optionSets = [];
                 MetaDataFactory.getAll('optionSets').then(function(optionSets){
@@ -143,12 +156,12 @@
     $scope.getProgramAttributes = function(program){ 
         $scope.selectedProgram = program;
         
-        if($scope.selectedProgram){
+        /*if($scope.selectedProgram){
             $location.path('/').search({program: $scope.selectedProgram.id});
         }
         else{
             $location.path('/').search({});
-        }
+        }*/
 
         $scope.trackedEntityList = null;        
         
@@ -216,8 +229,7 @@
 
             if(!$scope.searchText){                
                 $scope.emptySearchText = true;
-                $scope.teiFetched = false;   
-                $scope.teiCount = null;
+                $scope.teiFetched = false;
                 return;
             }       
             
@@ -234,8 +246,7 @@
             
             if(!$scope.attributeUrl.hasValue){
                 $scope.emptySearchAttribute = true;
-                $scope.teiFetched = false;   
-                $scope.teiCount = null;
+                $scope.teiFetched = false;
                 return;
             }
             
@@ -255,8 +266,7 @@
     $scope.fetchTeis = function(){
         
         $scope.teiFetched = false;
-        $scope.trackedEntityList = null; 
-        $scope.teiCount = null;
+        $scope.trackedEntityList = null;
         
         //get events for the specified parameters        
         TEIService.search($scope.searchingOrgUnit.id, 
@@ -266,10 +276,6 @@
                                             $scope.attributeUrl.url,
                                             $scope.pager,
                                             true).then(function(data){            
-            if(data.rows){
-                $scope.teiCount = data.rows.length;
-            }                    
-            
             if( data.metaData && data.metaData.pager ){
                 $scope.pager = data.metaData.pager;
                 $scope.pager.toolBarDisplay = 5;
@@ -282,11 +288,12 @@
             
             //process tei grid
             $scope.trackedEntityList = TEIGridService.format(data,false, $scope.optionSets, null);
+
             $scope.showTrackedEntityDiv = true;
             $scope.showSearchDiv = false;
             $scope.teiFetched = true;  
             $scope.doSearch = true;
-            
+
             if(!$scope.sortColumn.id){                                      
                 $scope.sortGrid({id: 'created', name: 'registration_date', valueType: 'date', displayInListNoProgram: false, showFilter: false, show: false});
             }

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js	2015-09-17 11:21:04 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js	2015-09-17 15:26:24 +0000
@@ -10,7 +10,7 @@
     var store = new dhis2.storage.Store({
         name: "dhis2tc",
         adapters: [dhis2.storage.IndexedDBAdapter, dhis2.storage.DomSessionStorageAdapter, dhis2.storage.InMemoryAdapter],
-        objectStores: ['programs', 'programStages', 'trackedEntities', 'attributes', 'relationshipTypes', 'optionSets', 'programValidations', 'ouLevels', 'programRuleVariables', 'programRules','constants']
+        objectStores: ['programs', 'programStages', 'trackedEntities', 'attributes', 'relationshipTypes', 'optionSets', 'programValidations', 'ouLevels', 'programRuleVariables', 'programRules', 'programIndicators', 'constants']
     });
     return{
         currentStore: store
@@ -1434,10 +1434,11 @@
     };
 })
 
-.service('TEIGridService', function(OrgUnitService, OptionSetService, DateUtils, $translate, AttributesFactory){
+.service('TEIGridService', function(OrgUnitService, OptionSetService, CurrentSelection, DateUtils, $translate){
     
     return {
         format: function(grid, map, optionSets, invalidTeis){
+            
             invalidTeis = !invalidTeis ? [] : invalidTeis;
             if(!grid || !grid.rows){
                 return;
@@ -1452,62 +1453,58 @@
 
             var entityList = [];
             
-            AttributesFactory.getAll().then(function(atts){
-                
-                var attributes = [];
-                angular.forEach(atts, function(att){
-                    attributes[att.id] = att;
-                });
-                
-                angular.forEach(grid.rows, function(row){
-                    if(invalidTeis.indexOf(row[0]) === -1 ){
-                        var entity = {};
-                        var isEmpty = true;
-
-                        entity.id = row[0];
-                        entity.created = DateUtils.formatFromApiToUser( row[1] );
-                        entity.orgUnit = row[3];                              
-                        entity.type = row[4];
-                        entity.inactive = row[5] !== "" ? row[5] : false;
-
-                        OrgUnitService.get(row[3]).then(function(ou){
-                            if(ou && ou.name){
-                                entity.orgUnitName = ou.name;
-                            }                                                       
-                        });
-
-                        for(var i=6; i<row.length; i++){
-                            if(row[i] && row[i] !== ''){
-                                isEmpty = false;
-                                var val = row[i];
-
-                                if(attributes[grid.headers[i].name] && 
-                                        attributes[grid.headers[i].name].optionSetValue && 
-                                        optionSets &&    
-                                        attributes[grid.headers[i].name].optionSet &&
-                                        optionSets[attributes[grid.headers[i].name].optionSet.id] ){
-                                    val = OptionSetService.getName(optionSets[attributes[grid.headers[i].name].optionSet.id].options, val);
-                                }
-                                if(attributes[grid.headers[i].name] && attributes[grid.headers[i].name].valueType === 'date'){                                    
-                                    val = DateUtils.formatFromApiToUser( val );
-                                }
-
-                                entity[grid.headers[i].name] = val;
-                            }
-                        }
-
-                        if(!isEmpty){
-                            if(map){
-                                entityList[entity.id] = entity;
-                            }
-                            else{
-                                entityList.push(entity);
-                            }
-                        }
-                    }
-                });
-            }); 
-            return {headers: attributes, rows: entityList, pager: grid.metaData.pager};                                    
+            var attributes = CurrentSelection.getAttributesById();
+
+            angular.forEach(grid.rows, function(row){
+                if(invalidTeis.indexOf(row[0]) === -1 ){
+                    var entity = {};
+                    var isEmpty = true;
+
+                    entity.id = row[0];
+                    entity.created = DateUtils.formatFromApiToUser( row[1] );
+                    entity.orgUnit = row[3];                              
+                    entity.type = row[4];
+                    entity.inactive = row[5] !== "" ? row[5] : false;
+
+                    OrgUnitService.get(row[3]).then(function(ou){
+                        if(ou && ou.name){
+                            entity.orgUnitName = ou.name;
+                        }                                                       
+                    });
+
+                    for(var i=6; i<row.length; i++){
+                        if(row[i] && row[i] !== ''){
+                            isEmpty = false;
+                            var val = row[i];
+
+                            if(attributes[grid.headers[i].name] && 
+                                    attributes[grid.headers[i].name].optionSetValue && 
+                                    optionSets &&    
+                                    attributes[grid.headers[i].name].optionSet &&
+                                    optionSets[attributes[grid.headers[i].name].optionSet.id] ){
+                                val = OptionSetService.getName(optionSets[attributes[grid.headers[i].name].optionSet.id].options, val);
+                            }
+                            if(attributes[grid.headers[i].name] && attributes[grid.headers[i].name].valueType === 'date'){                                    
+                                val = DateUtils.formatFromApiToUser( val );
+                            }
+
+                            entity[grid.headers[i].name] = val;
+                        }
+                    }
+
+                    if(!isEmpty){
+                        if(map){
+                            entityList[entity.id] = entity;
+                        }
+                        else{
+                            entityList.push(entity);
+                        }
+                    }
+                }
+            });
+
+            return {headers: attributes, rows: entityList, pager: grid.metaData.pager};
+            
         },
         generateGridColumns: function(attributes, ouMode){
             

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/home.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/home.html	2015-09-17 11:21:04 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/home.html	2015-09-17 15:26:24 +0000
@@ -31,7 +31,7 @@
 
 <div class="page" id="mainPage">
 
-    <div ng-if="!selectedOrgUnit">
+    <div ng-if="!selectedOrgUnit && !treeLoaded">
         <img src="../images/ajax-loader-bar.gif" alt="{{'in_progress'| translate}}" ng-if="!selectedOrgUnit"/><br>
         {{'loading_metadata'| translate}}
     </div> 
@@ -49,7 +49,7 @@
                         <label class="btn btn-default" ng-model="enrollmentStatus" btn-radio="'COMPLETED'" title="{{completedEnrollmentsLabel}}" ng-click='filterByEnrollmentStatus("COMPLETED")'><i class="fa fa-check mouse-pointer"></i></label>
                         <label class="btn btn-default" ng-model="enrollmentStatus" btn-radio="'CANCELLED'" title="{{cancelledEnrollmentsLabel}}" ng-click='filterByEnrollmentStatus("CANCELLED")'><i class="fa fa-times mouse-pointer"></i></label>
                     </span>
-                    <span class="small-horizonal-spacing" ng-if="pager.total">
+                    <span class="small-horizonal-spacing" ng-if="teiFetched && pager.total">
                         ({{'total'| translate}}:  {{pager.total}})
                     </span>
                 </span>
@@ -62,7 +62,7 @@
                             <i class="fa fa-cog" title="{{settingsLabel}}"></i>
                         </button>
                         <ul class="dropdown-menu pull-right" role="menu">
-                            <li ng-show="trackedEntityList.rows.length > 0"><a href ng-click="showHideColumns()">{{showHideLabel}}</a></li>
+                            <li ng-if="trackedEntityList.rows.length > 0"><a href ng-click="showHideColumns()">{{showHideLabel}}</a></li>
                         </ul>
                     </div>
                 </div>            
@@ -161,10 +161,8 @@
         <!-- registration form ends -->        
 
         <!-- entity grid begins -->
-        <img src="../images/ajax-loader-bar.gif" alt="{{'in_progress'| translate}}" ng-if="!teiFetched && searchText && !emptySearchTex"/>
-        <div class="row" ng-if="showTrackedEntityDiv">
-            <div class="col-md-12" ng-include="'views/tei.html'"></div>  
-        </div>
+        <i ng-if="!teiFetched" class="fa fa-spinner fa-spin fa-2x"></i>
+        <div class="row col-md-12" ng-include="'views/tei.html'"></div>
         <!-- entity grid ends -->
     </div>
 

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/tei.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/tei.html	2015-09-15 13:51:19 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/tei.html	2015-09-17 15:26:24 +0000
@@ -1,54 +1,56 @@
-<div ng-switch="teiCount">                    
-    <div ng-switch-when="undefined">
-        <div class="alert alert-warning vertical-spacing">
-            {{'no'| translate}} {{selectedProgram.trackedEntity.name|| 'records' | translate}} {{'found'| translate}}                        
-        </div>
-    </div>
-    <div ng-switch-when="0">  
-        <div class="alert alert-warning vertical-spacing">
-            {{'no'| translate}} {{selectedProgram.trackedEntity.name|| 'records' | translate}} {{'found'| translate}}                        
-        </div>
-    </div>    
-    <div ng-switch-default> 
-
-        <!-- entity begins -->
-        <div class="vertical-spacing">
-            <table class="table table-striped dhis2-table-hover table-bordered">               
-                <thead>                        
-                    <tr>
-                        <th ng-repeat="gridColumn in gridColumns| filter:{show: true}" class='mouse-pointer' ng-click="sortGrid(gridColumn)">                            
-                            <!-- sort icon begins -->                                
-                            <span ng-hide="gridColumn.showFilter" class="bold pointer" title="{{'sort'| translate}}">
-                                <span ng-class="{true: 'red'} [sortColumn.id === gridColumn.id]"><i class="fa fa-sort"></i></span>
-                                {{gridColumn.name}}
-                            </span>
-                            <!-- sort icon ends -->                            
-                        </th>                              
-                    </tr>                        
-                </thead>
-                <tbody id="list">
-                    <tr ng-repeat="trackedEntity in trackedEntityList.rows | orderBy:d2Sort:reverse" 
-                        ng-click="selectedTei.trackedEntityInstance ? assignRelationship(trackedEntity) : showDashboard(trackedEntity)"
-                        ng-class="{true: 'inactive-tei'} [trackedEntity.inactive]"
-                        title="{{selectedTei.trackedEntityInstance ? 'select' : 'go_to_dashboard'| translate}}">
-                        <td ng-repeat="gridColumn in gridColumns| filter:{show: true}">
-                            <span ng-switch="gridColumn.valueType">
-                                <span ng-switch-when="bool">
-                                    <span ng-if="trackedEntity[gridColumn.id] === 'true'">{{'yes'| translate}}</span>
-                                    <span ng-if="trackedEntity[gridColumn.id] === 'false'">{{ 'no' | translate}}</span>
-                                </span>
-                                <span ng-switch-when="trueOnly">
-                                    <span ng-if="trackedEntity[gridColumn.id] === 'true'"><i class="fa fa-check"></i></span>
-                                </span>
-                                <span ng-switch-default>{{trackedEntity[gridColumn.id]}}</span>
-                            </span>
-                        </td>
-                    </tr>
-                </tbody>        
-            </table>
-        </div>
-        <!-- entity ends -->  
-        <serverside-paginator></serverside-paginator>
-
-    </div>
-</div> 
\ No newline at end of file
+<div ng-if="trackedEntityList.rows">
+    <div ng-switch="trackedEntityList.rows.length">                    
+        <div ng-switch-when="undefined">
+            <div class="alert alert-warning vertical-spacing">
+                {{'no'| translate}} {{selectedProgram.trackedEntity.name|| 'records' | translate}} {{'found'| translate}}                        
+            </div>
+        </div>
+        <div ng-switch-when="0">  
+            <div class="alert alert-warning vertical-spacing">
+                {{'no'| translate}} {{selectedProgram.trackedEntity.name|| 'records' | translate}} {{'found'| translate}}                        
+            </div>
+        </div>    
+        <div ng-switch-default> 
+
+            <!-- entity begins -->
+            <div class="vertical-spacing">
+                <table class="table table-striped dhis2-table-hover table-bordered">               
+                    <thead>                        
+                        <tr>
+                            <th ng-repeat="gridColumn in gridColumns| filter:{show: true}" class='mouse-pointer' ng-click="sortGrid(gridColumn)">                            
+                                <!-- sort icon begins -->                                
+                                <span ng-hide="gridColumn.showFilter" class="bold pointer" title="{{'sort'| translate}}">
+                                    <span ng-class="{true: 'red'} [sortColumn.id === gridColumn.id]"><i class="fa fa-sort"></i></span>
+                                    {{gridColumn.name}}
+                                </span>
+                                <!-- sort icon ends -->                            
+                            </th>                              
+                        </tr>                        
+                    </thead>
+                    <tbody id="list">
+                        <tr ng-repeat="trackedEntity in trackedEntityList.rows | orderBy:d2Sort:reverse" 
+                            ng-click="selectedTei.trackedEntityInstance ? assignRelationship(trackedEntity) : showDashboard(trackedEntity)"
+                            ng-class="{true: 'inactive-tei'} [trackedEntity.inactive]"
+                            title="{{selectedTei.trackedEntityInstance ? 'select' : 'go_to_dashboard'| translate}}">
+                            <td ng-repeat="gridColumn in gridColumns| filter:{show: true}">
+                                <span ng-switch="gridColumn.valueType">
+                                    <span ng-switch-when="bool">
+                                        <span ng-if="trackedEntity[gridColumn.id] === 'true'">{{'yes'| translate}}</span>
+                                        <span ng-if="trackedEntity[gridColumn.id] === 'false'">{{ 'no' | translate}}</span>
+                                    </span>
+                                    <span ng-switch-when="trueOnly">
+                                        <span ng-if="trackedEntity[gridColumn.id] === 'true'"><i class="fa fa-check"></i></span>
+                                    </span>
+                                    <span ng-switch-default>{{trackedEntity[gridColumn.id]}}</span>
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>        
+                </table>
+            </div>
+            <!-- entity ends -->  
+            <serverside-paginator></serverside-paginator>
+
+        </div>
+    </div> 
+</div>