dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #28164
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 14049: app for event capture - WIP, replaced operations column with contextmenu
------------------------------------------------------------
revno: 14049
committer: Abyot Asalefew Gizaw abyota@xxxxxxxxx
branch nick: dhis2
timestamp: Mon 2014-02-17 11:22:59 +0100
message:
app for event capture - WIP, replaced operations column with contextmenu
added:
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/modal.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/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
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.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-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/i18n/en.json 2014-02-17 10:22:59 +0000
@@ -8,10 +8,16 @@
"no_registered_event": "There are no registered events.",
"help": "Help",
"edit": "Edit",
+ "edit_in_grid": "Edit in grid",
+ "full_edit": "Full edit",
"update": "Update",
"save": "Save",
"delete": "Delete",
"cancel": "Cancel",
+ "remove": "Remove",
+ "are_you_sure_to_remove": "Are you sure you want to remove the selected item?",
+ "show_hide_columns": "Show/Hide columns",
+ "show_details": "Show details",
"new_event": "New Event",
"register_new_event": "Register New Event",
"total_number_of_pages": "No. of pages",
=== 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-14 10:59:22 +0000
+++ 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
@@ -49,7 +49,6 @@
<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="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>
=== 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-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js 2014-02-17 10:22:59 +0000
@@ -12,6 +12,8 @@
ProgramStageFactory,
DHIS2EventFactory,
Paginator,
+ ContextMenuSelectedItem,
+ ModalService,
orderByFilter,
$translate) {
@@ -35,6 +37,7 @@
$scope.sortHeader = '';
$scope.reverse = false;
+ $scope.gridFilter = '';
//Get orgunits for the logged in user
OrgUnitFactory.getMine().then(function(orgUnits) {
@@ -107,7 +110,7 @@
dhis2Event.dataValues = orderByFilter(dhis2Event.dataValues, '-dataElement');
angular.forEach(dhis2Event.dataValues, function(dataValue){
- //now copy actual event value
+ //converting int value to integer for proper sorting.
var dataElement = $scope.programStageDataElements[dataValue.dataElement];
if(dataElement.type == 'int'){
dataValue.value = parseInt(dataValue.value);
@@ -116,13 +119,14 @@
});
});
- //generate grid headers from events
- angular.forEach($scope.dhis2Events[0].dataValues, function(dataValue){
- var dataElement = $scope.programStageDataElements[dataValue.dataElement];
+ //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 name = dataElement.formName || dataElement.name;
$scope.newDhis2Event.dataValues.push({dataElement: dataElement, value: '', name: name});
- $scope.eventGridHeaders.push({name: name, id: dataElement.id});
- });
+ $scope.eventGridHeaders.push({name: name, id: dataElement.id, filter: ''});
+ }
});
});
});
@@ -174,7 +178,32 @@
$scope.eventUnderEditing = '';
};
- $scope.deleteEvent = function(dhis2Event){
+ $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();
+
+ var modalOptions = {
+ closeButtonText: 'cancel',
+ actionButtonText: 'remove',
+ headerText: 'remove',
+ bodyText: 'are_you_sure_to_remove'
+ };
+
+ ModalService.showModal({}, modalOptions).then(function(result){
+ console.log('The event to be deleted is: ', dhis2Event);
+ });
+ };
+
+ $scope.showEventDetails = function(){
+ console.log('The event is: ', ContextMenuSelectedItem.getSelectedItem().event);
};
$scope.getHelpContent = function(){
@@ -182,13 +211,8 @@
};
$scope.generateReport = function(){
- console.log('I need to generate the report....');
- };
-
- $scope.showContextMenu = function(dhis2Event){
- //console.log('I need to display context menu for....', dhis2Event);
- }
-
+ console.log('I need to generate the report....');
+ };
})
//Controller for the main page
=== 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-14 10:59:22 +0000
+++ 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
@@ -51,4 +51,56 @@
},
templateUrl: 'views/pagination.html'
};
-});
\ No newline at end of file
+})
+
+.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
=== 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-14 10:59:22 +0000
+++ 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
@@ -559,13 +559,9 @@
getByStage: function(orgUnit, programStage){
var promise = $http.get(dhis2Url + '/api/events.json?' + 'orgUnit=' + orgUnit + '&programStage=' + programStage + '&paging=false').then(function(response){
- var dhis2Events = response.data.eventList;
-
- /*angular.forEach(dhis2Events, function(dhis2Event){
- console.log('datavalue length: ', dhis2Event.dataValues.length);
- });*/
-
- return dhis2Events;
+ //var dhis2Events = response.data.eventList;
+
+ return response.data.eventList;
});
return promise;
},
@@ -931,6 +927,18 @@
}])
+.service('ContextMenuSelectedItem', function(){
+ this.selectedItem = '';
+
+ this.setSelectedItem = function(selectedItem){
+ this.selectedItem = selectedItem;
+ };
+
+ this.getSelectedItem = function(){
+ return this.selectedItem;
+ };
+})
+
/* Pagination service */
.service('Paginator', function () {
this.page = 0;
=== 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-14 10:59:22 +0000
+++ 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
@@ -700,6 +700,10 @@
color: black;
}
+.bold {
+ font-weight: bold;
+}
+
.white {
color: white;
}
@@ -751,15 +755,15 @@
background-color: #ebf0f6;
}
-.dhis2-table-striped,
-.dhis2-table-striped>thead>tr>th,
-.dhis2-table-striped>tbody>tr>th,
-.dhis2-table-striped>tfoot>tr>th,
-.dhis2-table-striped>thead>tr>td,
-.dhis2-table-striped>tbody>tr>td,
-.dhis2-table-striped>tfoot>tr>td {
- //border: 1px solid #cad5e5;
- border: none;
+
+.dhis2-table-striped>thead>tr,
+.dhis2-table-striped>tbody>tr,
+.dhis2-table-striped>tfoot>tr,
+.dhis2-table-striped>thead>tr,
+.dhis2-table-striped>tbody>tr,
+.dhis2-table-striped>tfoot>tr {
+ border-bottom: 1px solid #cad5e5;
+ //border: none;
}
.dhis2-table-striped > tbody > tr:nth-child(odd)> td, .dhis2-table-striped > tbody > tr:nth-child(odd)> th {
@@ -769,3 +773,133 @@
.dhis2-table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
background-color: #dfe9f4;
}
+
+#contextMenu {
+ position: absolute;
+ display:none;
+}
+
+/*----------------------------------------------------------------------------*/
+/* Bootstrap modal style
+/*----------------------------------------------------------------------------*/
+.modal-open {
+ overflow: hidden
+}
+.modal {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1040;
+ display: none;
+ overflow: auto;
+ overflow-y: scroll
+}
+.modal.fade .modal-dialog {
+ -webkit-transform: translate(0,-25%);
+ -ms-transform: translate(0,-25%);
+ transform: translate(0,-25%);
+ -webkit-transition: -webkit-transform .3s ease-out;
+ -moz-transition: -moz-transform .3s ease-out;
+ -o-transition: -o-transform .3s ease-out;
+ transition: transform .3s ease-out
+}
+.modal.in .modal-dialog {
+ -webkit-transform: translate(0,0);
+ -ms-transform: translate(0,0);
+ transform: translate(0,0)
+}
+.modal-dialog {
+ position: relative;
+ z-index: 1050;
+ width: auto;
+ padding: 10px;
+ margin-right: auto;
+ margin-left: auto
+}
+.modal-content {
+ position: relative;
+ background-color: #fff;
+ border: 1px solid #999;
+ border: 1px solid rgba(0,0,0,0.2);
+ border-radius: 6px;
+ outline: 0;
+ -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
+ box-shadow: 0 3px 9px rgba(0,0,0,0.5);
+ background-clip: padding-box
+}
+.modal-backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1030;
+ background-color: #000
+}
+.modal-backdrop.fade {
+ opacity: 0;
+ filter: alpha(opacity=0)
+}
+.modal-backdrop.in {
+ opacity: .5;
+ filter: alpha(opacity=50)
+}
+.modal-header {
+ min-height: 16.428571429px;
+ padding: 15px;
+ border-bottom: 1px solid #e5e5e5
+}
+.modal-header .close {
+ margin-top: -2px
+}
+.modal-title {
+ margin: 0;
+ line-height: 1.428571429
+}
+.modal-body {
+ position: relative;
+ padding: 20px
+}
+.modal-footer {
+ padding: 19px 20px 20px;
+ margin-top: 15px;
+ text-align: right;
+ border-top: 1px solid #e5e5e5
+}
+.modal-footer:before, .modal-footer:after {
+ display: table;
+ content: " "
+}
+.modal-footer:after {
+ clear: both
+}
+.modal-footer:before, .modal-footer:after {
+ display: table;
+ content: " "
+}
+.modal-footer:after {
+ clear: both
+}
+.modal-footer .btn+ .btn {
+ margin-bottom: 0;
+ margin-left: 5px
+}
+.modal-footer .btn-group .btn+ .btn {
+ margin-left: -1px
+}
+.modal-footer .btn-block+ .btn-block {
+ margin-left: 0
+}
+@media screen and (min-width: 768px) {
+ .modal-dialog {
+ width: 600px;
+ padding-top: 30px;
+ padding-bottom: 30px
+ }
+ .modal-content {
+ -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+ box-shadow: 0 5px 15px rgba(0,0,0,0.5)
+ }
+}
=== 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-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.html 2014-02-17 10:22:59 +0000
@@ -1,44 +1,44 @@
-<div id="contextMenu" class="contextMenu">
+<div id="contextMenu" class="contextMenu" style="width: 180px;">
<ul id="contextMenuItems" class="contextMenuItems">
- <li data-enabled="canManage"><a data-target-fn="showSharingDialogWithContext"><i class="fa fa-share"></i> $i18n.getString( "sharing_settings" )</a></li>
- <li data-enabled="canUpdate"><a data-target-fn="showUpdateDataElementForm"><i class="fa fa-edit"></i> $i18n.getString( "edit" )</a></li>
- <li data-enabled="canUpdate"><a data-target-fn="translateWithContext"><i class="fa fa-globe"></i> $i18n.getString( "translation_translate" )</a></li>
- <li data-enabled="canDelete"><a data-target-fn="removeDataElement"><i class="fa fa-trash-o"></i> $i18n.getString( "remove" )</a></li>
- <li><a data-target-fn="showDataElementDetails"><i class="fa fa-info-circle"></i> $i18n.getString( "show_details" )</a></li>
+ <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="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>
+
<table class="mainPageTable">
<tr>
<td style="vertical-align:top">
<div id="content">
- <table class="listTable dhis2-table-striped dhis2-table-hover" id="dhis2EventList">
+ <table class="listTable dhis2-table-striped dhis2-table-hover">
<thead>
<tr>
- <th>#</th>
<th 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>
- <th>{{'operations'| translate}}</th>
+ <th>
+ <a href ng-click="editGridHeader()" title="{{'show_hide_columns'| translate}}"><i class="fa fa-cog"></i></a>
+ </th>
</tr>
</thead>
<tbody id="list">
- <tr id="tr{{dhis2Event.event}}" ng-repeat="dhis2Event in dhis2Events| paginate:rowsPerPage| orderBy:sortHeader:reverse" ng-click="showContextMenu(dhis2Event)">
- <td>{{($index + 1) + (paginator.getPage() * paginator.rowsPerPage)}}</td>
- <td class="max-column-width" ng-hide="eventUnderEditing == dhis2Event" ng-repeat="eventGridHeader in eventGridHeaders">
+ <tr id={{dhis2Event.event}} data-id={{dhis2Event.event}} data-uid={{dhis2Event.event}} 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" ng-repeat="eventGridHeader in eventGridHeaders">
{{dhis2Event[eventGridHeader.id]}}
</td>
- <td class="max-column-width" ng-show="eventUnderEditing == dhis2Event" ng-repeat="eventGridHeader in eventGridHeaders">
+ <td class="max-column-width" ng-show="eventUnderEditing.event == dhis2Event.event" ng-repeat="eventGridHeader in eventGridHeaders">
<div ng-switch="programStageDataElements[eventGridHeader.id].type">
<div ng-switch-when="int">
<input type="number" style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]"/>
</div>
- <div ng-switch-when="string">
- <select style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]" ng-options='option for option in programStageDataElements[eventGridHeader.id].optionSet.options | limitTo:20'>
- <option value="">{{'please_select'| translate}}</option>
- </select>
+ <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>
<div ng-switch-when="bool">
<select style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]">
@@ -53,12 +53,12 @@
</div>
</td>
<td>
- <span ng-hide="eventUnderEditing == dhis2Event">
- <a href ng-click="editEvent(dhis2Event)" title="{{'edit'| translate}}"><span class='anchor-color'><i class="fa fa-pencil-square-o fa-2x"></i></span></a>
- <a href ng-click="deleteEvent(dhis2Event)" title="{{'delete'| translate}}"><span class='red'><i class="fa fa-trash-o fa-2x"></i></span></a>
- </span>
- <span ng-show="eventUnderEditing == dhis2Event">
- <a href ng-click="updateEvent(dhis2Event)" title="{{'update'| translate}}"><span class='anchor-color'><i class="fa fa-floppy-o fa-2x"></i></span></a>
+ <!--<span ng-hide="eventUnderEditing == dhis2Event">
+ <a href ng-click="editEvent(dhis2Event)" title="{{'edit'| translate}}"><span class='anchor-color'><i class="fa fa-pencil-square-o fa-2x"></i></span></a>
+ <a href ng-click="deleteEvent(dhis2Event)" title="{{'delete'| translate}}"><span class='red'><i class="fa fa-trash-o fa-2x"></i></span></a>
+ </span>-->
+ <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>
</td>
=== added file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/modal.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/modal.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/modal.html 2014-02-17 10:22:59 +0000
@@ -0,0 +1,10 @@
+<div class="modal-header">
+ <h3>{{modalOptions.headerText | translate}}</h3>
+</div>
+<div class="modal-body">
+ <p>{{modalOptions.bodyText | translate}}</p>
+</div>
+<div class="modal-footer">
+ <button data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText | translate}}</button>
+ <button data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText | translate}}</button>
+</div>
\ No newline at end of file
