web staff : dynamic alert/confirm dialogs

Create new services egAlertDialog and egConfirmDialog, which each load
a TT-based template on demand.  This allows us to re-use the templates
instead of having to include one template per alert type, which will
grow indefinitely.

Experimenting with embedding dynamic strings within the TT template, so
that they can be translated alongside other template strings.

Signed-off-by: Bill Erickson <berick@esilibrary.com>

diff --git a/Open-ILS/src/templates/staff/circ/checkin/index.tt2 b/Open-ILS/src/templates/staff/circ/checkin/index.tt2
index 2e112a8..066e543 100644 (file)
--- a/Open-ILS/src/templates/staff/circ/checkin/index.tt2
+++ b/Open-ILS/src/templates/staff/circ/checkin/index.tt2
@@ -10,6 +10,15 @@
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/services/ui.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/services/user.js"></script>
 <script src="[% ctx.media_prefix %]/js/ui/default/staff/circ/checkin/app.js"></script>
+<script>
+// this could live in a .tt2 file instead -- if it gets large
+angular.module('egCoreMod').factory('egCheckinStrings', function() {return {
+UNCAT_ALERT_DIALOG : 
+    '[% l('Copy "{{copy_barcode}}" was mis-scanned or is not cataloged') %]',
+COPY_ALERT_MSG_DIALOG_TITLE : 
+    '[% l('Copy Alert Message for {{copy_barcode}}') %]'
+}});
+</script>
 [% END %]
 
 <!-- checkin form -->
@@ -34,17 +43,4 @@
 
 [% INCLUDE 'staff/circ/checkin/t_checkin_table.tt2' %]
 
-<!-- load small, commonly used dialogs inline -->
-<script type="text/ng-template" id="uncat_alert_dialog">
-  [% INCLUDE 'staff/parts/alert_dialog.tt2' dialog_body=
-    l('Copy "{{args.copy_barcode}}" was mis-scanned or is not cataloged') %]
-</script>
-<script type="text/ng-template" id="alert_msg_confirm_dialog">
-  [% INCLUDE 'staff/parts/confirm_dialog.tt2' 
-    dialog_title=l('Copy Alert Message for {{args.copy_barcode}}')
-    dialog_body='{{evt.payload}}' %]
-</script>
-
-
-
 [% END %]

diff --git a/Open-ILS/src/templates/staff/parts/alert_dialog.tt2 b/Open-ILS/src/templates/staff/parts/alert_dialog.tt2
deleted file mode 100644 (file)
index ffb1a9f..0000000
--- a/Open-ILS/src/templates/staff/parts/alert_dialog.tt2
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- 
-  Generic alert dialog.
-  The only user action allowed is the 'OK' button.
--->
-<div class="modal-dialog">
-  <div class="modal-content">
-    <div class="modal-header">
-      <button type="button" class="close" 
-        ng-click="ok()" aria-hidden="true">&times;</button>
-      <h4 class="modal-title alert alert-danger">[% l('Alert') %]</h4>
-    </div>
-    <div class="modal-body">[% dialog_body %]</div>
-    <div class="modal-footer">
-      [% dialog_footer %]
-      <input type="submit" class="btn btn-primary" 
-        ng-click="ok()" value="[% l('OK') %]"/>
-    </div>
-  </div> <!-- modal-content -->
-</div> <!-- modal-dialog -->

diff --git a/Open-ILS/src/templates/staff/parts/confirm_dialog.tt2 b/Open-ILS/src/templates/staff/parts/confirm_dialog.tt2
deleted file mode 100644 (file)
index 3e4a118..0000000
--- a/Open-ILS/src/templates/staff/parts/confirm_dialog.tt2
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
-  Generic confirmation dialog
-  User can click OK -> $scope.ok() or Cancel -> $scope.cancel()
--->
-<div class="modal-dialog">
-  <div class="modal-content">
-    <div class="modal-header">
-      <button type="button" class="close" 
-        ng-click="cancel()" aria-hidden="true">&times;</button>
-      [% IF dialog_title %] 
-        <h4 class="modal-title alert alert-info">[% dialog_title %]</h4> 
-      [% END %]
-    </div>
-    [% IF dialog_body %]
-      <div class="modal-body">[% dialog_body %]</div>
-    [% END %]
-    <div class="modal-footer">
-      [% dialog_footer %]
-      <input type="submit" class="btn btn-primary" 
-        ng-click="ok()" value="[% l('OK/Continue') %]"/>
-      <button class="btn btn-warning" 
-        ng-click="cancel()">[% l('Cancel') %]</button>
-    </div>
-  </div> <!-- modal-content -->
-</div> <!-- modal-dialog -->

