Remember last applied number of table rows.

A hopefully sensible default is applied, but if the
user changes it, the last selected value is saved
in the browsers localStorage.

Preferences are saved per user, project and table. And
per browser, of course, as those are only saved locally.

Closes #41.

lib/www/client/source/src/views/LineList.vue

@@ -37,9 +37,11 @@
         <v-data-table
         :headers="headers"
         :items="items"
+        :items-per-page.sync="itemsPerPage"
         :search="filter"
         :loading="loading"
         :fixed-header="true"
+        :footer-props='{itemsPerPageOptions: [ 10, 25, 50, 100, 500, -1 ]}'
         :item-class="(item) => (activeItem == item && !edit) ? 'blue accent-1 elevation-3' : ''"
         @click:row="setActiveItem"
         @contextmenu:row="contextMenu"
@@ -168,6 +170,7 @@ export default {
       activeItem: null,
       edit: null, // {line, key, value}
       queuedReload: false,
+      itemsPerPage: 25,
       
       // Context menu stuff
       contextMenuShow: false,
@@ -225,6 +228,14 @@ export default {
       if (!newVal && oldVal && this.queuedReload) {
         this.getLines();
       }
+    },
+    
+    itemsPerPage (newVal, oldVal) {
+      localStorage.setItem(`dougal/prefs/${this.user?.name}/${this.$route.params.project}/${this.$options.name}/items-per-page`, newVal);
+    },
+    
+    user (newVal, oldVal) {
+      this.itemsPerPage = Number(localStorage.getItem(`dougal/prefs/${this.user?.name}/${this.$route.params.project}/${this.$options.name}/items-per-page`)) || 25;
     }
     
   },

lib/www/client/source/src/views/Log.vue

@@ -43,6 +43,7 @@
     <v-data-table
     :headers="headers"
     :items="rows"
+    :items-per-page.sync="itemsPerPage"
     item-key="tstamp"
     sort-by="tstamp"
     :sort-desc="true"
@@ -50,6 +51,7 @@
     :custom-filter="searchTable"
     :loading="loading"
     fixed-header
+    :footer-props='{itemsPerPageOptions: [ 10, 25, 50, 100, 500, -1 ]}'
     >
 
       <template v-slot:item.tstamp="{value}">
@@ -306,10 +308,11 @@ export default {
       },
       selectedLabels: [],
       labelSearch: null,
-      queuedReload: false
+      queuedReload: false,
+      itemsPerPage: 25
     }
   },
-
+  
   computed: {
     rows () {
       const rows = {};
@@ -350,7 +353,7 @@ export default {
       }
     },
 
-    ...mapGetters(['loading', 'online', 'sequence', 'line', 'point', 'lineName', 'serverEvent']),
+    ...mapGetters(['user', 'loading', 'online', 'sequence', 'line', 'point', 'lineName', 'serverEvent']),
     ...mapState({projectSchema: state => state.project.projectSchema})
 
   },
@@ -394,6 +397,14 @@ export default {
       if (!newVal && oldVal && this.queuedReload) {
         this.getEvents();
       }
+    },
+    
+    itemsPerPage (newVal, oldVal) {
+      localStorage.setItem(`dougal/prefs/${this.user?.name}/${this.$route.params.project}/${this.$options.name}/items-per-page`, newVal);
+    },
+    
+    user (newVal, oldVal) {
+      this.itemsPerPage = Number(localStorage.getItem(`dougal/prefs/${this.user?.name}/${this.$route.params.project}/${this.$options.name}/items-per-page`)) || 25;
     }
 
   },
@@ -678,7 +689,7 @@ export default {
   },
 
   async mounted () {
-    await this.getLabelDefinitions()
+    await this.getLabelDefinitions();
     this.getEventCount();
     this.getEvents();
     this.getPresetRemarks();

lib/www/client/source/src/views/Plan.vue

@@ -34,6 +34,7 @@
         <v-data-table
         :headers="headers"
         :items="items"
+        :items-per-page.sync="itemsPerPage"
         :search="filter"
         :loading="loading"
         :fixed-header="true"
@@ -323,6 +324,7 @@ export default {
       activeItem: null,
       edit: null, // {sequence, key, value}
       queuedReload: false,
+      itemsPerPage: 25,
 
       plannerConfig: null,
       shiftAll: false, // Shift all sequences checkbox
@@ -336,7 +338,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['loading', 'serverEvent'])
+    ...mapGetters(['user', 'loading', 'serverEvent'])
   },
   
   watch: {
@@ -401,6 +403,14 @@ export default {
       if (!newVal && oldVal && this.queuedReload) {
         this.getPlannedLines();
       }
+    },
+    
+    itemsPerPage (newVal, oldVal) {
+      localStorage.setItem(`dougal/prefs/${this.user?.name}/${this.$route.params.project}/${this.$options.name}/items-per-page`, newVal);
+    },
+    
+    user (newVal, oldVal) {
+      this.itemsPerPage = Number(localStorage.getItem(`dougal/prefs/${this.user?.name}/${this.$route.params.project}/${this.$options.name}/items-per-page`)) || 25;
     }
     
   },

lib/www/client/source/src/views/SequenceList.vue

@@ -39,12 +39,14 @@
         <v-data-table
           :headers="headers"
           :items="items"
+          :items-per-page.sync="itemsPerPage"
           item-key="sequence"
           :server-items-length="num_rows"
           :search="filter"
           :custom-filter="customFilter"
           :loading="loading"
           :fixed-header="true"
+          :footer-props='{itemsPerPageOptions: [ 10, 25, 50, 100, 500, -1 ]}'
           show-expand
           :item-class="(item) => activeItem == item ? 'blue accent-1 elevation-3' : ''"
           @click:row="setActiveItem"
@@ -397,6 +399,7 @@ export default {
       activeItem: null,
       edit: null, // {sequence, key, value}
       queuedReload: false,
+      itemsPerPage: 25,
 
       // Planner related stuff
       preplots: null,
@@ -411,7 +414,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['loading', 'serverEvent'])
+    ...mapGetters(['user', 'loading', 'serverEvent'])
   },
 
   watch: {
@@ -460,6 +463,14 @@ export default {
       if (!newVal && oldVal && this.queuedReload) {
         this.getSequences();
       }
+    },
+    
+    itemsPerPage (newVal, oldVal) {
+      localStorage.setItem(`dougal/prefs/${this.user?.name}/${this.$route.params.project}/${this.$options.name}/items-per-page`, newVal);
+    },
+    
+    user (newVal, oldVal) {
+      this.itemsPerPage = Number(localStorage.getItem(`dougal/prefs/${this.user?.name}/${this.$route.params.project}/${this.$options.name}/items-per-page`)) || 25;
     }
 
   },