amount input supports formula (#130)

src/components/desktop/AmountInput.vue

@@ -4,13 +4,48 @@
                   :density="density" :readonly="!!readonly" :disabled="!!disabled"
                   :label="label" :placeholder="placeholder"
                   :persistent-placeholder="!!persistentPlaceholder"
-                  :rules="enableRules ? rules : []" v-model="currentValue" v-if="!hide"
+                  :rules="enableRules ? rules : []" v-model="currentValue" v-if="!hide && !formulaMode"
                   @keydown="onKeyUpDown" @keyup="onKeyUpDown" @paste="onPaste" @click="onClick">
         <template #prepend-inner v-if="currency && prependText">
             <div>{{ prependText }}</div>
         </template>
-        <template #append-inner v-if="currency && appendText">
+        <template #append-inner>
-            <div class="text-no-wrap">{{ appendText }}</div>
+            <div class="text-no-wrap" v-if="currency && appendText">{{ appendText }}</div>
+            <v-tooltip :text="tt('Enter formula mode')">
+                <template v-slot:activator="{ props }">
+                    <v-icon class="ml-2" :icon="mdiCalculatorVariantOutline"
+                            @keydown.enter="enterFormulaMode" @keydown.space="enterFormulaMode" @click="enterFormulaMode"
+                            v-bind="props" v-if="enableFormula && !formulaMode"></v-icon>
+                </template>
+            </v-tooltip>
+        </template>
+    </v-text-field>
+    <v-text-field type="text" class="text-field-with-colored-label" :class="extraClass"
+                  :color="color" :base-color="color"
+                  :density="density" :readonly="!!readonly" :disabled="!!disabled"
+                  :label="label" :placeholder="placeholder"
+                  :persistent-placeholder="!!persistentPlaceholder"
+                  v-model="currentFormula" v-if="!hide && formulaMode"
+                  @keydown.enter="calculateFormula" @click="onClick">
+        <template #prepend-inner v-if="currency && prependText">
+            <div>{{ prependText }}</div>
+        </template>
+        <template #append-inner>
+            <div class="text-no-wrap" v-if="currency && appendText">{{ appendText }}</div>
+            <v-tooltip :text="tt('Calculate formula result')">
+                <template v-slot:activator="{ props }">
+                    <v-icon class="ml-2" color="primary" :icon="mdiCheck"
+                            @click="calculateFormula" v-bind="props"
+                            v-if="formulaMode"></v-icon>
+                </template>
+            </v-tooltip>
+            <v-tooltip :text="tt('Exit formula mode')">
+                <template v-slot:activator="{ props }">
+                    <v-icon class="ml-2" color="secondary" :icon="mdiClose"
+                            @click="exitFormulaMode" v-bind="props"
+                            v-if="formulaMode"></v-icon>
+                </template>
+            </v-tooltip>
         </template>
     </v-text-field>
     <v-text-field type="password" class="text-field-with-colored-label" :class="extraClass"
@@ -27,19 +62,33 @@
             <div class="text-no-wrap">{{ appendText }}</div>
         </template>
     </v-text-field>
+
+    <snack-bar ref="snackbar" />
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, computed, useTemplateRef, watch } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
+import { DecimalSeparator } from '@/core/numeral.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 { isNumber, replaceAll, removeAll } from '@/lib/common.ts';
+import { evaluateExpression } from '@/lib/evaluator.ts';
 import type { ComponentDensity } from '@/lib/ui/desktop.ts';
 import logger from '@/lib/logger.ts';
 
