ExportUI - Convert Angular controller to component
authorColeman Watts <coleman@civicrm.org>
Wed, 21 Sep 2022 02:05:51 +0000 (22:05 -0400)
committerColeman Watts <coleman@civicrm.org>
Wed, 21 Sep 2022 02:05:51 +0000 (22:05 -0400)
ang/exportui.css
ang/exportui/exportui.js
templates/CRM/Export/Form/Map.tpl

index 78f9714710e2cb833d447f389491eb2b967540ac..3367fd2a2030497944fd8b39353ab8a41725d2a0 100644 (file)
@@ -1,9 +1,10 @@
 /* "fade-out" effect */
-div.crm-export-field-selector-outer {
+.crm-export-field-selector-outer {
+  display: block;
   position: relative;
   overflow-x: hidden;
 }
-div.crm-export-field-selector-outer:after {
+.crm-export-field-selector-outer:after {
   position: absolute;
   top: 0;
   right: 0;
@@ -27,7 +28,7 @@ table.crm-export-field-selector tfoot tr td > span {
 }
 .crm-export-field-selector tbody td {
   cursor: move;
-  width: 18%
+  width: 18%;
 }
 .crm-export-field-selector tbody td:first-child {
   width: 28%;
index 91a8ee5e7316526049049cfb78499c7bfd1fd395..b39b13b6af430feb1adf3adfbf4cc607917ccc90 100644 (file)
 
   angular.module('exportui', CRM.angular.modules)
 
-  .controller('ExportUiCtrl', function($scope, $timeout, crmApi, dialogService) {
-    var ts = $scope.ts = CRM.ts('exportui'),
-      // Which relationships we've already looked up for the preview
-      relations = [];
-
-    $scope.option_list = CRM.vars.exportUi.option_list;
-    $scope.contact_types = CRM.vars.exportUi.contact_types;
-    $scope.location_type_id = [{id: '', text: ts('Primary')}].concat(CRM.vars.exportUi.location_type_id);
-    // Map of all fields keyed by name
-    $scope.fields = _.transform(CRM.vars.exportUi.fields, function(result, category) {
-      _.each(category.children, function(field) {
-        result[field.id] = field;
-      });
-    }, {});
-    $scope.data = {
-      preview: CRM.vars.exportUi.preview_data,
-      contact_type: '',
-      columns: []
-    };
-    $scope.perms = {
-      admin: CRM.checkPerm('administer CiviCRM')
-    };
-    // For the "add new field" dropdown
-    $scope.new = {col: ''};
-    var contactTypes = _.transform($scope.contact_types, function(result, type) {
-      result.push(type.id);
-      _.each(type.children || [], function(subType) {
-        result.push(subType.id);
-      });
-    });
-    var cids = _.filter(_.map(CRM.vars.exportUi.preview_data, 'id'));
-
-    // Get fields for performing the export or saving the field mapping
-    function getSelectedColumns() {
-      var map = [];
-      _.each($scope.data.columns, function(col, no) {
-        // Make a copy of col without the extra angular props
-        var item = JSON.parse(angular.toJson(col));
-        delete item.select;
-        delete item.mapping_id;
-        item.contact_type = $scope.data.contact_type || 'Contact';
-        item.column_number = no;
-        map.push(item);
-      });
-      return map;
-    }
+  .component('crmExportUi', {
+    templateUrl: '~/exportui/export.html',
+    controller: function($scope, $timeout, crmApi, dialogService) {
+      var ts = $scope.ts = CRM.ts('exportui'),
+        // Which relationships we've already looked up for the preview
+        relations = [];
 
-    // Load a saved field mapping
-    function loadFieldMap(map) {
-      $scope.data.columns = [];
-      var mapContactTypes = [];
-      _.each(map, function(col) {
-        if (_.contains(contactTypes, col.contact_type)) {
-          mapContactTypes.push(col.contact_type);
-        }
-        if (col.relationship_type_id && col.relationship_direction) {
-          col.select = '' + col.relationship_type_id + '_' + col.relationship_direction;
-        } else {
-          col.select = col.name;
-        }
-        $scope.data.columns.push(col);
+      $scope.option_list = CRM.vars.exportUi.option_list;
+      $scope.contact_types = CRM.vars.exportUi.contact_types;
+      $scope.location_type_id = [{id: '', text: ts('Primary')}].concat(CRM.vars.exportUi.location_type_id);
+      // Map of all fields keyed by name
+      $scope.fields = _.transform(CRM.vars.exportUi.fields, function (result, category) {
+        _.each(category.children, function (field) {
+          result[field.id] = field;
+        });
+      }, {});
+      $scope.data = {
+        preview: CRM.vars.exportUi.preview_data,
+        contact_type: '',
+        columns: []
+      };
+      $scope.perms = {
+        admin: CRM.checkPerm('administer CiviCRM')
+      };
+      // For the "add new field" dropdown
+      $scope.new = {col: ''};
+      var contactTypes = _.transform($scope.contact_types, function (result, type) {
+        result.push(type.id);
+        _.each(type.children || [], function (subType) {
+          result.push(subType.id);
+        });
       });
-      // If all the fields are for the same contact type, set it form-wide
-      if (!$scope.data.contact_type && _.unique(mapContactTypes).length === 1) {
-        $scope.data.contact_type = mapContactTypes[0];
+      var cids = _.filter(_.map(CRM.vars.exportUi.preview_data, 'id'));
+
+      // Get fields for performing the export or saving the field mapping
+      function getSelectedColumns() {
+        var map = [];
+        _.each($scope.data.columns, function (col, no) {
+          // Make a copy of col without the extra angular props
+          var item = JSON.parse(angular.toJson(col));
+          delete item.select;
+          delete item.mapping_id;
+          item.contact_type = $scope.data.contact_type || 'Contact';
+          item.column_number = no;
+          map.push(item);
+        });
+        return map;
       }
-    }
 
-    // Return fields relevant to a contact type
-    // Filter out non-contact fields (for relationship selectors)
-    function filterFields(contactType, onlyContact) {
-      return _.transform(CRM.vars.exportUi.fields, function(result, cat) {
-        if (!cat.is_contact && onlyContact) {
-          return;
-        }
-        var fields = _.filter(cat.children, function(field) {
-          return !field.contact_type || !contactType || _.contains(field.contact_type, contactType);
+      // Load a saved field mapping
+      function loadFieldMap(map) {
+        $scope.data.columns = [];
+        var mapContactTypes = [];
+        _.each(map, function (col) {
+          if (_.contains(contactTypes, col.contact_type)) {
+            mapContactTypes.push(col.contact_type);
+          }
+          if (col.relationship_type_id && col.relationship_direction) {
+            col.select = '' + col.relationship_type_id + '_' + col.relationship_direction;
+          } else {
+            col.select = col.name;
+          }
+          $scope.data.columns.push(col);
         });
-        if (fields.length) {
-          result.push({
-            id: cat.id,
-            text: cat.text,
-            children: fields
-          });
+        // If all the fields are for the same contact type, set it form-wide
+        if (!$scope.data.contact_type && _.unique(mapContactTypes).length === 1) {
+          $scope.data.contact_type = mapContactTypes[0];
         }
-      });
-    }
+      }
 
-    $scope.getFields = function() {
-      return {results: filterFields($scope.data.contact_type)};
-    };
+      // Return fields relevant to a contact type
+      // Filter out non-contact fields (for relationship selectors)
+      function filterFields(contactType, onlyContact) {
+        return _.transform(CRM.vars.exportUi.fields, function (result, cat) {
+          if (!cat.is_contact && onlyContact) {
+            return;
+          }
+          var fields = _.filter(cat.children, function (field) {
+            return !field.contact_type || !contactType || _.contains(field.contact_type, contactType);
+          });
+          if (fields.length) {
+            result.push({
+              id: cat.id,
+              text: cat.text,
+              children: fields
+            });
+          }
+        });
+      }
 
-    $scope.getRelatedFields = function(contact_type) {
-      return function() {
-        return {results: filterFields(contact_type, true)};
+      $scope.getFields = function () {
+        return {results: filterFields($scope.data.contact_type)};
       };
-    };
 
-    $scope.showPreview = function(row, field) {
-      var key = field.name;
-      if (field.relationship_type_id && field.relationship_direction) {
-        fetchRelations(field);
-        key = '' + field.relationship_type_id + '_' + field.relationship_direction + '_' + key;
-      }
-      if (field.location_type_id) {
-        key += '_' + field.location_type_id + (field.phone_type_id ? '_' + field.phone_type_id : '');
-      }
-      return field.name ? row[key] : '';
-    };
-
-    function fetchRelations(field) {
-      if (cids.length && !relations[field.relationship_type_id + field.relationship_direction]) {
-        relations[field.relationship_type_id + field.relationship_direction] = true;
-        var a = field.relationship_direction[0],
-          b = field.relationship_direction[2],
-          params = {
-            relationship_type_id: field.relationship_type_id,
-            filters: {is_current: 1},
-            "api.Contact.getsingle": {id: '$value.contact_id_' + b}
-          };
-        params['contact_' + a] = {'IN': cids};
-        (function (field, params) {
-          crmApi('Relationship', 'get', params).then(function (data) {
-            _.each(data.values, function (rel) {
-              var row = cids.indexOf(rel['contact_id_' + a]);
-              if (row > -1) {
-                _.each(rel["api.Contact.getsingle"], function (item, key) {
-                  $scope.data.preview[row][field.relationship_type_id + '_' + field.relationship_direction + '_' + key] = item;
-                });
-              }
+      $scope.getRelatedFields = function (contact_type) {
+        return function () {
+          return {results: filterFields(contact_type, true)};
+        };
+      };
+
+      $scope.showPreview = function (row, field) {
+        var key = field.name;
+        if (field.relationship_type_id && field.relationship_direction) {
+          fetchRelations(field);
+          key = '' + field.relationship_type_id + '_' + field.relationship_direction + '_' + key;
+        }
+        if (field.location_type_id) {
+          key += '_' + field.location_type_id + (field.phone_type_id ? '_' + field.phone_type_id : '');
+        }
+        return field.name ? row[key] : '';
+      };
+
+      function fetchRelations(field) {
+        if (cids.length && !relations[field.relationship_type_id + field.relationship_direction]) {
+          relations[field.relationship_type_id + field.relationship_direction] = true;
+          var a = field.relationship_direction[0],
+            b = field.relationship_direction[2],
+            params = {
+              relationship_type_id: field.relationship_type_id,
+              filters: {is_current: 1},
+              "api.Contact.getsingle": {id: '$value.contact_id_' + b}
+            };
+          params['contact_' + a] = {'IN': cids};
+          (function (field, params) {
+            crmApi('Relationship', 'get', params).then(function (data) {
+              _.each(data.values, function (rel) {
+                var row = cids.indexOf(rel['contact_id_' + a]);
+                if (row > -1) {
+                  _.each(rel["api.Contact.getsingle"], function (item, key) {
+                    $scope.data.preview[row][field.relationship_type_id + '_' + field.relationship_direction + '_' + key] = item;
+                  });
+                }
+              });
             });
-          });
-        })(field, params);
+          })(field, params);
+        }
       }
-    }
 
-    $scope.saveMappingDialog = function() {
-      var options = CRM.utils.adjustDialogDefaults({
-        width: '40%',
-        height: 300,
-        autoOpen: false,
-        title: ts('Save Fields')
-      });
-      var mappingNames = _.transform(CRM.vars.exportUi.mapping_names, function(result, n, key) {
-        result[key] = n.toLowerCase();
-      });
-      var model = {
-        ts: ts,
-        saving: false,
-        overwrite: CRM.vars.exportUi.mapping_id ? '1' : '0',
-        mapping_id: CRM.vars.exportUi.mapping_id,
-        mapping_type_id: CRM.vars.exportUi.mapping_type_id,
-        mapping_names: CRM.vars.exportUi.mapping_names,
-        new_name: CRM.vars.exportUi.mapping_id ? CRM.vars.exportUi.mapping_names[CRM.vars.exportUi.mapping_id] : '',
-        description: CRM.vars.exportUi.mapping_description,
-        nameIsUnique: function() {
-          return !_.contains(mappingNames, this.new_name.toLowerCase()) || (this.overwrite === '1' && this.new_name.toLowerCase() === this.mapping_names[this.mapping_id].toLowerCase());
-        },
-        saveMapping: function() {
-          this.saving = true;
-          var mapping = {
-            id: this.overwrite === '1' ? this.mapping_id : null,
-            mapping_type_id: this.mapping_type_id,
-            name: this.new_name,
-            description: this.description,
-            sequential: 1
+      $scope.saveMappingDialog = function () {
+        var options = CRM.utils.adjustDialogDefaults({
+          width: '40%',
+          height: 300,
+          autoOpen: false,
+          title: ts('Save Fields')
+        });
+        var mappingNames = _.transform(CRM.vars.exportUi.mapping_names, function (result, n, key) {
+          result[key] = n.toLowerCase();
+        });
+        var model = {
+          ts: ts,
+          saving: false,
+          overwrite: CRM.vars.exportUi.mapping_id ? '1' : '0',
+          mapping_id: CRM.vars.exportUi.mapping_id,
+          mapping_type_id: CRM.vars.exportUi.mapping_type_id,
+          mapping_names: CRM.vars.exportUi.mapping_names,
+          new_name: CRM.vars.exportUi.mapping_id ? CRM.vars.exportUi.mapping_names[CRM.vars.exportUi.mapping_id] : '',
+          description: CRM.vars.exportUi.mapping_description,
+          nameIsUnique: function () {
+            return !_.contains(mappingNames, this.new_name.toLowerCase()) || (this.overwrite === '1' && this.new_name.toLowerCase() === this.mapping_names[this.mapping_id].toLowerCase());
           },
-            mappingFields = getSelectedColumns();
-          if (!mapping.id) {
-            _.each(mappingFields, function(field) {
-              delete field.id;
+          saveMapping: function () {
+            this.saving = true;
+            var mapping = {
+                id: this.overwrite === '1' ? this.mapping_id : null,
+                mapping_type_id: this.mapping_type_id,
+                name: this.new_name,
+                description: this.description,
+                sequential: 1
+              },
+              mappingFields = getSelectedColumns();
+            if (!mapping.id) {
+              _.each(mappingFields, function (field) {
+                delete field.id;
+              });
+            }
+            mapping['api.MappingField.replace'] = {values: mappingFields};
+            crmApi('Mapping', 'create', mapping).then(function (result) {
+              CRM.vars.exportUi.mapping_id = result.id;
+              CRM.vars.exportUi.mapping_description = mapping.description;
+              CRM.vars.exportUi.mapping_names[result.id] = mapping.name;
+              // Call loadFieldMap to update field ids in $scope.data.columns
+              loadFieldMap(result.values[0]['api.MappingField.replace'].values);
+              dialogService.close('exportSaveMapping');
             });
           }
-          mapping['api.MappingField.replace'] = {values: mappingFields};
-          crmApi('Mapping', 'create', mapping).then(function(result) {
-            CRM.vars.exportUi.mapping_id = result.id;
-            CRM.vars.exportUi.mapping_description = mapping.description;
-            CRM.vars.exportUi.mapping_names[result.id] = mapping.name;
-            // Call loadFieldMap to update field ids in $scope.data.columns
-            loadFieldMap(result.values[0]['api.MappingField.replace'].values);
-            dialogService.close('exportSaveMapping');
-          });
-        }
+        };
+        dialogService.open('exportSaveMapping', '~/exportui/exportSaveMapping.html', model, options);
       };
-      dialogService.open('exportSaveMapping', '~/exportui/exportSaveMapping.html', model, options);
-    };
 
-    // Load saved mapping
-    if ($('input[name=export_field_map]').val()) {
-      loadFieldMap(JSON.parse($('input[name=export_field_map]').val()));
-    }
+      this.$onInit = function() {
+        // Load saved mapping
+        if ($('input[name=export_field_map]').val()) {
+          loadFieldMap(JSON.parse($('input[name=export_field_map]').val()));
+        }
 
-    // Add new col
-    $scope.$watch('new.col', function(val) {
-      var field = val;
-      $timeout(function() {
-        if (field) {
-          $scope.data.columns.push({
-            select: field,
-            name: '',
-            location_type_id: null,
-            phone_type_id: null,
-            website_type_id: null,
-            im_provider_id: null,
-            relationship_type_id: null,
-            relationship_direction: null
+        // Add new col
+        $scope.$watch('new.col', function (val) {
+          var field = val;
+          $timeout(function () {
+            if (field) {
+              $scope.data.columns.push({
+                select: field,
+                name: '',
+                location_type_id: null,
+                phone_type_id: null,
+                website_type_id: null,
+                im_provider_id: null,
+                relationship_type_id: null,
+                relationship_direction: null
+              });
+              $scope.new.col = '';
+            }
           });
-          $scope.new.col = '';
-        }
-      });
-    });
-
-    // When adding/removing columns
-    $scope.$watch('data.columns', function(values) {
-      _.each(values, function(col, index) {
-        // Remove empty values
-        if (!col.select) {
-          $scope.data.columns.splice(index, 1);
-        } else {
-          // Format item
-          var selection = $scope.fields[col.select];
-          if (selection.relationship_type_id) {
-            col.relationship_type_id = selection.relationship_type_id;
-            col.relationship_direction = col.select.slice(col.select.indexOf('_')+1);
-          } else {
-            col.name = col.select;
-            col.relationship_direction = col.relationship_type_id = null;
-          }
-          var field = col.name ? $scope.fields[col.name] : {};
-          col.location_type_id = field.has_location ? col.location_type_id || '' : null;
-          _.each($scope.option_list, function(options, list) {
-            col[list] = (col.location_type_id || !field.has_location) && field.option_list === list ? col[list] || options[0].id : null;
+        });
+
+        // When adding/removing columns
+        $scope.$watch('data.columns', function (values) {
+          _.each(values, function (col, index) {
+            // Remove empty values
+            if (!col.select) {
+              $scope.data.columns.splice(index, 1);
+            } else {
+              // Format item
+              var selection = $scope.fields[col.select];
+              if (selection.relationship_type_id) {
+                col.relationship_type_id = selection.relationship_type_id;
+                col.relationship_direction = col.select.slice(col.select.indexOf('_') + 1);
+              } else {
+                col.name = col.select;
+                col.relationship_direction = col.relationship_type_id = null;
+              }
+              var field = col.name ? $scope.fields[col.name] : {};
+              col.location_type_id = field.has_location ? col.location_type_id || '' : null;
+              _.each($scope.option_list, function (options, list) {
+                col[list] = (col.location_type_id || !field.has_location) && field.option_list === list ? col[list] || options[0].id : null;
+              });
+            }
           });
-        }
-      });
-      // Store data in a quickform hidden field
-      var selectedColumns = getSelectedColumns();
-      $('input[name=export_field_map]').val(JSON.stringify(selectedColumns));
+          // Store data in a quickform hidden field
+          var selectedColumns = getSelectedColumns();
+          $('input[name=export_field_map]').val(JSON.stringify(selectedColumns));
 
-      // Hide submit button when no fields selected
-      $('.crm-button_qf_Map_next').toggle(!!selectedColumns.length);
-    }, true);
+          // Hide submit button when no fields selected
+          $('.crm-button_qf_Map_next').toggle(!!selectedColumns.length);
+        }, true);
+      };
+
+    }
   });
 
 })(angular, CRM.$, CRM._);
index 3c7d31f751eeebe0776c161952963d9061cf92ca..c6d4e903c758c6f5ebfb3a63c5a4be57409a2d2f 100644 (file)
@@ -23,7 +23,7 @@
   <div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="top"}</div>
 
   <crm-angular-js modules="exportui">
-    <div class="crm-export-field-selector-outer" ng-controller="ExportUiCtrl" ng-include="'~/exportui/export.html'"></div>
+    <crm-export-ui class="crm-export-field-selector-outer"></crm-export-ui>
   </crm-angular-js>
 
   <div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="bottom"}</div>