migrate transaction category store to composition API and typescript

mayswind · Jan 12, 2025 · 2be3299 · 2be3299
1 parent abb26ac
commit 2be3299
Show file tree

Hide file tree

Showing 28 changed files with 818 additions and 663 deletions.
diff --git a/src/lib/category.js → src/lib/category.ts b/src/lib/category.js → src/lib/category.ts
diff --git a/src/lib/services.ts b/src/lib/services.ts
@@ -445,8 +445,8 @@ export default {
     removeUnusedTransactionPicture: (req: TransactionPictureUnusedDeleteRequest): ApiResponsePromise<boolean> => {
         return axios.post<ApiResponse<boolean>>('v1/transaction/pictures/remove_unused.json', req);
     },
-    getAllTransactionCategories: (): ApiResponsePromise<TransactionCategoryInfoResponse[]> => {
-        return axios.get<ApiResponse<TransactionCategoryInfoResponse[]>>('v1/transaction/categories/list.json');
+    getAllTransactionCategories: (): ApiResponsePromise<Record<number, TransactionCategoryInfoResponse[]>> => {
+        return axios.get<ApiResponse<Record<number, TransactionCategoryInfoResponse[]>>>('v1/transaction/categories/list.json');
     },
     getTransactionCategory: (req: { id: string }): ApiResponsePromise<TransactionCategoryInfoResponse> => {
         return axios.get<ApiResponse<TransactionCategoryInfoResponse>>('v1/transaction/categories/get.json?id=' + req.id);

diff --git a/src/lib/transaction.js b/src/lib/transaction.js
@@ -12,7 +12,7 @@ import {
     isSubCategoryIdAvailable,
     getFirstAvailableCategoryId,
     getFirstAvailableSubCategoryId
-} from './category.js';
+} from './category.ts';
 
 function getDisplayAmount(amount, currency, hideAmount, formatAmountWithCurrencyFunc) {
     if (hideAmount) {

diff --git a/src/models/transaction_category.ts b/src/models/transaction_category.ts
@@ -1,3 +1,125 @@
+import { CategoryType } from '@/core/category.ts';
+import { DEFAULT_CATEGORY_ICON_ID } from '@/consts/icon.ts';
+import { DEFAULT_CATEGORY_COLOR } from '@/consts/color.ts';
+
+export class TransactionCategory implements TransactionCategoryInfoResponse {
+    public id: string;
+    public name: string;
+    public parentId: string;
+    public type: number;
+    public icon: string;
+    public color: string;
+    public comment: string;
+    public displayOrder: number;
+    public visible: boolean;
+    public secondaryCategories?: TransactionCategory[];
+
+    private constructor(id: string, name: string, parentId: string, type: number, icon: string, color: string, comment: string, displayOrder: number, visible: boolean, secondaryCategories?: TransactionCategory[]) {
+        this.id = id;
+        this.name = name;
+        this.parentId = parentId;
+        this.type = type;
+        this.icon = icon;
+        this.color = color;
+        this.comment = comment;
+        this.displayOrder = displayOrder;
+        this.visible = visible;
+
+        if (secondaryCategories) {
+            this.secondaryCategories = secondaryCategories;
+        } else if (!secondaryCategories && (!parentId || parentId === '0')) {
+            this.secondaryCategories = [];
+        }
+    }
+
+    get hidden(): boolean {
+        return !this.visible;
+    }
+
+    get subCategories(): TransactionCategoryInfoResponse[] | undefined {
+        if (typeof this.secondaryCategories === 'undefined') {
+            return undefined;
+        }
+
+        const ret: TransactionCategoryInfoResponse[] = [];
+
+        if (this.secondaryCategories) {
+            for (const subCategory of this.secondaryCategories) {
+                ret.push(subCategory);
+            }
+        }
+
+        return ret;
+    }
+
+    public toCreateRequest(clientSessionId: string): TransactionCategoryCreateRequest {
+        return {
+            name: this.name,
+            type: this.type,
+            parentId: this.parentId,
+            icon: this.icon,
+            color: this.color,
+            comment: this.comment,
+            clientSessionId: clientSessionId
+        };
+    }
+
+    public toModifyRequest(): TransactionCategoryModifyRequest {
+        return {
+            id: this.id,
+            name: this.name,
+            parentId: this.parentId,
+            icon: this.icon,
+            color: this.color,
+            comment: this.comment,
+            hidden: !this.visible
+        };
+    }
+
+    public static of(categoryResponse: TransactionCategoryInfoResponse): TransactionCategory {
+        return new TransactionCategory(
+            categoryResponse.id,
+            categoryResponse.name,
+            categoryResponse.parentId,
+            categoryResponse.type,
+            categoryResponse.icon,
+            categoryResponse.color,
+            categoryResponse.comment,
+            categoryResponse.displayOrder,
+            !categoryResponse.hidden,
+            categoryResponse.subCategories ? TransactionCategory.ofMany(categoryResponse.subCategories) : undefined
+        );
+    }
+
+    public static ofMany(categoryResponses: TransactionCategoryInfoResponse[]): TransactionCategory[] {
+        const tags: TransactionCategory[] = [];
+
+        for (const tagResponse of categoryResponses) {
+            tags.push(TransactionCategory.of(tagResponse));
+        }
+
+        return tags;
+    }
+
+    public static ofMap(categoriesByType: Record<number, TransactionCategoryInfoResponse[]>): Record<number, TransactionCategory[]> {
+        const ret: Record<number, TransactionCategory[]> = {};
+
+        for (const categoryType in categoriesByType) {
+            if (!Object.prototype.hasOwnProperty.call(categoriesByType, categoryType)) {
+                continue;
+            }
+
+            ret[categoryType] = TransactionCategory.ofMany(categoriesByType[categoryType]);
+        }
+
+        return ret;
+    }
+
+    public static createNewCategory(type?: CategoryType, parentId?: string): TransactionCategory {
+        return new TransactionCategory('', '', parentId || '0', type || CategoryType.Income, DEFAULT_CATEGORY_ICON_ID, DEFAULT_CATEGORY_COLOR, '', 0, true);
+    }
+}
+
 export interface TransactionCategoryCreateRequest {
     readonly name: string;
     readonly type: number;
@@ -61,3 +183,13 @@ export interface TransactionCategoryInfoResponse {
     readonly hidden: boolean;
     readonly subCategories?: TransactionCategoryInfoResponse[];
 }
+
+export interface TransactionCategoriesWithVisibleCount {
+    readonly type: number;
+    readonly allCategories: TransactionCategory[];
+    readonly allVisibleCategoryCount: number;
+    readonly firstVisibleCategoryIndex: number;
+    readonly allSubCategories: Record<string, TransactionCategory[]>;
+    readonly allVisibleSubCategoryCounts: Record<string, number>;
+    readonly allFirstVisibleSubCategoryIndexes: Record<string, number>;
+}
diff --git a/src/stores/index.js b/src/stores/index.js
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { useSettingsStore } from './setting.ts';
 import { useUserStore } from './user.ts';
 import { useAccountsStore } from './account.js';
-import { useTransactionCategoriesStore } from './transactionCategory.js';
+import { useTransactionCategoriesStore } from './transactionCategory.ts';
 import { useTransactionTagsStore } from './transactionTag.ts';
 import { useTransactionTemplatesStore } from './transactionTemplate.js';
 import { useTransactionsStore } from './transaction.js';

diff --git a/src/stores/statistics.js b/src/stores/statistics.js
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { useSettingsStore } from './setting.ts';
 import { useUserStore } from './user.ts';
 import { useAccountsStore } from './account.js';
-import { useTransactionCategoriesStore } from './transactionCategory.js';
+import { useTransactionCategoriesStore } from './transactionCategory.ts';
 import { useExchangeRatesStore } from './exchangeRates.ts';
 
 import { DateRangeScene, DateRange } from '@/core/datetime';
@@ -43,7 +43,7 @@ import {
 } from '@/lib/account.js';
 import {
     getFinalCategoryIdsByFilteredCategoryIds
-} from '@/lib/category.js';
+} from '@/lib/category.ts';
 import {
     sortStatisticsItems
 } from '@/lib/statistics.ts';

diff --git a/src/stores/transaction.js b/src/stores/transaction.js
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { useSettingsStore } from './setting.ts';
 import { useUserStore } from './user.ts';
 import { useAccountsStore } from './account.js';
-import { useTransactionCategoriesStore } from './transactionCategory.js';
+import { useTransactionCategoriesStore } from './transactionCategory.ts';
 import { useOverviewStore } from './overview.ts';
 import { useStatisticsStore } from './statistics.js';
 import { useExchangeRatesStore } from './exchangeRates.ts';
@@ -39,7 +39,7 @@ import {
 } from '@/lib/datetime.ts';
 import { getAmountWithDecimalNumberCount } from '@/lib/numeral.ts';
 import { getCurrencyFraction } from '@/lib/currency.ts';
-import { getFirstAvailableCategoryId } from '@/lib/category.js';
+import { getFirstAvailableCategoryId } from '@/lib/category.ts';
 
 const emptyTransactionResult = {
     items: [],