From b857c9e4d97afa15c9fbe6862009f8f6d4d7544b Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Tue, 8 Oct 2024 07:09:43 +0200
Subject: [PATCH] fixed saving page item number in model list

---
 vue3/src/pages/ModelEditPage.vue       |  2 --
 vue3/src/pages/ModelListPage.vue       | 24 ++++++------------------
 vue3/src/stores/UserPreferenceStore.ts |  2 ++
 3 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/vue3/src/pages/ModelEditPage.vue b/vue3/src/pages/ModelEditPage.vue
index d78cde50e..bf41e1b1e 100644
--- a/vue3/src/pages/ModelEditPage.vue
+++ b/vue3/src/pages/ModelEditPage.vue
@@ -25,8 +25,6 @@
 <script setup lang="ts">
 
 import FoodEditor from "@/components/model_editors/FoodEditor.vue";
-import {onMounted, ref} from "vue";
-import {ApiApi, Food} from "@/openapi";
 import {useRouter} from "vue-router";
 import UnitEditor from "@/components/model_editors/UnitEditor.vue";
 import KeywordEditor from "@/components/model_editors/KeywordEditor.vue";
diff --git a/vue3/src/pages/ModelListPage.vue b/vue3/src/pages/ModelListPage.vue
index 507af81e2..e75ff2660 100644
--- a/vue3/src/pages/ModelListPage.vue
+++ b/vue3/src/pages/ModelListPage.vue
@@ -23,7 +23,7 @@
                     {{ $t(genericModel.model.localizationKey) }}</span>
                 <v-btn class="float-right" icon="$create" color="create">
                     <i class="fa-solid fa-plus"></i>
-                    <model-edit-dialog :close-after-create="false" :model="model" @create="loadItems({tablePage, tablePageSize})"></model-edit-dialog>
+                    <model-edit-dialog :close-after-create="false" :model="model" @create="loadItems({page: tablePage, itemsPerPage: useUserPreferenceStore().deviceSettings.general_tableItemsPerPage})"></model-edit-dialog>
                 </v-btn>
             </v-col>
         </v-row>
@@ -40,7 +40,7 @@
                     :items-per-page-options="itemsPerPageOptions"
                     :show-select="tableShowSelect"
                     :page="tablePage"
-                    :items-per-page="tablePageSize"
+                    :items-per-page="useUserPreferenceStore().deviceSettings.general_tableItemsPerPage"
                 >
                     <template v-slot:item.action="{ item }">
                         <v-btn color="edit" :to="{name: 'ModelEditPage', params: {model: model, id: item.id}}">
@@ -76,6 +76,7 @@ import {VDataTable} from "vuetify/components";
 import {useUrlSearchParams} from "@vueuse/core";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
 import {useRouter} from "vue-router";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 
 type VDataTableProps = InstanceType<typeof VDataTable>['$props']
 
@@ -106,7 +107,6 @@ const tableHeaders: VDataTableProps['headers'] = [
 
 const tablePage = ref(1)
 const tablePageInitialized = ref(false) // TODO workaround until vuetify bug is fixed
-const tablePageSize = ref(10)
 
 const tableShowSelect = ref(true)
 
@@ -121,19 +121,14 @@ const genericModel = ref({} as GenericModel)
 
 // when navigating to ModelListPage from ModelListPage with a different model lifecycle hooks are not called so watch for change here
 watch(() => props.model, () => {
-    console.log('PAGE SIZE in watch params is ', params.pageSize)
     genericModel.value = getGenericModelFromString(props.model, t)
-    loadItems({page: 1, itemsPerPage: Number(params.pageSize)})
+    loadItems({page: 1, itemsPerPage: useUserPreferenceStore().deviceSettings.general_tableItemsPerPage})
 })
 
 /**
  * select model class before mount because template renders (and requests item load) before onMounted is called
  */
 onBeforeMount(() => {
-    // TODO this whole params thing is strange, properly review the code once vuetify fixes their table (see below)
-    if (Number(params.pageSize) != tablePageSize.value) {
-        tablePageSize.value = Number(params.pageSize)
-    }
     try {
         genericModel.value = getGenericModelFromString(props.model, t)
     } catch (Error) {
@@ -151,6 +146,7 @@ onBeforeMount(() => {
  * @param sortBy
  * @param groupBy
  */
+// TODO proper typescript signature, this is just taken from vuetify example, must be a better solution
 function loadItems({page, itemsPerPage, search, sortBy, groupBy}) {
     console.log('load items called', page, params.page, itemsPerPage, params.pageSize)
     loading.value = true
@@ -159,7 +155,7 @@ function loadItems({page, itemsPerPage, search, sortBy, groupBy}) {
         page = Number(params.page)
     }
     tablePageInitialized.value = true
-
+    params.page = page.toString()
     genericModel.value.list({page: page, pageSize: itemsPerPage, query: search}).then((r: any) => {
         items.value = r.results
         itemCount.value = r.count
@@ -167,14 +163,6 @@ function loadItems({page, itemsPerPage, search, sortBy, groupBy}) {
         useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
     }).finally(() => {
         loading.value = false
-
-
-        nextTick(() => {
-            console.log('setting parameters to ', page.toString(), itemsPerPage.toString())
-            params.page = page.toString()
-            params.pageSize = itemsPerPage.toString()
-        })
-
         tablePage.value = page // TODO remove once page bug is fixed
     })
 }
diff --git a/vue3/src/stores/UserPreferenceStore.ts b/vue3/src/stores/UserPreferenceStore.ts
index 9884579de..9a400918a 100644
--- a/vue3/src/stores/UserPreferenceStore.ts
+++ b/vue3/src/stores/UserPreferenceStore.ts
@@ -24,6 +24,8 @@ class DeviceSettings {
     mealplan_startingDayOfWeek = 1
     mealplan_displayWeekNumbers = true
 
+    general_tableItemsPerPage = 10
+
 }
 
 export const useUserPreferenceStore = defineStore('user_preference_store', () => {