dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #28189
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 14064: event capture app - WIP, interactions with event add and edit
------------------------------------------------------------
revno: 14064
committer: Abyot Asalefew Gizaw abyota@xxxxxxxxx
branch nick: dhis2
timestamp: Tue 2014-02-18 10:41:26 +0100
message:
event capture app - WIP, interactions with event add and edit
added:
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventUpdate.html
modified:
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/i18n/en.json
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/index.html
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/styles/style.css
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.html
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventRegistration.html
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/orgUnitTree.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-event-capture/src/main/webapp/dhis-web-event-capture/app/i18n/en.json'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/i18n/en.json 2014-02-17 11:45:07 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/i18n/en.json 2014-02-18 09:41:26 +0000
@@ -5,6 +5,8 @@
"event_capture": "Event capture",
"registering_unit": "Registering unit",
"registered_events": "Registered events",
+ "new_event_registration": "New event registration",
+ "update_event": "Updating event",
"no_registered_event": "There are no registered events.",
"help": "Help",
"edit": "Edit",
@@ -21,6 +23,8 @@
"hide": "Hide",
"show_details": "Show details",
"new_event": "New Event",
+ "data_element": "Data element",
+ "value": "Value",
"register_new_event": "Register New Event",
"total_number_of_pages": "No. of pages",
"rows_per_page": "No. of rows per page",
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/index.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/index.html 2014-02-17 10:22:59 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/index.html 2014-02-18 09:41:26 +0000
@@ -11,8 +11,8 @@
<script type="text/javascript" src="lib/jquery/js/jquery-ui-1.9.2.custom.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery/css/ui-lightness/jquery-ui-1.9.2.custom.css">
- <!--<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
- <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-theme.min.css">
+ <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
+ <!--<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">-->
<script type="text/javascript" src="lib/angular/angular.js"></script>
@@ -48,7 +48,9 @@
<script type="text/javascript" src="../../dhis-web-commons/javascripts/dhis2/dhis2.contextmenu.js"></script>
<script type="text/javascript" src="../../dhis-web-commons/javascripts/dhis2/dhis2.appcache.js"></script>
- <!--<script type="text/javascript" src="../../dhis-web-commons/ouwt/ouwt.js"></script>-->
+ <!--<script type="text/javascript" src="../../dhis-web-commons/ouwt/ouwt.js"></script>
+ <script type="text/javascript" src="scripts/ouwt.js"></script>
+ <script type="text/javascript" src="scripts/ouSelection.js"></script>-->
<script type="text/javascript" src="scripts/angularLocalStorage.js"></script>
<script type="text/javascript" src="scripts/angular-translate.min.js"></script>
<script type="text/javascript" src="scripts/angular-translate-loader-static-files.min.js"></script>
@@ -75,9 +77,8 @@
</div>
</div>
<div ng-controller="MainController">
- <div id="leftBar">
- <div class="org-unit-tree" ng-include="'views/orgUnitTree.html'"></div>
-
+ <div id="leftBar">
+ <div ng-include="'views/orgUnitTree.html'"></div>
</div>
<div class="page" id="mainPage">
<h1>{{'event_capture'| translate}}<a href ng-click="getHelpContent()" title="{{'help'| translate}}"><i class="fa fa-question-circle"></i></a></h1>
@@ -96,14 +97,13 @@
</select>
</td>
<td style='padding-left: 20px;'>
- <button ng-show="selectedProgramStage" ng-click="registerEvent()" class="button">{{'register_new_event'| translate}}</button>
+ <button ng-show="selectedProgramStage" ng-click="showEventRegistration()" class="button" ng-disabled="eventRegistration || editingEventInFull || editingEventInGrid">{{'register_new_event'| translate}}</button>
</td>
</tr>
</table>
</div>
-
- <div id="listDiv" ng-show="selectedProgramStage && !eventRegistration">
+ <div id="listDiv" ng-show="selectedProgramStage && !eventRegistration && !editingEventInFull">
<h2>
{{'registered_events'| translate}}
</h2>
@@ -120,9 +120,18 @@
</div>
</div>
- <div class="container-1-4" ng-show="eventRegistration">
+ <div ng-show="eventRegistration">
+ <h2>
+ {{'new_event_registration'| translate}}
+ </h2>
<div ng-include="'views/eventRegistration.html'"></div>
</div>
+ <div ng-show="editingEventInFull">
+ <h2>
+ {{'update_event'| translate}}
+ </h2>
+ <div ng-include="'views/eventUpdate.html'"></div>
+ </div>
</div>
</div>
</body>
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js 2014-02-17 11:45:07 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js 2014-02-18 09:41:26 +0000
@@ -32,14 +32,20 @@
$scope.programStageDataElements = [];
$scope.dhis2Events = [];
$scope.eventRegistration = false;
- $scope.editGridHeaders = false;
- $scope.eventGridHeaders = [];
+ $scope.editGridColumns = false;
+ $scope.eventGridColumns = [];
$scope.newDhis2Event = {dataValues: []};
+ $scope.currentEvent = {dataValues: []};
+ $scope.currentEventOrginialValue = '';
+
+ $scope.editingEventInFull = false;
+ $scope.editingEventInGrid = false;
$scope.sortHeader = '';
$scope.reverse = false;
$scope.gridFilter = '';
-
+
+
//Get orgunits for the logged in user
OrgUnitFactory.getMine().then(function(orgUnits) {
$scope.orgUnits = orgUnits;
@@ -107,18 +113,29 @@
$scope.dhis2Events = data;
//process event list for easier tabular sorting
- angular.forEach($scope.dhis2Events, function(dhis2Event){
- dhis2Event.dataValues = orderByFilter(dhis2Event.dataValues, '-dataElement');
- angular.forEach(dhis2Event.dataValues, function(dataValue){
-
- //converting int value to integer for proper sorting.
- var dataElement = $scope.programStageDataElements[dataValue.dataElement];
- if(dataElement.type == 'int'){
- dataValue.value = parseInt(dataValue.value);
- }
- dhis2Event[dataValue.dataElement] = dataValue.value;
- });
- });
+ //angular.forEach($scope.dhis2Events, function(dhis2Event){
+ for(var i=0; i < $scope.dhis2Events.length; i++){
+ //check if event is empty
+ if(!angular.isUndefined($scope.dhis2Events[i].dataValues[0].dataElement)){
+ $scope.dhis2Events[i].dataValues = orderByFilter($scope.dhis2Events[i].dataValues, '-dataElement');
+ angular.forEach($scope.dhis2Events[i].dataValues, function(dataValue){
+
+ //converting int value to integer for proper sorting.
+ var dataElement = $scope.programStageDataElements[dataValue.dataElement];
+ if(angular.isObject(dataElement)){
+ if(dataElement.type == 'int'){
+ dataValue.value = parseInt(dataValue.value);
+ }
+ $scope.dhis2Events[i][dataValue.dataElement] = dataValue.value;
+ }
+ });
+ }
+ else{//event is empty, remove from display list
+ var index = $scope.dhis2Events.indexOf($scope.dhis2Events[i]);
+ $scope.dhis2Events.splice(index,1);
+ i--;
+ }
+ }
//generate grid headers using program stage data elements
//also, create a template for new event.
@@ -126,7 +143,7 @@
var dataElement = $scope.programStageDataElements[dataElement];
var name = dataElement.formName || dataElement.name;
$scope.newDhis2Event.dataValues.push({dataElement: dataElement, value: '', name: name});
- $scope.eventGridHeaders.push({name: name, id: dataElement.id, filter: '', hide: false});
+ $scope.eventGridColumns.push({name: name, id: dataElement.id, filter: '', hide: false});
}
});
});
@@ -139,7 +156,7 @@
};
$scope.sortEventGrid = function(gridHeader){
- if ($scope.sortHeader == gridHeader.id){
+ if ($scope.sortHeader === gridHeader.id){
$scope.reverse = !$scope.reverse;
return;
}
@@ -150,55 +167,66 @@
$scope.showHideColumns = function(showAllColumns){
if(showAllColumns){
- angular.forEach($scope.eventGridHeaders, function(gridHeader){
+ angular.forEach($scope.eventGridColumns, function(gridHeader){
gridHeader.hide = false;
});
}
else{
- $scope.editGridHeaders = !$scope.editGridHeaders;
+ $scope.editGridColumns = !$scope.editGridColumns;
}
};
- $scope.registerEvent = function(){
- $scope.eventRegistration = true;
- };
-
- $scope.cancelAdding = function(){
- $scope.eventRegistration = false;
- }
-
- $scope.editEvent = function(dhis2Event){
- $scope.editingEvent = !$scope.editingEvent;
- $scope.eventUnderEditing = dhis2Event;
-
- if(dhis2Event.dataValues.length !== $scope.selectedProgramStage.programStageDataElements.length){
+ $scope.showEventList = function(){
+ $scope.eventRegistration = false;
+ $scope.editingEventInFull = false;
+ $scope.editingEventInGrid = false;
+
+ $scope.currentEvent = '';
+ };
+
+ $scope.showEventRegistration = function(){
+ $scope.eventRegistration = !$scope.eventRegistration;
+ $scope.currentEvent = $scope.newDhis2Event;
+ };
+
+ $scope.showEditEventInGrid = function(){
+ $scope.currentEvent = ContextMenuSelectedItem.getSelectedItem();
+ $scope.currentEventOrginialValue = angular.copy($scope.currentEvent);
+ $scope.editingEventInGrid = !$scope.editingEventInGrid;
+ };
+
+ $scope.showEditEventInFull = function(){
+ $scope.currentEvent = ContextMenuSelectedItem.getSelectedItem();
+ $scope.editingEventInFull = !$scope.editingEventInFull;
+ $scope.eventRegistration = false;
+
+ if($scope.currentEvent.dataValues.length !== $scope.selectedProgramStage.programStageDataElements.length){
angular.forEach($scope.selectedProgramStage.programStageDataElements, function(prStDe){
- if(!$scope.eventUnderEditing.hasOwnProperty(prStDe.dataElement.id)){
- $scope.eventUnderEditing[prStDe.dataElement.id] = '';
+ if(!$scope.currentEvent.hasOwnProperty(prStDe.dataElement.id)){
+ $scope.currentEvent[prStDe.dataElement.id] = '';
}
});
}
+ };
+
+ $scope.addEvent = function(){
+ $scope.eventRegistration = false;
+ $scope.editingEventInFull = false;
+ $scope.editingEventInGrid = false;
+
+ console.log('the event to be added is: ', $scope.currentEvent);
+ $scope.currentEvent = '';
+ };
+
+ $scope.updateEvent = function(){
+ $scope.eventRegistration = false;
+ $scope.editingEventInFull = false;
+ $scope.editingEventInGrid = false;
+
+ console.log('the event to be updated is: ', $scope.currentEvent);
+ $scope.currentEvent = '';
};
- $scope.updateEvent = function(dhis2Event){
- $scope.editingEvent = !$scope.editingEvent;
- $scope.eventUnderEditing = '';
- };
-
- $scope.cancelEditing = function(dhis2Event){
- $scope.editingEvent = !$scope.editingEvent;
- $scope.eventUnderEditing = '';
- };
-
- $scope.editEventInGrid = function(){
- $scope.eventUnderEditing = ContextMenuSelectedItem.getSelectedItem();
- console.log('The event is: ', ContextMenuSelectedItem.getSelectedItem().event);
- };
-
- $scope.editEventInFull = function(){
- console.log('The event is: ', ContextMenuSelectedItem.getSelectedItem().event);
- };
-
$scope.removeEvent = function(){
var dhis2Event = ContextMenuSelectedItem.getSelectedItem();
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/styles/style.css'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/styles/style.css 2014-02-17 10:22:59 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/styles/style.css 2014-02-18 09:41:26 +0000
@@ -731,7 +731,7 @@
}
.max-column-width {
- max-width:200px;
+ max-width:200px !important;
word-wrap:break-word;
}
@@ -770,6 +770,25 @@
background-color: #ebf0f6
}
+.dhis2-list-table-striped {
+ width: 100%;
+ border: 1px solid #c2c2c2;
+ padding: 5px 10px;
+}
+
+.dhis2-list-table-striped>thead>tr,
+.dhis2-list-table-striped>tbody>tr,
+.dhis2-list-table-striped>tfoot>tr,
+.dhis2-list-table-striped>thead>tr,
+.dhis2-list-table-striped>tbody>tr,
+.dhis2-list-table-striped>tfoot>tr {
+ border: none;
+}
+
+.dhis2-list-table-striped > tbody > tr:nth-child(odd)> td, .dhis2-table-striped > tbody > tr:nth-child(odd)> th {
+ background-color: #ebf0f6
+}
+
.dhis2-table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
background-color: #dfe9f4;
}
@@ -903,3 +922,142 @@
box-shadow: 0 5px 15px rgba(0,0,0,0.5)
}
}
+
+.container {
+ padding-right: 15px;
+ padding-left: 15px;
+ margin-right: auto;
+ margin-left: auto
+}
+.container:before, .container:after {
+ display: table;
+ content: " "
+}
+.container:after {
+ clear: both
+}
+.container:before, .container:after {
+ display: table;
+ content: " "
+}
+.container:after {
+ clear: both
+}
+@media (min-width: 768px) {
+ .container {
+ width: 750px
+ } z-index: 1051;
+}
+@media (min-width: 992px) {
+ .container {
+ width: 970px
+ }
+}
+@media (min-width: 1200px) {
+ .container {
+ width: 1170px
+ }
+}
+.container > .navbar-header, .container > .navbar-collapse {
+ margin-right: -15px;
+ margin-left: -15px
+}
+@media (min-width: 768px) {
+ .container > .navbar-header, .container > .navbar-collapse {
+ margin-right: 0;
+ margin-left: 0
+ }
+}
+
+@media (min-width: 768px) {
+ .navbar > .container .navbar-brand {
+ margin-left: -15px
+ }
+}
+
+.container .jumbotron {
+ border-radius: 6px
+}
+@media screen and (min-width: 768px) {
+ .jumbotron {
+ padding-top: 48px;
+ padding-bottom: 48px
+ }
+ .container .jumbotron {
+ padding-right: 60px;
+ padding-left: 60px
+ }
+ .jumbotron h1 {
+ font-size: 63px
+ }
+}
+
+.dropdown {
+ position: relative
+}
+.dropdown-toggle:focus {
+ outline: 0
+}
+.dropdown-menu {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: 1000;
+ display: none;
+ float: left;
+ min-width: 160px;
+ padding: 5px 0;
+ margin: 2px 0 0;
+ font-size: 14px;
+ list-style: none;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border: 1px solid rgba(0,0,0,0.15);
+ border-radius: 4px;
+ -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+ box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+ background-clip: padding-box
+}
+.dropdown-menu.pull-right {
+ right: 0;
+ left: auto
+}
+.dropdown-menu .divider {
+ height: 1px;
+ margin: 9px 0;
+ overflow: hidden;
+ background-color: #e5e5e5
+}
+.dropdown-menu > li > a {
+ display: block;
+ padding: 3px 20px;
+ clear: both;
+ font-weight: normal;
+ line-height: 1.428571429;
+ color: #333;
+ white-space: nowrap
+}
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+ color: #262626;
+ text-decoration: none;
+ background-color: #f5f5f5
+}
+.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
+ color: #fff;
+ text-decoration: none;
+ background-color: #428bca;
+ outline: 0
+}
+.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
+ color: #999
+}
+.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
+ text-decoration: none;
+ cursor: not-allowed;
+ background-color: transparent;
+ background-image: none;
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
+}
+.open > .dropdown-menu {
+ display: block
+}
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.html 2014-02-17 11:45:07 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.html 2014-02-18 09:41:26 +0000
@@ -1,7 +1,7 @@
<div id="contextMenu" class="contextMenu" style="width: 180px;">
<ul id="contextMenuItems" class="contextMenuItems">
- <li><a href ng-click="editEventInGrid()"><i class="fa fa-edit"></i> {{'edit_in_grid'| translate}}</a></li>
- <li><a href ng-click="editEventInFull()"><i class="fa fa-edit"></i> {{'full_edit'| translate}}</a></li>
+ <li><a href ng-click="showEditEventInGrid()"><i class="fa fa-edit"></i> {{'edit_in_grid'| translate}}</a></li>
+ <li><a href ng-click="showEditEventInFull()"><i class="fa fa-edit"></i> {{'full_edit'| translate}}</a></li>
<li><a href ng-click="removeEvent()"><i class="fa fa-trash-o"></i> {{'remove'| translate}}</a></li>
<li><a href ng-click="showEventDetails()"><i class="fa fa-info-circle"></i> {{'show_details'| translate}}</a></li>
</ul>
@@ -12,15 +12,17 @@
<tr>
<td style="vertical-align:top">
<div id="content">
- <div ng-show="editGridHeaders" class="container-1-4">
+
+ <!-- visible when editing grid columns - need to think better way to display this-->
+ <div ng-show="editGridColumns" class="container-1-4">
<label>{{'show_hide_columns'| translate}}</label>
<table>
- <tr ng-repeat="eventGridHeader in eventGridHeaders">
+ <tr ng-repeat="eventGridColumn in eventGridColumns">
<td>
- {{eventGridHeader.name}}
+ {{eventGridColumn.name}}
</td>
<td>
- <input type="checkbox" ng-model="eventGridHeader.hide">{{'hide'| translate}}
+ <input type="checkbox" ng-model="eventGridColumn.hide">{{'hide'| translate}}
</td>
</tr>
<tr>
@@ -33,61 +35,66 @@
</tr>
</table>
</div>
+
<table class="listTable dhis2-table-striped dhis2-table-hover">
- <thead>
- <!--<tr ng-show="editGridHeaders">
- <td ng-repeat="eventGridHeader in eventGridHeaders">
- {{eventGridHeader.name}} <input type="checkbox" ng-model="eventGridHeader.hide">{{'hide'| translate}}
- </td>
- <td>
- <a href ng-click="showHideColumns(false)" title="{{'close'| translate}}" class="black"><i class="fa fa-times-circle"></i></a>
- <a href ng-click="showHideColumns(true)" title="{{'show_all'| translate}}" class="black"><i class="fa fa-check-square"></i></a>
- </td>
- </tr>-->
+ <thead>
<tr>
- <th ng-show="!eventGridHeader.hide" class="max-column-width" ng-click="sortEventGrid(eventGridHeader)" ng-repeat="eventGridHeader in eventGridHeaders">
- {{eventGridHeader.name}}
- <i ng-show="sortHeader == eventGridHeader.id && !reverse" class="fa fa-sort-desc"></i>
- <i ng-show="sortHeader == eventGridHeader.id && reverse" class="fa fa-sort-asc"></i>
+ <th ng-show="!eventGridColumn.hide" class="max-column-width" ng-click="sortEventGrid(eventGridColumn)" ng-repeat="eventGridColumn in eventGridColumns">
+ {{eventGridColumn.name}}
+ <i ng-show="sortHeader == eventGridColumn.id && !reverse" class="fa fa-sort-desc"></i>
+ <i ng-show="sortHeader == eventGridColumn.id && reverse" class="fa fa-sort-asc"></i>
</th>
- <th ng-hide="editGridHeaders">
+ <th ng-hide="editGridColumns">
<a href ng-click="showHideColumns(false)" title="{{'show_hide_columns'| translate}}"><i class="fa fa-cog"></i></a>
</th>
</tr>
</thead>
<tbody id="list">
- <tr ng-repeat="dhis2Event in dhis2Events| paginate:rowsPerPage| orderBy:sortHeader:reverse" ng-click="showContextMenu(dhis2Event)">
- <td dhis-context-menu selected-item={{dhis2Event}} class="max-column-width" ng-hide="(eventUnderEditing.event == dhis2Event.event) || eventGridHeader.hide" ng-repeat="eventGridHeader in eventGridHeaders">
- {{dhis2Event[eventGridHeader.id]}}
+ <tr ng-repeat="dhis2Event in dhis2Events| paginate:rowsPerPage | orderBy:sortHeader:reverse" ng-click="showContextMenu(dhis2Event)">
+
+ <!-- Visible when event is not under editing -->
+ <td dhis-context-menu selected-item={{dhis2Event}} class="max-column-width" ng-hide="(currentEvent.event == dhis2Event.event) || eventGridColumn.hide" ng-repeat="eventGridColumn in eventGridColumns">
+ {{dhis2Event[eventGridColumn.id]}}
</td>
- <td class="max-column-width" ng-show="(eventUnderEditing.event == dhis2Event.event) && !eventGridHeader.hide" ng-repeat="eventGridHeader in eventGridHeaders">
- <div ng-switch="programStageDataElements[eventGridHeader.id].type">
+
+ <!-- Visible when event is under editing - in grid -->
+ <td class="max-column-width" ng-show="(currentEvent.event == dhis2Event.event) && !eventGridColumn.hide" ng-repeat="eventGridColumn in eventGridColumns">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].type">
<div ng-switch-when="int">
- <input type="number" style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]"/>
+ <input type="number" style="width:90%;" ng-model="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]"/>
</div>
<div ng-switch-when="string">
- <div class="container-fluid">
- <input type="text" style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]" typeahead="option for option in programStageDataElements[eventGridHeader.id].optionSet.options | filter:$viewValue | limitTo:20" >
- </div>
+ <div ng-switch="programStageDataElements[eventGridColumn.id].optionSet.options.length > 20">
+ <div ng-switch-when="true">
+ <div class="container-fluid">
+ <input type="text" style="width:90%;" ng-model="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]" typeahead="option for option in programStageDataElements[eventGridColumn.id].optionSet.options | filter:$viewValue | limitTo:20" >
+ </div>
+ </div>
+ <div ng-switch-default>
+ <select style="width:90%;" ng-model="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]" ng-options='option for option in programStageDataElements[eventGridColumn.id].optionSet.options'>
+ <option value="">{{'please_select'| translate}}</option>
+ </select>
+ </div>
+ </div>
</div>
<div ng-switch-when="bool">
- <select style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]">
+ <select style="width:90%;" ng-model="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]">
<option value="">{{'please_select'| translate}}</option>
<option value="0">{{'no'| translate}}</option>
<option value="1">{{'yes'| translate}}</option>
</select>
</div>
<div ng-switch-when="date">
- <input type="text" style="width:90%;" placeholder="yyyy-mm-dd" ng-date ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]">
+ <input type="text" style="width:90%;" placeholder="yyyy-mm-dd" ng-date ng-model="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]">
</div>
</div>
- </td>
+ </td>
<td>
- <span ng-show="eventUnderEditing.event == dhis2Event.event">
- <a href ng-click="updateEvent(dhis2Event)" title="{{'update'| translate}}"><span class='black'><i class="fa fa-floppy-o fa-2x"></i></span></a>
- <a href ng-click="cancelEditing(dhis2Event)" title="{{'cancel'| translate}}"><span class='red'><i class="fa fa-undo fa-2x"></i></span></a>
+ <span ng-show="currentEvent.event == dhis2Event.event">
+ <a href ng-click="updateEvent()" title="{{'update'| translate}}"><span class='black'><i class="fa fa-floppy-o fa-2x"></i></span></a>
+ <a href ng-click="showEventList()" title="{{'cancel'| translate}}"><span class='red'><i class="fa fa-undo fa-2x"></i></span></a>
</span>
- </td>
+ </td>
</tr>
</tbody>
</table>
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventRegistration.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventRegistration.html 2014-02-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventRegistration.html 2014-02-18 09:41:26 +0000
@@ -1,46 +1,56 @@
-<form role="form" ng-show="eventRegistration">
- <div class="form-group" ng-repeat="newEventDataValue in newDhis2Event.dataValues">
- <label>{{newEventDataValue.name}}</label>
- <div ng-switch="newEventDataValue.dataElement.type">
- <div ng-switch-when="int">
- <input type="number" class="form-control" ng-model="newEventDataValue.value"/>
- </div>
- <div ng-switch-when="string">
- <select class="form-control" ng-model='newEventDataValue.value' ng-options='option for option in newEventDataValue.dataElement.optionSet.options | limitTo:20'>
- <option value="">{{'please_select'| translate}}</option>
- </select>
- </div>
- <div ng-switch-when="bool">
- <select class="form-control" ng-model='newEventDataValue.value'>
- <option value="">{{'please_select'| translate}}</option>
- <option value="0">{{'no'| translate}}</option>
- <option value="1">{{'yes'| translate}}</option>
- </select>
- </div>
- <div ng-switch-when="date">
- <input type="text" placeholder="yyyy-mm-dd" class="form-control" ng-date ng-model="newEventDataValue.value"/>
- </div>
- </div>
- </div>
- <span>
- <button ng-click="saveEvent(newDhis2Event)" class="button">{{'add' | translate}}</button>
- <button ng-click="cancelAdding(newDhis2Event)" class="button">{{'cancel' | translate}}</button>
- </span>
-</form>
-<!--<form role="form">
- <div class="form-group">
- <label>{{'registering_unit'| translate}}</label>
- <input type="text" class="form-control" value="{{selectedOrgUnit.name| translate}}" disabled>
- </div>
- <div class="form-group">
- <label>{{'program'| translate}}</label>
- <span class="inline">
-
- <select class="form-control" ng-model="pr" ng-options="program as program.label for program in programs | orderBy: 'label'" ng-change="loadEvents(pr)">
- <option value="">{{'please_select'| translate}}</option>
- </select>
-
- <button ng-show="selectedProgramStage" ng-click="registerEvent()" class="button">{{'register_new_event'| translate}}</button>
- </span>
- </div>
-</form>-->
+<div ng-show="eventRegistration" style="width:50%;">
+ <table class="dhis2-list-table-striped">
+ <thead>
+ <tr>
+ <th>
+ {{'data_element' | translate}}
+ </th>
+ <th>
+ {{'value' | translate}}
+ </th>
+ </tr>
+ </thead>
+ <tbody id="list">
+ <tr ng-repeat="eventDataValue in currentEvent.dataValues">
+ <td class="max-column-width">
+ {{eventDataValue.name}}
+ </td>
+ <td class="max-column-width">
+ <div ng-switch="eventDataValue.dataElement.type">
+ <div ng-switch-when="int">
+ <input type="number" style="width:98%;" ng-model="eventDataValue.value"/>
+ </div>
+ <div ng-switch-when="string">
+ <div ng-switch="eventDataValue.dataElement.optionSet.options.length > 20">
+ <div ng-switch-when="true">
+ <div class="container-fluid">
+ <input type="text" style="width:98%;" ng-model="eventDataValue.value" typeahead="option for option in eventDataValue.dataElement.optionSet.options | filter:$viewValue | limitTo:20" >
+ </div>
+ </div>
+ <div ng-switch-default>
+ <select style="width:98%;" ng-model="eventDataValue.value" ng-options='option for option in eventDataValue.dataElement.optionSet.options'>
+ <option value="">{{'please_select'| translate}}</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ <div ng-switch-when="bool">
+ <select style="width:98%;" ng-model="eventDataValue.value">
+ <option value="">{{'please_select'| translate}}</option>
+ <option value="0">{{'no'| translate}}</option>
+ <option value="1">{{'yes'| translate}}</option>
+ </select>
+ </div>
+ <div ng-switch-when="date">
+ <input type="text" style="width:98%;" placeholder="yyyy-mm-dd" ng-date ng-model="eventDataValue.value">
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <button ng-show="selectedProgramStage" ng-click="addEvent()" class="button">{{'save'| translate}}</button>
+
+ <button ng-show="selectedProgramStage" ng-click="showEventList(null)" class="button">{{'back'| translate}}</button>
+</div>
\ No newline at end of file
=== added file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventUpdate.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventUpdate.html 1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventUpdate.html 2014-02-18 09:41:26 +0000
@@ -0,0 +1,56 @@
+<div ng-show="editingEventInFull" style="width:50%;">
+ <table class="dhis2-list-table-striped">
+ <thead>
+ <tr>
+ <th>
+ {{'data_element' | translate}}
+ </th>
+ <th>
+ {{'value' | translate}}
+ </th>
+ </tr>
+ </thead>
+ <tbody id="list">
+ <tr ng-repeat="eventGridColumn in eventGridColumns">
+ <td class="max-column-width">
+ {{eventGridColumn.name}}
+ </td>
+ <td class="max-column-width">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].type">
+ <div ng-switch-when="int">
+ <input type="number" style="width:98%;" ng-model="currentEvent[eventGridColumn.id]"/>
+ </div>
+ <div ng-switch-when="string">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].optionSet.options.length > 20">
+ <div ng-switch-when="true">
+ <div class="container-fluid">
+ <input type="text" style="width:98%;" ng-model="currentEvent[eventGridColumn.id]" typeahead="option for option in programStageDataElements[eventGridColumn.id].optionSet.options | filter:$viewValue | limitTo:20" >
+ </div>
+ </div>
+ <div ng-switch-default>
+ <select style="width:98%;" ng-model="currentEvent[eventGridColumn.id]" ng-options='option for option in programStageDataElements[eventGridColumn.id].optionSet.options'>
+ <option value="">{{'please_select'| translate}}</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ <div ng-switch-when="bool">
+ <select style="width:98%;" ng-model="currentEvent[eventGridColumn.id]">
+ <option value="">{{'please_select'| translate}}</option>
+ <option value="0">{{'no'| translate}}</option>
+ <option value="1">{{'yes'| translate}}</option>
+ </select>
+ </div>
+ <div ng-switch-when="date">
+ <input type="text" style="width:98%;" placeholder="yyyy-mm-dd" ng-date ng-model="currentEvent[eventGridColumn.id]">
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <button ng-show="selectedProgramStage" ng-click="updateEvent()" class="button">{{'update'| translate}}</button>
+
+ <button ng-show="selectedProgramStage" ng-click="showEventList()" class="button">{{'back'| translate}}</button>
+</div>
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/orgUnitTree.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/orgUnitTree.html 2014-02-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/orgUnitTree.html 2014-02-18 09:41:26 +0000
@@ -1,22 +1,24 @@
-<script type="text/ng-template" id="orgUnitTree.html">
-
- <span class="tree-expand-collapse" ng-click="expandCollapse(orgUnit)" ng-show="orgUnit.show && orgUnit.children.length > 0"><i class="fa fa-minus-square-o"></i></span>
- <span class="tree-expand-collapse" ng-click="expandCollapse(orgUnit)" ng-show="(!orgUnit.show && orgUnit.children.length > 0) || (!orgUnit.show && orgUnit.hasChildren)"><i class="fa fa-plus-square-o"></i></span>
-
- <span class="tree-node" ng-click="loadPrograms(orgUnit)" ng-class="{'selected-org-unit' : orgUnit.id === selectedOrgUnit.id}">{{orgUnit.name}}</span>
-
- <ul class="tree" id="tree" ng-show="orgUnit.show">
+<div class="org-unit-tree">
+ <script type="text/ng-template" id="orgUnitTree.html">
+
+ <span class="tree-expand-collapse" ng-click="expandCollapse(orgUnit)" ng-show="orgUnit.show && orgUnit.children.length > 0"><i class="fa fa-minus-square-o"></i></span>
+ <span class="tree-expand-collapse" ng-click="expandCollapse(orgUnit)" ng-show="(!orgUnit.show && orgUnit.children.length > 0) || (!orgUnit.show && orgUnit.hasChildren)"><i class="fa fa-plus-square-o"></i></span>
+
+ <span class="tree-node" ng-click="loadPrograms(orgUnit)" ng-class="{'selected-org-unit' : orgUnit.id === selectedOrgUnit.id}">{{orgUnit.name}}</span>
+
+ <ul class="tree" id="tree" ng-show="orgUnit.show">
<li ng-repeat="orgUnit in orgUnit.children | orderBy: 'name'" ng-include="'orgUnitTree.html'"></li>
- </ul>
-
-</script>
-
-<ul class="tree" id="tree">
- <li ng-repeat="orgUnit in orgUnits| orderBy: 'name'" ng-include="'orgUnitTree.html'"></li>
-</ul>
-
-
+ </ul>
+
+ </script>
+
+ <ul class="tree" id="tree">
+ <li ng-repeat="orgUnit in orgUnits| orderBy: 'name'" ng-include="'orgUnitTree.html'"></li>
+ </ul>
+</div>
<!--<div id="orgUnitTree">
<ul>
</ul>
-</div>-->
\ No newline at end of file
+</div>
+
+<img id="ouwt_loader" src="../../images/ajax-loader-bar.gif"/>-->
\ No newline at end of file
