From 24588be57d74aba0c65ba9125c64756a70acb552 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Fri, 18 Jun 2021 21:17:11 -0700
Subject: [PATCH] msgtplui - Add crmDialog helpers

---
 ext/msgtplui/ang/crmDialog.ang.php | 16 ++++++
 ext/msgtplui/ang/crmDialog.js      | 83 ++++++++++++++++++++++++++++++
 ext/msgtplui/ang/crmDialog.md      | 24 +++++++++
 3 files changed, 123 insertions(+)
 create mode 100644 ext/msgtplui/ang/crmDialog.ang.php
 create mode 100644 ext/msgtplui/ang/crmDialog.js
 create mode 100644 ext/msgtplui/ang/crmDialog.md

diff --git a/ext/msgtplui/ang/crmDialog.ang.php b/ext/msgtplui/ang/crmDialog.ang.php
new file mode 100644
index 0000000000..fec3ee3414
--- /dev/null
+++ b/ext/msgtplui/ang/crmDialog.ang.php
@@ -0,0 +1,16 @@
+<?php
+// This file declares an Angular module which can be autoloaded
+// in CiviCRM. See also:
+// \https://docs.civicrm.org/dev/en/latest/hooks/hook_civicrm_angularModules/n
+return [
+  'js' => [
+    'ang/crmDialog.js',
+  ],
+  'requires' => [
+    //'crmUi',
+    //'crmUtil',
+    'dialogService',
+  ],
+  'settings' => [],
+  'basePages' => [],
+];
diff --git a/ext/msgtplui/ang/crmDialog.js b/ext/msgtplui/ang/crmDialog.js
new file mode 100644
index 0000000000..f5a33f97d3
--- /dev/null
+++ b/ext/msgtplui/ang/crmDialog.js
@@ -0,0 +1,83 @@
+(function(angular, $, _) {
+  "use strict";
+
+  angular.module('crmDialog', CRM.angRequires('crmDialog'));
+
+  // 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>
+  angular.module('crmDialog').directive('crmDialog', function(dialogService) {
+    return {
+      restrict: 'A',
+      controllerAs: '$dialog',
+      controller: function($scope, $parse, $timeout) {
+        var $dialog = this;
+        $dialog.buttons = [];
+
+        $dialog.close = function (result) {
+          dialogService.close($dialog.name, result);
+        };
+
+        $dialog.cancel = function (result) {
+          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();
+            };
+            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();
+          $('.ui-dialog:last input:not([disabled]):not([type="submit"]):first').focus();
+        });
+
+      },
+      link: function(scope, element, attrs, controller) {
+        controller.name = attrs.crmDialog;
+        scope[attrs.crmDialog] = controller;
+      }
+    };
+  });
+
+  var idNum = 1;
+
+  // Ex: <crm-dialog-button text="ts('Do it')" icons="{primary: 'fa-foo'}" on-click="doIt()" />
+  angular.module('crmDialog').component('crmDialogButton', {
+    bindings: {
+      disabled: '<',
+      icons: '<',
+      text: '<',
+      onClick: '&'
+    },
+    require: {
+      crmDialog: '?^^crmDialog'
+    },
+    controller: function($scope, $element, dialogService, $timeout) {
+      var ts = $scope.ts = CRM.ts('crmDialog'), $ctrl = this;
+      $ctrl.$onInit = function() {
+        $ctrl.crmDialog.buttons.push(this);
+      };
+      $ctrl.id = 'crmDialogButton_' + (idNum++);
+
+      $scope.$watch('$ctrl.disabled', function(){
+        $ctrl.crmDialog.toggleButtons();
+      });
+    }
+  });
+
+})(angular, CRM.$, CRM._);
diff --git a/ext/msgtplui/ang/crmDialog.md b/ext/msgtplui/ang/crmDialog.md
new file mode 100644
index 0000000000..4cfd54fdb5
--- /dev/null
+++ b/ext/msgtplui/ang/crmDialog.md
@@ -0,0 +1,24 @@
+The `crmDialog` is a helper for working with the `dialogService`.  In particular, it allows you to define then
+dialog widgets as part of the markup.
+
+To open a dialog:
+
+```js
+dialogService.open('someDialog', '~/Path/To/Some.html', model, options)
+  .then(function(result){
+    console.log('received output from dialog', result);
+  });
+```
+
+```html
+<!-- FILE: Path/To/Some.html -->
+<div id="bootstrap-theme" crm-dialog="someDialog">
+  <form name="someForm">
+    
+    <input type="text" ng-model="model.foo"/>
+
+    <crm-dialog-button text="ts('Create')" icons="{primary: 'fa-plus'}" on-click="someDialog.close(model)" disabled="!someForm.$valid" />
+    <crm-dialog-button text="ts('Cancel')" icons="{primary: 'fa-times'}" on-click="someDialog.cancel()" />
+  </form>
+</div>
+```
\ No newline at end of file
-- 
2.25.1