save the number of transactions per page in database

src/models/explorer.ts

@@ -64,6 +64,7 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
     public hidden: boolean;
     public queries: TransactionExplorerQuery[];
     public timezoneUsedForDateRange: number;
+    public countPerPage: number;
     public chartType: TransactionExplorerChartTypeValue;
     public categoryDimension: TransactionExplorerDataDimensionType;
     public seriesDimension: TransactionExplorerDataDimensionType;
@@ -77,6 +78,7 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
         false,
         [],
         TimezoneTypeForStatistics.Default.type,
+        15,
         TransactionExplorerChartType.Default.value,
         TransactionExplorerDataDimension.CategoryDimensionDefault.value,
         TransactionExplorerDataDimension.SeriesDimensionDefault.value,
@@ -84,13 +86,14 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
         ChartSortingType.Default.type
     );
 
-    private constructor(id: string, name: string, displayOrder: number, hidden: boolean, queries: TransactionExplorerQuery[], timezoneUsedForDateRange: number, chartType: TransactionExplorerChartTypeValue, categoryDimension: TransactionExplorerDataDimensionType, seriesDimension: TransactionExplorerDataDimensionType, valueMetric: TransactionExplorerValueMetricType, chartSortingType: number) {
+    private constructor(id: string, name: string, displayOrder: number, hidden: boolean, queries: TransactionExplorerQuery[], timezoneUsedForDateRange: number, countPerPage: number, chartType: TransactionExplorerChartTypeValue, categoryDimension: TransactionExplorerDataDimensionType, seriesDimension: TransactionExplorerDataDimensionType, valueMetric: TransactionExplorerValueMetricType, chartSortingType: number) {
         this.id = id;
         this.name = name;
         this.displayOrder = displayOrder;
         this.hidden = hidden;
         this.queries = queries;
         this.timezoneUsedForDateRange = timezoneUsedForDateRange;
+        this.countPerPage = countPerPage;
         this.chartType = chartType;
         this.categoryDimension = categoryDimension;
         this.seriesDimension = seriesDimension;
@@ -102,6 +105,7 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
         return {
             queries: this.queries.map(q => q.toJsonObject()),
             timezoneUsedForDateRange: this.timezoneUsedForDateRange,
+            countPerPage: this.countPerPage,
             chartType: this.chartType,
             categoryDimension: this.categoryDimension,
             seriesDimension: this.seriesDimension,
@@ -131,6 +135,7 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
         const data = explorerResponse.data;
         const queries: TransactionExplorerQuery[] = [];
         let timezoneUsedForDateRange = InsightsExplorer.Default.timezoneUsedForDateRange;
+        let countPerPage = InsightsExplorer.Default.countPerPage;
         let chartType = InsightsExplorer.Default.chartType;
         let categoryDimension = InsightsExplorer.Default.categoryDimension;
         let seriesDimension = InsightsExplorer.Default.seriesDimension;
@@ -154,6 +159,10 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
                 timezoneUsedForDateRange = data['timezoneUsedForDateRange'] as number;
             }
 
+            if (typeof data['countPerPage'] === 'number') {
+                countPerPage = data['countPerPage'] as number;
+            }
+
             if (typeof data['chartType'] === 'string') {
                 chartType = data['chartType'] as TransactionExplorerChartTypeValue;
             }
@@ -182,6 +191,7 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
             explorerResponse.hidden,
             queries,
             timezoneUsedForDateRange,
+            countPerPage,
             chartType,
             categoryDimension,
             seriesDimension,
@@ -198,6 +208,7 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
             false,
             [TransactionExplorerQuery.create(newQueryId)],
             InsightsExplorer.Default.timezoneUsedForDateRange,
+            InsightsExplorer.Default.countPerPage,
             InsightsExplorer.Default.chartType,
             InsightsExplorer.Default.categoryDimension,
             InsightsExplorer.Default.seriesDimension,

src/views/desktop/insights/tabs/ExplorerDataTableTab.vue

@@ -12,7 +12,7 @@
                         :disabled="loading || disabled"
                         :label="tt('Transactions Per Page')"
                         :items="allPageCounts"
-                        v-model="countPerPage"
+                        v-model="currentExplorer.countPerPage"
                     />
                 </div>
             </v-col>
@@ -27,7 +27,7 @@
         :headers="dataTableHeaders"
         :items="filteredTransactions"
         :hover="true"
-        v-model:items-per-page="countPerPage"
+        v-model:items-per-page="currentExplorer.countPerPage"
         v-model:page="currentPage"
     >
         <template #item.time="{ item }">
@@ -121,9 +121,8 @@ import type { NameNumeralValue } from '@/core/base.ts';
 import type { NumeralSystem } from '@/core/numeral.ts';
 import { TransactionType } from '@/core/transaction.ts';
 
-import {
+import type { TransactionInsightDataItem } from '@/models/transaction.ts';
-    type TransactionInsightDataItem
+import type { InsightsExplorer} from '@/models/explorer.ts';
-} from '@/models/transaction.ts';
 
 import { replaceAll } from '@/lib/common.ts';
 
@@ -164,11 +163,12 @@ const userStore = useUserStore();
 const explorersStore = useExplorersStore();
 
 const currentPage = ref<number>(1);
-const countPerPage = ref<number>(15);
 
 const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
 const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
 
+const currentExplorer = computed<InsightsExplorer>(() => explorersStore.currentInsightsExplorer);
+
 const filteredTransactions = computed<TransactionInsightDataItem[]>(() => explorersStore.filteredTransactions);
 
 const allPageCounts = computed<NameNumeralValue[]>(() => {
@@ -187,7 +187,7 @@ const allPageCounts = computed<NameNumeralValue[]>(() => {
 const skeletonData = computed<number[]>(() => {
     const data: number[] = [];
 
-    for (let i = 0; i < countPerPage.value; i++) {
+    for (let i = 0; i < currentExplorer.value.countPerPage; i++) {
         data.push(i);
     }
 
@@ -200,7 +200,7 @@ const totalPageCount = computed<number>(() => {
     }
 
     const count = filteredTransactions.value.length;
-    return Math.ceil(count / countPerPage.value);
+    return Math.ceil(count / currentExplorer.value.countPerPage);
 });
 
 const dataTableHeaders = computed<object[]>(() => {