From 89d5cc31af221907d7e49e794c349e33bb17df59 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 12 Jan 2025 16:52:00 +0800
Subject: [PATCH] migrate amount input to composition API and typescript

---
 src/components/desktop/AmountInput.vue | 567 +++++++++++++------------
 src/locales/helper.js                  |  11 +-
 2 files changed, 291 insertions(+), 287 deletions(-)

diff --git a/src/components/desktop/AmountInput.vue b/src/components/desktop/AmountInput.vue
index b737df07..f5414c78 100644
--- a/src/components/desktop/AmountInput.vue
+++ b/src/components/desktop/AmountInput.vue
@@ -29,298 +29,311 @@
     </v-text-field>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.ts';
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
 
+import { useI18n } from '@/locales/helpers.ts';
+
+import type { CurrencyPrependAndAppendText } from '@/core/currency.ts';
 import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
 import { removeAll } from '@/lib/common.ts';
 import logger from '@/lib/logger.ts';
 
-export default {
-    props: [
-        'class',
-        'color',
-        'density',
-        'currency',
-        'showCurrency',
-        'label',
-        'placeholder',
-        'persistentPlaceholder',
-        'disabled',
-        'readonly',
-        'hide',
-        'enableRules',
-        'modelValue'
-    ],
-    emits: [
-        'update:modelValue'
-    ],
-    data() {
-        const self = this;
-        const userStore = useUserStore();
+const {
+    tt,
+    getCurrentDecimalSeparator,
+    getCurrentDigitGroupingSymbol,
+    parseAmount,
+    formatAmount,
+    getAmountPrependAndAppendText
+} = useI18n();
 
-        return {
-            currentValue: self.getFormattedValue(userStore, self.modelValue),
-            rules: [
-                (v) => {
-                    if (v === '') {
-                        return self.$t('Amount value is not number');
-                    }
+const props = defineProps<{
+    class?: string,
+    color?: string,
+    density?: string,
+    currency: string,
+    showCurrency?: boolean,
+    label?: string,
+    placeholder?: string,
+    persistentPlaceholder?: boolean,
+    disabled?: boolean,
+    readonly?: boolean,
+    hide?: boolean,
+    enableRules?: boolean,
+    modelValue: number
+}>();
 
-                    try {
-                        const val = self.$locale.parseAmount(userStore, v);
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: number): void;
+}>();
 
-                        if (Number.isNaN(val) || !Number.isFinite(val)) {
-                            return self.$t('Amount value is not number');
-                        }
-
-                        return (val >= TRANSACTION_MIN_AMOUNT && val <= TRANSACTION_MAX_AMOUNT) || self.$t('Amount value exceeds limitation');
-                    } catch (ex) {
-                        logger.warn('cannot parse amount in amount input, original value is ' + v, ex);
-                        return self.$t('Amount value is not number');
-                    }
-                }
-            ]
+const rules = [
+    (v: string) => {
+        if (v === '') {
+            return tt('Amount value is not number');
         }
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useUserStore),
-        extraClass() {
-            let finalClass = this.class;
 
-            if (this.color) {
-                finalClass += ` text-${this.color}`;
+        try {
+            const val = parseAmount(v);
+
+            if (Number.isNaN(val) || !Number.isFinite(val)) {
+                return tt('Amount value is not number');
             }
 
-            if (this.currency && this.prependText) {
-                finalClass += ` has-pretend-text`;
-            }
-
-            return finalClass;
-        },
-        prependText() {
-            if (!this.currency || !this.showCurrency) {
-                return '';
-            }
-
-            const texts = this.getDisplayCurrencyPrependAndAppendText();
-
-            if (!texts) {
-                return '';
-            }
-
-            return texts.prependText;
-        },
-        appendText() {
-            if (!this.currency || !this.showCurrency) {
-                return '';
-            }
-
-            const texts = this.getDisplayCurrencyPrependAndAppendText();
-
-            if (!texts) {
-                return '';
-            }
-
-            return texts.appendText;
-        }
-    },
-    watch: {
-        'currency': function () {
-            const newStringValue = this.getFormattedValue(this.userStore, this.modelValue);
-
-            if (!(newStringValue === '0' && this.currentValue === '')) {
-                this.currentValue = newStringValue;
-            }
-        },
-        'modelValue': function (newValue) {
-            const numericCurrentValue = this.$locale.parseAmount(this.userStore, this.currentValue);
-
-            if (newValue !== numericCurrentValue) {
-                const newStringValue = this.getFormattedValue(this.userStore, newValue);
-
-                if (!(newStringValue === '0' && this.currentValue === '')) {
-                    this.currentValue = newStringValue;
-                }
-            }
-        },
-        'currentValue': function (newValue) {
-            let finalValue = '';
-
-            if (newValue) {
-                const decimalSeparator = this.$locale.getCurrentDecimalSeparator(this.userStore);
-
-                for (let i = 0; i < newValue.length; i++) {
-                    if (!('0' <= newValue[i] && newValue[i] <= '9') && newValue[i] !== '-' && newValue[i] !== decimalSeparator) {
-                        break;
-                    }
-
-                    finalValue += newValue[i];
-                }
-            }
-
-            if (finalValue !== newValue) {
-                this.currentValue = finalValue;
-            } else {
-                this.$emit('update:modelValue', this.$locale.parseAmount(this.userStore, finalValue));
-            }
-        }
-    },
-    methods: {
-        onKeyUpDown(e) {
-            if (e.altKey || e.ctrlKey || e.metaKey || (e.key.indexOf('F') === 0 && (e.key.length === 2 || e.key.length === 3))
-                || e.key === 'ArrowLeft' || e.key === 'ArrowRight'
-                || e.key === 'Home' || e.key === 'End' || e.key === 'Tab'
-                || e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Del') {
-                return;
-            }
-
-            const digitGroupingSymbol = this.$locale.getCurrentDigitGroupingSymbol(this.userStore);
-            const decimalSeparator = this.$locale.getCurrentDecimalSeparator(this.userStore);
-
-            if (!('0' <= e.key && e.key <= '9') && e.key !== '-' && e.key !== decimalSeparator) {
-                e.preventDefault();
-                return;
-            }
-
-            let str = e.target.value;
-
-            if (str.indexOf(digitGroupingSymbol) >= 0) {
-                str = removeAll(str, digitGroupingSymbol);
-            }
-
-            if (e.key === '-' && str.lastIndexOf('-') > 0) {
-                const lastMinusPos = str.lastIndexOf('-');
-                e.target.value = str.substring(0, lastMinusPos) + str.substring(lastMinusPos + 1, str.length);
-                this.currentValue = e.target.value;
-                e.preventDefault();
-                return;
-            }
-
-            if (e.key === decimalSeparator && str.indexOf(decimalSeparator) !== str.lastIndexOf(decimalSeparator)) {
-                const lastDecimalSeparatorPos = str.lastIndexOf(decimalSeparator);
-                e.target.value = str.substring(0, lastDecimalSeparatorPos) + str.substring(lastDecimalSeparatorPos + 1, str.length);
-                this.currentValue = e.target.value;
-                e.preventDefault();
-                return;
-            }
-
-            if (e.key === decimalSeparator && (str.indexOf(decimalSeparator) === 0 || (str.indexOf(decimalSeparator) === 1 && str.charAt(0) === '-'))) {
-                const negative = str.charAt(0) === '-';
-
-                if (negative) {
-                    str = str.substring(1);
-                }
-
-                str = (negative ? '-0' : '0') + str;
-                e.target.value = str;
-                this.currentValue = e.target.value;
-                e.preventDefault();
-                return;
-            }
-
-            let decimalLength = 0;
-            const decimalIndex = str.indexOf(decimalSeparator);
-
-            if (decimalIndex >= 0) {
-                decimalLength = str.length - str.indexOf(decimalSeparator) - 1;
-            } else if ((str.startsWith('0') && str.length >= 2) || (str.startsWith('-0') && str.length >= 3)) {
-                const negative = str.charAt(0) === '-';
-
-                if (negative) {
-                    str = str.substring(1);
-                }
-
-                while (str.charAt(0) === '0' && (str.length >= 2 || e.key !== '0')) {
-                    str = str.substring(1);
-                }
-
-                e.target.value = (negative ? '-' : '') + str;
-                this.currentValue = e.target.value;
-                e.preventDefault();
-                return;
-                }
-
-            if (decimalLength > 2) {
-                e.target.value = str.substring(0, Math.min(decimalIndex + 3, str.length - 1));
-                this.currentValue = e.target.value;
-                e.preventDefault();
-                return;
-            }
-
-            try {
-                const val = this.$locale.parseAmount(this.userStore, str);
-                const finalValue = this.getValidFormattedValue(val, str, decimalIndex >= 0);
-
-                if (finalValue !== str) {
-                    e.target.value = finalValue;
-                    this.currentValue = finalValue;
-                    e.preventDefault();
-                }
-            } catch (ex) {
-                ex.target.value = '0';
-            }
-        },
-        onPaste(e) {
-            if (!e.clipboardData) {
-                e.preventDefault();
-                return;
-            }
-
-            const text = e.clipboardData.getData('Text');
-
-            if (!text) {
-                e.preventDefault();
-                return;
-            }
-
-            const value = this.$locale.parseAmount(this.userStore, text);
-            const textualValue = this.getFormattedValue(this.userStore, value);
-            const decimalSeparator = this.$locale.getCurrentDecimalSeparator(this.userStore);
-            const hasDecimalSeparator = text.indexOf(decimalSeparator) >= 0;
-
-            this.currentValue = this.getValidFormattedValue(value, textualValue, hasDecimalSeparator);
-            e.preventDefault();
-        },
-        getValidFormattedValue(value, textualValue, hasDecimalSeparator) {
-            let maxLength = TRANSACTION_MAX_AMOUNT.toString().length;
-
-            if (value < 0) {
-                maxLength = TRANSACTION_MIN_AMOUNT.toString().length;
-            }
-
-            if (value < TRANSACTION_MIN_AMOUNT) {
-                return this.getFormattedValue(this.userStore, TRANSACTION_MIN_AMOUNT);
-            } else if (value > TRANSACTION_MAX_AMOUNT) {
-                return this.getFormattedValue(this.userStore, TRANSACTION_MAX_AMOUNT);
-            }
-
-            if (!hasDecimalSeparator && textualValue.length > maxLength) {
-                return textualValue.substring(0, maxLength);
-            } else if (hasDecimalSeparator && textualValue.length > maxLength + 1) {
-                return textualValue.substring(0, maxLength + 1);
-            }
-
-            return textualValue;
-        },
-        getFormattedValue(userStore, value) {
-            if (!Number.isNaN(value) && Number.isFinite(value)) {
-                const digitGroupingSymbol = this.$locale.getCurrentDigitGroupingSymbol(userStore);
-                return removeAll(this.$locale.formatAmount(userStore, value, this.currency), digitGroupingSymbol);
-            }
-
-            return '0';
-        },
-        getDisplayCurrencyPrependAndAppendText() {
-            const numericCurrentValue = this.$locale.parseAmount(this.userStore, this.currentValue);
-            const isPlural = numericCurrentValue !== 100 && numericCurrentValue !== -100;
-
-            return this.$locale.getAmountPrependAndAppendText(this.settingsStore, this.userStore, this.currency, isPlural);
+            return (val >= TRANSACTION_MIN_AMOUNT && val <= TRANSACTION_MAX_AMOUNT) || tt('Amount value exceeds limitation');
+        } catch (ex) {
+            logger.warn('cannot parse amount in amount input, original value is ' + v, ex);
+            return tt('Amount value is not number');
         }
     }
+];
+
+const currentValue = ref<string>(getFormattedValue(props.modelValue));
+const prependText = computed<string | undefined>(() => {
+    if (!props.currency || !props.showCurrency) {
+        return '';
+    }
+
+    const texts = getDisplayCurrencyPrependAndAppendText();
+
+    if (!texts) {
+        return '';
+    }
+
+    return texts.prependText;
+});
+
+const appendText = computed<string | undefined>(() => {
+    if (!props.currency || !props.showCurrency) {
+        return '';
+    }
+
+    const texts = getDisplayCurrencyPrependAndAppendText();
+
+    if (!texts) {
+        return '';
+    }
+
+    return texts.appendText;
+});
+
+const extraClass = computed<string>(() => {
+    let finalClass = props.class || '';
+
+    if (props.color) {
+        finalClass += ` text-${props.color}`;
+    }
+
+    if (props.currency && prependText.value) {
+        finalClass += ` has-pretend-text`;
+    }
+
+    return finalClass;
+});
+
+function onKeyUpDown(e: KeyboardEvent): void {
+    if (e.altKey || e.ctrlKey || e.metaKey || (e.key.indexOf('F') === 0 && (e.key.length === 2 || e.key.length === 3))
+        || e.key === 'ArrowLeft' || e.key === 'ArrowRight'
+        || e.key === 'Home' || e.key === 'End' || e.key === 'Tab'
+        || e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Del') {
+        return;
+    }
+
+    const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
+    const decimalSeparator = getCurrentDecimalSeparator();
+
+    if (!('0' <= e.key && e.key <= '9') && e.key !== '-' && e.key !== decimalSeparator) {
+        e.preventDefault();
+        return;
+    }
+
+    if (!e.target) {
+        return;
+    }
+
+    const target = e.target as HTMLInputElement;
+
+    let str = target.value;
+
+    if (str.indexOf(digitGroupingSymbol) >= 0) {
+        str = removeAll(str, digitGroupingSymbol);
+    }
+
+    if (e.key === '-' && str.lastIndexOf('-') > 0) {
+        const lastMinusPos = str.lastIndexOf('-');
+        target.value = str.substring(0, lastMinusPos) + str.substring(lastMinusPos + 1, str.length);
+        currentValue.value = target.value;
+        e.preventDefault();
+        return;
+    }
+
+    if (e.key === decimalSeparator && str.indexOf(decimalSeparator) !== str.lastIndexOf(decimalSeparator)) {
+        const lastDecimalSeparatorPos = str.lastIndexOf(decimalSeparator);
+        target.value = str.substring(0, lastDecimalSeparatorPos) + str.substring(lastDecimalSeparatorPos + 1, str.length);
+        currentValue.value = target.value;
+        e.preventDefault();
+        return;
+    }
+
+    if (e.key === decimalSeparator && (str.indexOf(decimalSeparator) === 0 || (str.indexOf(decimalSeparator) === 1 && str.charAt(0) === '-'))) {
+        const negative = str.charAt(0) === '-';
+
+        if (negative) {
+            str = str.substring(1);
+        }
+
+        str = (negative ? '-0' : '0') + str;
+        target.value = str;
+        currentValue.value = target.value;
+        e.preventDefault();
+        return;
+    }
+
+    let decimalLength = 0;
+    const decimalIndex = str.indexOf(decimalSeparator);
+
+    if (decimalIndex >= 0) {
+        decimalLength = str.length - str.indexOf(decimalSeparator) - 1;
+    } else if ((str.startsWith('0') && str.length >= 2) || (str.startsWith('-0') && str.length >= 3)) {
+        const negative = str.charAt(0) === '-';
+
+        if (negative) {
+            str = str.substring(1);
+        }
+
+        while (str.charAt(0) === '0' && (str.length >= 2 || e.key !== '0')) {
+            str = str.substring(1);
+        }
+
+        target.value = (negative ? '-' : '') + str;
+        currentValue.value = target.value;
+        e.preventDefault();
+        return;
+    }
+
+    if (decimalLength > 2) {
+        target.value = str.substring(0, Math.min(decimalIndex + 3, str.length - 1));
+        currentValue.value = target.value;
+        e.preventDefault();
+        return;
+    }
+
+    try {
+        const val = parseAmount(str);
+        const finalValue = getValidFormattedValue(val, str, decimalIndex >= 0);
+
+        if (finalValue !== str) {
+            target.value = finalValue;
+            currentValue.value = finalValue;
+            e.preventDefault();
+        }
+    } catch (ex) {
+        target.value = '0';
+    }
 }
+
+function onPaste(e: ClipboardEvent): void {
+    if (!e.clipboardData) {
+        e.preventDefault();
+        return;
+    }
+
+    const text = e.clipboardData.getData('Text');
+
+    if (!text) {
+        e.preventDefault();
+        return;
+    }
+
+    const value = parseAmount(text);
+    const textualValue = getFormattedValue(value);
+    const decimalSeparator = getCurrentDecimalSeparator();
+    const hasDecimalSeparator = text.indexOf(decimalSeparator) >= 0;
+
+    currentValue.value = getValidFormattedValue(value, textualValue, hasDecimalSeparator);
+    e.preventDefault();
+}
+
+function getValidFormattedValue(value: number, textualValue: string, hasDecimalSeparator: boolean): string {
+    let maxLength = TRANSACTION_MAX_AMOUNT.toString().length;
+
+    if (value < 0) {
+        maxLength = TRANSACTION_MIN_AMOUNT.toString().length;
+    }
+
+    if (value < TRANSACTION_MIN_AMOUNT) {
+        return getFormattedValue(TRANSACTION_MIN_AMOUNT);
+    } else if (value > TRANSACTION_MAX_AMOUNT) {
+        return getFormattedValue(TRANSACTION_MAX_AMOUNT);
+    }
+
+    if (!hasDecimalSeparator && textualValue.length > maxLength) {
+        return textualValue.substring(0, maxLength);
+    } else if (hasDecimalSeparator && textualValue.length > maxLength + 1) {
+        return textualValue.substring(0, maxLength + 1);
+    }
+
+    return textualValue;
+}
+
+function getFormattedValue(value: number): string {
+    if (!Number.isNaN(value) && Number.isFinite(value)) {
+        const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
+        return removeAll(formatAmount(value, props.currency), digitGroupingSymbol);
+    }
+
+    return '0';
+}
+
+function getDisplayCurrencyPrependAndAppendText(): CurrencyPrependAndAppendText | null {
+    const numericCurrentValue = parseAmount(currentValue.value);
+    const isPlural = numericCurrentValue !== 100 && numericCurrentValue !== -100;
+
+    return getAmountPrependAndAppendText(props.currency, isPlural);
+}
+
+watch(() => props.currency, () => {
+    const newStringValue = getFormattedValue(props.modelValue);
+
+    if (!(newStringValue === '0' && currentValue.value === '')) {
+        currentValue.value = newStringValue;
+    }
+});
+
+watch(() => props.modelValue, (newValue) => {
+    const numericCurrentValue = parseAmount(currentValue.value);
+
+    if (newValue !== numericCurrentValue) {
+        const newStringValue = getFormattedValue(newValue);
+
+        if (!(newStringValue === '0' && currentValue.value === '')) {
+            currentValue.value = newStringValue;
+        }
+    }
+});
+
+watch(currentValue, (newValue) => {
+    let finalValue = '';
+
+    if (newValue) {
+        const decimalSeparator = getCurrentDecimalSeparator();
+
+        for (let i = 0; i < newValue.length; i++) {
+            if (!('0' <= newValue[i] && newValue[i] <= '9') && newValue[i] !== '-' && newValue[i] !== decimalSeparator) {
+                break;
+            }
+
+            finalValue += newValue[i];
+        }
+    }
+
+    if (finalValue !== newValue) {
+        currentValue.value = finalValue;
+    } else {
+        emit('update:modelValue', parseAmount(finalValue));
+    }
+});
 </script>
 
 <style>
diff --git a/src/locales/helper.js b/src/locales/helper.js
index ed510c08..cb5be7b8 100644
--- a/src/locales/helper.js
+++ b/src/locales/helper.js
@@ -53,8 +53,7 @@ import {
 
 import {
     getCurrencyFraction,
-    appendCurrencySymbol,
-    getAmountPrependAndAppendCurrencySymbol
+    appendCurrencySymbol
 } from '@/lib/currency.ts';
 
 import {
@@ -981,13 +980,6 @@ function getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRat
     return getAdaptiveDisplayAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, numberFormatOptions);
 }
 
-function getAmountPrependAndAppendText(currencyCode, userStore, settingsStore, isPlural, translateFn) {
-    const currencyDisplayType = getCurrentCurrencyDisplayType(translateFn, userStore);
-    const currencyUnit = getCurrencyUnitName(currencyCode, isPlural, translateFn);
-    const currencyName = getCurrencyName(currencyCode, translateFn);
-    return getAmountPrependAndAppendCurrencySymbol(currencyDisplayType, currencyCode, currencyUnit, currencyName, isPlural);
-}
-
 function getAllExpenseIncomeAmountColors(translateFn, expenseOrIncome) {
     const ret = [];
     let defaultAmountName = '';
@@ -1548,7 +1540,6 @@ export function i18nFunctions(i18nGlobal) {
         formatAmountWithCurrency: (settingsStore, userStore, value, currencyCode) => getFormattedAmountWithCurrency(value, currencyCode, i18nGlobal.t, userStore, settingsStore),
         formatExchangeRateAmount: (userStore, value) => getFormattedExchangeRateAmount(value, i18nGlobal.t, userStore),
         getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, i18nGlobal.t, userStore),
-        getAmountPrependAndAppendText: (settingsStore, userStore, currencyCode, isPlural) => getAmountPrependAndAppendText(currencyCode, userStore, settingsStore, isPlural, i18nGlobal.t),
         getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 1),
         getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 2),
         getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t),