dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #28198
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 14070: event capture - WIP, form validation
------------------------------------------------------------
revno: 14070
committer: Abyot Asalefew Gizaw abyota@xxxxxxxxx
branch nick: dhis2
timestamp: Tue 2014-02-18 13:33:44 +0100
message:
event capture - WIP, form validation
modified:
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/views/eventList.html
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventUpdate.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/index.html'
--- 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
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/index.html 2014-02-18 12:33:44 +0000
@@ -109,29 +109,282 @@
</h2>
<div ng-switch="dhis2Events.length">
+
<div ng-switch-when="undefined">
<p>
{{'empty_search_result'| translate}}
</p>
</div>
+
<div ng-switch-default>
- <div ng-include="'views/eventList.html'"></div>
+
+ <!-- context menu for event grid -->
+ <div id="contextMenu" class="contextMenu" style="width: 180px;">
+ <ul id="contextMenuItems" class="contextMenuItems">
+ <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>
+ </div>
+ <!-- context menu ends -->
+
+ <!-- event grid begins -->
+ <form name="outerForm" novalidate>
+ <table class="mainPageTable">
+ <tr>
+ <td style="vertical-align:top">
+ <div id="content">
+
+ <!-- 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="eventGridColumn in eventGridColumns">
+ <td>
+ {{eventGridColumn.name}}
+ </td>
+ <td>
+ <input type="checkbox" ng-model="eventGridColumn.hide">{{'hide'| translate}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <button ng-click="showHideColumns(false)">{{'close'| translate}}</button>
+ </td>
+ <td>
+ <button ng-click="showHideColumns(true)">{{'show_all'| translate}}</button>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <table class="listTable dhis2-table-striped dhis2-table-hover">
+ <thead>
+ <tr>
+ <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="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)">
+
+ <!-- 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>
+
+ <!-- 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">
+ <ng-form name="innerFormGrid">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.type">
+ <div ng-switch-when="int">
+ <input type="number" ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;"/>
+ <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ <div ng-switch-when="string">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length > 20">
+ <div ng-switch-when="true">
+ <div class="container-fluid">
+ <input type="text" ng-model="currentEvent[eventGridColumn.id]" typeahead="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ </div>
+ <div ng-switch-default>
+ <select ng-model="currentEvent[eventGridColumn.id]" ng-options="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <option value="">{{'please_select'| translate}}</option>
+ </select>
+ <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ </div>
+ </div>
+ <div ng-switch-when="bool">
+ <select ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <option value="">{{'please_select'| translate}}</option>
+ <option value="0">{{'no'| translate}}</option>
+ <option value="1">{{'yes'| translate}}</option>
+ </select>
+ <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ <div ng-switch-when="date">
+ <input type="text" placeholder="yyyy-mm-dd" ng-date ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ </div>
+ </ng-form>
+ </td>
+ <td>
+ <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>
+ </tr>
+ </tbody>
+ </table>
+ <p></p>
+ <paginator></paginator>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </form>
+ <!-- event grid ends -->
+
</div>
- </div>
-
- </div>
+ </div>
+ </div>
+
+ <!-- event update in full begins-->
+ <div ng-show="editingEventInFull">
+ <h2>
+ {{'update_event'| translate}}
+ </h2>
+ <div style="width:50%;">
+ <form name="outerForm" novalidate>
+ <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">
+ <ng-form name="innerFormUpdate">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.type">
+ <div ng-switch-when="int">
+ <input type="number" ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;"/>
+ <span ng-show="outerForm.submitted && innerFormUpdate.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ <div ng-switch-when="string">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length > 20">
+ <div ng-switch-when="true">
+ <div class="container-fluid">
+ <input type="text" ng-model="currentEvent[eventGridColumn.id]" typeahead="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <span ng-show="outerForm.submitted && innerFormUpdate.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ </div>
+ <div ng-switch-default>
+ <select ng-model="currentEvent[eventGridColumn.id]" ng-options="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <option value="">{{'please_select'| translate}}</option>
+ </select>
+ <span ng-show="outerForm.submitted && innerFormUpdate.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ </div>
+ </div>
+ <div ng-switch-when="bool">
+ <select ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <option value="">{{'please_select'| translate}}</option>
+ <option value="0">{{'no'| translate}}</option>
+ <option value="1">{{'yes'| translate}}</option>
+ </select>
+ <span ng-show="outerForm.submitted && innerFormUpdate.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ <div ng-switch-when="date">
+ <input type="text" placeholder="yyyy-mm-dd" ng-date ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <span ng-show="outerForm.submitted && innerFormUpdate.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ </div>
+ </ng-form>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <button ng-click="updateEvent()" class="button">{{'update'| translate}}</button>
+
+ <button ng-click="showEventList()" class="button">{{'back'| translate}}</button>
+ </form>
+ </div>
+ </div>
+ <!-- event update ends -->
+
+ <!-- event registration begins -->
<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 style="width:50%;">
+ <form name="outerForm" novalidate>
+ <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">
+ <ng-form="innerFormAdd">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.type">
+ <div ng-switch-when="int">
+ <input type="number" ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;"/>
+ <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ <div ng-switch-when="string">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length > 20">
+ <div ng-switch-when="true">
+ <div class="container-fluid">
+ <input type="text" ng-model="currentEvent[eventGridColumn.id]" typeahead="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ </div>
+ <div ng-switch-default>
+ <select ng-model="currentEvent[eventGridColumn.id]" ng-options="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <option value="">{{'please_select'| translate}}</option>
+ </select>
+ <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ </div>
+ </div>
+ <div ng-switch-when="bool">
+ <select ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <option value="">{{'please_select'| translate}}</option>
+ <option value="0">{{'no'| translate}}</option>
+ <option value="1">{{'yes'| translate}}</option>
+ </select>
+ <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ <div ng-switch-when="date">
+ <input type="text" placeholder="yyyy-mm-dd" ng-date ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ </div>
+ </ng-form>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <button ng-click="addEvent()" class="button">{{'save'| translate}}</button>
+
+ <button ng-click="showEventList(null)" class="button">{{'back'| translate}}</button>
+ </form>
+ </div>
+ </div>
+ <!-- event registration ends -->
</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-18 09:41:26 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js 2014-02-18 12:33:44 +0000
@@ -105,7 +105,7 @@
$scope.selectedProgramStage = data;
angular.forEach($scope.selectedProgramStage.programStageDataElements, function(prStDe){
- $scope.programStageDataElements[prStDe.dataElement.id] = prStDe.dataElement;
+ $scope.programStageDataElements[prStDe.dataElement.id] = prStDe;
});
//Load events for the selected program stage and orgunit
@@ -121,7 +121,7 @@
angular.forEach($scope.dhis2Events[i].dataValues, function(dataValue){
//converting int value to integer for proper sorting.
- var dataElement = $scope.programStageDataElements[dataValue.dataElement];
+ var dataElement = $scope.programStageDataElements[dataValue.dataElement].dataElement;
if(angular.isObject(dataElement)){
if(dataElement.type == 'int'){
dataValue.value = parseInt(dataValue.value);
@@ -140,9 +140,9 @@
//generate grid headers using program stage data elements
//also, create a template for new event.
for(var dataElement in $scope.programStageDataElements){
- var dataElement = $scope.programStageDataElements[dataElement];
+ var dataElement = $scope.programStageDataElements[dataElement].dataElement;
var name = dataElement.formName || dataElement.name;
- $scope.newDhis2Event.dataValues.push({dataElement: dataElement, value: '', name: name});
+ $scope.newDhis2Event.dataValues.push({id: dataElement.id, value: '', name: name});
$scope.eventGridColumns.push({name: name, id: dataElement.id, filter: '', hide: false});
}
});
@@ -181,24 +181,29 @@
$scope.editingEventInFull = false;
$scope.editingEventInGrid = false;
+ $scope.outerForm.$valid = true;
+
$scope.currentEvent = '';
};
$scope.showEventRegistration = function(){
$scope.eventRegistration = !$scope.eventRegistration;
$scope.currentEvent = $scope.newDhis2Event;
+ $scope.outerForm.$valid = true;
};
$scope.showEditEventInGrid = function(){
$scope.currentEvent = ContextMenuSelectedItem.getSelectedItem();
$scope.currentEventOrginialValue = angular.copy($scope.currentEvent);
$scope.editingEventInGrid = !$scope.editingEventInGrid;
+ $scope.outerForm.$valid = true;
};
$scope.showEditEventInFull = function(){
$scope.currentEvent = ContextMenuSelectedItem.getSelectedItem();
$scope.editingEventInFull = !$scope.editingEventInFull;
$scope.eventRegistration = false;
+ $scope.outerForm.$valid = true;
if($scope.currentEvent.dataValues.length !== $scope.selectedProgramStage.programStageDataElements.length){
angular.forEach($scope.selectedProgramStage.programStageDataElements, function(prStDe){
@@ -214,11 +219,28 @@
$scope.editingEventInFull = false;
$scope.editingEventInGrid = false;
+ $scope.outerForm.submitted = true;
+
+ if($scope.outerForm.$invalid ){
+ console.log('the form is invalid');
+ return false;
+ }
+
console.log('the event to be added is: ', $scope.currentEvent);
$scope.currentEvent = '';
};
$scope.updateEvent = function(){
+
+ console.log('the form is: ', $scope.outerForm);
+ //validate form
+ $scope.outerForm.submitted = true;
+
+ if($scope.outerForm.$invalid ){
+ console.log('the form is invalid');
+ return false;
+ }
+
$scope.eventRegistration = false;
$scope.editingEventInFull = false;
$scope.editingEventInGrid = false;
=== 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-18 09:41:26 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.html 2014-02-18 12:33:44 +0000
@@ -7,100 +7,108 @@
</ul>
</div>
-
-<table class="mainPageTable">
- <tr>
- <td style="vertical-align:top">
- <div id="content">
-
- <!-- 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="eventGridColumn in eventGridColumns">
- <td>
- {{eventGridColumn.name}}
- </td>
- <td>
- <input type="checkbox" ng-model="eventGridColumn.hide">{{'hide'| translate}}
- </td>
- </tr>
- <tr>
- <td>
- <button ng-click="showHideColumns(false)">{{'close'| translate}}</button>
- </td>
- <td>
- <button ng-click="showHideColumns(true)">{{'show_all'| translate}}</button>
- </td>
- </tr>
- </table>
- </div>
-
- <table class="listTable dhis2-table-striped dhis2-table-hover">
- <thead>
- <tr>
- <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="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)">
-
- <!-- 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>
-
- <!-- 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="currentEvent[eventGridColumn.id]" value="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:90%;" ng-model="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]" typeahead="option for option in programStageDataElements[eventGridColumn.id].optionSet.options | filter:$viewValue | limitTo:20" >
+<form name="outerForm" novalidate>
+ <table class="mainPageTable">
+ <tr>
+ <td style="vertical-align:top">
+ <div id="content">
+
+ <!-- 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="eventGridColumn in eventGridColumns">
+ <td>
+ {{eventGridColumn.name}}
+ </td>
+ <td>
+ <input type="checkbox" ng-model="eventGridColumn.hide">{{'hide'| translate}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <button ng-click="showHideColumns(false)">{{'close'| translate}}</button>
+ </td>
+ <td>
+ <button ng-click="showHideColumns(true)">{{'show_all'| translate}}</button>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <table class="listTable dhis2-table-striped dhis2-table-hover">
+ <thead>
+ <tr>
+ <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="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)">
+
+ <!-- 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>
+
+ <!-- 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">
+ <ng-form name="innerForm">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.type">
+ <div ng-switch-when="int">
+ <input type="number" ng-model="currentEvent[eventGridColumn.id]" ng-required="programStageDataElements[eventGridColumn.id].compulsory" name="foo" style="width:98%;"/>
+ <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="error">{{'required'| translate}}</span>
+ </div>
+ <div ng-switch-when="string">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length > 20">
+ <div ng-switch-when="true">
+ <div class="container-fluid">
+ <input type="text" ng-model="currentEvent[eventGridColumn.id]" typeahead="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" ng-required="programStageDataElements[eventGridColumn.id].compulsory" name="foo" style="width:98%;">
+ <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="error">{{'required'| translate}}</span>
+ </div>
+ </div>
+ <div ng-switch-default>
+ <select ng-model="currentEvent[eventGridColumn.id]" ng-options="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options" ng-required="programStageDataElements[eventGridColumn.id].compulsory" name="foo" style="width:98%;">
+ <option value="">{{'please_select'| translate}}</option>
+ </select>
+ <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="error">{{'required'| translate}}</span>
+ </div>
</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>
+ <div ng-switch-when="bool">
+ <select ng-model="currentEvent[eventGridColumn.id]" ng-required="programStageDataElements[eventGridColumn.id].compulsory" name="foo" style="width:98%;">
+ <option value="">{{'please_select'| translate}}</option>
+ <option value="0">{{'no'| translate}}</option>
+ <option value="1">{{'yes'| translate}}</option>
</select>
+ <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="error">{{'required'| translate}}</span>
+ </div>
+ <div ng-switch-when="date">
+ <input type="text" placeholder="yyyy-mm-dd" ng-date ng-model="currentEvent[eventGridColumn.id]" ng-required="programStageDataElements[eventGridColumn.id].compulsory" name="foo" style="width:98%;">
+ <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="error">{{'required'| translate}}</span>
</div>
</div>
- </div>
- <div ng-switch-when="bool">
- <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="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]">
- </div>
- </div>
- </td>
- <td>
- <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>
- </tr>
- </tbody>
- </table>
- <p></p>
- <paginator></paginator>
- </div>
- </td>
- </tr>
-</table>
+ </ng-form>
+ </td>
+ <td>
+ <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>
+ </tr>
+ </tbody>
+ </table>
+ <p></p>
+ <paginator></paginator>
+ </div>
+ </td>
+ </tr>
+ </table>
+</form>
=== modified 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 2014-02-18 09:41:26 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventUpdate.html 2014-02-18 12:33:44 +0000
@@ -1,56 +1,65 @@
<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" >
+
+ <form name="outerForm" novalidate>
+ <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">
+ <ng-form name="innerForm">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.type">
+ <div ng-switch-when="int">
+ <input type="number" ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;"/>
+ <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ <div ng-switch-when="string">
+ <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length > 20">
+ <div ng-switch-when="true">
+ <div class="container-fluid">
+ <input type="text" ng-model="currentEvent[eventGridColumn.id]" typeahead="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ </div>
+ <div ng-switch-default>
+ <select ng-model="currentEvent[eventGridColumn.id]" ng-options="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <option value="">{{'please_select'| translate}}</option>
+ </select>
+ <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
</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>
+ <div ng-switch-when="bool">
+ <select ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <option value="">{{'please_select'| translate}}</option>
+ <option value="0">{{'no'| translate}}</option>
+ <option value="1">{{'yes'| translate}}</option>
</select>
+ <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="red">{{'required'| translate}}</span>
+ </div>
+ <div ng-switch-when="date">
+ <input type="text" placeholder="yyyy-mm-dd" ng-date ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="red">{{'required'| translate}}</span>
</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>
+ </ng-form>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <button ng-click="updateEvent()" class="button">{{'update'| translate}}</button>
+
+ <button ng-click="showEventList()" class="button">{{'back'| translate}}</button>
+ </form>
</div>
\ No newline at end of file
