ui: Honour default.ui.page.size (#5394)

* ui: Honour default.ui.page.size

* Moving db upgrade path

engine/schema/src/main/resources/META-INF/db/schema-41510to41520.sql

@@ -19,3 +19,4 @@
 -- Schema upgrade from 4.15.1.0 to 4.15.2.0
 --;
 
+UPDATE `cloud`.`configuration` SET `value` = 20, `default_value` = 20 WHERE `name` = 'default.ui.page.size';

ui/src/store/getters.js

@@ -39,7 +39,8 @@ const getters = {
   server: state => state.app.server,
   domainStore: state => state.user.domainStore,
   darkMode: state => state.user.darkMode,
-  themeSetting: state => state.user.themeSetting
+  themeSetting: state => state.user.themeSetting,
+  defaultListViewPageSize: state => state.user.defaultListViewPageSize
 }
 
 export default getters

ui/src/store/modules/user.js

@@ -56,7 +56,8 @@ const user = {
     usebrowsertimezone: false,
     domainStore: {},
     darkMode: false,
-    themeSetting: {}
+    themeSetting: {},
+    defaultListViewPageSize: 20
   },
 
   mutations: {
@@ -119,6 +120,9 @@ const user = {
     SET_THEME_SETTING (state, setting) {
       state.themeSetting = setting
       Vue.ls.set(THEME_SETTING, setting)
+    },
+    SET_DEFAULT_LISTVIEW_PAGE_SIZE: (state, defaultListViewPageSize) => {
+      state.defaultListViewPageSize = defaultListViewPageSize
     }
   },
 
@@ -255,6 +259,13 @@ const user = {
           reject(error)
         })
 
+        api('listConfigurations', { name: 'default.ui.page.size' }).then(response => {
+          const defaultListViewPageSize = parseInt(response.listconfigurationsresponse.configuration[0].value)
+          commit('SET_DEFAULT_LISTVIEW_PAGE_SIZE', defaultListViewPageSize)
+        }).catch(error => {
+          reject(error)
+        })
+
         api('listLdapConfigurations').then(response => {
           const ldapEnable = (response.ldapconfigurationresponse.count > 0)
           commit('SET_LDAP', ldapEnable)

ui/src/views/AutogenView.vue

@@ -330,7 +330,7 @@
         :pageSize="pageSize"
         :total="itemCount"
         :showTotal="total => `${$t('label.showing')} ${Math.min(total, 1+((page-1)*pageSize))}-${Math.min(page*pageSize, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
-        :pageSizeOptions="device === 'desktop' ? ['20', '50', '100', '200'] : ['10', '20', '50', '100', '200']"
+        :pageSizeOptions="pageSizeOptions"
         @change="changePage"
         @showSizeChange="changePageSize"
         showSizeChanger
@@ -392,7 +392,7 @@ export default {
       items: [],
       itemCount: 0,
       page: 1,
-      pageSize: 10,
+      pageSize: this.$store.getters.defaultListViewPageSize,
       resource: {},
       selectedRowKeys: [],
       currentAction: {},
@@ -431,9 +431,6 @@ export default {
       this.execAction(action, isGroupAction)
     })
 
-    if (this.device === 'desktop') {
-      this.pageSize = 20
-    }
     this.currentPath = this.$route.fullPath
     this.fetchData()
     if ('projectid' in this.$route.query) {
@@ -456,7 +453,6 @@ export default {
           this.pageSize = Number(to.query.pagesize)
         } else {
           this.page = 1
-          this.pageSize = (this.device === 'desktop' ? 20 : 10)
         }
         this.itemCount = 0
         this.fetchData()
@@ -474,6 +470,17 @@ export default {
       this.fetchData()
     }
   },
+  computed: {
+    pageSizeOptions () {
+      var sizes = [20, 50, 100, 200, this.$store.getters.defaultListViewPageSize]
+      if (this.device !== 'desktop') {
+        sizes.unshift(10)
+      }
+      return [...new Set(sizes)].sort(function (a, b) {
+        return a - b
+      }).map(String)
+    }
+  },
   methods: {
     switchProject (projectId) {
       if (!projectId || !projectId.length || projectId.length !== 36) {