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