From d4b4e673a91111584f562e7c821a13fdbf60b978 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 13 Jan 2021 15:32:08 -0500
Subject: [PATCH] Persist current page in layout query

Fixes #3644
---
 app/src/layouts/cards/cards.vue     | 55 +++++++++++++++++++----------
 app/src/layouts/tabular/tabular.vue | 42 ++++++++++------------
 2 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index 2296a97755..7fe6cee9d1 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -160,6 +160,7 @@ type layoutQuery = {
 	fields?: string[];
 	sort?: string;
 	limit?: number;
+	page?: number;
 };
 
 export default defineComponent({
@@ -349,10 +350,43 @@ export default defineComponent({
 		}
 
 		function uselayoutQuery() {
-			const page = ref(1);
+			const page = computed({
+				get() {
+					return _layoutQuery.value?.page || 1;
+				},
+				set(newPage: number) {
+					_layoutQuery.value = {
+						...(_layoutQuery.value || {}),
+						page: newPage,
+					};
+				},
+			});
 
-			const sort = createlayoutQueryOption<string>('sort', fieldsInCollection.value[0].field);
-			const limit = createlayoutQueryOption<number>('limit', 25);
+			const sort = computed({
+				get() {
+					return _layoutQuery.value?.sort || fieldsInCollection.value[0].field;
+				},
+				set(newSort: string) {
+					_layoutQuery.value = {
+						...(_layoutQuery.value || {}),
+						page: 1,
+						sort: newSort,
+					};
+				},
+			});
+
+			const limit = computed({
+				get() {
+					return _layoutQuery.value?.limit || 25;
+				},
+				set(newLimit: number) {
+					_layoutQuery.value = {
+						...(_layoutQuery.value || {}),
+						page: 1,
+						limit: newLimit,
+					};
+				},
+			});
 
 			const fields = computed<string[]>(() => {
 				if (!primaryKeyField.value) return [];
@@ -393,21 +427,6 @@ export default defineComponent({
 			});
 
 			return { sort, limit, page, fields };
-
-			function createlayoutQueryOption<T>(key: keyof layoutQuery, defaultValue: any) {
-				return computed<T>({
-					get() {
-						return _layoutQuery.value?.[key] || defaultValue;
-					},
-					set(newValue: T) {
-						page.value = 1;
-						_layoutQuery.value = {
-							..._layoutQuery.value,
-							[key]: newValue,
-						};
-					},
-				});
-			}
 		}
 
 		function getLinkForItem(item: Record<string, any>) {
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index 4ac587d8e8..fdfd078775 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -113,12 +113,7 @@
 
 					<div v-if="loading === false && items.length >= 25" class="per-page">
 						<span>{{ $t('per_page') }}</span>
-						<v-select
-							@input="limit = +$event"
-							:value="`${limit}`"
-							:items="['25', '50', '100', '250']"
-							inline
-						/>
+						<v-select @input="limit = +$event" :value="`${limit}`" :items="['25', '50', '100', '250']" inline />
 					</div>
 				</div>
 			</template>
@@ -324,22 +319,26 @@ export default defineComponent({
 		}
 
 		function useItemOptions() {
-			const page = ref(1);
-
-			watch(
-				() => props.collection,
-				() => (page.value = 1),
-				{ immediate: true }
-			);
+			const page = computed({
+				get() {
+					return _layoutQuery.value?.page || 1;
+				},
+				set(newPage: number) {
+					_layoutQuery.value = {
+						...(_layoutQuery.value || {}),
+						page: newPage,
+					};
+				},
+			});
 
 			const sort = computed({
 				get() {
 					return _layoutQuery.value?.sort || primaryKeyField.value?.field;
 				},
 				set(newSort: string) {
-					page.value = 1;
 					_layoutQuery.value = {
 						...(_layoutQuery.value || {}),
+						page: 1,
 						sort: newSort,
 					};
 				},
@@ -347,12 +346,12 @@ export default defineComponent({
 
 			const limit = computed({
 				get() {
-					return _layoutOptions.value?.limit || 25;
+					return _layoutQuery.value?.limit || 25;
 				},
 				set(newLimit: number) {
-					page.value = 1;
-					_layoutOptions.value = {
-						...(_layoutOptions.value || {}),
+					_layoutQuery.value = {
+						...(_layoutQuery.value || {}),
+						page: 1,
 						limit: newLimit,
 					};
 				},
@@ -370,8 +369,7 @@ export default defineComponent({
 						if (Array.isArray(_layoutQuery.value.fields)) return _layoutQuery.value.fields;
 					}
 
-					const fields =
-						_layoutQuery.value?.fields || fieldsInCollection.value.slice(0, 4).map(({ field }) => field);
+					const fields = _layoutQuery.value?.fields || fieldsInCollection.value.slice(0, 4).map(({ field }) => field);
 
 					return fields;
 				},
@@ -438,9 +436,7 @@ export default defineComponent({
 							type: field.type,
 							field: field.field,
 						},
-						sortable:
-							['json', 'o2m', 'm2o', 'file', 'files', 'alias', 'presentation'].includes(field.type) ===
-							false,
+						sortable: ['json', 'o2m', 'm2o', 'file', 'files', 'alias', 'presentation'].includes(field.type) === false,
 					}));
 				},
 				set(val) {