clear all transactions of specified account (#228)

src/views/desktop/accounts/ListPage.vue

@@ -248,6 +248,13 @@
                                                                            @click="edit(element)">
                                                                         {{ tt('Edit') }}
                                                                     </v-btn>
+                                                                    <v-btn class="px-2 ms-1" density="comfortable" color="default" variant="text"
+                                                                           :class="{ 'd-none': loading, 'hover-display': !loading }"
+                                                                           :disabled="loading" :prepend-icon="mdiEraser"
+                                                                           v-if="element.type === AccountType.SingleAccount.type || element.getSubAccount(activeSubAccount[element.id])"
+                                                                           @click="clearAllTransactions(element)">
+                                                                        {{ tt('Clear All Transactions') }}
+                                                                    </v-btn>
                                                                     <v-btn class="px-2 ms-1" density="comfortable" color="default" variant="text"
                                                                            :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                                            :disabled="loading" :prepend-icon="mdiDeleteOutline"
@@ -282,6 +289,7 @@
     <edit-dialog ref="editDialog" />
     <reconciliation-statement-dialog ref="reconciliationStatementDialog"
                                      @error="onShowDateRangeError" />
+    <clear-all-transactions-dialog ref="clearAllTransactionsDialog" />
 
     <date-range-selection-dialog :title="tt('Custom Date Range')"
                                  v-model:show="showCustomDateRangeDialog"
@@ -297,6 +305,7 @@ import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
 import EditDialog from './list/dialogs/EditDialog.vue';
 import ReconciliationStatementDialog from './list/dialogs/ReconciliationStatementDialog.vue';
+import ClearAllTransactionsDialog from '@/views/desktop/accounts/list/dialogs/ClearAllTransactionsDialog.vue';
 import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
 
 import { ref, computed, useTemplateRef, watch } from 'vue';
@@ -322,6 +331,7 @@ import {
     mdiSquareRounded,
     mdiMenu,
     mdiPencilOutline,
+    mdiEraser,
     mdiDeleteOutline,
     mdiListBoxOutline,
     mdiInvoiceListOutline,
@@ -333,6 +343,7 @@ type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
 type SnackBarType = InstanceType<typeof SnackBar>;
 type EditDialogType = InstanceType<typeof EditDialog>;
 type ReconciliationStatementDialogType = InstanceType<typeof ReconciliationStatementDialog>;
+type ClearAllTransactionsDialogType = InstanceType<typeof ClearAllTransactionsDialog>;
 
 const display = useDisplay();
 
@@ -361,6 +372,7 @@ const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 const editDialog = useTemplateRef<EditDialogType>('editDialog');
 const reconciliationStatementDialog = useTemplateRef<ReconciliationStatementDialogType>('reconciliationStatementDialog');
+const clearAllTransactionsDialog = useTemplateRef<ClearAllTransactionsDialogType>('clearAllTransactionsDialog');
 
 const activeAccountCategoryType = ref<number>(AccountCategory.Default.type);
 const activeTab = ref<string>('accountPage');
@@ -513,6 +525,16 @@ function showReconciliationStatementCustomDateRangeDialog(account: Account, date
     });
 }
 
