From 3059e99b414682a8d17ed77908e021a8c8746abd Mon Sep 17 00:00:00 2001
From: Peter Goes <petergoes@gmail.com>
Date: Fri, 30 Jul 2021 11:51:09 +0200
Subject: [PATCH 1/3] limit measures in list

---
 src/client/components/measure-list/measure-list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/components/measure-list/measure-list.vue b/src/client/components/measure-list/measure-list.vue
index 69ebcda0..f3d89163 100644
--- a/src/client/components/measure-list/measure-list.vue
+++ b/src/client/components/measure-list/measure-list.vue
@@ -227,7 +227,7 @@ export default {
         .filter(measure => measure.title.match(searchRE))
         .filter(measure => measure.measureId !== '0')
 
-      return searchFiltered(this.featureSorted)
+      return searchFiltered(this.featureSorted).filter((item, index) => index < 10)
     },
   },
   methods: {

From 1ced338d9ec3235cacf8ece3de08c1c3af2e1e02 Mon Sep 17 00:00:00 2001
From: Peter Goes <petergoes@gmail.com>
Date: Fri, 30 Jul 2021 12:22:21 +0200
Subject: [PATCH 2/3] Add pagination to measures list

---
 .../components/measure-list/measure-list.vue  | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/client/components/measure-list/measure-list.vue b/src/client/components/measure-list/measure-list.vue
index f3d89163..124d3da9 100644
--- a/src/client/components/measure-list/measure-list.vue
+++ b/src/client/components/measure-list/measure-list.vue
@@ -122,7 +122,7 @@
 
     <ul class="measure-list__list">
       <li
-        v-for="measure in filteredMeasures"
+        v-for="measure in paginatedMeasures"
         :key="measure.id"
         class="measure-list__item"
       >
@@ -134,6 +134,18 @@
         />
       </li>
     </ul>
+    <ul v-if="totalPages > 1" class="measure-list__pagination-list">
+      <li v-for="i in totalPages" :key="i">
+        <md-button
+          :class="{'md-raised': true, 'md-accent': i === page}"
+          @click="page = i"
+          @keydown="page = i"
+        >
+          {{ i }}
+        </md-button>
+      </li>
+      <ul />
+    </ul>
   </div>
 </template>
 
@@ -159,6 +171,8 @@ export default {
     searchValue: '',
     sortType: SYSTEM_SUITABILITY,
     sorting: ['featured'],
+    page: 1,
+    perPage: 16,
   }),
   computed: {
     ...mapState({
@@ -227,7 +241,15 @@ export default {
         .filter(measure => measure.title.match(searchRE))
         .filter(measure => measure.measureId !== '0')
 
-      return searchFiltered(this.featureSorted).filter((item, index) => index < 10)
+      return searchFiltered(this.featureSorted)
+    },
+    totalPages() {
+      return Math.ceil(this.filteredMeasures.length / this.perPage)
+    },
+    paginatedMeasures() {
+      const start = (this.page - 1) * this.perPage
+      const end = start + this.perPage
+      return [...this.filteredMeasures].slice(start, end)
     },
   },
   methods: {
@@ -260,6 +282,12 @@ export default {
   padding: var(--spacing-default);
 }
 
+.measure-list__pagination-list {
+  list-style: none;
+  display: flex;
+  justify-content: center;
+}
+
 .measure-list__card {
   height: 100%;
 }

From cb23e7576c40b5330ae2fae13281fc69b42a19b0 Mon Sep 17 00:00:00 2001
From: Peter Goes <petergoes@gmail.com>
Date: Fri, 30 Jul 2021 13:10:16 +0200
Subject: [PATCH 3/3] Update page on input change

---
 src/client/components/measure-list/measure-list.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/client/components/measure-list/measure-list.vue b/src/client/components/measure-list/measure-list.vue
index 124d3da9..06fb58cb 100644
--- a/src/client/components/measure-list/measure-list.vue
+++ b/src/client/components/measure-list/measure-list.vue
@@ -252,6 +252,17 @@ export default {
       return [...this.filteredMeasures].slice(start, end)
     },
   },
+  watch: {
+    searchValue() {
+      this.page = 1
+    },
+    sortType() {
+      this.page = 1
+    },
+    sorting() {
+      this.page = 1
+    },
+  },
   methods: {
     choose(value) {
       this.$emit('choose', value)