From bd001487415e1b41af3f232d99a8cbde9a0b0375 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Sun, 5 Jul 2020 07:20:26 +0530
Subject: [PATCH] autogenview: use pagesize 20 for desktop users, 10 otherwise

Fixes #489

Set default page size based on screentype, for FHD/4K displays if device
type is desktop use pagesize 20; otherwise use default pagesize of 10.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/locales/en.json       | 2 +-
 ui/src/views/AutogenView.vue | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index a466815b129..ca73163d187 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -503,7 +503,7 @@
 "label.character": "Character",
 "label.chassis": "Chassis",
 "label.checksum": "Checksum",
-"label.cidr": "Super CIDR for Guest Networks",
+"label.cidr": "CIDR",
 "label.cidr.account": "CIDR or Account/Security Group",
 "label.cidr.destination.network": "Destination Network CIDR",
 "label.cidr.of.destination.network": "CIDR of destination network",
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 0fb8ffbae07..f1b5f221263 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -304,8 +304,8 @@
         :current="page"
         :pageSize="pageSize"
         :total="itemCount"
-        :showTotal="total => `Total ${total} items`"
-        :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
+        :showTotal="total => `Showing ${1+((page-1)*pageSize)}-${Math.min(page*pageSize, total)} of ${total} items`"
+        :pageSizeOptions="device === 'desktop' ? ['20', '50', '100', '500'] : ['10', '20', '50', '100', '500']"
         @change="changePage"
         @showSizeChange="changePageSize"
         showSizeChanger
@@ -376,6 +376,9 @@ export default {
     this.form = this.$form.createForm(this)
   },
   mounted () {
+    if (this.device === 'desktop') {
+      this.pageSize = 20
+    }
     this.currentPath = this.$route.fullPath
     this.fetchData()
     if ('projectid' in this.$route.query) {