dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #28820
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 14457: modal dialog for grid column show/hide
------------------------------------------------------------
revno: 14457
committer: Abyot Asalefew Gizaw abyota@xxxxxxxxx
branch nick: dhis2
timestamp: Wed 2014-03-26 23:33:08 +0100
message:
modal dialog for grid column show/hide
added:
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/column-modal.html
modified:
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/i18n/en.json
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/app.js
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/services.js
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/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/i18n/en.json'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/i18n/en.json 2014-03-05 11:07:39 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/i18n/en.json 2014-03-26 22:33:08 +0000
@@ -24,6 +24,7 @@
"show_hide_columns": "Show/Hide columns",
"show_all": "Show all",
"hide": "Hide",
+ "select_columns_to_hide": "Select columns to hide",
"show_details": "Show details",
"new_event": "New Event",
"data_element": "Data element",
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html 2014-03-26 14:16:51 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html 2014-03-26 22:33:08 +0000
@@ -1,6 +1,5 @@
<!DOCTYPE html>
-<!--<html manifest="event-capture.appcache" ng-app="eventCapture">-->
-<html ng-app="eventCapture">
+<html manifest="event-capture.appcache" ng-app="eventCapture">
<head>
<title>Event Capture</title>
@@ -12,7 +11,7 @@
<script type="text/javascript" src="../dhis-web-commons/javascripts/jQuery/ui/jquery-ui-1.9.1.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../dhis-web-commons/javascripts/jQuery/ui/css/redmond/jquery-ui-1.9.1.custom.css">
- <script type="text/javascript" src="../dhis-web-commons/bootstrap/js/bootstrap.min.js"></script>
+ <script type="text/javascript" src="../dhis-web-commons/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/angular/angular.js"></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/angular/angular-resource.js"></script>
@@ -45,7 +44,7 @@
<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.storage.memory.js"></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.storage.js"></script>
<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/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/javascripts/angular/plugins/angularLocalStorage.js"></script>
@@ -112,7 +111,7 @@
<option value="">{{'please_select'| translate}}</option>
</select>
</td>
- <td style='padding-left: 20px;'>
+ <td style='padding-left: 10px;'>
<button class="button"
ng-show="selectedProgramStage"
ng-click="showEventRegistration()"
@@ -120,37 +119,21 @@
{{'register_new_event'| translate}}
</button>
</td>
+ <td style='padding-left: 10px;'>
+ <button class="button"
+ ng-show="dhis2Events.length"
+ ng-disabled="eventRegistration || editingEventInFull || editingEventInGrid"
+ ng-click="showHideColumns()">
+ {{'show_hide_columns'| translate}}
+ </button>
+ </td>
</tr>
</table>
</div>
<!-- selection ends -->
<!-- event grid begins -->
- <div id="listDiv" ng-show="selectedProgramStage && !eventRegistration && !editingEventInFull">
-
- <!-- show/hide grid column begins -->
- <div class="right" ng-show="dhis2Events.length">
- <accordion>
- <accordion-group>
- <accordion-heading>
- {{'show_hide_columns' | translate}}
- </accordion-heading>
- <table width='100%'>
- <tr ng-repeat="eventGridColumn in eventGridColumns">
- <td>
- {{eventGridColumn.name}}
- </td>
- <td>
- <input type="checkbox" ng-model="eventGridColumn.hide" ng-change="showHideColumns(eventGridColumn,false)" ng-disabled="hiddenGridColumns + 1 == eventGridColumns.length && !eventGridColumn.hide">
- </td>
- </tr>
- </table>
- <button ng-click="showHideColumns(null,true)" ng-disabled="hiddenGridColumns < 1">{{'show_all'| translate}}</button>
- </accordion-group>
- </accordion>
- </div>
- <!-- show/hide grid column ends -->
-
+ <div ng-show="selectedProgramStage && !eventRegistration && !editingEventInFull">
<h2>
{{'registered_events'| translate}}
</h2>
@@ -184,7 +167,7 @@
<!-- grid begins -->
<form name="outerForm" novalidate>
- <table class="listTable dhis2-table-striped-border dhis2-table-hover">
+ <table class="listTable dhis2-table-striped-border dhis2-table-hover">
<thead>
<tr>
<th ng-show="!eventGridColumn.hide"
@@ -211,9 +194,9 @@
<!-- filter icon ends -->
<!-- filter input field begins -->
- <div ng-show="eventGridColumn.showFilter">
+ <span ng-show="eventGridColumn.showFilter">
<span ng-show="eventGridColumn.type !=='date'">
- <input type="text" ng-model="filterText[eventGridColumn.id]" ng-blur="searchInGrid(eventGridColumn)">
+ <input type="text" class="form-control" style="width: 50%;" ng-model="filterText[eventGridColumn.id]" ng-blur="searchInGrid(eventGridColumn)">
</span>
<span ng-show="eventGridColumn.type ==='date'">
<input placeholder="{{'start_date' | translate}}" type="text" ng-model="filterText[eventGridColumn.id].start" data-ng-date readonly="readonly">
@@ -225,7 +208,7 @@
<a href ng-click='removeEndFilterText(eventGridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>
</span>
</span>
- </div>
+ </span>
<!-- filter input field ends -->
</th>
@@ -315,7 +298,7 @@
</div>
</ng-form>
</td>
- <td>
+ <td>
<span ng-show="currentEvent.event == dhis2Event.event">
<a href ng-click="showEventList()" title="{{'close_editing'| translate}}"><span class='black'><i class="fa fa-times-circle-o fa-2x"></i></span></a>
</span>
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/app.js 2014-03-19 10:37:49 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/app.js 2014-03-26 22:33:08 +0000
@@ -13,7 +13,7 @@
'angularLocalStorage',
'pascalprecht.translate'])
-.value('DHIS2URL', '../')
+.value('DHIS2URL', '../..')
.config(function($httpProvider, $translateProvider) {
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js 2014-03-26 14:16:51 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js 2014-03-26 22:33:08 +0000
@@ -7,6 +7,7 @@
.controller('MainController',
function($scope,
$filter,
+ $modal,
Paginator,
TranslationService,
storage,
@@ -14,7 +15,6 @@
orderByFilter,
ContextMenuSelectedItem,
ModalService,
- ColumnsDialogService,
DialogService) {
//selected org unit
@@ -206,29 +206,25 @@
$scope.reverse = false;
};
- $scope.showHideColumns = function(gridColumn, showAllColumns){
- if(showAllColumns){
- angular.forEach($scope.eventGridColumns, function(gridHeader){
- gridHeader.hide = false;
- });
- $scope.hiddenGridColumns = 0;
- }
- if(!showAllColumns){
- if(gridColumn.hide){
- $scope.hiddenGridColumns++;
- }
- else{
- $scope.hiddenGridColumns--;
- }
- }
-
- /*var dialogOptions = {
- headerText: 'show_hide_columns',
- bodyText: $scope.eventGridColumns
- };
-
- ColumnsDialogService.showDialog({}, dialogOptions);*/
-
+ $scope.showHideColumns = function(){
+
+ var modalInstance = $modal.open({
+ templateUrl: 'views/column-modal.html',
+ controller: 'ColumnDisplayController',
+ resolve: {
+ eventGridColumns: function () {
+ return $scope.eventGridColumns;
+ },
+ hiddenGridColumns: function(){
+ return $scope.hiddenGridColumns;
+ }
+ }
+ });
+
+ modalInstance.result.then(function (eventGridColumns) {
+ $scope.eventGridColumns = eventGridColumns;
+ }, function () {
+ });
};
$scope.searchInGrid = function(gridColumn){
@@ -461,4 +457,37 @@
window.location = DHIS2URL;
};
+})
+
+//Controller for column show/hide
+.controller('ColumnDisplayController',
+ function($scope,
+ $modalInstance,
+ hiddenGridColumns,
+ eventGridColumns){
+
+ $scope.eventGridColumns = eventGridColumns;
+ $scope.hiddenGridColumns = hiddenGridColumns;
+
+ $scope.close = function () {
+ $modalInstance.close($scope.eventGridColumns);
+ };
+
+ $scope.showHideColumns = function(gridColumn, showAllColumns){
+ if(showAllColumns){
+ angular.forEach($scope.eventGridColumns, function(gridHeader){
+ gridHeader.hide = false;
+ });
+ $scope.hiddenGridColumns = 0;
+ }
+ if(!showAllColumns){
+ if(gridColumn.hide){
+ $scope.hiddenGridColumns++;
+ }
+ else{
+ $scope.hiddenGridColumns--;
+ }
+ }
+ };
+
});
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/services.js 2014-03-26 14:16:51 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/services.js 2014-03-26 22:33:08 +0000
@@ -254,59 +254,6 @@
}])
-/* Popup dialog for displaying columns show/hide */
-.service('ColumnsDialogService', ['$modal', function($modal) {
-
- var dialogDefaults = {
- backdrop: true,
- keyboard: true,
- backdropClick: true,
- modalFade: true,
- templateUrl: 'views/column-modal.html'
- };
-
- var dialogOptions = {
- closeButtonText: 'close',
- actionButtonText: 'ok',
- headerText: 'dhis2_tracker',
- bodyText: 'Perform this action?',
- note: 'note',
- created_by: 'created_by',
- date: 'date'
- };
-
- this.showDialog = function(customDialogDefaults, customDialogOptions) {
- if (!customDialogDefaults)
- customDialogDefaults = {};
- customDialogDefaults.backdropClick = false;
- return this.show(customDialogDefaults, customDialogOptions);
- };
-
- this.show = function(customDialogDefaults, customDialogOptions) {
- //Create temp objects to work with since we're in a singleton service
- var tempDialogDefaults = {};
- var tempDialogOptions = {};
-
- //Map angular-ui modal custom defaults to modal defaults defined in service
- angular.extend(tempDialogDefaults, dialogDefaults, customDialogDefaults);
-
- //Map modal.html $scope custom properties to defaults defined in service
- angular.extend(tempDialogOptions, dialogOptions, customDialogOptions);
-
- if (!tempDialogDefaults.controller) {
- tempDialogDefaults.controller = function($scope, $modalInstance) {
- $scope.dialogOptions = tempDialogOptions;
- $scope.dialogOptions.ok = function(result) {
- $modalInstance.close(result);
- };
- };
- }
-
- return $modal.open(tempDialogDefaults).result;
- };
-
-}])
-
/* Context menu for grid*/
.service('ContextMenuSelectedItem', function(){
this.selectedItem = '';
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/styles/style.css 2014-03-26 14:16:51 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/styles/style.css 2014-03-26 22:33:08 +0000
@@ -141,6 +141,7 @@
.table-borderless>tbody>tr>td,
.table-borderless>tfoot>tr>td {
border-top: none;
+ white-space:nowrap;
}
.dhis2-table>thead>tr>th,
@@ -171,7 +172,8 @@
.dhis2-table-striped>thead>tr,
.dhis2-table-striped>tbody>tr,
.dhis2-table-striped>tfoot>tr {
- border-bottom: 1px solid #cad5e5;
+ border-bottom: 1px solid #cad5e5;
+ white-space:nowrap;
}
.dhis2-table-striped > tbody > tr:nth-child(odd)> td, .dhis2-table-striped > tbody > tr:nth-child(odd)> th {
=== added file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/column-modal.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/column-modal.html 1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/column-modal.html 2014-03-26 22:33:08 +0000
@@ -0,0 +1,21 @@
+<div class="modal-header">
+ <h3>{{'select_columns_to_hide'| translate}}</h3>
+</div>
+
+<div class="modal-body">
+ <table class="listTable dhis2-table-striped-border">
+ <tr ng-repeat="eventGridColumn in eventGridColumns">
+ <td>
+ {{eventGridColumn.name}}
+ </td>
+ <td>
+ <input type="checkbox" ng-model="eventGridColumn.hide" ng-change="showHideColumns(eventGridColumn, false)" ng-disabled="hiddenGridColumns + 1 == eventGridColumns.length && !eventGridColumn.hide">
+ </td>
+ </tr>
+ </table>
+</div>
+
+<div class="modal-footer">
+ <button ng-click="showHideColumns(null, true)" ng-disabled="hiddenGridColumns < 1">{{'show_all'| translate}}</button>
+ <button data-ng-click="close()">{{'close'| translate}}</button>
+</div>
\ No newline at end of file
