Merge pull request #23332 from darrick/dupeQuery

[civicrm-core.git] / ang / crmDialog.js

diff --git a/ang/crmDialog.js b/ang/crmDialog.js
index 13162a8e7aea856cfd457986ef3e99c84236e094..3da59e82cd96b0d1af5b040a12d8fc17ae9ea3d5 100644 (file)
--- a/ang/crmDialog.js
+++ b/ang/crmDialog.js
@@ -3,6 +3,32 @@
 
   angular.module('crmDialog', CRM.angRequires('crmDialog'));
 
+  // Convenience binding to automatically launch a dialog when clicking an element
+  // Ex: <button type="button" crm-dialog-popup="myDialogName" popup-tpl="~/myExt/MyDialogTpl.html" popup-data="{foo: bar}"
+  angular.module('crmDialog').directive('crmDialogPopup', function(dialogService) {
+    return {
+      restrict: 'A',
+      bindToController: {
+        popupTpl: '@',
+        popupName: '@crmDialogPopup',
+        popupData: '<'
+      },
+      controller: function($scope, $element) {
+        var ctrl = this;
+        $element.on('click', function() {
+          var options = CRM.utils.adjustDialogDefaults({
+            autoOpen: false,
+            title: _.trim($element.attr('title') || $element.text())
+          });
+          dialogService.open(ctrl.popupName, ctrl.popupTpl, ctrl.popupData || {}, options)
+            .then(function(success) {
+              $element.trigger('crmPopupFormSuccess');
+            });
+        });
+      }
+    };
+  });
+
   // Ex: <div crm-dialog="myDialogName"> ... <button ng-click="$dialog.cancel()">Cancel</button> ... </div>
   // Ex: <div crm-dialog="myDialogName"> ... <button ng-click="$dialog.close(outputData)">Close</button> ... </div>
   // Ex: <div crm-dialog="myDialogName"> ... <crm-dialog-button text="'Close'" on-click="$dialog.close()" /> ... </div>
@@ -14,35 +40,27 @@
         var $dialog = this;
         $dialog.buttons = [];
 
-        $dialog.close = function (result) {
+        $dialog.close = function(result) {
           dialogService.close($dialog.name, result);
         };
 
-        $dialog.cancel = function (result) {
+        $dialog.cancel = function() {
           dialogService.cancel($dialog.name);
         };
 
         $dialog.loadButtons = function() {
           var buttons = [];
           angular.forEach($dialog.buttons, function (crmDialogButton) {
-            var button = _.pick(crmDialogButton, ['id', 'icons', 'text']);
-            button.click = function () {
-              crmDialogButton.onClick();
+            var button = _.pick(crmDialogButton, ['icons', 'text', 'disabled']);
+            button.click = function() {
+              $scope.$apply(crmDialogButton.onClick);
             };
             buttons.push(button);
           });
           dialogService.setButtons($dialog.name, buttons);
-          $dialog.toggleButtons();
         };
 
-        $dialog.toggleButtons = function() {
-          angular.forEach($dialog.buttons, function (crmDialogButton) {
-            $('#' + crmDialogButton.id).prop('disabled', crmDialogButton.disabled);
-          });
-        };
-
-        $timeout(function(){
-          $dialog.loadButtons();
+        $timeout(function() {
           $('.ui-dialog:last input:not([disabled]):not([type="submit"]):first').focus();
         });
 
@@ -54,8 +72,6 @@
     };
   });
 
-  var idNum = 1;
-
   // Ex: <crm-dialog-button text="ts('Do it')" icons="{primary: 'fa-foo'}" on-click="doIt()" />
   angular.module('crmDialog').component('crmDialogButton', {
     bindings: {
@@ -71,12 +87,10 @@
       var $ctrl = this;
       $ctrl.$onInit = function() {
         $ctrl.crmDialog.buttons.push(this);
+        $scope.$watch('$ctrl.disabled', $ctrl.crmDialog.loadButtons);
+        $scope.$watch('$ctrl.text', $ctrl.crmDialog.loadButtons);
+        $scope.$watch('$ctrl.icons', $ctrl.crmDialog.loadButtons);
       };
-      $ctrl.id = 'crmDialogButton_' + (idNum++);
-
-      $scope.$watch('$ctrl.disabled', function() {
-        $ctrl.crmDialog.toggleButtons();
-      });
     }
   });