diff --git a/Open-ILS/src/templates/staff/parts/t_alert_dialog.tt2 b/Open-ILS/src/templates/staff/parts/t_alert_dialog.tt2
new file mode 100644 (file)
index 0000000..e327cf6
--- /dev/null
+++ b/Open-ILS/src/templates/staff/parts/t_alert_dialog.tt2
@@ -0,0 +1,18 @@
+<!-- 
+  Generic alert dialog.
+  The only user action allowed is the 'OK' button.
+-->
+<div class="modal-dialog">
+  <div class="modal-content">
+    <div class="modal-header">
+      <button type="button" class="close" 
+        ng-click="ok()" aria-hidden="true">&times;</button>
+      <h4 class="modal-title alert alert-danger">[% l('Alert') %]</h4>
+    </div>
+    <div class="modal-body">{{message}}</div>
+    <div class="modal-footer">
+      <input type="submit" 
+        class="btn btn-primary" ng-click="ok()" value="[% l('OK') %]"/>
+    </div>
+  </div>
+</div>

diff --git a/Open-ILS/src/templates/staff/parts/t_confirm_dialog.tt2 b/Open-ILS/src/templates/staff/parts/t_confirm_dialog.tt2
new file mode 100644 (file)
index 0000000..8c8c018
--- /dev/null
+++ b/Open-ILS/src/templates/staff/parts/t_confirm_dialog.tt2
@@ -0,0 +1,20 @@
+<!--
+  Generic confirmation dialog
+-->
+<div class="modal-dialog">
+  <div class="modal-content">
+    <div class="modal-header">
+      <button type="button" class="close" 
+        ng-click="cancel()" aria-hidden="true">&times;</button>
+      <h4 class="modal-title alert alert-info">{{title}}</h4> 
+    </div>
+    <div class="modal-body">{{message}}</div>
+    <div class="modal-footer">
+      [% dialog_footer %]
+      <input type="submit" class="btn btn-primary" 
+        ng-click="ok()" value="[% l('OK/Continue') %]"/>
+      <button class="btn btn-warning" 
+        ng-click="cancel()">[% l('Cancel') %]</button>
+    </div>
+  </div>
+</div>

