From 000c2b9ab02e37d60b24e2f3b48d23613c599cda Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 4 Jan 2025 19:37:19 +0800
Subject: [PATCH] migrate desktop ui utils to typescript

---
 src/components/desktop/ColorSelect.vue        |  2 +-
 src/components/desktop/IconSelect.vue         |  2 +-
 .../desktop/ScheduleFrequencySelect.vue       |  2 +-
 src/components/desktop/TwoColumnSelect.vue    |  2 +-
 src/lib/ui/{desktop.js => desktop.ts}         | 26 +++++++++----------
 src/views/desktop/categories/ListPage.vue     |  2 +-
 src/views/desktop/transactions/ListPage.vue   |  2 +-
 7 files changed, 19 insertions(+), 19 deletions(-)
 rename src/lib/ui/{desktop.js => desktop.ts} (66%)

diff --git a/src/components/desktop/ColorSelect.vue b/src/components/desktop/ColorSelect.vue
index 2a6e41e9..6eb19d96 100644
--- a/src/components/desktop/ColorSelect.vue
+++ b/src/components/desktop/ColorSelect.vue
@@ -42,7 +42,7 @@
 import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getColorsInRows } from '@/lib/color.ts';
-import { scrollToSelectedItem } from '@/lib/ui/desktop.js';
+import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
 
 import {
     mdiSquareRounded,
diff --git a/src/components/desktop/IconSelect.vue b/src/components/desktop/IconSelect.vue
index 343681f6..80da7267 100644
--- a/src/components/desktop/IconSelect.vue
+++ b/src/components/desktop/IconSelect.vue
@@ -39,7 +39,7 @@
 <script>
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getIconsInRows } from '@/lib/icon.ts';
-import { scrollToSelectedItem } from '@/lib/ui/desktop.js';
+import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
 
 import {
     mdiCheck
diff --git a/src/components/desktop/ScheduleFrequencySelect.vue b/src/components/desktop/ScheduleFrequencySelect.vue
index 69c9877a..b7cc2aed 100644
--- a/src/components/desktop/ScheduleFrequencySelect.vue
+++ b/src/components/desktop/ScheduleFrequencySelect.vue
@@ -60,7 +60,7 @@ import { useUserStore } from '@/stores/user.js';
 
 import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
 import { sortNumbersArray } from '@/lib/common.ts';
-import { scrollToSelectedItem } from '@/lib/ui/desktop.js';
+import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
 
 export default {
     props: [
diff --git a/src/components/desktop/TwoColumnSelect.vue b/src/components/desktop/TwoColumnSelect.vue
index 6bdd2a05..a87dae3b 100644
--- a/src/components/desktop/TwoColumnSelect.vue
+++ b/src/components/desktop/TwoColumnSelect.vue
@@ -80,7 +80,7 @@ import {
     getNameByKeyValue,
     getPrimaryValueBySecondaryValue
 } from '@/lib/common.ts';
-import { scrollToSelectedItem } from '@/lib/ui/desktop.js';
+import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
 
 import {
     mdiChevronRight
diff --git a/src/lib/ui/desktop.js b/src/lib/ui/desktop.ts
similarity index 66%
rename from src/lib/ui/desktop.js
rename to src/lib/ui/desktop.ts
index b06a4daa..5e37401f 100644
--- a/src/lib/ui/desktop.js
+++ b/src/lib/ui/desktop.ts
@@ -1,4 +1,4 @@
-export function getOuterHeight(element) {
+export function getOuterHeight(element: HTMLElement | null): number {
     if (!element) {
         return 0;
     }
@@ -10,7 +10,7 @@ export function getOuterHeight(element) {
         .reduce((prev, cur) => prev + cur);
 }
 
-export function getNavSideBarOuterHeight(element) {
+export function getNavSideBarOuterHeight(element: HTMLElement | null): number {
     if (!element) {
         return 0;
     }
@@ -30,22 +30,22 @@ export function getNavSideBarOuterHeight(element) {
     let totalHeight = 0;
 
     for (let i = 0; i < children.length; i++) {
-        totalHeight += getOuterHeight(children[i]);
+        totalHeight += getOuterHeight(children[i] as HTMLElement);
     }
 
     return totalHeight;
 }
 
-export function getCssValue(element, name) {
+export function getCssValue(element: HTMLElement | null, name: string): string {
     if (!element) {
-        return 0;
+        return '0';
     }
 
     const computedStyle = window.getComputedStyle(element);
     return computedStyle.getPropertyValue(name);
 }
 
-export function scrollToSelectedItem(parentEl, containerSelector, selectedItemSelector) {
+export function scrollToSelectedItem(parentEl: HTMLElement | null, containerSelector: string, selectedItemSelector: string): void {
     if (!parentEl) {
         return;
     }
@@ -59,7 +59,7 @@ export function scrollToSelectedItem(parentEl, containerSelector, selectedItemSe
             return;
         }
 
-        container = lists[0];
+        container = lists[0] as HTMLElement;
     }
 
     const selectedItems = container.querySelectorAll(selectedItemSelector);
@@ -68,7 +68,7 @@ export function scrollToSelectedItem(parentEl, containerSelector, selectedItemSe
         return;
     }
 
-    const selectedItem = selectedItems[0];
+    const selectedItem = selectedItems[0] as HTMLElement;
     const containerOuterHeight = getOuterHeight(container);
     const selectedItemOuterHeight = getOuterHeight(selectedItem);
 
@@ -77,12 +77,12 @@ export function scrollToSelectedItem(parentEl, containerSelector, selectedItemSe
 
     if (selectedItems.length > 1) {
 
-        let firstSelectedItem = selectedItems[0];
-        let lastSelectedItem = selectedItems[selectedItems.length - 1];
+        const firstSelectedItem = selectedItems[0] as HTMLElement;
+        const lastSelectedItem = selectedItems[selectedItems.length - 1] as HTMLElement;
 
-        let firstSelectedItemInTop = firstSelectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10);
-        let lastSelectedItemInTop = lastSelectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10);
-        let lastSelectedItemInBottom = lastSelectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10)
+        const firstSelectedItemInTop = firstSelectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10);
+        const lastSelectedItemInTop = lastSelectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10);
+        const lastSelectedItemInBottom = lastSelectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10)
             - (containerOuterHeight - selectedItemOuterHeight);
 
         targetPos = (firstSelectedItemInTop + lastSelectedItemInBottom) / 2;
diff --git a/src/views/desktop/categories/ListPage.vue b/src/views/desktop/categories/ListPage.vue
index 178b5f1d..f4cb5dcf 100644
--- a/src/views/desktop/categories/ListPage.vue
+++ b/src/views/desktop/categories/ListPage.vue
@@ -205,7 +205,7 @@ import {
     isNoAvailableCategory,
     getAvailableCategoryCount
 } from '@/lib/category.js';
-import { getNavSideBarOuterHeight } from '@/lib/ui/desktop.js';
+import { getNavSideBarOuterHeight } from '@/lib/ui/desktop.ts';
 
 import {
     mdiRefresh,
diff --git a/src/views/desktop/transactions/ListPage.vue b/src/views/desktop/transactions/ListPage.vue
index 6f393c8d..1b1c7d44 100644
--- a/src/views/desktop/transactions/ListPage.vue
+++ b/src/views/desktop/transactions/ListPage.vue
@@ -630,7 +630,7 @@ import {
 import { getUnifiedSelectedAccountsCurrencyOrDefaultCurrency } from '@/lib/account.js';
 import { getTransactionDisplayAmount } from '@/lib/transaction.js';
 import { isDataImportingEnabled } from '@/lib/server_settings.ts';
-import { scrollToSelectedItem } from '@/lib/ui/desktop.js';
+import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
 
 import {
     mdiMagnify,