Issue #1232, option to select the number of data to be shown per pages for all data grids

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

@@ -1,4 +1,4 @@
 {
-    "/js/ui.js": "/js/ui.js?id=62a1f3ccf04e55a10ae8",
-    "/css/ui.css": "/css/ui.css?id=dec1ede3219df6514109"
+    "/js/ui.js": "/js/ui.js?id=96cb056c865e3f06e093",
+    "/css/ui.css": "/css/ui.css?id=cf2acf741bc8b8928209"
 }

packages/Webkul/Ui/src/DataGrid/DataGrid.php

@@ -142,8 +142,6 @@ abstract class DataGrid
     public function __construct()
     {
         $this->invoker = $this;
-
-        $this->itemsPerPage = core()->getConfigData('general.general.locale_options.admin_page_limit') ?: $this->itemsPerPage;
     }
 
     /**
@@ -167,6 +165,10 @@ abstract class DataGrid
             unset($parsedUrl['page']);
         }
 
+        $this->itemsPerPage = isset($parsedUrl['perPage']) ? $parsedUrl['perPage']['eq'] : $this->itemsPerPage;
+
+        unset($parsedUrl['perPage']);
+
         return $parsedUrl;
     }
 

packages/Webkul/Ui/src/Resources/assets/sass/components.scss

@@ -16,6 +16,17 @@
         position: absolute;
         right: 25px;
     }
+
+    .per-page {
+        right: 250px;
+
+        .per-page-label {
+            position: absolute;
+            right: 120px;
+            width: 100%;
+            top: 8px;
+        }
+    }
 }
 
 .filter-row-two {

packages/Webkul/Ui/src/Resources/lang/ar/app.php

@@ -13,6 +13,7 @@ return [
 
         'no-records' => 'لا توجد سجلات',
         'filter-fields-missing' => 'بعض الحقل المطلوب هو لاغ ، رجاء تفقد عمود ، حالة و قيمة صحيح',
-        'click_on_action' => 'هل تريد حقا أن تؤدي هذا العمل؟'
+        'click_on_action' => 'هل تريد حقا أن تؤدي هذا العمل؟',
+        'items-per-page' => 'Items Per Page',
     ]
 ];

packages/Webkul/Ui/src/Resources/lang/en/app.php

@@ -35,6 +35,7 @@ return [
         'true' => 'True / Active',
         'false' => 'False / Inactive',
         'between' => 'Is between',
-        'apply' => 'Apply'
+        'apply' => 'Apply',
+        'items-per-page' => 'Items Per Page',
     ]
 ];

packages/Webkul/Ui/src/Resources/lang/fa/app.php

@@ -31,6 +31,7 @@ return [
         'true' => 'صحیح / فعال',
         'false' => 'غلط / غیرفعال',
         'between' => 'ما بین',
-        'apply' => 'درخواست'
+        'apply' => 'درخواست',
+        'items-per-page' => 'Items Per Page',
     ]
 ];

packages/Webkul/Ui/src/Resources/lang/pt_BR/app.php

@@ -31,6 +31,7 @@ return [
         'true' => 'Verdadeiro / Ativo',
         'false' => 'Falso / Inativo',
         'between' => 'Está entre',
-        'apply' => 'Aplicar'
+        'apply' => 'Aplicar',
+        'items-per-page' => 'Items Per Page',
     ]
 ];

packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php

@@ -130,6 +130,22 @@
                             </ul>
                         </div>
                     </div>
+
+                    <div class="dropdown-filters per-page">
+                        <div class="control-group">
+                            <label class="per-page-label" for="perPage">
+                                {{ __('ui::app.datagrid.items-per-page') }}
+                            </label>
+
+                            <select id="perPage" name="perPage" class="control" v-model="perPage" v-on:change="paginate">
+                                <option value="10"> 10 </option>
+                                <option value="20"> 20 </option>
+                                <option value="30"> 30 </option>
+                                <option value="40"> 40 </option>
+                                <option value="50"> 50 </option>
+                            </select>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="filter-row-two">
@@ -198,12 +214,21 @@
                         stringConditionSelect: false,
                         booleanConditionSelect: false,
                         numberConditionSelect: false,
-                        datetimeConditionSelect: false
+                        datetimeConditionSelect: false,
+                        perPage: 10,
                     }
                 },
 
                 mounted: function() {
                     this.setParamsAndUrl();
+
+                    if (this.filters.length) {
+                        for (let i = 0; i < this.filters.length; i++) {
+                            if (this.filters[i].column == 'perPage') {
+                                this.perPage = this.filters[i].val;
+                            }
+                        }
+                    }
                 },
 
                 methods: {
@@ -684,6 +709,18 @@
                         this.allSelected = false;
 
                         this.massActionType = null;
+                    },
+
+                    paginate: function(e) {
+                        for (let i = 0; i < this.filters.length; i++) {
+                            if (this.filters[i].column == 'perPage') {
+                                this.filters.splice(i, 1);
+                            }
+                        }
+
+                        this.filters.push({"column":"perPage","cond":"eq","val": e.target.value});
+
+                        this.makeURL();
                     }
                 }
             });