+import {
+    mdiCalculatorVariantOutline,
+    mdiCheck,
+    mdiClose
+} from '@mdi/js';
+
+type SnackBarType = InstanceType<typeof SnackBar>;
+
 const props = defineProps<{
     class?: string;
     color?: string;
@@ -53,6 +102,7 @@ const props = defineProps<{
     readonly?: boolean;
     hide?: boolean;
     enableRules?: boolean;
+    enableFormula?: boolean;
     flipNegative?: boolean;
     modelValue: number;
 }>();
@@ -67,9 +117,12 @@ const {
     getCurrentDigitGroupingSymbol,
     parseAmount,
     formatAmount,
+    formatNumber,
     getAmountPrependAndAppendText
 } = useI18n();
 
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
 const rules = [
     (v: string) => {
         if (v === '') {
@@ -92,6 +145,8 @@ const rules = [
 ];
 
 const currentValue = ref<string>(getInitedFormattedValue(props.modelValue, props.flipNegative));
+const currentFormula = ref<string>('');
+const formulaMode = ref<boolean>(false);
 
 const prependText = computed<string | undefined>(() => {
     if (!props.currency || !props.showCurrency) {
@@ -135,6 +190,44 @@ const extraClass = computed<string>(() => {
     return finalClass;
 });
 
+function enterFormulaMode(): void {
+    if (!props.enableFormula) {
+        return;
+    }
+
+    currentFormula.value = currentValue.value;
+    formulaMode.value = true;
+}
+
+function calculateFormula(): void {
+    const systemDecimalSeparator = DecimalSeparator.Dot.symbol;
+    const decimalSeparator = getCurrentDecimalSeparator();
+    let finalFormula = currentFormula.value;
+
+    if (systemDecimalSeparator !== decimalSeparator && finalFormula.indexOf(systemDecimalSeparator) >= 0) {
+        snackbar.value?.showMessage('Formula is invalid');
+        return;
+    } else if (systemDecimalSeparator !== decimalSeparator) {
+        finalFormula = replaceAll(currentFormula.value, decimalSeparator, systemDecimalSeparator);
+    }
+
+    const calculatedValue = evaluateExpression(finalFormula);
+
+    if (isNumber(calculatedValue)) {
+        const textualValue = formatNumber(calculatedValue, 2);
+        const hasDecimalSeparator = textualValue.indexOf(decimalSeparator) >= 0;
+        currentValue.value = getValidFormattedValue(calculatedValue, textualValue, hasDecimalSeparator);
+        formulaMode.value = false;
+    } else {
+        snackbar.value?.showMessage('Formula is invalid');
+    }
+}
+
+function exitFormulaMode(): void {
+    formulaMode.value = false;
+    currentFormula.value = '';
+}
+
 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'

src/lib/evaluator.ts

@@ -0,0 +1,200 @@
+import { replaceAll } from './common.ts';
+
+import logger from './logger.ts';
+
+const operatorPriority: Record<string, number> = {
+    '+': 1,
+    '-': 1,
+    '*': 2,
+    '/': 2,
+};
+
+function toPostfixExprTokens(expr: string): string[] | null {
+    const finalTokens: string[] = [];
+    const operatorStack: string[] = [];
+    let currentNumberBuilder = '';
+    let isLastTokenOperator = true;
+
+    expr = replaceAll(expr, ' ', '');
+
+    for (let i = 0; i < expr.length; i++) {
+        const ch = expr[i];
+
+        // number
+        if ('0' <= ch && ch <= '9' || ch === '.') {
+            currentNumberBuilder += ch;
+            continue
+        } else if (ch === '-' && i + 1 < expr.length && '0' <= expr[i + 1] && expr[i + 1] <= '9' && currentNumberBuilder.length === 0 && isLastTokenOperator) {
+            currentNumberBuilder += ch;
+            continue
+        }
+
+        // operator or parenthesis
+        if (currentNumberBuilder.length > 0) {
+            finalTokens.push(currentNumberBuilder);
+            currentNumberBuilder = '';
+            isLastTokenOperator = false;
+        }
+
+        switch (ch) {
+            case '+':
+            case '-':
+            case '*':
+            case '/':
+                if (ch === '-' && isLastTokenOperator) {
+                    currentNumberBuilder += ch;
+                    continue;
+                }
+
+                while (operatorStack.length > 0) {
+                    const topOperator = operatorStack[operatorStack.length - 1];
+
+                    if (topOperator === '(') {
+                        break;
+                    }
+
+                    if (operatorPriority[topOperator] >= operatorPriority[ch]) {
+                        finalTokens.push(topOperator);
+                        operatorStack.pop();
+                    } else {
+                        break;
+                    }
+                }
+
+                operatorStack.push(ch);
+                isLastTokenOperator = true;
+                break;
+            case '(':
+                operatorStack.push(ch);
+                isLastTokenOperator = true;
+                break;
+            case ')':
+                let hasLeftParenthesis = false;
+
+                while (operatorStack.length > 0) {
+                    const topOperator = operatorStack.pop() as string;
+
+                    if (topOperator === '(') {
+                        hasLeftParenthesis = true;
+                        break;
+                    }
+
+                    finalTokens.push(topOperator);
+                }
+
+                if (!hasLeftParenthesis) {
+                    logger.warn(`cannot parse expression "${expr}", because missing left parenthesis`);
+                    return null;
+                }
+
+                isLastTokenOperator = false;
+                break;
+            default:
+                logger.warn(`cannot parse expression "${expr}", because containing unknown token "${ch}"`);
+                return null;
+        }
+    }
+
+    if (currentNumberBuilder.length > 0) {
+        finalTokens.push(currentNumberBuilder);
+    }
+
+    while (operatorStack.length > 0) {
+        const topOperator = operatorStack.pop() as string;
+
+        if (topOperator === '(') {
+            logger.warn(`cannot parse expression "${expr}", because missing right parenthesis`);
+            return null;
+        }
+
+        finalTokens.push(topOperator);
+    }
+
+    return finalTokens;
+}
+
+function evaluatePostfixExpr(tokens: string[]): number | null {
+    const stack: number[] = [];
+
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+
+        switch (token) {
+            case '+':
+            case '-':
+            case '*':
+            case '/': // operators
+                if (stack.length < 2) {
+                    logger.warn(`cannot evaluate expression "${tokens.join(' ')}", because not enough operands`);
+                    return null;
+                }
+
+                // pop the top two operands
+                const b = stack.pop() as number;
+                const a = stack.pop() as number;
+
+                // evaluate the operation
+                let result: number;
+                switch (token) {
+                    case '+':
+                        result = a + b;
+                        break;
+                    case '-':
+                        result = a - b;
+                        break;
+                    case '*':
+                        result = a * b;
+                        break;
+                    case '/':
+                        if (b === 0) {
+                            logger.warn(`cannot evaluate expression "${tokens.join(' ')}", because division by zero`);
+                            return null;
+                        }
+                        result = a / b;
+                        break;
+                    default:
+                        return null;
+                }
+
+                // push the result back to the stack
+                stack.push(result);
+                break;
+            default: // operands
+                const num = parseFloat(token);
+
+                if (isNaN(num)) {
+                    logger.warn(`cannot evaluate expression "${tokens.join(' ')}", because containing invalid number`);
+                    return null;
+                }
+
+                stack.push(num);
+                break;
+        }
+    }
+
+    if (stack.length !== 1) {
+        logger.warn(`cannot evaluate expression "${tokens.join(' ')}", because missing operator`);
+        return null;
+    }
+
+    return stack[0];
+}
+export function evaluateExpression(expr: string): number | undefined {
+    if (!expr) {
+        return undefined;
+    }
+
+    const postfixExprTokens = toPostfixExprTokens(expr);
+
+    if (!postfixExprTokens) {
+        return undefined;
+    }
+
+    const result = evaluatePostfixExpr(postfixExprTokens);
+
+    if (result === null) {
+        return undefined;
+    }
+
+    return result;
+}

src/locales/de.json

@@ -1751,6 +1751,10 @@
     "Transaction Detail": "Transaktionsdetails",
     "No transaction data": "Keine Transaktionsdaten",
     "Are you sure you want to delete this transaction?": "Sind Sie sicher, dass Sie diese Transaktion löschen möchten?",
+    "Enter formula mode": "Enter formula mode",
+    "Exit formula mode": "Exit formula mode",
+    "Calculate formula result": "Calculate formula result",
+    "Formula is invalid": "Formula is invalid",
     "Amount value is not number": "Betragswert ist keine Zahl",
     "Amount value exceeds limitation": "Betragswert überschreitet das Limit",
     "Unable to delete this transaction": "Transaktion kann nicht gelöscht werden",

src/locales/en.json

@@ -1751,6 +1751,10 @@
     "Transaction Detail": "Transaction Detail",
     "No transaction data": "No transaction data",
     "Are you sure you want to delete this transaction?": "Are you sure you want to delete this transaction?",
+    "Enter formula mode": "Enter formula mode",
+    "Exit formula mode": "Exit formula mode",
+    "Calculate formula result": "Calculate formula result",
+    "Formula is invalid": "Formula is invalid",
     "Amount value is not number": "Amount value is not number",
     "Amount value exceeds limitation": "Amount value exceeds limitation",
     "Unable to delete this transaction": "Unable to delete this transaction",

src/locales/es.json

@@ -1750,6 +1750,10 @@
     "Transaction Detail": "Detalle de la transacción",
     "No transaction data": "Sin datos de transacción",
     "Are you sure you want to delete this transaction?": "¿Está seguro de que desea eliminar esta transacción?",
+    "Enter formula mode": "Enter formula mode",
+    "Exit formula mode": "Exit formula mode",
+    "Calculate formula result": "Calculate formula result",
+    "Formula is invalid": "Formula is invalid",
     "Amount value is not number": "El valor de la cantidad no es un número",
     "Amount value exceeds limitation": "El valor del importe supera el límite",
     "Unable to delete this transaction": "No se puede eliminar esta transacción",

src/locales/it.json

@@ -1751,6 +1751,10 @@
     "Transaction Detail": "Dettaglio transazione",
     "No transaction data": "Nessun dato di transazione",
     "Are you sure you want to delete this transaction?": "Sei sicuro di voler eliminare questa transazione?",
+    "Enter formula mode": "Enter formula mode",
+    "Exit formula mode": "Exit formula mode",
+    "Calculate formula result": "Calculate formula result",
+    "Formula is invalid": "Formula is invalid",
     "Amount value is not number": "Il valore dell'importo non è un numero",
     "Amount value exceeds limitation": "Il valore dell'importo supera il limite",
     "Unable to delete this transaction": "Impossibile eliminare questa transazione",

src/locales/ja.json

@@ -1751,6 +1751,10 @@
     "Transaction Detail": "取引の詳細",
     "No transaction data": "取引データがありません",
     "Are you sure you want to delete this transaction?": "この取引を削除しますか？",
+    "Enter formula mode": "Enter formula mode",
+    "Exit formula mode": "Exit formula mode",
+    "Calculate formula result": "Calculate formula result",
+    "Formula is invalid": "Formula is invalid",
     "Amount value is not number": "金額の値が数字ではありません",
     "Amount value exceeds limitation": "金額の値が制限を超えています",
     "Unable to delete this transaction": "この取引を削除できません",

src/locales/ru.json

@@ -1751,6 +1751,10 @@
     "Transaction Detail": "Детали транзакции",
     "No transaction data": "Нет данных о транзакциях",
     "Are you sure you want to delete this transaction?": "Вы уверены, что хотите удалить эту транзакцию?",
+    "Enter formula mode": "Enter formula mode",
+    "Exit formula mode": "Exit formula mode",
+    "Calculate formula result": "Calculate formula result",
+    "Formula is invalid": "Formula is invalid",
     "Amount value is not number": "Значение суммы не является числом",
     "Amount value exceeds limitation": "Значение суммы превышает ограничение",
     "Unable to delete this transaction": "Не удалось удалить эту транзакцию",

src/locales/uk.json

@@ -1751,6 +1751,10 @@
     "Transaction Detail": "Деталі транзакції",
     "No transaction data": "Немає даних про транзакції",
     "Are you sure you want to delete this transaction?": "Ви впевнені, що хочете видалити цю транзакцію?",
+    "Enter formula mode": "Enter formula mode",
+    "Exit formula mode": "Exit formula mode",
+    "Calculate formula result": "Calculate formula result",
+    "Formula is invalid": "Formula is invalid",
     "Amount value is not number": "Значення суми не є числом",
     "Amount value exceeds limitation": "Значення суми перевищує допустиме обмеження",
     "Unable to delete this transaction": "Не вдалося видалити транзакцію",

src/locales/vi.json

@@ -1751,6 +1751,10 @@
     "Transaction Detail": "Chi tiết giao dịch",
     "No transaction data": "Không có dữ liệu giao dịch",
     "Are you sure you want to delete this transaction?": "Bạn có chắc chắn muốn xóa giao dịch này không?",
+    "Enter formula mode": "Enter formula mode",
+    "Exit formula mode": "Exit formula mode",
+    "Calculate formula result": "Calculate formula result",
+    "Formula is invalid": "Formula is invalid",
     "Amount value is not number": "Giá trị số tiền không phải là số",
     "Amount value exceeds limitation": "Giá trị số tiền vượt quá giới hạn",
     "Unable to delete this transaction": "Không thể xóa giao dịch này",

src/locales/zh_Hans.json

@@ -1751,6 +1751,10 @@
     "Transaction Detail": "交易详情",
     "No transaction data": "没有交易数据",
     "Are you sure you want to delete this transaction?": "您确定要删除该交易？",
+    "Enter formula mode": "进入公式模式",
+    "Exit formula mode": "退出公式模式",
+    "Calculate formula result": "计算公式结果",
+    "Formula is invalid": "公式无效",
     "Amount value is not number": "金额值不是数值",
     "Amount value exceeds limitation": "金额数值超出限制",
     "Unable to delete this transaction": "无法删除该交易",

src/locales/zh_Hant.json

@@ -1751,6 +1751,10 @@
     "Transaction Detail": "交易明細",
     "No transaction data": "沒有交易資料",
     "Are you sure you want to delete this transaction?": "您確定要刪除這筆交易？",
+    "Enter formula mode": "進入公式模式",
+    "Exit formula mode": "退出公式模式",
+    "Calculate formula result": "計算公式結果",
+    "Formula is invalid": "公式無效",
     "Amount value is not number": "金額值不是數值",
     "Amount value exceeds limitation": "金額數值超出限制",
     "Unable to delete this transaction": "無法刪除此交易",

src/views/desktop/transactions/list/dialogs/EditDialog.vue

@@ -106,6 +106,7 @@
                                                   :hide="transaction.hideAmount"
                                                   :label="tt(sourceAmountName)"
                                                   :placeholder="tt(sourceAmountName)"
+                                                  :enable-formula="mode !== TransactionEditPageMode.View"
                                                   v-model="transaction.sourceAmount"/>
                                 </v-col>
                                 <v-col cols="12" :md="6" v-if="transaction.type === TransactionType.Transfer">
@@ -118,6 +119,7 @@
                                                   :hide="transaction.hideAmount"
                                                   :label="transferInAmountTitle"
                                                   :placeholder="tt('Transfer In Amount')"
+                                                  :enable-formula="mode !== TransactionEditPageMode.View"
                                                   v-model="transaction.destinationAmount"/>
                                 </v-col>
                                 <v-col cols="12" md="12" v-if="transaction.type === TransactionType.Expense">