dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #37004
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 18931: tracker-capture: data entry widget now provides paging to access events of repeatable program stages
------------------------------------------------------------
revno: 18931
committer: Abyot Asalefew Gizaw <abyota@xxxxxxxxx>
branch nick: dhis2
timestamp: Fri 2015-04-17 09:19:16 +0200
message:
tracker-capture: data entry widget now provides paging to access events of repeatable program stages
added:
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/event-paging.html
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/i18n/i18n_app.properties
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/directives.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.services.js
--
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-03-30 15:34:54 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js 2015-04-17 07:19:16 +0000
@@ -4,6 +4,7 @@
function($scope,
$modal,
$filter,
+ Paginator,
DateUtils,
EventUtils,
orderByFilter,
@@ -89,6 +90,7 @@
$scope.getEvents = function(){
DHIS2EventFactory.getEventsByProgram($scope.selectedEntity.trackedEntityInstance, $scope.selectedProgram.id).then(function(events){
if(angular.isObject(events)){
+ var eLen = 0;
angular.forEach(events, function(dhis2Event){
if(dhis2Event.enrollment === $scope.selectedEnrollment.enrollment && dhis2Event.orgUnit){
if(dhis2Event.notes){
@@ -121,10 +123,11 @@
$scope.showDataEntry($scope.currentEvent, true);
}
}
+ eLen++;
}
});
}
- sortEventsByStage();
+ sortEventsByStage();
});
};
@@ -195,12 +198,17 @@
}
}, function () {
});
- };
-
- $scope.showDataEntry = function(event, rightAfterEnrollment){
+ };
+
+ $scope.showDataEntry = function(event, rightAfterEnrollment){
+ if(event){
+
+ Paginator.setItemCount( $scope.eventsByStage[event.programStage].length );
+ Paginator.setPage( $scope.eventsByStage[event.programStage].indexOf( event ) );
+ Paginator.setPageCount( Paginator.getItemCount() );
+ Paginator.setPageSize( 1 );
+ Paginator.setToolBarDisplay( 5 );
- if(event){
-
if($scope.currentEvent && !rightAfterEnrollment && $scope.currentEvent.event === event.event){
//clicked on the same stage, do toggling
$scope.currentEvent = null;
@@ -742,16 +750,27 @@
return DateUtils.getDate(event.sortingDate);
}, true);
+ $scope.eventsByStage[key] = sortedEvents;
+
var periods = PeriodService.getPeriods(sortedEvents, stage, $scope.selectedEnrollment).occupiedPeriods;
+
$scope.eventPeriods[key] = periods;
$scope.currentPeriod[key] = periods.length > 0 ? periods[0] : null;
- $scope.eventFilteringRequired = $scope.eventFilteringRequired ? $scope.eventFilteringRequired : periods.length > 1;
-
+ $scope.eventFilteringRequired = $scope.eventFilteringRequired ? $scope.eventFilteringRequired : periods.length > 1;
}
}
};
- $scope.showDataEntryForEvent = function(period){
+ $scope.showLastEventInStage = function(stageId){
+ var ev = $scope.eventsByStage[stageId][$scope.eventsByStage[stageId].length-1];
+ $scope.showDataEntryForEvent(ev);
+ };
+
+ $scope.showDataEntryForEvent = function(event){
+
+ var period = {event: event.event, stage: event.programStage, name: event.sortingDate};
+ $scope.currentPeriod[event.programStage] = period;
+
var event = null;
for(var i=0; i<$scope.eventsByStage[period.stage].length; i++){
if($scope.eventsByStage[period.stage][i].event === period.event){
=== 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-03-30 15:34:54 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html 2015-04-17 07:19:16 +0000
@@ -3,7 +3,7 @@
{{dataentryWidget.title| translate}}
<span class="pull-right widget-link">
- <a href ng-click="filterEvents = !filterEvents" title="{{filterEvents ? 'list_events' : 'filter_events' | translate}}" ng-show="eventFilteringRequired"><span ng-if="!filterEvents"><i class="fa fa-filter vertical-center"></i></span><span ng-if="filterEvents"><i class="fa fa-list vertical-center"></i></span></a>
+ <a href ng-click="filterEvents = !filterEvents" title="{{filterEvents ? 'list_events' : 'filter_events'| translate}}" ng-show="eventFilteringRequired"><span ng-if="!filterEvents"><i class="fa fa-filter vertical-center"></i></span><span ng-if="filterEvents"><i class="fa fa-list vertical-center"></i></span></a>
<a href ng-click="toggleLegend()" title="{{'event_color_legend'| translate}}" class="small-horizonal-spacing"><i class="fa fa-info-circle vertical-center"></i></a>
<a class="small-horizonal-spacing" href ng-click="expandCollapse(dataentryWidget)">
<span ng-show="dataentryWidget.expand"><i class="fa fa-chevron-up vertical-center" title="{{'collapse'| translate}}"></i></span>
@@ -29,30 +29,15 @@
<table class="table table-bordered">
<thead>
<tr>
- <th class="active" style="vertical-align:middle" ng-repeat="stage in programStages| orderBy:'sortOrder':reverse">
- {{stage.name}}
- <div ng-if="eventsByStage[stage.id].length > 1 && filterEvents" class="inline-block small-horizonal-spacing">
- <select class="form-control-inline"
- ng-model="currentPeriod[stage.id]"
- ng-change="showDataEntryForEvent(currentPeriod[stage.id])"
- ng-options="period.name for period in eventPeriods[stage.id]">
- </select>
- </div>
-
- <!-- event add/filter icon begins -->
- <span class='pull-right'>
- <span ng-if="stageNeedsEvent(stage)">
- <a href title="{{'create_new_event'| translate}}" ng-click="showCreateEvent(stage)" style="vertical-align:middle"><i class="fa fa-plus"></i></a>
- </span>
- </span>
- <!-- event add/filter icon ends -->
+ <th class="active" style="vertical-align:middle" ng-repeat="stage in programStages | orderBy:'sortOrder':reverse">
+ {{stage.name}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="stage in programStages| orderBy:'sortOrder':reverse">
- <div class="inline-block" ng-repeat="dhis2Event in eventsByStage[stage.id] | orderBy:sortEventsByDate:reverse">
+ <div class="inline-block" ng-repeat="dhis2Event in eventsByStage[stage.id]">
<div class="event-container"
ng-class="getEventStyle(dhis2Event)"
ng-show="!currentPeriod[stage.id] || !filterEvents || currentPeriod[stage.id] && currentPeriod[stage.id].event === dhis2Event.event"
@@ -62,17 +47,25 @@
<span ng-if="eventsByStage[stage.id].length > 1 && !filterEvents">[{{$index + 1}}]</span>
</div>
</div>
+ <span ng-if="eventsByStage[stage.id].length > 1 && filterEvents">
+ <span ng-if="currentEvent.programStage !== stage.id">
+ <div class="event-paging">
+ <a href class="event-paging" ng-click="showDataEntryForEvent(eventsByStage[stage.id][0])">{{'show_more' | translate}}</a>
+ </div>
+ </span>
+ <event-paginator ng-if="stage.id === currentEvent.programStage"></event-paginator>
+ </span>
</td>
</tr>
</tbody>
</table>
</div>
-
+
<div ng-if="!selectedEnrollment || !selectedEnrollment.enrollment" class="alert alert-danger">{{'not_yet_enrolled_data_entry'| translate}}</div>
<form name="outerForm" novalidate>
<div ng-if="currentEvent">
-
+
<!-- event dates/scheduling begin -->
<div class="row" ng-if="!currentStage.periodType">
<div class="col-md-6">
@@ -147,7 +140,7 @@
<div class="clear vertical-spacing" ng-if="!displayCustomForm" ng-include="'components/dataentry/default-form.html'"></div>
</div>
<!-- data entry form ends -->
-
+
<!-- data entry/event buttons begins -->
<div class="form-group">
<div class='row'><hr></div>
@@ -172,7 +165,7 @@
class="btn btn-danger">{{'delete'| translate}}</a>
</div>
<!-- data entry/event buttons ends -->
-
+
</div>
</form>
@@ -195,16 +188,16 @@
<table class="table table-striped dhis2-table-hover">
<tr ng-repeat="note in currentEvent.notes">
<td class="overflow-ellipsis">
- <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>
+ <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>
=== added file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/event-paging.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/event-paging.html 1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/event-paging.html 2015-04-17 07:19:16 +0000
@@ -0,0 +1,43 @@
+<div class="paging-container">
+
+ <div class="event-paging">
+
+ <span ng-show="eventsByStage[stage.id].indexOf(currentEvent) > 0">
+ <a href ng-click="showDataEntryForEvent(eventsByStage[stage.id][0])" title="{{'first'| translate}}">
+ ««
+ </a>
+ <a href ng-click="showDataEntryForEvent(eventsByStage[stage.id][eventsByStage[stage.id].indexOf(currentEvent)-1])" title="{{'previous'| translate}}">
+ «
+ </a>
+ </span>
+ <span ng-hide="eventsByStage[stage.id].indexOf(currentEvent) > 0">
+ <span title="{{'first'| translate}}">««</span>
+ <span title="{{'previous'| translate}}">«</span>
+ </span>
+
+
+ <a href ng-click="showDataEntryForEvent(eventsByStage[stage.id][i])"
+ title="{{'event_recorded_on'| translate}} {{eventsByStage[stage.id][i].sortingDate}} {{'at' | translate}} {{eventsByStage[stage.id][i].orgUnitName}}"
+ ng-repeat="i in [] | forLoop:paginator.lowerLimit():eventsByStage[stage.id].length | limitTo:paginator.getToolBarDisplay()"
+ ng-class="eventsByStage[stage.id].indexOf(currentEvent) === i && 'active'">
+ {{i + 1}}
+ </a>
+
+
+ <span ng-show="eventsByStage[stage.id].indexOf(currentEvent) < eventsByStage[stage.id].length - 1">
+ <a href ng-click="showDataEntryForEvent(eventsByStage[stage.id][eventsByStage[stage.id].indexOf(currentEvent) + 1])" title="{{'next'| translate}}" >
+ »
+ </a>
+ <a href ng-click="showLastEventInStage(stage.id)" title="{{'last'| translate}}">
+ »»
+ </a>
+ </span>
+ <span ng-hide="eventsByStage[stage.id].indexOf(currentEvent) < eventsByStage[stage.id].length - 1">
+ <span class="next" title="{{'next'| translate}}">» </span>
+ <span class="last" title="{{'last'| translate}}">»»</span>
+ </span>
+
+
+ </div>
+
+</div>
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties 2015-04-09 13:20:27 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties 2015-04-17 07:19:16 +0000
@@ -20,6 +20,7 @@
not_yet_enrolled_report=Not yet enrolled. Reporting not possible
no_data_report=No record exists for reporting
empty_notes=Empty notes list.
+event=Event
no_event_is_yet_created=No event is available for data entry. Please create one.
event_creation=Please create one from below
not_selected=Not selected
@@ -91,6 +92,9 @@
new_event=New event
create_new_event=Create new event
create_new_event_repeatable=Create new event from a repeatable stage
+event_recorded_on=Event recorded on
+at=at
+show_more=Click for more
close_search=Close search
search_attributes=Search attributes
available_search_attributes=Available search attributes
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/directives.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/directives.js 2014-12-16 15:44:11 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/directives.js 2015-04-17 07:19:16 +0000
@@ -2,4 +2,15 @@
/* Directives */
-var trackerCaptureDirectives = angular.module('trackerCaptureDirectives', []);
\ No newline at end of file
+var trackerCaptureDirectives = angular.module('trackerCaptureDirectives', [])
+
+.directive('eventPaginator', function factory() {
+
+ return {
+ restrict: 'E',
+ controller: function ($scope, Paginator) {
+ $scope.paginator = Paginator;
+ },
+ templateUrl: 'components/dataentry/event-paging.html'
+ };
+});
\ No newline at end of file
=== 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-04-08 15:56:10 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css 2015-04-17 07:19:16 +0000
@@ -1019,4 +1019,48 @@
.form-horizontal .control-label {
display: table-cell;
vertical-align: middle;
+}
+
+div.event-paging
+{
+ width:100%;
+ background-color: #ebf0f6;
+ float:right;
+ text-align: right;
+ height:16px;
+}
+
+div.event-paging span, div.event-paging a
+{
+ font-weight: bold;
+ padding: 0 5px;
+ font-size: 12px;
+}
+
+div.event-paging a
+{
+ text-decoration: none;
+ color: #FF9900;
+}
+
+div.event-paging a.active
+{
+ text-decoration: none;
+ color: #000;
+ cursor: default;
+}
+
+div.event-paging a:hover
+{
+ color: #000;
+}
+
+div.event-paging span.page
+{
+ color:#000;
+}
+
+div.event-paging span.seperator
+{
+ display:none;
}
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.services.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.services.js 2015-03-30 16:27:53 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.services.js 2015-04-17 07:19:16 +0000
@@ -728,9 +728,17 @@
this.getPageCount = function () {
return this.pageCount;
};
+
+ this.setToolBarDisplay = function(toolBarDisplay){
+ this.toolBarDisplay = toolBarDisplay;
+ };
+ this.getToolBarDisplay = function(){
+ return this.toolBarDisplay;
+ };
+
this.lowerLimit = function() {
- var pageCountLimitPerPageDiff = this.getPageCount() - this.toolBarDisplay;
+ var pageCountLimitPerPageDiff = this.getPageCount() - this.getToolBarDisplay();
if (pageCountLimitPerPageDiff < 0) {
return 0;
@@ -740,7 +748,7 @@
return pageCountLimitPerPageDiff;
}
- var low = this.getPage() - (Math.ceil(this.toolBarDisplay/2) - 1);
+ var low = this.getPage() - (Math.ceil(this.getToolBarDisplay()/2) - 1);
return Math.max(low, 0);
};
