Merge pull request #5726 from GinkgoFJG/settings

CRM-16373: Work in progress.

Civi/Angular/Manager.php

@@ -86,6 +86,14 @@ class Manager {
       //  'js' => array('ang/crmExample.js'),
       //  'partials' => array('ang/crmExample'),
       //);
+      $angularModules['crmField'] = array(
+        'ext' => 'civicrm',
+        'js' => array(
+          'ang/crmField.js',
+          'ang/crmField/*.js',
+        ),
+        'partials' => array('ang/crmField'),
+      );
       $angularModules['crmResource'] = array(
         'ext' => 'civicrm',
         // 'js' => array('js/angular-crmResource/byModule.js'), // One HTTP request per module.

ang/crmField.js

+/*
+ * crmField is useful for converting field metadata into field markup.
+ */
+
+(function(angular, $, _) {
+
+  angular.module('crmField', [])
+
+    // This is the interface we want to developers to use; ex: <div crm-field-build="fieldMetaData"></div>
+    .directive('crmFieldBuild', ['$compile', 'crmFieldDelegate', function($compile, crmFieldDelegate) {
+      return {
+        link: function(scope, elem, attrs) {
+          crmFieldDelegate.getWidgetData(scope.field).then(function(result) {
+            scope.widgetData = result;
+            var childEl = $compile('<div crm-field-build-' + scope.widgetData.type + '></div>')(scope);
+            elem.append(childEl);
+          });
+        },
+        replace: true
+      };
+    }])
+
+    // Delegate of crmFieldBuild; shouldn't be used externally.
+    .directive('crmFieldBuildCheckbox', function() {
+      return {
+        replace: true,
+        templateUrl: '~/crmField/checkbox.html'
+      };
+    })
+
+    // Delegate of crmFieldBuild; shouldn't be used externally.
+    .directive('crmFieldBuildRadio', function() {
+      return {
+        replace: true,
+        templateUrl: '~/crmField/radio.html'
+      };
+    })
+
+    // Delegate of crmFieldBuild; shouldn't be used externally.
+    .directive('crmFieldBuildSelect', function() {
+      return {
+        replace: true,
+        templateUrl: '~/crmField/select.html'
+      };
+    })
+
+    // Delegate of crmFieldBuild; shouldn't be used externally.
+    .directive('crmFieldBuildText', function() {
+      return {
+        replace: true,
+        templateUrl: '~/crmField/text.html'
+      };
+    })
+
+    // This service figures out which field widget to use for given metadata
+    .service('crmFieldDelegate', ['crmApi', '$q', function(crmApi, $q) {
+      this.widgetTypeMap = {
+        checkbox: ['CheckBox'],
+        radio: ['Radio'],
+        select: ['AdvMulti-Select', 'Autocomplete-Select', 'Multi-Select', 'Select'],
+        text: ['Text']
+      };
+
+      /**
+       * @param {Object} field
+       * @returns {Promise} widgetData
+       */
+      this.getWidgetData = function(field) {
+        var widgetData = {
+          // For human readable text, custom fields use "label" while settings use "title"
+          label: field.hasOwnProperty('label') ? field.label : field.title,
+          name: field.name
+        };
+
+        widgetData.type = _.findKey(this.widgetTypeMap, function(group) {
+          return _.contains(group, field.html_type);
+        });
+
+        if (_.contains(['checkbox', 'radio', 'select'], widgetData.type)) {
+          return this.getOptions(field).then(function(result){
+            widgetData.options = result;
+            return widgetData;
+          });
+        } else {
+          return $q.when(widgetData);
+        }
+      };
+
+      /**
+       * Returns option list for the given field.
+       *
+       * @param {Object} field
+       * @returns {Array} OptionValue objects
+       */
+      this.getOptions = function(field) {
+        var options = [];
+
+        // Boolean fields which do not specify option values default to Yes/No
+        if (field.type === 'Boolean' && !field.hasOwnProperty('option_values')) {
+          options.push({
+            is_active: 1,
+            is_default: 1,
+            label: ts("Yes"),
+            value: 1,
+            weight: 1
+          });
+          options.push({
+            is_active: 1,
+            is_default: 0,
+            label: ts("No"),
+            value: 0,
+            weight: 2
+          });
+
+        // TODO: It appears there are only two Settings which follow the "option_values"
+        // convention; we should move these to an optionGroup and get rid of this
+        // condition. See also above reference to option_values.
+        } else if (field.hasOwnProperty('option_values')) {
+          $.each(field.option_values, function(k, v) {
+            options.push({
+              is_active: 1,
+              label: v,
+              value: k,
+              weight: k
+            });
+          });
+        } else if (field.hasOwnProperty('pseudoconstant') && field.pseudoconstant.hasOwnProperty('optionGroupName')) {
+          options = crmApi('OptionValue', 'get', {
+            'option_group_id': field.pseudoconstant.optionGroupName
+          }).then(function (result) {
+            return result.values;
+          });
+        } else if (field.hasOwnProperty('pseudoconstant')) {
+          console.log('TODO: we need a way to handle pseudoconstants that aren\'t option groups. Field name: ' + field.name);
+        } else {
+          console.log('Error: No options could be found for ' + field.name);
+        }
+
+        return $q.when(options);
+      };
+    }]);
+})(angular, CRM.$, CRM._);
\ No newline at end of file

ang/crmField/checkbox.html

+<div class="crm-section">
+  <div class="label">
+    <label>{{widgetData.label}}:</label>
+  </div>
+  <div class="content">checkbox
+<!--    <div class="crm-field-wrapper" ng-repeat="(key, option) in field.options">
+      <% var elementClass = 'crm-form-' + elementType; %>
+      <% var elementID = elementName + '_' + item.value; %>
+      <input class="<%= elementClass %>" id="<%= elementID %>" name="<%= elementName %>" type="<%= elementType %>" value="<%= item.value %>"/>
+      <label for="<%= elementID %>"><%= item.label %></label>
+    </div>-->
+  </div>
+</div>
\ No newline at end of file

ang/crmField/radio.html

+<div class="crm-section">
+  <div class="label">
+    <label>{{widgetData.label}}:</label>
+  </div>
+  <div class="content">checkbox
+<!--    <div class="crm-field-wrapper" ng-repeat="(key, option) in field.options">
+      <% var elementClass = 'crm-form-' + elementType; %>
+      <% var elementID = elementName + '_' + item.value; %>
+      <input class="<%= elementClass %>" id="<%= elementID %>" name="<%= elementName %>" type="<%= elementType %>" value="<%= item.value %>"/>
+      <label for="<%= elementID %>"><%= item.label %></label>
+    </div>-->
+  </div>
+</div>
\ No newline at end of file

ang/crmField/select.html

+<div class="crm-section">
+  <div class="label">
+    <label>{{widgetData.label}}:</label>
+  </div>
+  <div class="content">
+    <select class="big crm-form-select" id="{{widgetData.name}}" name="{{widgetData.name}}">
+      <option ng-repeat="(key, opt) in widgetData.options" value="opt.value">{{opt.label}}</option>
+    </select>
+  </div>
+</div>
\ No newline at end of file

ang/crmField/text.html

+<div class="crm-section">
+  <div class="label">
+    <label for="{{widgetData.name}}">{{widgetData.label}}:</label>
+  </div>
+  <div class="content">
+    <input type="text" class="big crm-form-text" id="{{widgetData.name}}" name="{{widgetData.name}}"/>
+  </div>
+</div>
\ No newline at end of file

ang/crmSetting.js

 (function(angular, $, _) {
   // Declare a list of dependencies.
   angular.module('crmSetting', [
-    'crmUi', 'crmUtil', 'ngRoute'
+    'crmField', 'crmUi', 'crmUtil', 'ngRoute'
   ]);
 })(angular, CRM.$, CRM._);

ang/crmSetting/EditCtrl.html

 <div class="crm-container">
   <div crm-ui-debug="settingsFields"></div>
+  <div crm-ui-debug="settingsValues"></div>
 
   <form name="myForm" crm-ui-id-scope>
 
@@ -10,10 +11,7 @@
     </div>
 
     <div ng-repeat="(group_name, fields) in settingsFields" crm-ui-accordion="{title: group_name, collapsed: true}">
-      <div ng-repeat="field in fields">
-        <!-- placeholder: we will have real fields in here later -->
-        {{field.title}}
-      </div>
+      <div ng-repeat="field in fields" crm-field-build="field"></div>
     </div>
 
     <!-- everything below this is boilerplate and is being kept for reference only -->

ang/crmSetting/EditCtrl.js

@@ -10,26 +10,31 @@
             return crmApi('Setting', 'getfields', {}).then(function (response) {
               return _.groupBy(response.values, 'group_name');
             });
+          },
+          settingsValues: function(crmApi) {
+            return crmApi('Setting', 'get', {}).then(function (response) {
+              return response.values;
+            });
           }
         }
       });
-
     }
   );
 
   // The controller uses *injection*. This default injects a few things:
   //   $scope -- This is the set of variables shared between JS and HTML.
   //   crmApi, crmStatus, crmUiHelp -- These are services provided by civicrm-core.
-  //   settingsFields -- Defined above in config().
-  angular.module('crmSetting').controller('CrmSettingEditCtrl', function($scope, crmApi, crmStatus, crmUiHelp, settingsFields) {
+  //   settingsFields, settingsValues -- Defined above in config().
+  angular.module('crmSetting').controller('CrmSettingEditCtrl', function($scope, crmApi, crmStatus, crmUiHelp, settingsFields, settingsValues) {
  
     // The ts() and hs() functions help load strings for this module.
     var ts = $scope.ts = CRM.ts(null);
     //var hs = $scope.hs = crmUiHelp({file: 'CRM/settings/SettingsCtrl'}); // See: templates/CRM/settings/SettingsCtrl.hlp
     var hs = $scope.hs = '';
 
-    // Make settingsFields available to the HTML layer.
+    // Make data available to the HTML layer.
     $scope.settingsFields = settingsFields;
+    $scope.settingsValues = settingsValues;
 
     $scope.save = function save() {
       return crmStatus(