From 1b3653348d173dc21c72341b7b0bd5188f3cc164 Mon Sep 17 00:00:00 2001 From: rahul shukla Date: Mon, 6 May 2019 20:52:43 +0530 Subject: [PATCH] front end changes for IE --- .../Resources/views/dashboard/index.blade.php | 12 +- packages/Webkul/Shop/package.json | 4 +- .../views/checkout/onepage.blade.php | 68 ++++++----- .../layouts/header/nav-menu/navmenu.blade.php | 14 ++- .../list/layered-navigation.blade.php | 54 +++++---- .../Resources/views/products/view.blade.php | 14 +-- .../views/products/view/attributes.blade.php | 2 +- .../view/configurable-options.blade.php | 22 ++-- .../views/products/view/gallery.blade.php | 14 +-- packages/Webkul/Ui/package.json | 2 + .../Webkul/Ui/src/Resources/assets/js/app.js | 7 +- .../Resources/views/datagrid/table.blade.php | 114 +++++++++--------- 12 files changed, 172 insertions(+), 155 deletions(-) diff --git a/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php b/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php index 8a74c6dfe..c4b626801 100755 --- a/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php +++ b/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php @@ -379,13 +379,15 @@ template: '#date-filter-template', - data: () => ({ - start: "{{ $startDate->format('Y-m-d') }}", - end: "{{ $endDate->format('Y-m-d') }}", - }), + data: function() { + return { + start: "{{ $startDate->format('Y-m-d') }}", + end: "{{ $endDate->format('Y-m-d') }}", + } + }, methods: { - applyFilter(field, date) { + applyFilter: function(field, date) { this[field] = date; window.location.href = "?start=" + this.start + '&end=' + this.end; diff --git a/packages/Webkul/Shop/package.json b/packages/Webkul/Shop/package.json index 43461c32f..b9aec46f8 100755 --- a/packages/Webkul/Shop/package.json +++ b/packages/Webkul/Shop/package.json @@ -18,9 +18,9 @@ "vue": "^2.1.10" }, "dependencies": { + "ez-plus": "^1.2.1", "vee-validate": "2.0.0-rc.26", "vue-flatpickr": "^2.3.0", - "vue-slider-component": "^2.7.5", - "ez-plus": "^1.2.1" + "vue-slider-component": "^2.7.5" } } diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php index 61d50b7b0..5230ba93b 100755 --- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php @@ -116,7 +116,7 @@ var shippingHtml = ''; var paymentHtml = ''; var reviewHtml = ''; - var summaryHtml = Vue.compile(` $cart])->render(); ?>`); + var summaryHtml = ''; var customerAddress = null; @auth('customer') @@ -132,7 +132,7 @@ template: '#checkout-template', inject: ['$validator'], - data() { + data: function() { return { currentStep: 1, completedStep: 0, @@ -159,7 +159,7 @@ } }, - created() { + created: function() { if(! customerAddress) { this.new_shipping_address = true; this.new_billing_address = true; @@ -184,35 +184,37 @@ }, methods: { - navigateToStep (step) { + navigateToStep: function(step) { if (step <= this.completedStep) { this.currentStep = step this.completedStep = step - 1; } }, - haveStates(addressType) { + haveStates: function(addressType) { if (this.countryStates[this.address[addressType].country] && this.countryStates[this.address[addressType].country].length) return true; return false; }, - validateForm: function (scope) { - this.$validator.validateAll(scope).then((result) => { + validateForm: function(scope) { + var this_this = this; + + this.$validator.validateAll(scope).then(function (result) { if (result) { if (scope == 'address-form') { - this.saveAddress() + this_this.saveAddress(); } else if (scope == 'shipping-form') { - this.saveShipping() + this_this.saveShipping(); } else if (scope == 'payment-form') { - this.savePayment() + this_this.savePayment(); } } }); }, - saveAddress () { + saveAddress: function() { var this_this = this; this.disable_button = true; @@ -234,7 +236,7 @@ }) }, - saveShipping () { + saveShipping: function() { var this_this = this; this.disable_button = true; @@ -256,7 +258,7 @@ }) }, - savePayment () { + savePayment: function() { var this_this = this; this.disable_button = true; @@ -278,7 +280,7 @@ }) }, - placeOrder () { + placeOrder: function() { var this_this = this; this.disable_button = true; @@ -302,7 +304,7 @@ }) }, - handleErrorResponse (response, scope) { + handleErrorResponse: function(response, scope) { if (response.status == 422) { serverErrors = response.data.errors; this.$root.addServerErrors(scope) @@ -313,19 +315,19 @@ } }, - shippingMethodSelected (shippingMethod) { + shippingMethodSelected: function(shippingMethod) { this.selected_shipping_method = shippingMethod; }, - paymentMethodSelected (paymentMethod) { + paymentMethodSelected: function(paymentMethod) { this.selected_payment_method = paymentMethod; }, - newBillingAddress() { + newBillingAddress: function() { this.new_billing_address = true; }, - newShippingAddress() { + newShippingAddress: function() { this.new_shipping_address = true; } } @@ -335,7 +337,7 @@ Vue.component('summary-section', { inject: ['$validator'], - data() { + data: function() { return { templateRender: null } @@ -343,7 +345,7 @@ staticRenderFns: summaryTemplateRenderFns, - mounted() { + mounted: function() { this.templateRender = summaryHtml.render; for (var i in summaryHtml.staticRenderFns) { @@ -351,7 +353,7 @@ } }, - render(h) { + render: function(h) { return h('div', [ (this.templateRender ? this.templateRender() : @@ -364,7 +366,7 @@ Vue.component('shipping-section', { inject: ['$validator'], - data() { + data: function() { return { templateRender: null, selected_shipping_method: '', @@ -373,7 +375,7 @@ staticRenderFns: shippingTemplateRenderFns, - mounted() { + mounted: function() { this.templateRender = shippingHtml.render; for (var i in shippingHtml.staticRenderFns) { shippingTemplateRenderFns.push(shippingHtml.staticRenderFns[i]); @@ -382,7 +384,7 @@ eventBus.$emit('after-checkout-shipping-section-added'); }, - render(h) { + render: function(h) { return h('div', [ (this.templateRender ? this.templateRender() : @@ -391,7 +393,7 @@ }, methods: { - methodSelected () { + methodSelected: function() { this.$emit('onShippingMethodSelected', this.selected_shipping_method) eventBus.$emit('after-shipping-method-selected'); @@ -403,7 +405,7 @@ Vue.component('payment-section', { inject: ['$validator'], - data() { + data: function() { return { templateRender: null, @@ -415,7 +417,7 @@ staticRenderFns: paymentTemplateRenderFns, - mounted() { + mounted: function() { this.templateRender = paymentHtml.render; for (var i in paymentHtml.staticRenderFns) { @@ -425,7 +427,7 @@ eventBus.$emit('after-checkout-payment-section-added'); }, - render(h) { + render: function(h) { return h('div', [ (this.templateRender ? this.templateRender() : @@ -434,7 +436,7 @@ }, methods: { - methodSelected () { + methodSelected: function() { this.$emit('onPaymentMethodSelected', this.payment) eventBus.$emit('after-payment-method-selected'); @@ -444,7 +446,7 @@ var reviewTemplateRenderFns = []; Vue.component('review-section', { - data() { + data: function() { return { templateRender: null } @@ -452,7 +454,7 @@ staticRenderFns: reviewTemplateRenderFns, - mounted() { + mounted: function() { this.templateRender = reviewHtml.render; for (var i in reviewHtml.staticRenderFns) { @@ -460,7 +462,7 @@ } }, - render(h) { + render: function(h) { return h('div', [ (this.templateRender ? this.templateRender() : diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/header/nav-menu/navmenu.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/header/nav-menu/navmenu.blade.php index 268bd6277..c0e357257 100755 --- a/packages/Webkul/Shop/src/Resources/views/layouts/header/nav-menu/navmenu.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/layouts/header/nav-menu/navmenu.blade.php @@ -42,20 +42,22 @@ foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCateg categories: { type: [Array, String, Object], required: false, - default: () => ([]) + default: (function () { + return []; + }) }, url: String }, - data(){ + data: function(){ return { items_count:0 }; }, computed: { - items () { + items: function() { return JSON.parse(this.categories) } }, @@ -93,7 +95,7 @@ foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCateg url: String, }, - data() { + data: function() { return { items_count:0, show: false, @@ -107,11 +109,11 @@ foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCateg }, computed: { - haveChildren() { + haveChildren: function() { return this.item.children.length ? true : false; }, - name() { + name: function() { if (this.item.translations && this.item.translations.length) { this.item.translations.forEach(function(translation) { if (translation.locale == document.documentElement.lang) diff --git a/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php b/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php index b4ee472e3..8392ac58f 100755 --- a/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php @@ -81,25 +81,25 @@ template: '#layered-navigation-template', - data() { + data: function() { return { attributes: @json($attributeRepository->getFilterAttributes()), appliedFilters: {} } }, - created () { + created: function () { var urlParams = new URLSearchParams(window.location.search); var entries = urlParams.entries(); - for(pair of entries) { - this.appliedFilters[pair[0]] = pair[1].split(','); + for (pair of entries) { + this.appliedFilters[pair[0]] = pair[1].split(','); } }, methods: { - addFilters (attributeCode, filters) { + addFilters: function (attributeCode, filters) { if (filters.length) { this.appliedFilters[attributeCode] = filters; } else { @@ -109,7 +109,7 @@ this.applyFilter() }, - applyFilter () { + applyFilter: function () { var params = []; for(key in this.appliedFilters) { @@ -128,28 +128,30 @@ props: ['index', 'attribute', 'appliedFilterValues'], - data: () => ({ - appliedFilters: [], + data: function() { + return { + appliedFilters: [], - active: false, + active: false, - sliderConfig: { - value: [ - 0, - 0 - ], - max: 500, - processStyle: { - "backgroundColor": "#FF6472" - }, - tooltipStyle: { - "backgroundColor": "#FF6472", - "borderColor": "#FF6472" + sliderConfig: { + value: [ + 0, + 0 + ], + max: 500, + processStyle: { + "backgroundColor": "#FF6472" + }, + tooltipStyle: { + "backgroundColor": "#FF6472", + "borderColor": "#FF6472" + } } } - }), + }, - created () { + created: function () { if (!this.index) this.active = true; @@ -165,17 +167,17 @@ }, methods: { - addFilter (e) { + addFilter: function (e) { this.$emit('onFilterAdded', this.appliedFilters) }, - priceRangeUpdated (value) { + priceRangeUpdated: function (value) { this.appliedFilters = value; this.$emit('onFilterAdded', this.appliedFilters) }, - clearFilters () { + clearFilters: function () { if (this.attribute.type == 'price') { this.sliderConfig.value = [0, 0]; } diff --git a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php index 8e55f6f6a..f26b42104 100755 --- a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php @@ -123,19 +123,19 @@ inject: ['$validator'], methods: { - onSubmit (e) { + onSubmit: function(e) { if (e.target.getAttribute('type') != 'submit') return; e.preventDefault(); - this.$validator.validateAll().then(result => { + this.$validator.validateAll().then(function (result) { if (result) { - if (e.target.getAttribute('data-href')) { - window.location.href = e.target.getAttribute('data-href'); - } else { - document.getElementById('product-form').submit(); - } + if (e.target.getAttribute('data-href')) { + window.location.href = e.target.getAttribute('data-href'); + } else { + document.getElementById('product-form').submit(); + } } }); } diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php index 71c4748f2..19ccb5b74 100755 --- a/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php @@ -20,7 +20,7 @@ @else {{ $attribute['admin_name'] }} @endif - {{ $attribute['value'] }} + {{ $attribute['value'] }} @endforeach diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php index 3fd6e450e..c237f7565 100755 --- a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php @@ -79,7 +79,7 @@ inject: ['$validator'], - data() { + data: function() { return { config: @json($config), @@ -93,7 +93,7 @@ } }, - created () { + created: function() { this.galleryImages = galleryImages.slice(0) var config = @json($config); @@ -125,7 +125,7 @@ }, methods: { - configure (attribute, value) { + configure: function(attribute, value) { this.simpleProduct = this.getSelectedProductId(attribute, value); if (value) { @@ -170,7 +170,7 @@ this.changeStock(this.simpleProduct); }, - getSelectedIndex (attribute, value) { + getSelectedIndex: function(attribute, value) { var selectedIndex = 0; attribute.options.forEach(function(option, index) { @@ -182,7 +182,7 @@ return selectedIndex; }, - getSelectedProductId (attribute, value) { + getSelectedProductId: function(attribute, value) { var options = attribute.options, matchedOptions; @@ -197,7 +197,7 @@ return undefined; }, - fillSelect (attribute) { + fillSelect: function(attribute) { var options = this.getAttributeOptions(attribute.id), prevOption, index = 1, @@ -238,7 +238,7 @@ } }, - resetChildren (attribute) { + resetChildren: function(attribute) { if (attribute.childAttributes) { attribute.childAttributes.forEach(function (set) { set.selectedIndex = 0; @@ -268,7 +268,7 @@ } }, - getAttributeOptions (attributeId) { + getAttributeOptions: function (attributeId) { var this_this = this, options; @@ -281,7 +281,7 @@ return options; }, - reloadPrice () { + reloadPrice: function () { var selectedOptionCount = 0; this.childAttributes.forEach(function(attribute) { @@ -308,7 +308,7 @@ } }, - changeProductImages () { + changeProductImages: function () { galleryImages.splice(0, galleryImages.length) this.galleryImages.forEach(function(image) { @@ -322,7 +322,7 @@ } }, - changeStock(productId) { + changeStock: function (productId) { var inStockElement = document.getElementById('in-stock'); if (productId) { diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php index 33e951c97..7d81738ad 100755 --- a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php @@ -56,7 +56,7 @@ template: '#product-gallery-template', - data() { + data: function() { return { images: galleryImages, @@ -86,14 +86,14 @@ } }, - created () { + created: function() { this.changeImage(this.images[0]) this.prepareThumbs() }, methods: { - prepareThumbs () { + prepareThumbs: function() { var this_this = this; this_this.thumbs = []; @@ -103,7 +103,7 @@ }); }, - changeImage (image) { + changeImage: function(image) { this.currentLargeImageUrl = image.large_image_url; this.currentOriginalImageUrl = image.original_image_url; @@ -111,13 +111,13 @@ $('img#pro-img').data('zoom-image', image.original_image_url).ezPlus(); }, - moveThumbs(direction) { + moveThumbs: function(direction) { let len = this.thumbs.length; if (direction === "top") { const moveThumb = this.thumbs.splice(len - 1, 1); - this.thumbs = [moveThumb[0], ...this.thumbs]; + this.thumbs = [moveThumb[0]].concat((this.thumbs)); this.counter.up = this.counter.up+1; @@ -126,7 +126,7 @@ } else { const moveThumb = this.thumbs.splice(0, 1); - this.thumbs = [...this.thumbs, moveThumb[0]]; + this.thumbs = [].concat((this.thumbs), [moveThumb[0]]); this.counter.down = this.counter.down+1; diff --git a/packages/Webkul/Ui/package.json b/packages/Webkul/Ui/package.json index 8641ce6db..aed607260 100755 --- a/packages/Webkul/Ui/package.json +++ b/packages/Webkul/Ui/package.json @@ -19,7 +19,9 @@ "flatpickr": "^4.4.6" }, "dependencies": { + "@babel/polyfill": "^7.4.4", "tooltip.js": "^1.3.1", + "url-search-params-polyfill": "^6.0.0", "vue-swatches": "^1.0.3" } } diff --git a/packages/Webkul/Ui/src/Resources/assets/js/app.js b/packages/Webkul/Ui/src/Resources/assets/js/app.js index ef4fe5d95..f6f776a7a 100755 --- a/packages/Webkul/Ui/src/Resources/assets/js/app.js +++ b/packages/Webkul/Ui/src/Resources/assets/js/app.js @@ -1,3 +1,4 @@ + Vue.component("flash-wrapper", require("./components/flash-wrapper")); Vue.component("flash", require("./components/flash")); Vue.component("tabs", require("./components/tabs/tabs")); @@ -20,4 +21,8 @@ Vue.component("swatch-picker", require("./components/swatch-picker")); require('flatpickr/dist/flatpickr.css'); -require('vue-swatches/dist/vue-swatches.min.css'); \ No newline at end of file +require('vue-swatches/dist/vue-swatches.min.css'); + +require("@babel/polyfill"); + +require('url-search-params-polyfill'); \ No newline at end of file diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php index 9c45da34d..24015ffe7 100644 --- a/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php +++ b/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php @@ -224,53 +224,55 @@ Vue.component('datagrid-filters', { template: '#datagrid-filters', - data: () => ({ - filterIndex: @json($results['index']), - gridCurrentData: @json($results['records']), - massActions: @json($results['massactions']), - massActionsToggle: false, - massActionTarget: null, - massActionType: null, - massActionValues: [], - massActionTargets: [], - massActionUpdateValue: null, - url: new URL(window.location.href), - currentSort: null, - dataIds: [], - allSelected: false, - sortDesc: 'desc', - sortAsc: 'asc', - sortUpIcon: 'sort-up-icon', - sortDownIcon: 'sort-down-icon', - currentSortIcon: null, - isActive: false, - isHidden: true, - searchValue: '', - filterColumn: true, - filters: [], - columnOrAlias: '', - type: null, - columns : @json($results['columns']), - stringCondition: null, - booleanCondition: null, - numberCondition: null, - datetimeCondition: null, - stringValue: null, - booleanValue: null, - datetimeValue: '2000-01-01', - numberValue: 0, - stringConditionSelect: false, - booleanConditionSelect: false, - numberConditionSelect: false, - datetimeConditionSelect: false - }), + data: function() { + return { + filterIndex: @json($results['index']), + gridCurrentData: @json($results['records']), + massActions: @json($results['massactions']), + massActionsToggle: false, + massActionTarget: null, + massActionType: null, + massActionValues: [], + massActionTargets: [], + massActionUpdateValue: null, + url: new URL(window.location.href), + currentSort: null, + dataIds: [], + allSelected: false, + sortDesc: 'desc', + sortAsc: 'asc', + sortUpIcon: 'sort-up-icon', + sortDownIcon: 'sort-down-icon', + currentSortIcon: null, + isActive: false, + isHidden: true, + searchValue: '', + filterColumn: true, + filters: [], + columnOrAlias: '', + type: null, + columns : @json($results['columns']), + stringCondition: null, + booleanCondition: null, + numberCondition: null, + datetimeCondition: null, + stringValue: null, + booleanValue: null, + datetimeValue: '2000-01-01', + numberValue: 0, + stringConditionSelect: false, + booleanConditionSelect: false, + numberConditionSelect: false, + datetimeConditionSelect: false + } + }, mounted: function() { this.setParamsAndUrl(); }, methods: { - getColumnOrAlias(columnOrAlias) { + getColumnOrAlias: function(columnOrAlias) { this.columnOrAlias = columnOrAlias; for(column in this.columns) { @@ -317,14 +319,14 @@ } }, - nullify() { + nullify: function() { this.stringCondition = null; this.datetimeCondition = null; this.booleanCondition = null; this.numberCondition = null; }, - getResponse() { + getResponse: function() { label = ''; for(colIndex in this.columns) { @@ -354,7 +356,7 @@ } }, - sortCollection(alias) { + sortCollection: function(alias) { label = ''; for(colIndex in this.columns) { @@ -367,14 +369,14 @@ this.formURL("sort", alias, this.sortAsc, label); }, - searchCollection(searchValue) { + searchCollection: function(searchValue) { label = 'Search'; this.formURL("search", 'all', searchValue, label); }, // function triggered to check whether the query exists or not and then call the make filters from the url - setParamsAndUrl() { + setParamsAndUrl: function() { params = (new URL(window.location.href)).search; if (params.slice(1, params.length).length > 0) { @@ -397,7 +399,7 @@ } }, - findCurrentSort() { + findCurrentSort: function() { for(i in this.filters) { if (this.filters[i].column == 'sort') { this.currentSort = this.filters[i].val; @@ -411,7 +413,7 @@ } }, - changeMassActionTarget() { + changeMassActionTarget: function() { if (this.massActionType == 'delete') { for(i in this.massActionTargets) { if (this.massActionTargets[i].type == 'delete') { @@ -436,7 +438,7 @@ }, //make array of filters, sort and search - formURL(column, condition, response, label) { + formURL: function(column, condition, response, label) { var obj = {}; if (column == "" || condition == "" || response == "" || column == null || condition == null || response == null) { @@ -577,7 +579,7 @@ }, // make the url from the array and redirect - makeURL() { + makeURL: function() { newParams = ''; for(i = 0; i < this.filters.length; i++) { @@ -596,7 +598,7 @@ }, //make the filter array from url after being redirected - arrayFromUrl() { + arrayFromUrl: function() { var obj = {}; processedUrl = this.url.search.slice(1, this.url.length); splitted = []; @@ -655,7 +657,7 @@ } }, - removeFilter(filter) { + removeFilter: function(filter) { for(i in this.filters) { if (this.filters[i].col == filter.col && this.filters[i].cond == filter.cond && this.filters[i].val == filter.val) { this.filters.splice(i, 1); @@ -666,7 +668,7 @@ }, //triggered when any select box is clicked in the datagrid - select() { + select: function() { this.allSelected = false; if(this.dataIds.length == 0) @@ -676,7 +678,7 @@ }, //triggered when master checkbox is clicked - selectAll() { + selectAll: function() { this.dataIds = []; this.massActionsToggle = true; @@ -708,7 +710,7 @@ } }, - doAction(e) { + doAction: function(e) { var element = e.currentTarget; if (confirm('{{__('ui::app.datagrid.massaction.delete') }}')) { @@ -728,7 +730,7 @@ } }, - removeMassActions() { + removeMassActions: function() { this.dataIds = []; this.massActionsToggle = false;