From: Bill Erickson Date: Fri, 3 Mar 2017 15:34:20 +0000 (-0500) Subject: LP#1522638 egProgressDialog features and docs X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=7b3a1ca1187bc8caa752580066c791eb0c5661b0;p=working%2FEvergreen.git LP#1522638 egProgressDialog features and docs Use an HTML5 element as the progress bar instead of the Bootstrap progress CSS class. The HTML5 element provides a more accurate display. Add support for 3 modes of operation: * determinate - shows dialog and percentage progress * semi-determinate - shows a value-less but also displays the current value to indicate work happening. * indeterminate - shows a value-less with no specificat indication of forward momentum. Adds a bunch of docs. Rename egProgressModal to egProgressDialog for consistency with other eg*Dialog's (which are also modal). Signed-off-by: Bill Erickson Signed-off-by: Terran McCanna Signed-off-by: Kathy Lussier --- diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index f30ccaaaeb..bdfd64dd5a 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -473,6 +473,11 @@ table.list tr.selected td { /* deprecated? */ } } +.eg-modal-progress progress { + width: 100%; + height: 25px; +} + [%# vim: ft=css %] diff --git a/Open-ILS/src/templates/staff/share/t_progress_bar.tt2 b/Open-ILS/src/templates/staff/share/t_progress_bar.tt2 deleted file mode 100644 index 6e4df97b54..0000000000 --- a/Open-ILS/src/templates/staff/share/t_progress_bar.tt2 +++ /dev/null @@ -1,15 +0,0 @@ - -
-
-
-
-
-
-
-
-
-
diff --git a/Open-ILS/src/templates/staff/share/t_progress_dialog.tt2 b/Open-ILS/src/templates/staff/share/t_progress_dialog.tt2 new file mode 100644 index 0000000000..2df60d234b --- /dev/null +++ b/Open-ILS/src/templates/staff/share/t_progress_dialog.tt2 @@ -0,0 +1,30 @@ + + +
+
+
+
+ +
+ +
+ +
+
{{data.percent()}}%
+
+ +
+ +
+
{{data.value}}...
+
+ +
+ +
+
+
+
+
diff --git a/Open-ILS/web/js/ui/default/staff/services/ui.js b/Open-ILS/web/js/ui/default/staff/services/ui.js index 19e80a3937..ad4c104abc 100644 --- a/Open-ILS/web/js/ui/default/staff/services/ui.js +++ b/Open-ILS/web/js/ui/default/staff/services/ui.js @@ -78,32 +78,126 @@ function($timeout , $parse) { }; }) - /** - * egProgressModal.open(); + * Progress Dialog. + * + * egProgressDialog.open(); + * egProgressDialog.open({value : 0}); + * egProgressDialog.open({value : 0, max : 123}); + * egProgressDialog.increment(); + * egProgressDialog.increment(); + * egProgressDialog.close(); + * + * Each dialog has 2 numbers, 'max' and 'value'. + * The content of these values determines how the dialog displays. + * + * There are 3 flavors: + * + * -- value is set, max is set + * determinate: shows a progression with a percent complete. + * + * -- value is set, max is unset + * semi-determinate, with a value report. Shows a value-less + * , but shows the value as a number in the dialog. + * + * This is useful in cases where the total number of items to retrieve + * from the server is unknown, but we know how many items we've + * retrieved thus far. It helps to reinforce that something specific + * is happening, but we don't know when it will end. + * + * -- value is unset + * indeterminate: shows a generic value-less with no + * clear indication of progress. + * + * Only 1 egProgressDialog instance will be activate at a time. + * Each invocation of .open() destroys any existing instance. */ -.factory('egProgressModal', - ['$uibModal','$interpolate', -function($uibModal, $interpolate){ +/* Simple storage class for egProgressDialog data maintenance. + * This data lives outside of egProgressDialog so it can be + * directly imported into egProgressDialog's $uibModalInstance. + */ +.factory('egProgressData', [ + function() { + var service = {}; // max/value initially unset + + service.reset = function() { + delete service.max; + delete service.value; + } + + service.hasvalue = function() { + return Number.isInteger(service.value); + } + + service.hasmax = function() { + return Number.isInteger(service.max); + } + + service.percent = function() { + if (service.hasvalue() && + service.hasmax() && + service.max > 0 && + service.value <= service.max) + return Math.floor((service.value / service.max) * 100); + return 100; + } + + return service; + } +]) + +.factory('egProgressDialog', [ + 'egProgressData','$uibModal', + function(egProgressData , $uibModal) { var service = {}; - service.open = function() { + service.open = function(args) { + service.close(); // force-kill existing instances. + + // Reset to an indeterminate progress bar, + // overlay with caller values. + egProgressData.reset(); + service.update(angular.extend({}, args)); + return $uibModal.open({ - templateUrl: './share/t_progress_bar', - controller: ['$scope', '$uibModalInstance', - function($scope, $uibModalInstance) { + templateUrl: './share/t_progress_dialog', + controller: ['$scope','$uibModalInstance','egProgressData', + function( $scope , $uibModalInstance , egProgressData) { service.currentInstance = $uibModalInstance; + $scope.data = egProgressData; // tiny service } ] }); }; + service.close = function() { if (service.currentInstance) { service.currentInstance.close(); delete service.currentInstance; } } + + // Set the current state of the progress bar. + service.update = function(args) { + if (args.max != undefined) + egProgressData.max = args.max; + if (args.value != undefined) + egProgressData.value = args.value; + } + + // Increment the current value. If no amount is specified, + // it increments by 1. Calling increment() on an indetermite + // progress bar will force it to be a (semi-)determinate bar. + service.increment = function(amt) { + if (!Number.isInteger(amt)) amt = 1; + + if (!egProgressData.hasvalue()) + egProgressData.value = 0; + + egProgressData.value += amt; + } + return service; }])