crm.fsf.org/20131203/files/sites/all/modules/civicrm/js/view/crm.profile-selector.js

   1 (function($) {
   2   var CRM = (window.CRM) ? (window.CRM) : (window.CRM = {});
   3   if (!CRM.ProfileSelector) CRM.ProfileSelector = {};
   4
   5   CRM.ProfileSelector.Option = Backbone.Marionette.ItemView.extend({
   6     template: '#profile_selector_option_template',
   7     tagName: 'option',
   8     modelEvents: {
   9       'change:title': 'render'
  10     },
  11     onRender: function() {
  12       this.$el.attr('value', this.model.get('id'));
  13     }
  14   });
  15
  16   CRM.ProfileSelector.Select = Backbone.Marionette.CollectionView.extend({
  17     tagName: 'select',
  18     itemView: CRM.ProfileSelector.Option
  19   });
  20
  21   /**
  22    * Render a pane with 'Select/Preview/Edit/Copy/Create' functionality for profiles.
  23    *
  24    * Note: This view works with a ufGroupCollection, and it creates popups for a
  25    * ufGroupModel. These are related but not facilely. The ufGroupModels in the
  26    * ufGroupCollection are never passed to the popup, and the models from the
  27    * popup are never added to the collection. This is because the popup works
  28    * with temporary, local copies -- but the collection reflects the actual list
  29    * on the server.
  30    *
  31    * options:
  32    *  - ufGroupId: int, the default selection
  33    *  - ufGroupCollection: the profiles which can be selected
  34    *  - ufEntities: hard-coded entity list used with any new/existing forms
  35    *    (this may be removed when the form-runtime is updated to support hand-picking
  36    *    entities for each form)
  37    */
  38   CRM.ProfileSelector.View = Backbone.Marionette.Layout.extend({
  39     template: '#profile_selector_template',
  40     regions: {
  41       selectRegion: '.crm-profile-selector-select'
  42     },
  43     events: {
  44       'change .crm-profile-selector-select select': 'onChangeUfGroupId',
  45       'click .crm-profile-selector-edit': 'doEdit',
  46       'click .crm-profile-selector-copy': 'doCopy',
  47       'click .crm-profile-selector-create': 'doCreate'
  48     },
  49     /** @var Marionette.View which specifically builds on jQuery-UI's dialog */
  50     activeDialog: null,
  51     onRender: function() {
  52       var view = new CRM.ProfileSelector.Select({
  53         collection: this.options.ufGroupCollection
  54       });
  55       this.selectRegion.show(view);
  56       this.setUfGroupId(this.options.ufGroupId, {silent: true});
  57       this.toggleButtons();
  58     },
  59     onChangeUfGroupId: function(event) {
  60       this.options.ufGroupId = $(event.target).val();
  61       this.trigger('change:ufGroupId', this);
  62       this.toggleButtons();
  63       this.doPreview();
  64     },
  65     toggleButtons: function() {
  66       this.$('.crm-profile-selector-edit,.crm-profile-selector-copy').attr('disabled', !this.hasUfGroupId());
  67     },
  68     hasUfGroupId: function() {
  69       return (this.getUfGroupId() && this.getUfGroupId() != '') ? true : false;
  70     },
  71     setUfGroupId: function(value, options) {
  72       this.options.ufGroupId = value;
  73       this.$('.crm-profile-selector-select select').val(value);
  74       if (!options || !options.silent) {
  75         this.$('.crm-profile-selector-select select').change();
  76       }
  77     },
  78     getUfGroupId: function() {
  79       return this.options.ufGroupId;
  80     },
  81     doPreview: function() {
  82       var $pane = this.$('.crm-profile-selector-preview-pane');
  83
  84       if (!this.hasUfGroupId()) {
  85         $pane.html($('#profile_selector_empty_preview_template').html());
  86         return;
  87       }
  88
  89       $pane.block({message: ts('Loading...'), theme: true});
  90       $.ajax({
  91         url: CRM.url("civicrm/ajax/inline"),
  92         type: 'GET',
  93         data: {
  94           class_name: 'CRM_UF_Form_Inline_PreviewById',
  95           id: this.getUfGroupId(),
  96           snippet: 4
  97         }
  98       }).done(function(data) {
  99         $pane
 100           .unblock()
 101           .html(data)
 102           .click(function() {
 103             return false; // disable buttons
 104           });
 105       });
 106       return false;
 107     },
 108     doEdit: function() {
 109       var profileSelectorView = this;
 110       var designerDialog = new CRM.Designer.DesignerDialog({
 111         findCreateUfGroupModel: function(options) {
 112           var ufId = profileSelectorView.getUfGroupId();
 113           // Retrieve UF group and fields from the api
 114           CRM.api('UFGroup', 'getsingle', {id: ufId, "api.UFField.get": 1}, {
 115             success: function(formData) {
 116               // Note: With chaining, API returns some extraneous keys that aren't part of UFGroupModel
 117               var ufGroupModel = new CRM.UF.UFGroupModel(_.pick(formData, _.keys(CRM.UF.UFGroupModel.prototype.schema)));
 118               ufGroupModel.getRel('ufEntityCollection').reset(profileSelectorView.options.ufEntities);
 119               ufGroupModel.getRel('ufFieldCollection').reset(_.values(formData["api.UFField.get"].values));
 120               options.onLoad(ufGroupModel);
 121             }
 122           });
 123         }
 124       });
 125       CRM.designerApp.vent.on('ufSaved', this.onSave, this);
 126       this.setDialog(designerDialog);
 127       return false;
 128     },
 129     doCopy: function() {
 130       // This is largely the same as doEdit, but we ultimately pass in a deepCopy of the ufGroupModel.
 131       var profileSelectorView = this;
 132       var designerDialog = new CRM.Designer.DesignerDialog({
 133         findCreateUfGroupModel: function(options) {
 134           var ufId = profileSelectorView.getUfGroupId();
 135           // Retrieve UF group and fields from the api
 136           CRM.api('UFGroup', 'getsingle', {id: ufId, "api.UFField.get": 1}, {
 137             success: function(formData) {
 138               // Note: With chaining, API returns some extraneous keys that aren't part of UFGroupModel
 139               var ufGroupModel = new CRM.UF.UFGroupModel(_.pick(formData, _.keys(CRM.UF.UFGroupModel.prototype.schema)));
 140               ufGroupModel.getRel('ufEntityCollection').reset(profileSelectorView.options.ufEntities);
 141               ufGroupModel.getRel('ufFieldCollection').reset(_.values(formData["api.UFField.get"].values));
 142               options.onLoad(ufGroupModel.deepCopy());
 143             }
 144           });
 145         }
 146       });
 147       CRM.designerApp.vent.on('ufSaved', this.onSave, this);
 148       this.setDialog(designerDialog);
 149       return false;
 150     },
 151     doCreate: function() {
 152       var profileSelectorView = this;
 153       var designerDialog = new CRM.Designer.DesignerDialog({
 154         findCreateUfGroupModel: function(options) {
 155           // Initialize new UF group
 156           var ufGroupModel = new CRM.UF.UFGroupModel();
 157           ufGroupModel.getRel('ufEntityCollection').reset(profileSelectorView.options.ufEntities);
 158           options.onLoad(ufGroupModel);
 159         }
 160       });
 161       CRM.designerApp.vent.on('ufSaved', this.onSave, this);
 162       this.setDialog(designerDialog);
 163       return false;
 164     },
 165     onSave: function() {
 166       CRM.designerApp.vent.off('ufSaved', this.onSave, this);
 167       var ufGroupId = this.activeDialog.model.get('id');
 168       var modelFromCollection = this.options.ufGroupCollection.get(ufGroupId);
 169       if (modelFromCollection) {
 170         // copy in changes to UFGroup
 171         modelFromCollection.set(this.activeDialog.model.toStrictJSON());
 172       } else {
 173         // add in new UFGroup
 174         modelFromCollection = new CRM.UF.UFGroupModel(this.activeDialog.model.toStrictJSON());
 175         this.options.ufGroupCollection.add(modelFromCollection);
 176       }
 177       this.setUfGroupId(ufGroupId);
 178       this.doPreview();
 179     },
 180     setDialog: function(view) {
 181       if (this.activeDialog) {
 182         this.activeDialog.close();
 183       }
 184       this.activeDialog = view;
 185       view.render();
 186     }
 187   });
 188 })(cj);