dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #28225
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 14079: event capture - WIP, adding and editing events
------------------------------------------------------------
revno: 14079
committer: Abyot Asalefew Gizaw abyota@xxxxxxxxx
branch nick: dhis2
timestamp: Thu 2014-02-20 12:41:24 +0100
message:
event capture - WIP, adding and editing events
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/scripts/directives.js
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/services.js
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/styles/style.css
--
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-18 09:41:26 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/i18n/en.json 2014-02-20 11:41:24 +0000
@@ -8,12 +8,15 @@
"new_event_registration": "New event registration",
"update_event": "Updating event",
"no_registered_event": "There are no registered events.",
+ "event_registration_error": "Error in event registration",
"help": "Help",
"edit": "Edit",
"edit_in_grid": "Edit in grid",
"full_edit": "Full edit",
"update": "Update",
"save": "Save",
+ "save_and_add_new": "Save and add new",
+ "save_and_close": "Save and close",
"delete": "Delete",
"cancel": "Cancel",
"remove": "Remove",
@@ -67,6 +70,7 @@
"save_pdf": "Save PDF",
"cancel": "Cancel",
"close": "Close",
+ "close_editing": "Close editing",
"ok": "OK",
"not_selected": "NOT_SELECTED",
"search": "Search",
=== 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 12:33:44 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/index.html 2014-02-20 11:41:24 +0000
@@ -81,7 +81,10 @@
<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>
+ <h1>
+ {{'event_capture'| translate}}
+ <a href ng-click="getHelpContent()" title="{{'help'| translate}}"><i class="fa fa-question-circle"></i></a>
+ </h1>
<div id="selectDiv">
<table>
@@ -92,30 +95,66 @@
<tr>
<td><label>{{'program'| translate}}<em title="{{'required'| translate}}" class="required">*</em></label></td>
<td>
- <select id="programId" name="programId" ng-model="pr" ng-options="program as program.label for program in programs | orderBy: 'label'" ng-change="loadEvents(pr)">
+ <select id="programId"
+ name="programId"
+ 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>
</td>
<td style='padding-left: 20px;'>
- <button ng-show="selectedProgramStage" ng-click="showEventRegistration()" class="button" ng-disabled="eventRegistration || editingEventInFull || editingEventInGrid">{{'register_new_event'| translate}}</button>
+ <button class="button"
+ ng-show="selectedProgramStage"
+ ng-click="showEventRegistration()"
+ ng-disabled="eventRegistration || editingEventInFull || editingEventInGrid">
+ {{'register_new_event'| translate}}
+ </button>
</td>
</tr>
</table>
</div>
<div id="listDiv" ng-show="selectedProgramStage && !eventRegistration && !editingEventInFull">
+
+ <!-- visible when editing grid columns - need to think better way to display this-->
+ <div class="bordered-div" ng-show="editGridColumns">
+ <h3>{{'show_hide_columns'| translate}}</h3>
+ <table class="listTable dhis2-table-striped" width='100%'>
+ <tr>
+ <th>
+ {{'column' | translate}}
+ </th>
+ <th ng-repeat="eventGridColumn in eventGridColumns">
+ {{eventGridColumn.name}}
+ </th>
+ </tr>
+ <tr>
+ <th>
+ {{'hide' | translate}}
+ </th>
+ <th ng-repeat="eventGridColumn in eventGridColumns">
+ <input type="checkbox" ng-model="eventGridColumn.hide">
+ </th>
+ </tr>
+ </table>
+ <button ng-click="showHideColumns(false)">{{'close'| translate}}</button>
+
+ <button ng-click="showHideColumns(true)">{{'show_all'| translate}}</button>
+ </div>
+
<h2>
{{'registered_events'| translate}}
</h2>
<div ng-switch="dhis2Events.length">
-
+
<div ng-switch-when="undefined">
<p>
{{'empty_search_result'| translate}}
</p>
</div>
-
+
<div ng-switch-default>
<!-- context menu for event grid -->
@@ -130,117 +169,129 @@
<!-- 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>
+ <form name="outerForm" novalidate>
+
+ <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"
+ style="cursor:default;"
+ 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"
+ input-validator
+ program-stage-data-element={{programStageDataElements[eventGridColumn.id]}}
+ ng-model="currentEvent[eventGridColumn.id]"
+ ng-blur="updateEventDataValue(currentEvent, eventGridColumn.id)"
+ ng-required={{programStageDataElements[eventGridColumn.id].compulsory}}
+ name="foo"
+ style="width:98%;"
+ ng-class="{'input-error': (outerForm.submitted && innerFormGrid.foo.$invalid), 'input-success': (outerForm.submitted && innerFormGrid.foo.$valid)}"
+ />
+ <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]"
+ ng-blur="updateEventDataValue(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>
- </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>
+ </div>
+ <div ng-switch-default>
+ <select ng-model="currentEvent[eventGridColumn.id]"
+ ng-change="updateEventDataValue(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-change="updateEventDataValue(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]"
+ blur-or-change="updateEventDataValue(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="{{'close_editing'| translate}}"><i class="fa fa-times-circle-o fa-2x"></i></a>
+ </span>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <paginator></paginator>
</form>
<!-- event grid ends -->
-
</div>
</div>
</div>
-
+
<!-- event update in full begins-->
<div ng-show="editingEventInFull">
<h2>
@@ -268,19 +319,36 @@
<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%;"/>
+ <input type="number"
+ ng-model="currentEvent[eventGridColumn.id]"
+ ng-blur="updateEventDataValue(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%;">
+ <input type="text"
+ ng-model="currentEvent[eventGridColumn.id]"
+ ng-blur="updateEventDataValue(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%;">
+ <select ng-model="currentEvent[eventGridColumn.id]"
+ ng-change="updateEventDataValue(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>
@@ -288,7 +356,11 @@
</div>
</div>
<div ng-switch-when="bool">
- <select ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <select ng-model="currentEvent[eventGridColumn.id]"
+ ng-change="updateEventDataValue(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>
@@ -296,23 +368,28 @@
<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%;">
+ <input type="text"
+ placeholder="yyyy-mm-dd"
+ ng-date
+ ng-model="currentEvent[eventGridColumn.id]"
+ blur-or-change="updateEventDataValue(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>
+ </td>
+ </tr>
</tbody>
- </table>
- <button ng-click="updateEvent()" class="button">{{'update'| translate}}</button>
-
+ </table>
<button ng-click="showEventList()" class="button">{{'back'| translate}}</button>
</form>
</div>
</div>
<!-- event update ends -->
-
+
<!-- event registration begins -->
<div ng-show="eventRegistration">
<h2>
@@ -324,10 +401,10 @@
<thead>
<tr>
<th>
- {{'data_element' | translate}}
+ {{'data_element'| translate}}
</th>
<th>
- {{'value' | translate}}
+ {{'value'| translate}}
</th>
</tr>
</thead>
@@ -337,22 +414,35 @@
{{eventGridColumn.name}}
</td>
<td class="max-column-width">
- <ng-form="innerFormAdd">
+ <ng-form name="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%;"/>
+ <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%;">
+ <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%;">
+ <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>
@@ -360,7 +450,10 @@
</div>
</div>
<div ng-switch-when="bool">
- <select ng-model="currentEvent[eventGridColumn.id]" ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} name="foo" style="width:98%;">
+ <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>
@@ -368,7 +461,13 @@
<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%;">
+ <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>
@@ -378,9 +477,11 @@
</tbody>
</table>
- <button ng-click="addEvent()" class="button">{{'save'| translate}}</button>
-
- <button ng-click="showEventList(null)" class="button">{{'back'| translate}}</button>
+ <button ng-click="addEvent(true)" class="button">{{'save_and_add_new'| translate}}</button>
+
+ <button ng-click="addEvent()" class="button">{{'save_and_close'| translate}}</button>
+
+ <button ng-click="showEventList(null)" class="button">{{'close'| translate}}</button>
</form>
</div>
</div>
=== 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 12:33:44 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js 2014-02-20 11:41:24 +0000
@@ -14,7 +14,9 @@
Paginator,
ContextMenuSelectedItem,
ModalService,
+ DialogService,
orderByFilter,
+ $filter,
$translate) {
//Get current locale
@@ -91,12 +93,18 @@
});
}
});
+
+ if($scope.programs.length === 1){
+ $scope.pr = $scope.programs[0];
+ $scope.loadEvents($scope.pr);
+ }
});
}
};
//fetch contents of selected program from server - with full details
$scope.loadEvents = function(program){
+
ProgramFactory.get(program.id).then(function(data){
$scope.selectedProgram = data;
@@ -128,13 +136,15 @@
}
$scope.dhis2Events[i][dataValue.dataElement] = dataValue.value;
}
- });
+ });
+
+ delete $scope.dhis2Events[i].dataValues;
}
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
@@ -183,13 +193,15 @@
$scope.outerForm.$valid = true;
- $scope.currentEvent = '';
+ $scope.currentEvent = {};
};
$scope.showEventRegistration = function(){
$scope.eventRegistration = !$scope.eventRegistration;
- $scope.currentEvent = $scope.newDhis2Event;
- $scope.outerForm.$valid = true;
+ $scope.currentEvent = $scope.newDhis2Event;
+ $scope.outerForm.submitted = false;
+
+ $scope.currentEvent = {};
};
$scope.showEditEventInGrid = function(){
@@ -200,10 +212,10 @@
};
$scope.showEditEventInFull = function(){
- $scope.currentEvent = ContextMenuSelectedItem.getSelectedItem();
+ $scope.currentEvent = ContextMenuSelectedItem.getSelectedItem();
+ $scope.currentEventOrginialValue = angular.copy($scope.currentEvent);
$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,40 +226,84 @@
}
};
- $scope.addEvent = function(){
- $scope.eventRegistration = false;
- $scope.editingEventInFull = false;
- $scope.editingEventInGrid = false;
-
- $scope.outerForm.submitted = true;
-
- if($scope.outerForm.$invalid ){
+ $scope.addEvent = function(addingAnotherEvent){
+
+ //check for form validity
+ $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 = '';
- };
+ //the form is valid, get the values
+ var dataValues = [];
+ for(var dataElement in $scope.programStageDataElements){
+ dataValues.push({dataElement: dataElement, value: $scope.currentEvent[dataElement]});
+ }
+
+ var newEvent = angular.copy($scope.currentEvent);
+
+ //prepare the event to be created
+ var dhis2Event = {program: $scope.selectedProgram.id,
+ programStage: $scope.selectedProgramStage.id,
+ orgUnit: $scope.selectedOrgUnit.id,
+ status: 'ACTIVE',
+ eventDate: $filter('date')(new Date(), 'yyyy-MM-dd'),
+ dataValues: dataValues
+ };
+
+ //send the new event to server
+ DHIS2EventFactory.create(dhis2Event).then(function(data) {
+ if (data.importSummaries[0].status == 'ERROR') {
+ var dialogOptions = {
+ headerText: 'event_registration_error',
+ bodyText: data.importSummaries[0].description
+ };
+
+ DialogService.showDialog({}, dialogOptions);
+ }
+ else {
+
+ //add the new event to the grid
+ newEvent.event = data.importSummaries[0].reference;
+ $scope.dhis2Events.splice(0,0,newEvent);
+
+ //decide whether to stay in the current screen or not.
+ if(!addingAnotherEvent){
+ $scope.eventRegistration = false;
+ $scope.editingEventInFull = false;
+ $scope.editingEventInGrid = false;
+ }
+ $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.updateEventDataValue = function(currentEvent, dataElement){
+
+ var newValue = currentEvent[dataElement];
+ var oldValue = $scope.currentEventOrginialValue[dataElement];
+
+ if( newValue !== oldValue ){
+
+ var dhis2Event = {event: currentEvent.event, dataValues: [{value: newValue, dataElement: dataElement}]};
+
+ DHIS2EventFactory.updateSingleValue(dhis2Event).then(function(data){
+
+ var continueLoop = true;
+ for(var i=0; i< $scope.dhis2Events.length && continueLoop; i++){
+ if($scope.dhis2Events[i].event === currentEvent.event ){
+ $scope.dhis2Events[i] = currentEvent;
+ continueLoop = false;
+ }
+ }
+
+ //update original value
+ $scope.currentEventOrginialValue = angular.copy(currentEvent);
+ });
}
-
- $scope.eventRegistration = false;
- $scope.editingEventInFull = false;
- $scope.editingEventInGrid = false;
-
- console.log('the event to be updated is: ', $scope.currentEvent);
- $scope.currentEvent = '';
- };
+ };
$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/scripts/directives.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/directives.js 2014-02-17 10:22:59 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/directives.js 2014-02-20 11:41:24 +0000
@@ -4,6 +4,72 @@
var eventCaptureDirectives = angular.module('eventCaptureDirectives', [])
+.directive('inputValidator', function() {
+
+ return {
+ require: 'ngModel',
+ link: function (scope, element, attrs, ctrl) {
+
+ //console.log('the model is: ', attrs.programStageDataElement);
+ ctrl.$parsers.push(function (value) {
+ return parseFloat(value || '');
+ });
+ }
+ };
+})
+
+.directive('dhisContextMenu', function(ContextMenuSelectedItem) {
+
+ return {
+ restrict: 'A',
+ link: function(scope, element, attrs){
+ var contextMenu = $("#contextMenu");
+
+ element.click(function (e) {
+ var selectedItem = $.parseJSON(attrs.selectedItem);
+ ContextMenuSelectedItem.setSelectedItem(selectedItem);
+
+ var menuHeight = contextMenu.height();
+ var menuWidth = contextMenu.width();
+ var winHeight = $(window).height();
+ var winWidth = $(window).width();
+
+ var pageX = e.pageX;
+ var pageY = e.pageY;
+
+ contextMenu.show();
+
+ if( (menuWidth + pageX) > winWidth ) {
+ pageX -= menuWidth;
+ }
+
+ if( (menuHeight + pageY) > winHeight ) {
+ pageY -= menuHeight;
+
+ if( pageY < 0 ) {
+ pageY = e.pageY;
+ }
+ }
+
+ contextMenu.css({
+ left: pageX,
+ top: pageY
+ });
+
+ return false;
+ });
+
+ contextMenu.on("click", "a", function () {
+ contextMenu.hide();
+ });
+
+ $(document).click(function () {
+ contextMenu.hide();
+ });
+ }
+ };
+})
+
.directive('ngDate', function($filter) {
return {
restrict: 'A',
@@ -31,76 +97,41 @@
ctrl.$setViewValue(this.value);
scope.$apply();
ctrl.$setValidity('foo', false);
+ //console.log('it is invalid');
}
else{
scope.invalidDate = false;
ctrl.$setViewValue(this.value);
scope.$apply();
ctrl.$setValidity('foo', true);
+ //console.log('it is valid');
}
});
}
};
})
+.directive('blurOrChange', function() {
+
+ return function( scope, elem, attrs) {
+ elem.datepicker({
+ onSelect: function() {
+ scope.$apply(attrs.blurOrChange);
+ $(this).change();
+ }
+ }).change(function() {
+ scope.$apply(attrs.blurOrChange);
+ });
+ };
+})
+
.directive('paginator', function factory() {
return {
restrict: 'E',
controller: function ($scope, Paginator) {
$scope.paginator = Paginator;
},
- templateUrl: 'views/pagination.html'
- };
-})
-
-.directive('dhisContextMenu', ['ContextMenuSelectedItem', function(ContextMenuSelectedItem) {
-
- return {
- restrict: 'A',
- link: function(scope, element, attrs){
- var contextMenu = $("#contextMenu");
-
- element.click(function (e) {
- var selectedItem = $.parseJSON(attrs.selectedItem);
- ContextMenuSelectedItem.setSelectedItem(selectedItem);
-
- var menuHeight = contextMenu.height();
- var menuWidth = contextMenu.width();
- var winHeight = $(window).height();
- var winWidth = $(window).width();
-
- var pageX = e.pageX;
- var pageY = e.pageY;
-
- contextMenu.show();
-
- if( (menuWidth + pageX) > winWidth ) {
- pageX -= menuWidth;
- }
-
- if( (menuHeight + pageY) > winHeight ) {
- pageY -= menuHeight;
-
- if( pageY < 0 ) {
- pageY = e.pageY;
- }
- }
-
- contextMenu.css({
- left: pageX,
- top: pageY
- });
-
- return false;
- });
-
- contextMenu.on("click", "a", function () {
- contextMenu.hide();
- });
-
- $(document).click(function () {
- contextMenu.hide();
- });
- }
- };
-}]);
\ No newline at end of file
+ templateUrl: 'views/pagination.html'
+ };
+});
+
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/services.js 2014-02-17 10:22:59 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/services.js 2014-02-20 11:41:24 +0000
@@ -586,6 +586,13 @@
return response.data;
});
return promise;
+ },
+
+ updateSingleValue: function(dhis2Event){
+ var promise = $http.put(dhis2Url + '/api/events/' + dhis2Event.event + '/' + dhis2Event.dataValues[0].dataElement, dhis2Event ).then(function(response){
+ return response.data;
+ });
+ return promise;
}
};
})
=== 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-18 09:41:26 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/styles/style.css 2014-02-20 11:41:24 +0000
@@ -692,6 +692,14 @@
cursor: default;
}
+.input-error {
+ background-color: #ff6600;
+}
+
+.input-success {
+ background-color: #b9ffb9;
+}
+
.red {
color: red;
}
@@ -718,6 +726,15 @@
float: left;
}
+.bordered-div
+{
+ border: 1px solid #c2c2c2;
+ border-radius: 10px;
+ padding: 5px 10px;
+ margin-bottom: 20px;
+}
+
+
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
