CRM-14798 - crmCaseType - Lock/auto-generate the case-type's "name"

diff --git a/CRM/Core/Page/Angular.php b/CRM/Core/Page/Angular.php
index e36d879a84ddee47fc5d78a90e8d1f305ce9161f..28d93079b495f32b5cf552036b76482411c92d97 100644 (file)
--- a/CRM/Core/Page/Angular.php
+++ b/CRM/Core/Page/Angular.php
@@ -65,6 +65,7 @@ class CRM_Core_Page_Angular extends CRM_Core_Page {
     $angularModules = array();
     $angularModules['ui.utils'] = array('ext' => 'civicrm', 'js' => array('packages/bower_components/angular-ui-utils/ui-utils.min.js'));
     $angularModules['ui.sortable'] = array('ext' => 'civicrm', 'js' => array('packages/bower_components/angular-ui-sortable/sortable.min.js'));
+    $angularModules['crmUi'] = array('ext' => 'civicrm', 'js' => array('js/angular-crm-ui.js'));
 
     foreach (CRM_Core_Component::getEnabledComponents() as $component) {
       $angularModules = array_merge($angularModules, $component->getAngularModules());

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
new file mode 100644 (file)
index 0000000..021550d
--- /dev/null
+++ b/js/angular-crm-ui.js
@@ -0,0 +1,69 @@
+/// crmUi: Sundry UI helpers
+(function (angular, $, _) {
+
+  angular.module('crmUi', [])
+
+    // example: <a crm-ui-lock binding="mymodel.boolfield"></a>
+    // example: <a crm-ui-lock
+    //            binding="mymodel.boolfield"
+    //            title-locked="ts('Boolfield is locked')"
+    //            title-unlocked="ts('Boolfield is unlocked')"></a>
+    .directive('crmUiLock', function ($parse, $rootScope) {
+      var defaultVal = function (defaultValue) {
+        var f = function (scope) {
+          return defaultValue;
+        }
+        f.assign = function (scope, value) {
+          // ignore changes
+        }
+        return f;
+      };
+
+      // like $parse, but accepts a defaultValue in case expr is undefined
+      var parse = function (expr, defaultValue) {
+        return expr ? $parse(expr) : defaultVal(defaultValue);
+      };
+
+      return {
+        template: '',
+        link: function (scope, element, attrs) {
+          var binding = parse(attrs['binding'], true);
+          var titleLocked = parse(attrs['titleLocked'], ts('Locked'));
+          var titleUnlocked = parse(attrs['titleUnlocked'], ts('Unlocked'));
+
+          $(element).addClass('ui-icon lock-button');
+          var refresh = function () {
+            var locked = binding(scope);
+            if (locked) {
+              $(element)
+                .removeClass('ui-icon-unlocked')
+                .addClass('ui-icon-locked')
+                .prop('title', titleLocked(scope))
+              ;
+            }
+            else {
+              $(element)
+                .removeClass('ui-icon-locked')
+                .addClass('ui-icon-unlocked')
+                .prop('title', titleUnlocked(scope))
+              ;
+            }
+          };
+
+          $(element).click(function () {
+            binding.assign(scope, !binding(scope));
+            //scope.$digest();
+            $rootScope.$digest();
+          });
+
+          scope.$watch(attrs.binding, refresh);
+          scope.$watch(attrs.titleLocked, refresh);
+          scope.$watch(attrs.titleUnlocked, refresh);
+
+          refresh();
+        }
+      };
+    })
+  ;
+
+})(angular, CRM.$, CRM._);
\ No newline at end of file

diff --git a/js/angular-crmCaseType.js b/js/angular-crmCaseType.js
index d24fe4ea2dede91013bc4b4d3f89be1ff00d8e1f..393edb88abd2978c2553dc8f1be03d1397172312 100644 (file)
--- a/js/angular-crmCaseType.js
+++ b/js/angular-crmCaseType.js
@@ -4,7 +4,7 @@
     return CRM.resourceUrls['civicrm'] + '/partials/crmCaseType/' + relPath;
   };
 
-  var crmCaseType = angular.module('crmCaseType', ['ngRoute', 'ui.utils']);
+  var crmCaseType = angular.module('crmCaseType', ['ngRoute', 'ui.utils', 'crmUi']);
 
   var newCaseTypeDefinitionTemplate = {
     activityTypes: [
@@ -106,6 +106,7 @@
     $scope.activityTypes = CRM.crmCaseType.actTypes;
     $scope.activityTypeNames = _.pluck(CRM.crmCaseType.actTypes, 'name');
     $scope.relationshipTypeNames = _.pluck(CRM.crmCaseType.relTypes, 'label_b_a'); // label_b_a is CRM_Case_XMLProcessor::REL_TYPE_CNAME
+    $scope.locks = {caseTypeName: true};
 
     $scope.workflows = {
       'timeline': 'Timeline',
@@ -245,6 +246,15 @@
         $('.crmCaseType-acttab').tabs('refresh');
       });
     });
+
+    var updateCaseTypeName = function () {
+      if (!$scope.caseType.id && $scope.locks.caseTypeName) {
+        // Should we do some filtering? Lowercase? Strip whitespace?
+        $scope.caseType.name = $scope.caseType.title;
+      }
+    };
+    $scope.$watch('locks.caseTypeName', updateCaseTypeName);
+    $scope.$watch('caseType.title', updateCaseTypeName);
   });
 
   crmCaseType.controller('CaseTypeListCtrl', function($scope, crmApi, caseTypes) {

diff --git a/partials/crmCaseType/caseTypeDetails.html b/partials/crmCaseType/caseTypeDetails.html
index 9fc0080fed8744fb41ca2734b9e37f97daa44059..c6c6dfc045e97f89a163dbcd29c33213ab0c6a78 100644 (file)
--- a/partials/crmCaseType/caseTypeDetails.html
+++ b/partials/crmCaseType/caseTypeDetails.html
@@ -15,7 +15,8 @@ The original form used table layout; don't know if we have an alternative, CSS-b
   <tr>
     <td class="label">Name</td>
     <td>
-      <input type="text" ng-model="caseType.name" ng-disabled="caseType.id" class="big crm-form-text"/> <!-- FIXME lock -->
+      <input type="text" ng-model="caseType.name" ng-disabled="locks.caseTypeName" class="big crm-form-text"/>
+      <a crm-ui-lock binding="locks.caseTypeName"></a>
     </td>
   </tr>
   <tr>