+function clearAllTransactions(account: Account): void {
+    clearAllTransactionsDialog.value?.open(account).then(() => {
+        snackbar.value?.showMessage('All transactions in this account has been cleared');
+
+        if (accountsStore.accountListStateInvalid && !loading.value) {
+            reload(false);
+        }
+    });
+}
+
 function hide(account: Account, targetAccount: Account, hidden: boolean): void {
     loading.value = true;
 

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

@@ -0,0 +1,111 @@
+<template>
+    <v-dialog width="640" :persistent="true" v-model="showState">
+        <v-card class="pa-2 pa-sm-4 pa-md-4">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <h4 class="text-h4 text-error text-wrap">{{ tt('Are you sure you want to clear all transactions?') }}</h4>
+                </div>
+            </template>
+            <v-card-text class="pb-2 text-error">{{ tt('format.misc.clearTransactionsInAccountTip', { account: currentAccount?.name }) }}</v-card-text>
+            <v-card-text class="mb-md-4 w-100 d-flex justify-center">
+                <div class="w-100">
+                    <v-text-field
+                        autocomplete="current-password"
+                        type="password"
+                        variant="underlined"
+                        color="error"
+                        :disabled="clearingData"
+                        :placeholder="tt('Current Password')"
+                        v-model="currentPassword"
+                    />
+                </div>
+            </v-card-text>
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center gap-4">
+                    <v-btn color="error" :disabled="!currentPassword || clearingData" @click="confirm">
+                        {{ tt('Confirm') }}
+                        <v-progress-circular indeterminate size="22" class="ms-2" v-if="clearingData"></v-progress-circular>
+                    </v-btn>
+                    <v-btn color="secondary" variant="tonal" :disabled="clearingData" @click="cancel">
+                        {{ tt('Cancel') }}
+                    </v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+
+    <snack-bar ref="snackbar" />
+</template>
+
+<script setup lang="ts">
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, useTemplateRef } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useRootStore } from '@/stores/index.ts';
+
+import { Account } from '@/models/account.ts';
+
+type SnackBarType = InstanceType<typeof SnackBar>;
+
+const { tt } = useI18n();
+
+const rootStore = useRootStore();
+
+let resolveFunc: (() => void) | null = null;
+let rejectFunc: ((reason?: unknown) => void) | null = null;
+
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+const showState = ref<boolean>(false);
+const clearingData = ref<boolean>(false);
+const currentPassword = ref<string>('');
+const currentAccount = ref<Account | undefined>(undefined);
+
+function open(account: Account): Promise<void> {
+    showState.value = true;
+    clearingData.value = false;
+    currentPassword.value = '';
+    currentAccount.value = account;
+
+    return new Promise((resolve, reject) => {
+        resolveFunc = resolve;
+        rejectFunc = reject;
+    });
+}
+
+function confirm(): void {
+    if (!currentAccount.value || !currentPassword.value) {
+        return;
+    }
+
+    clearingData.value = true;
+
+    rootStore.clearAllUserTransactionsOfAccount({
+        accountId: currentAccount.value.id,
+        password: currentPassword.value
+    }).then(() => {
+        clearingData.value = false;
+
+        resolveFunc?.();
+        showState.value = false;
+    }).catch(error => {
+        clearingData.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function cancel(): void {
+    rejectFunc?.();
+    showState.value = false;
+}
+
+defineExpose({
+    open
+});
+</script>

src/views/mobile/accounts/ListPage.vue

@@ -162,12 +162,16 @@
             <f7-actions-group v-if="accountForMoreActionSheet && accountForMoreActionSheet.type === AccountType.SingleAccount.type">
                 <f7-actions-button @click="showReconciliationStatement(accountForMoreActionSheet)">{{ tt('Reconciliation Statement') }}</f7-actions-button>
             </f7-actions-group>
+            <f7-actions-group v-if="accountForMoreActionSheet && accountForMoreActionSheet.type === AccountType.SingleAccount.type">
+                <f7-actions-button color="red" @click="showPasswordSheetForClearAllTransaction(accountForMoreActionSheet)">{{ tt('Clear All Transactions') }}</f7-actions-button>
+            </f7-actions-group>
             <template v-if="accountForMoreActionSheet && accountForMoreActionSheet.type === AccountType.MultiSubAccounts.type">
                 <f7-actions-group :key="subAccount.id"
                                   v-for="subAccount in accountForMoreActionSheet.subAccounts"
                                   v-show="showHidden || !subAccount.hidden">
                     <f7-actions-label>{{ subAccount.name }}</f7-actions-label>
                     <f7-actions-button @click="showReconciliationStatement(subAccount)">{{ tt('Reconciliation Statement') }}</f7-actions-button>
+                    <f7-actions-button color="red" @click="showPasswordSheetForClearAllTransaction(subAccount)">{{ tt('Clear All Transactions') }}</f7-actions-button>
                 </f7-actions-group>
             </template>
             <f7-actions-group>
@@ -198,6 +202,16 @@
                 <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
             </f7-actions-group>
         </f7-actions>
+
+        <password-input-sheet :title="tt('Are you sure you want to clear all transactions?')"
+                              :hint="tt('format.misc.clearTransactionsInAccountTip', { account: accountToClearTransactions?.name ?? 'undefined' })"
+                              :confirm-disabled="clearingData"
+                              :cancel-disabled="clearingData"
+                              color="red"
+                              v-model:show="showInputPasswordSheetForClearAllTransactions"
+                              v-model="currentPasswordForClearData"
+                              @password:confirm="clearAllTransactions">
+        </password-input-sheet>
     </f7-page>
 </template>
 
@@ -209,6 +223,7 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
 import { useAccountListPageBaseBase } from '@/views/base/accounts/AccountListPageBase.ts';
 
+import { useRootStore } from '@/stores/index.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 
 import { TextDirection } from '@/core/text.ts';
@@ -238,15 +253,20 @@ const {
     accountBalance
 } = useAccountListPageBaseBase();
 
+const rootStore = useRootStore();
 const accountsStore = useAccountsStore();
 
 const loadingError = ref<unknown | null>(null);
 const sortable = ref<boolean>(false);
 const accountForMoreActionSheet = ref<Account | null>(null);
 const accountToDelete = ref<Account | null>(null);
+const accountToClearTransactions = ref<Account | null>(null);
+const currentPasswordForClearData = ref<string>('');
+const clearingData = ref<boolean>(false);
 const showAccountMoreActionSheet = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
 const showDeleteActionSheet = ref<boolean>(false);
+const showInputPasswordSheetForClearAllTransactions = ref<boolean>(false);
 const displayOrderSaving = ref<boolean>(false);
 
 const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirection());
@@ -343,6 +363,48 @@ function showReconciliationStatement(account: Account | null): void {
     accountForMoreActionSheet.value = null;
 }
 
+function showPasswordSheetForClearAllTransaction(account: Account | null): void {
+    if (!account) {
+        showAlert('An error occurred');
+        return;
+    }
+
+    accountToClearTransactions.value = account;
+    currentPasswordForClearData.value = '';
+    showInputPasswordSheetForClearAllTransactions.value = true;
+    showAccountMoreActionSheet.value = false;
+    accountForMoreActionSheet.value = null;
+}
+
+function clearAllTransactions(password: string): void {
+    if (!accountToClearTransactions.value) {
+        showAlert('An error occurred');
+        return;
+    }
+
+    clearingData.value = true;
+    showLoading(() => clearingData.value);
+
+    rootStore.clearAllUserTransactionsOfAccount({
+        accountId: accountToClearTransactions.value.id,
+        password: password
+    }).then(() => {
+        clearingData.value = false;
+        currentPasswordForClearData.value = '';
+        hideLoading();
+
+        showInputPasswordSheetForClearAllTransactions.value = false;
+        showToast('All transactions in this account has been cleared');
+    }).catch(error => {
+        clearingData.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
 function hide(account: Account, hidden: boolean): void {
     showLoading();