show the reason why the transaction, account, and category cannot be saved on the save button in desktop version

src/views/base/accounts/AccountEditPageBase.ts

@@ -44,6 +44,28 @@ export function useAccountEditPageBaseBase() {
         }
     });
 
+    const inputEmptyProblemMessage = computed<string | null>(() => {
+        let problemMessage = getInputEmptyProblemMessage(account.value, false);
+
+        if (problemMessage) {
+            return problemMessage;
+        }
+
+        if (account.value.type === AccountType.MultiSubAccounts.type) {
+            for (let i = 0; i < subAccounts.value.length; i++) {
+                problemMessage = getInputEmptyProblemMessage(subAccounts.value[i], true);
+
+                if (problemMessage) {
+                    return problemMessage;
+                }
+            }
+        }
+
+        return null;
+    });
+
+    const inputIsEmpty = computed<boolean>(() => !!inputEmptyProblemMessage.value);
+
     const allAccountCategories = computed<LocalizedAccountCategory[]>(() => getAllAccountCategories());
     const allAccountTypes = computed<TypeAndDisplayName[]>(() => getAllAccountTypes());
 
@@ -95,42 +117,6 @@ export function useAccountEditPageBaseBase() {
         return account.id === '' || account.id === '0';
     }
 
-    function isInputEmpty(): boolean {
-        const isAccountEmpty = !!getInputEmptyProblemMessage(account.value, false);
-
-        if (isAccountEmpty) {
-            return true;
-        }
-
-        if (account.value.type === AccountType.MultiSubAccounts.type) {
-            for (let i = 0; i < subAccounts.value.length; i++) {
-                const isSubAccountEmpty = !!getInputEmptyProblemMessage(subAccounts.value[i], true);
-
-                if (isSubAccountEmpty) {
-                    return true;
-                }
-            }
-        }
-
-        return false;
-    }
-
-    function getAccountOrSubAccountProblemMessage(): string | null {
-        let problemMessage = getInputEmptyProblemMessage(account.value, false);
-
-        if (!problemMessage && account.value.type === AccountType.MultiSubAccounts.type) {
-            for (let i = 0; i < subAccounts.value.length; i++) {
-                problemMessage = getInputEmptyProblemMessage(subAccounts.value[i], true);
-
-                if (problemMessage) {
-                    break;
-                }
-            }
-        }
-
-        return problemMessage;
-    }
-
     function addSubAccount(): boolean {
         if (account.value.type !== AccountType.MultiSubAccounts.type) {
             return false;
@@ -170,6 +156,8 @@ export function useAccountEditPageBaseBase() {
         // computed states
         title,
         saveButtonTitle,
+        inputEmptyProblemMessage,
+        inputIsEmpty,
         allAccountCategories,
         allAccountTypes,
         allAvailableMonthDays,
@@ -177,8 +165,6 @@ export function useAccountEditPageBaseBase() {
         // functions
         getAccountCreditCardStatementDate,
         isNewAccount,
-        isInputEmpty,
-        getAccountOrSubAccountProblemMessage,
         addSubAccount,
         setAccount
     };

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

@@ -169,10 +169,16 @@
             </v-card-text>
             <v-card-text class="overflow-y-visible">
                 <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
-                    <v-btn :disabled="isInputEmpty() || loading || submitting" @click="save">
+                    <v-tooltip :disabled="!inputIsEmpty" :text="inputEmptyProblemMessage ? tt(inputEmptyProblemMessage) : ''">
-                        {{ tt(saveButtonTitle) }}
+                        <template v-slot:activator="{ props }">
-                        <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
+                            <div v-bind="props" class="d-inline-block">
-                    </v-btn>
+                                <v-btn :disabled="inputIsEmpty || loading || submitting" @click="save">
+                                    {{ tt(saveButtonTitle) }}
+                                    <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
+                                </v-btn>
+                            </div>
+                        </template>
+                    </v-tooltip>
                     <v-btn color="secondary" variant="tonal"
                            :disabled="loading || submitting" @click="cancel">{{ tt('Cancel') }}</v-btn>
                 </div>
@@ -228,13 +234,13 @@ const {
     subAccounts,
     title,
     saveButtonTitle,
+    inputEmptyProblemMessage,
+    inputIsEmpty,
     allAccountCategories,
     allAccountTypes,
     allAvailableMonthDays,
     isAccountSupportCreditCardStatementDate,
     isNewAccount,
-    isInputEmpty,
-    getAccountOrSubAccountProblemMessage,
     addSubAccount,
     setAccount
 } = useAccountEditPageBaseBase();
@@ -325,7 +331,7 @@ function open(options?: { id?: string, currentAccount?: Account, category?: numb
 }
 
 function save(): void {
-    const problemMessage = getAccountOrSubAccountProblemMessage();
+    const problemMessage = inputEmptyProblemMessage.value;
 
     if (problemMessage) {
         snackbar.value?.showMessage(problemMessage);

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

@@ -79,10 +79,16 @@
             </v-card-text>
             <v-card-text class="overflow-y-visible">
                 <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
-                    <v-btn :disabled="inputIsEmpty || loading || submitting" @click="save">
+                    <v-tooltip :disabled="!inputIsEmpty" :text="inputEmptyProblemMessage ? tt(inputEmptyProblemMessage) : ''">
-                        {{ tt(saveButtonTitle) }}
+                        <template v-slot:activator="{ props }">
-                        <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
+                            <div v-bind="props" class="d-inline-block">
-                    </v-btn>
+                                <v-btn :disabled="inputIsEmpty || loading || submitting" @click="save">
+                                    {{ tt(saveButtonTitle) }}
+                                    <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
+                                </v-btn>
+                            </div>
+                        </template>
+                    </v-tooltip>
                     <v-btn color="secondary" variant="tonal"
                            :disabled="loading || submitting" @click="cancel">{{ tt('Cancel') }}</v-btn>
                 </div>

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

@@ -418,10 +418,17 @@
             </v-card-text>
             <v-card-text class="overflow-y-visible">
                 <div class="w-100 d-flex justify-center flex-wrap mt-2 mt-sm-4 mt-md-6 gap-4">
-                    <v-btn :disabled="inputIsEmpty || loading || submitting" v-if="mode !== TransactionEditPageMode.View" @click="save">
+                    <v-tooltip :disabled="!inputIsEmpty" :text="inputEmptyProblemMessage ? tt(inputEmptyProblemMessage) : ''">
-                        {{ tt(saveButtonTitle) }}
+                        <template v-slot:activator="{ props }">
-                        <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
+                            <div v-bind="props" class="d-inline-block">
-                    </v-btn>
+                                <v-btn :disabled="inputIsEmpty || loading || submitting"
+                                       v-if="mode !== TransactionEditPageMode.View" @click="save">
+                                    {{ tt(saveButtonTitle) }}
+                                    <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
+                                </v-btn>
+                            </div>
+                        </template>
+                    </v-tooltip>
                     <v-btn-group variant="tonal" density="comfortable"
                                  v-if="mode === TransactionEditPageMode.View && transaction.type !== TransactionType.ModifyBalance">
                         <v-btn :disabled="loading || submitting"

src/views/mobile/accounts/EditPage.vue

@@ -5,7 +5,7 @@
             <f7-nav-title :title="tt(title)"></f7-nav-title>
             <f7-nav-right>
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': account.type !== AccountType.MultiSubAccounts.type }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :class="{ 'disabled': isInputEmpty() || submitting }" :text="tt(saveButtonTitle)" @click="save"></f7-link>
+                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="tt(saveButtonTitle)" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -567,14 +567,14 @@ const {
     subAccounts,
     title,
     saveButtonTitle,
+    inputEmptyProblemMessage,
+    inputIsEmpty,
     allAccountCategories,
     allAccountTypes,
     allAvailableMonthDays,
     isAccountSupportCreditCardStatementDate,
     getAccountCreditCardStatementDate,
     isNewAccount,
-    isInputEmpty,
-    getAccountOrSubAccountProblemMessage,
     addSubAccount,
     setAccount
 } = useAccountEditPageBaseBase();
@@ -658,7 +658,7 @@ function init(): void {
 
 function save(): void {
     const router = props.f7router;
-    const problemMessage = getAccountOrSubAccountProblemMessage();
+    const problemMessage = inputEmptyProblemMessage.value;
 
     if (problemMessage) {
         showAlert(problemMessage);