diff --git a/Open-ILS/web/js/ui/default/staff/circ/checkin/app.js b/Open-ILS/web/js/ui/default/staff/circ/checkin/app.js
index d93cb1c..6d9c926 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/circ/checkin/app.js
+++ b/Open-ILS/web/js/ui/default/staff/circ/checkin/app.js
@@ -50,8 +50,10 @@ function($q,  egOrg,  egPCRUD) {
  * Manages checkin
  */
 .controller('CheckinCtrl',
-       ['$scope','$q','$modal','egStartup','checkinSvc','egNet','egAuth','orgAddrSvc','egOrg','egPCRUD',
-function($scope,  $q,  $modal,  egStartup,  checkinSvc,  egNet,  egAuth,  orgAddrSvc,  egOrg,  egPCRUD) {
+       ['$scope','$q','$modal','egStartup','checkinSvc','egNet', 'egAuth',
+        'orgAddrSvc','egOrg','egPCRUD','egAlertDialog','egConfirmDialog','egCheckinStrings',
+function($scope,  $q,  $modal,  egStartup,  checkinSvc,  egNet,  egAuth,  
+         orgAddrSvc,  egOrg,  egPCRUD,  egAlertDialog,  egConfirmDialog,  egCheckinStrings) {
 
     // run egStartup here since it's not handled via resolver
     egStartup.go().then(
@@ -119,10 +121,27 @@ function($scope,  $q,  $modal,  egStartup,  checkinSvc,  egNet,  egAuth,  orgAdd
                 openRouteDialog('./circ/checkin/t_transit_dialog', evt, args);
                 break;
             case 'ASSET_COPY_NOT_FOUND':
-                openAlertDialog('uncat_alert_dialog', evt, args);
+                $scope.blurMe = true;
+                egAlertDialog.open(egCheckinStrings.UNCAT_ALERT_DIALOG, args)
+                    .result.then(function() {$scope.focusMe = true});
                 break;
             case 'COPY_ALERT_MESSAGE':
-                openConfirmDialog('alert_msg_confirm_dialog', evt, args);
+                $scope.blurMe = true;
+                egConfirmDialog.open(
+                    egCheckinStrings.COPY_ALERT_MSG_DIALOG_TITLE, 
+                    evt.payload,  // payload == alert message text
+                    {   copy_barcode : args.copy_barcode,
+                        ok : function() {
+                            // on confirm, redo checkout w/ override
+                            performCheckin(args, true)
+                        },
+                        cancel : function() { 
+                            // on cancel, push the event on the list
+                            // to show that it happened
+                            checkinSvc.checkins.items.push(evt);
+                        }
+                    }
+                ).result.then(function() {$scope.focusMe = true})
                 break;
             default:
                 console.warn('unhandled checkin response : ' + evt.textcode);
@@ -133,43 +152,6 @@ function($scope,  $q,  $modal,  egStartup,  checkinSvc,  egNet,  egAuth,  orgAdd
         }
     }
 
-    function openAlertDialog(id, evt, args) {
-        // avoid unintended checkins while the dialog is open
-        $scope.blurMe = true;
-        $modal.open({
-            templateUrl: id,
-            controller: 
-                ['$scope', '$modalInstance', 
-                function($scope, $modalInstance) {
-                $scope.args = args;
-                $scope.ok = function() {$modalInstance.close()}
-            }]
-        }).result.then(function() {$scope.focusMe = true});
-    }
-
-    function openConfirmDialog(id, evt, args) {
-        // avoid unintended checkins while the dialog is open
-        $scope.blurMe = true;
-        $modal.open({
-            templateUrl: id,
-            controller: 
-                ['$scope', '$modalInstance', 
-                function($scope, $modalInstance) {
-                $scope.args = args;
-                $scope.evt = evt;
-                $scope.ok = function() {
-                    performCheckin(args, true);
-                    $modalInstance.close()
-                }
-                $scope.cancel = function() {
-                    $modalInstance.close()
-                    checkinSvc.checkins.items.push(evt);
-                }
-            }]
-        }).result.then(function() {$scope.focusMe = true});
-    }
-
-
     function openRouteDialog(tmpl, evt, args) {
         // avoid unintended checkins while the dialog is open
         $scope.blurMe = true;

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 4a9d892..4eebe7d 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/ui.js
+++ b/Open-ILS/web/js/ui/default/staff/services/ui.js
@@ -1,7 +1,7 @@
 /**
   * UI tools and directives.
   */
-angular.module('egUiMod', [])
+angular.module('egUiMod', ['ui.bootstrap'])
 
 
 /**
@@ -77,3 +77,59 @@ function($timeout, $parse) {
         return items.slice().reverse();
     };
 })
+
+
+/**
+ * egAlertDialog.open({message : 'hello {{name}}'}).result.then(
+ *     function() { console.log('alert closed') });
+ */
+.factory('egAlertDialog', function($modal, $interpolate) {
+    var service = {};
+
+    service.open = function(message, msg_scope) {
+        return $modal.open({
+            templateUrl: './parts/t_alert_dialog',
+            controller: ['$scope', '$modalInstance',
+                function($scope, $modalInstance) {
+                    $scope.message = $interpolate(message)(msg_scope);
+                    $scope.ok = function() {
+                        if (msg_scope.ok) msg_scope.ok();
+                        $modalInstance.close()
+                    }
+                }
+            ]
+        });
+    }
+
+    return service;
+})
+
+/**
+ * egConfirmDialog.open("some message goes {{here}}", {
+ *  here : 'foo', ok : function() {}, cancel : function() {}});
+ */
+.factory('egConfirmDialog', function($modal, $interpolate) {
+    var service = {};
+
+    service.open = function(title, message, msg_scope) {
+        return $modal.open({
+            templateUrl: './parts/t_confirm_dialog',
+            controller: ['$scope', '$modalInstance',
+                function($scope, $modalInstance) {
+                    $scope.title = $interpolate(title)(msg_scope);
+                    $scope.message = $interpolate(message)(msg_scope);
+                    $scope.ok = function() {
+                        if (msg_scope.ok) msg_scope.ok();
+                        $modalInstance.close()
+                    }
+                    $scope.cancel = function() {
+                        if (msg_scope.cancel) msg_scope.cancel();
+                        $modalInstance.close()
+                    }
+                }
+            ]
+        })
+    }
+
+    return service;
+})