Merge pull request #6235 from devansh-webkul/datagrid-issues

Fixed Items Per Page #6228

packages/Webkul/Ui/publishable/assets/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/ui.js": "/js/ui.js?id=db13b903fbeec282d4f6",
+    "/js/ui.js": "/js/ui.js?id=ee22aa59e99bead55fe4",
     "/css/ui.css": "/css/ui.css?id=c8a7ade09358a1d61a4a"
 }

packages/Webkul/Ui/src/Resources/assets/js/app.js

@@ -28,12 +28,25 @@ import Debounce from './directives/debounce';
 import Slugify from './directives/slugify';
 import SlugifyTarget from './directives/slugify-target';
 
-/* config section */
+/**
+ * Configs.
+ */
 VTooltip.options.defaultDelay = 0;
 Vue.config.productionTip = false;
 
-/* component section */
+/**
+ * Directives.
+ */
 Vue.directive('tooltip', VTooltip.VTooltip);
+Vue.directive('slugify', Slugify);
+Vue.directive('slugify-target', SlugifyTarget);
+Vue.directive('code', Code);
+Vue.directive('alert', Alert);
+Vue.directive('debounce', Debounce);
+
+/**
+ * Components.
+ */
 Vue.component('datagrid-plus', DatagridPlus);
 Vue.component('flash-wrapper', FlashWrapper);
 Vue.component('flash', Flash);
@@ -48,21 +61,18 @@ Vue.component('modal', Modal);
 Vue.component('image-upload', ImageUpload);
 Vue.component('image-wrapper', ImageWrapper);
 Vue.component('image-item', ImageItem);
-Vue.directive('slugify', Slugify);
-Vue.directive('slugify-target', SlugifyTarget);
-Vue.directive('code', Code);
-Vue.directive('alert', Alert);
 Vue.component('datetime', DatetimeComponent);
 Vue.component('date', DateComponent);
 Vue.component('time-component', TimeComponent);
 Vue.component('swatch-picker', SwatchPicker);
-Vue.directive('debounce', Debounce);
 Vue.component('overlay-loader', OverlayLoader);
 Vue.component('multiselect', Multiselect);
 Vue.component('default-image', DefaultImage);
 Vue.component('draggable', Draggable);
 
-/* filter section */
+/**
+ * Filter.
+ */
 Vue.filter('truncate', function(value, limit, trail) {
     if (!value) value = '';
 
@@ -72,6 +82,9 @@ Vue.filter('truncate', function(value, limit, trail) {
     return value.length > limit ? value.substring(0, limit) + trail : value;
 });
 
+/**
+ * Get laravel CSRF token.
+ */
 Vue.prototype.getCsrf = () => {
     let token = document.head.querySelector('meta[name="csrf-token"]');
 
@@ -84,7 +97,9 @@ Vue.prototype.getCsrf = () => {
     return token.content;
 };
 
-/* require section */
+/**
+ * Require.
+ */
 require('flatpickr/dist/flatpickr.css');
 require('vue-swatches/dist/vue-swatches.min.css');
 require('vue-multiselect/dist/vue-multiselect.min.css');

packages/Webkul/Ui/src/Resources/assets/js/components/datagrid/datagrid-plus.vue

@@ -24,7 +24,6 @@
                         <div class="dropdown-filters per-page">
                             <page-filter
                                 :per-page="perPage"
-                                :per-page-count="perPageCount"
                                 :translations="translations"
                                 @onFilter="paginateData($event)"
                             ></page-filter>
@@ -115,7 +114,6 @@ export default {
             id: btoa(this.src),
             isDataLoaded: false,
             massActionTargets: [],
-            perPageCount: [10, 20, 30, 40, 50],
             url: this.src
         };
     },
@@ -211,10 +209,6 @@ export default {
                 }
             }
 
-            if (this.perPageCount.indexOf(parseInt(this.perPage)) === -1) {
-                this.perPageCount.unshift(this.perPage);
-            }
-
             this.isDataLoaded = true;
             this.perPage = this.itemsPerPage;
         },

packages/Webkul/Ui/src/Resources/assets/js/components/datagrid/filters/page-filter.vue

@@ -25,10 +25,11 @@
 
 <script>
 export default {
-    props: ['perPage', 'perPageCount', 'translations'],
+    props: ['perPage', 'translations'],
 
     data() {
         return {
+            perPageCount: [10, 20, 30, 40, 50],
             currentSelection: this.perPage
         };
     },