oroinc /
orocommerce
| @@ 1-248 (lines=248) @@ | ||
| 1 | define(function(require) { |
|
| 2 | 'use strict'; |
|
| 3 | ||
| 4 | var AddressView; |
|
| 5 | var $ = require('jquery'); |
|
| 6 | var _ = require('underscore'); |
|
| 7 | var mediator = require('oroui/js/mediator'); |
|
| 8 | var LoadingMaskView = require('oroui/js/app/views/loading-mask-view'); |
|
| 9 | var BaseView = require('oroui/js/app/views/base/view'); |
|
| 10 | ||
| 11 | /** |
|
| 12 | * @export orosale/js/app/views/address-view |
|
| 13 | * @extends oroui.app.views.base.View |
|
| 14 | * @class orosale.app.views.AddressView |
|
| 15 | */ |
|
| 16 | AddressView = BaseView.extend({ |
|
| 17 | /** |
|
| 18 | * @property {Object} |
|
| 19 | */ |
|
| 20 | options: { |
|
| 21 | enterManuallyValue: '0', |
|
| 22 | type: '', |
|
| 23 | selectors: { |
|
| 24 | address: '', |
|
| 25 | subtotalsFields: [] |
|
| 26 | } |
|
| 27 | }, |
|
| 28 | ||
| 29 | events: { |
|
| 30 | 'click [name="oro_sale_quote[shippingAddress][customerAddress]"]': 'addressFormChange' |
|
| 31 | }, |
|
| 32 | ||
| 33 | /** |
|
| 34 | * @property {String} |
|
| 35 | */ |
|
| 36 | ftid: '', |
|
| 37 | ||
| 38 | /** |
|
| 39 | * @property {jQuery} |
|
| 40 | */ |
|
| 41 | $fields: null, |
|
| 42 | ||
| 43 | /** |
|
| 44 | * @property {jQuery} |
|
| 45 | */ |
|
| 46 | $address: null, |
|
| 47 | ||
| 48 | /** |
|
| 49 | * @property {Object} |
|
| 50 | */ |
|
| 51 | fieldsByName: null, |
|
| 52 | ||
| 53 | /** |
|
| 54 | * @property {LoadingMaskView} |
|
| 55 | */ |
|
| 56 | loadingMaskView: null, |
|
| 57 | ||
| 58 | /** |
|
| 59 | * @inheritDoc |
|
| 60 | */ |
|
| 61 | constructor: function AddressView() { |
|
| 62 | AddressView.__super__.constructor.apply(this, arguments); |
|
| 63 | }, |
|
| 64 | ||
| 65 | /** |
|
| 66 | * @inheritDoc |
|
| 67 | */ |
|
| 68 | initialize: function(options) { |
|
| 69 | this.options = $.extend(true, {}, this.options, options || {}); |
|
| 70 | ||
| 71 | this.initLayout().done(_.bind(this.handleLayoutInit, this)); |
|
| 72 | ||
| 73 | this.loadingMaskView = new LoadingMaskView({container: this.$el}); |
|
| 74 | ||
| 75 | mediator.on('quote:load:related-data', this.loadingStart, this); |
|
| 76 | mediator.on('quote:loaded:related-data', this.loadedRelatedData, this); |
|
| 77 | }, |
|
| 78 | ||
| 79 | /** |
|
| 80 | * Doing something after loading child components |
|
| 81 | */ |
|
| 82 | handleLayoutInit: function() { |
|
| 83 | var self = this; |
|
| 84 | ||
| 85 | this.ftid = this.$el.find('div[data-ftid]:first').data('ftid'); |
|
| 86 | ||
| 87 | this.setAddress(this.$el.find(this.options.selectors.address)); |
|
| 88 | ||
| 89 | this.$fields = this.$el.find(':input[data-ftid]').filter(':not(' + this.options.selectors.address + ')'); |
|
| 90 | this.fieldsByName = {}; |
|
| 91 | this.$fields.each(function() { |
|
| 92 | var $field = $(this); |
|
| 93 | if ($field.val().length > 0) { |
|
| 94 | self.useDefaultAddress = false; |
|
| 95 | } |
|
| 96 | var name = self.normalizeName($field.data('ftid').replace(self.ftid + '_', '')); |
|
| 97 | self.fieldsByName[name] = $field; |
|
| 98 | }); |
|
| 99 | ||
| 100 | if (this.options.selectors.subtotalsFields.length > 0) { |
|
| 101 | _.each(this.options.selectors.subtotalsFields, function(field) { |
|
| 102 | $(field).attr('data-entry-point-trigger', true); |
|
| 103 | }); |
|
| 104 | ||
| 105 | mediator.trigger('entry-point:quote:init'); |
|
| 106 | } |
|
| 107 | }, |
|
| 108 | ||
| 109 | /** |
|
| 110 | * Loading form after on select address click |
|
| 111 | */ |
|
| 112 | addressFormChange: function() { |
|
| 113 | var self = this; |
|
| 114 | this.$fields.each(function() { |
|
| 115 | var $field = $(this); |
|
| 116 | var name = self.normalizeName($field.data('ftid').replace(self.ftid + '_', '')); |
|
| 117 | self.fieldsByName[name] = $field; |
|
| 118 | }); |
|
| 119 | ||
| 120 | this.customerAddressChange(); |
|
| 121 | }, |
|
| 122 | ||
| 123 | /** |
|
| 124 | * Convert name with "_" to name with upper case, example: some_name > someName |
|
| 125 | * |
|
| 126 | * @param {String} name |
|
| 127 | * |
|
| 128 | * @returns {String} |
|
| 129 | */ |
|
| 130 | normalizeName: function(name) { |
|
| 131 | name = name.split('_'); |
|
| 132 | for (var i = 1, iMax = name.length; i < iMax; i++) { |
|
| 133 | name[i] = name[i][0].toUpperCase() + name[i].substr(1); |
|
| 134 | } |
|
| 135 | return name.join(''); |
|
| 136 | }, |
|
| 137 | ||
| 138 | /** |
|
| 139 | * Set new address element and bind events |
|
| 140 | * |
|
| 141 | * @param {jQuery} $address |
|
| 142 | */ |
|
| 143 | setAddress: function($address) { |
|
| 144 | this.$address = $address; |
|
| 145 | ||
| 146 | var self = this; |
|
| 147 | this.$address.change(function(e) { |
|
| 148 | self.customerAddressChange(e); |
|
| 149 | }); |
|
| 150 | }, |
|
| 151 | ||
| 152 | /** |
|
| 153 | * Implement customer address change logic |
|
| 154 | */ |
|
| 155 | customerAddressChange: function() { |
|
| 156 | if (this.$address.val() !== this.options.enterManuallyValue) { |
|
| 157 | this.$fields.each(function() { |
|
| 158 | var $field = $(this); |
|
| 159 | ||
| 160 | $field.prop('readonly', true).inputWidget('refresh'); |
|
| 161 | }); |
|
| 162 | ||
| 163 | var address = this.$address.data('addresses')[this.$address.val()] || null; |
|
| 164 | if (address) { |
|
| 165 | var self = this; |
|
| 166 | ||
| 167 | _.each(address, function(value, name) { |
|
| 168 | if (_.isObject(value)) { |
|
| 169 | value = _.first(_.values(value)); |
|
| 170 | } |
|
| 171 | var $field = self.fieldsByName[self.normalizeName(name)] || null; |
|
| 172 | if ($field) { |
|
| 173 | $field.val(value); |
|
| 174 | if ($field.data('select2')) { |
|
| 175 | $field.data('selected-data', value).change(); |
|
| 176 | } |
|
| 177 | } |
|
| 178 | }); |
|
| 179 | } |
|
| 180 | } else { |
|
| 181 | this.$fields.each(function() { |
|
| 182 | var $field = $(this); |
|
| 183 | ||
| 184 | $field.prop('readonly', false).inputWidget('refresh'); |
|
| 185 | }); |
|
| 186 | } |
|
| 187 | }, |
|
| 188 | ||
| 189 | /** |
|
| 190 | * Show loading view |
|
| 191 | */ |
|
| 192 | loadingStart: function() { |
|
| 193 | this.loadingMaskView.show(); |
|
| 194 | }, |
|
| 195 | ||
| 196 | /** |
|
| 197 | * Hide loading view |
|
| 198 | */ |
|
| 199 | loadingEnd: function() { |
|
| 200 | this.loadingMaskView.hide(); |
|
| 201 | }, |
|
| 202 | ||
| 203 | /** |
|
| 204 | * Set customer address choices from order related data |
|
| 205 | * |
|
| 206 | * @param {Object} response |
|
| 207 | */ |
|
| 208 | loadedRelatedData: function(response) { |
|
| 209 | var address = response[this.options.type + 'Address'] || null; |
|
| 210 | if (!address) { |
|
| 211 | this.loadingEnd(); |
|
| 212 | return; |
|
| 213 | } |
|
| 214 | ||
| 215 | var $oldAddress = this.$address; |
|
| 216 | this.setAddress($(address)); |
|
| 217 | this.$fields.each(function() { |
|
| 218 | var $field = $(this); |
|
| 219 | $field.val(''); |
|
| 220 | $field.prop('readonly', true).inputWidget('refresh'); |
|
| 221 | if ($field.data('select2')) { |
|
| 222 | $field.data('selected-data', '').change(); |
|
| 223 | } |
|
| 224 | }); |
|
| 225 | $oldAddress.parent().trigger('content:remove'); |
|
| 226 | $oldAddress.inputWidget('dispose'); |
|
| 227 | $oldAddress.replaceWith(this.$address); |
|
| 228 | ||
| 229 | this.initLayout().done(_.bind(this.loadingEnd, this)); |
|
| 230 | }, |
|
| 231 | ||
| 232 | /** |
|
| 233 | * @inheritDoc |
|
| 234 | */ |
|
| 235 | dispose: function() { |
|
| 236 | if (this.disposed) { |
|
| 237 | return; |
|
| 238 | } |
|
| 239 | ||
| 240 | mediator.off('order:load:related-data', this.loadingStart, this); |
|
| 241 | mediator.off('order:loaded:related-data', this.loadedRelatedData, this); |
|
| 242 | ||
| 243 | AddressView.__super__.dispose.call(this); |
|
| 244 | } |
|
| 245 | }); |
|
| 246 | ||
| 247 | return AddressView; |
|
| 248 | }); |
|
| 249 | ||
| @@ 1-240 (lines=240) @@ | ||
| 1 | define(function(require) { |
|
| 2 | 'use strict'; |
|
| 3 | ||
| 4 | var AddressView; |
|
| 5 | var $ = require('jquery'); |
|
| 6 | var _ = require('underscore'); |
|
| 7 | var mediator = require('oroui/js/mediator'); |
|
| 8 | var LoadingMaskView = require('oroui/js/app/views/loading-mask-view'); |
|
| 9 | var BaseView = require('oroui/js/app/views/base/view'); |
|
| 10 | ||
| 11 | /** |
|
| 12 | * @export oroorder/js/app/views/address-view |
|
| 13 | * @extends oroui.app.views.base.View |
|
| 14 | * @class oroorder.app.views.AddressView |
|
| 15 | */ |
|
| 16 | AddressView = BaseView.extend({ |
|
| 17 | /** |
|
| 18 | * @property {Object} |
|
| 19 | */ |
|
| 20 | options: { |
|
| 21 | enterManuallyValue: '0', |
|
| 22 | type: '', |
|
| 23 | selectors: { |
|
| 24 | address: '', |
|
| 25 | subtotalsFields: [] |
|
| 26 | } |
|
| 27 | }, |
|
| 28 | ||
| 29 | /** |
|
| 30 | * @property {String} |
|
| 31 | */ |
|
| 32 | ftid: '', |
|
| 33 | ||
| 34 | /** |
|
| 35 | * @property {jQuery} |
|
| 36 | */ |
|
| 37 | $fields: null, |
|
| 38 | ||
| 39 | /** |
|
| 40 | * @property {jQuery} |
|
| 41 | */ |
|
| 42 | $address: null, |
|
| 43 | ||
| 44 | /** |
|
| 45 | * @property {Boolean} |
|
| 46 | */ |
|
| 47 | useDefaultAddress: null, |
|
| 48 | ||
| 49 | /** |
|
| 50 | * @property {Object} |
|
| 51 | */ |
|
| 52 | fieldsByName: null, |
|
| 53 | ||
| 54 | /** |
|
| 55 | * @property {LoadingMaskView} |
|
| 56 | */ |
|
| 57 | loadingMaskView: null, |
|
| 58 | ||
| 59 | /** |
|
| 60 | * @inheritDoc |
|
| 61 | */ |
|
| 62 | constructor: function AddressView() { |
|
| 63 | AddressView.__super__.constructor.apply(this, arguments); |
|
| 64 | }, |
|
| 65 | ||
| 66 | /** |
|
| 67 | * @inheritDoc |
|
| 68 | */ |
|
| 69 | initialize: function(options) { |
|
| 70 | this.options = $.extend(true, {}, this.options, options || {}); |
|
| 71 | ||
| 72 | this.initLayout().done(_.bind(this.handleLayoutInit, this)); |
|
| 73 | ||
| 74 | this.loadingMaskView = new LoadingMaskView({container: this.$el}); |
|
| 75 | ||
| 76 | mediator.on('order:load:related-data', this.loadingStart, this); |
|
| 77 | mediator.on('order:loaded:related-data', this.loadedRelatedData, this); |
|
| 78 | }, |
|
| 79 | ||
| 80 | /** |
|
| 81 | * Doing something after loading child components |
|
| 82 | */ |
|
| 83 | handleLayoutInit: function() { |
|
| 84 | var self = this; |
|
| 85 | ||
| 86 | this.ftid = this.$el.find('div[data-ftid]:first').data('ftid'); |
|
| 87 | ||
| 88 | this.useDefaultAddress = true; |
|
| 89 | this.$fields = this.$el.find(':input[data-ftid]').filter(':not(' + this.options.selectors.address + ')'); |
|
| 90 | this.fieldsByName = {}; |
|
| 91 | this.$fields.each(function() { |
|
| 92 | var $field = $(this); |
|
| 93 | if ($field.val().length > 0) { |
|
| 94 | self.useDefaultAddress = false; |
|
| 95 | } |
|
| 96 | var name = self.normalizeName($field.data('ftid').replace(self.ftid + '_', '')); |
|
| 97 | self.fieldsByName[name] = $field; |
|
| 98 | }); |
|
| 99 | ||
| 100 | if (this.options.selectors.subtotalsFields.length > 0) { |
|
| 101 | _.each(this.options.selectors.subtotalsFields, function(field) { |
|
| 102 | $(field).attr('data-entry-point-trigger', true); |
|
| 103 | }); |
|
| 104 | ||
| 105 | mediator.trigger('entry-point:order:init'); |
|
| 106 | } |
|
| 107 | ||
| 108 | if (this.options.selectors.address) { |
|
| 109 | this.setAddress(this.$el.find(this.options.selectors.address)); |
|
| 110 | ||
| 111 | this.customerAddressChange(); |
|
| 112 | } else { |
|
| 113 | this._setReadOnlyMode(true); |
|
| 114 | } |
|
| 115 | }, |
|
| 116 | ||
| 117 | /** |
|
| 118 | * Convert name with "_" to name with upper case, example: some_name > someName |
|
| 119 | * |
|
| 120 | * @param {String} name |
|
| 121 | * |
|
| 122 | * @returns {String} |
|
| 123 | */ |
|
| 124 | normalizeName: function(name) { |
|
| 125 | name = name.split('_'); |
|
| 126 | for (var i = 1, iMax = name.length; i < iMax; i++) { |
|
| 127 | if (name[i]) { |
|
| 128 | name[i] = name[i][0].toUpperCase() + name[i].substr(1); |
|
| 129 | } |
|
| 130 | } |
|
| 131 | return name.join(''); |
|
| 132 | }, |
|
| 133 | ||
| 134 | /** |
|
| 135 | * Set new address element and bind events |
|
| 136 | * |
|
| 137 | * @param {jQuery} $address |
|
| 138 | */ |
|
| 139 | setAddress: function($address) { |
|
| 140 | this.$address = $address; |
|
| 141 | ||
| 142 | var self = this; |
|
| 143 | this.$address.change(function(e) { |
|
| 144 | self.useDefaultAddress = false; |
|
| 145 | self.customerAddressChange(e); |
|
| 146 | }); |
|
| 147 | }, |
|
| 148 | ||
| 149 | /** |
|
| 150 | * Implement customer address change logic |
|
| 151 | */ |
|
| 152 | customerAddressChange: function(e) { |
|
| 153 | if (this.$address.val() !== this.options.enterManuallyValue) { |
|
| 154 | this._setReadOnlyMode(true); |
|
| 155 | ||
| 156 | var address = this.$address.data('addresses')[this.$address.val()] || null; |
|
| 157 | if (address) { |
|
| 158 | var self = this; |
|
| 159 | ||
| 160 | _.each(address, function(value, name) { |
|
| 161 | if (_.isObject(value)) { |
|
| 162 | value = _.first(_.values(value)); |
|
| 163 | } |
|
| 164 | var $field = self.fieldsByName[self.normalizeName(name)] || null; |
|
| 165 | if ($field) { |
|
| 166 | $field.val(value); |
|
| 167 | if ($field.data('select2')) { |
|
| 168 | $field.data('selected-data', value).change(); |
|
| 169 | } |
|
| 170 | } |
|
| 171 | }); |
|
| 172 | } |
|
| 173 | } else { |
|
| 174 | this._setReadOnlyMode(false); |
|
| 175 | } |
|
| 176 | }, |
|
| 177 | ||
| 178 | _setReadOnlyMode: function(mode) { |
|
| 179 | this.$fields.each(function() { |
|
| 180 | $(this).prop('readonly', mode).inputWidget('refresh'); |
|
| 181 | }); |
|
| 182 | }, |
|
| 183 | ||
| 184 | /** |
|
| 185 | * Show loading view |
|
| 186 | */ |
|
| 187 | loadingStart: function() { |
|
| 188 | this.loadingMaskView.show(); |
|
| 189 | }, |
|
| 190 | ||
| 191 | /** |
|
| 192 | * Hide loading view |
|
| 193 | */ |
|
| 194 | loadingEnd: function() { |
|
| 195 | this.loadingMaskView.hide(); |
|
| 196 | }, |
|
| 197 | ||
| 198 | /** |
|
| 199 | * Set customer address choices from order related data |
|
| 200 | * |
|
| 201 | * @param {Object} response |
|
| 202 | */ |
|
| 203 | loadedRelatedData: function(response) { |
|
| 204 | var address = response[this.options.type + 'Address'] || null; |
|
| 205 | if (!address) { |
|
| 206 | this.loadingEnd(); |
|
| 207 | return; |
|
| 208 | } |
|
| 209 | ||
| 210 | var $oldAddress = this.$address; |
|
| 211 | this.setAddress($(address)); |
|
| 212 | ||
| 213 | $oldAddress.parent().trigger('content:remove'); |
|
| 214 | $oldAddress.inputWidget('dispose'); |
|
| 215 | $oldAddress.replaceWith(this.$address); |
|
| 216 | ||
| 217 | if (this.useDefaultAddress) { |
|
| 218 | this.$address.val(this.$address.data('default')).change(); |
|
| 219 | } |
|
| 220 | ||
| 221 | this.initLayout().done(_.bind(this.loadingEnd, this)); |
|
| 222 | }, |
|
| 223 | ||
| 224 | /** |
|
| 225 | * @inheritDoc |
|
| 226 | */ |
|
| 227 | dispose: function() { |
|
| 228 | if (this.disposed) { |
|
| 229 | return; |
|
| 230 | } |
|
| 231 | ||
| 232 | mediator.off('order:load:related-data', this.loadingStart, this); |
|
| 233 | mediator.off('order:loaded:related-data', this.loadedRelatedData, this); |
|
| 234 | ||
| 235 | AddressView.__super__.dispose.call(this); |
|
| 236 | } |
|
| 237 | }); |
|
| 238 | ||
| 239 | return AddressView; |
|
| 240 | }); |
|
| 241 | ||
