show add transaction button in desktop navigation bar (#59)

src/views/desktop/MainLayout.vue

@@ -29,7 +29,13 @@
                 <li class="nav-link">
                     <router-link to="/transaction/list?dateType=7">
                         <v-icon class="nav-item-icon" :icon="mdiListBoxOutline"/>
-                        <span class="nav-item-title">{{ tt('Transaction Details') }}</span>
+                        <span class="nav-item-title d-inline-block">{{ tt('Transaction Details') }}</span>
+                        <v-btn density="compact" color="secondary" variant="text" size="22"
+                               class="ml-1" :icon="true" v-if="showAddTransactionButtonInDesktopNavbar"
+                               @click="showAddDialogInTransactionListPage">
+                            <v-icon :icon="mdiPlusCircle" size="22" />
+                            <v-tooltip activator="parent">{{ tt('Add Transaction') }}</v-tooltip>
+                        </v-btn>
                     </router-link>
                 </li>
                 <li class="nav-link">
@@ -204,6 +210,7 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useRootStore } from '@/stores/index.ts';
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
+import { useDesktopPageStore } from '@/stores/desktopPage.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
@@ -214,6 +221,7 @@ import {
     mdiMenu,
     mdiHomeOutline,
     mdiListBoxOutline,
+    mdiPlusCircle,
     mdiCreditCardOutline,
     mdiViewDashboardOutline,
     mdiTagOutline,
@@ -245,6 +253,7 @@ const { tt, initLocale } = useI18n();
 const rootStore = useRootStore();
 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
+const desktopPageStore = useDesktopPageStore();
 
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
@@ -277,6 +286,7 @@ const currentTheme = computed<string>({
     }
 });
 
+const showAddTransactionButtonInDesktopNavbar = computed<boolean>(() => settingsStore.appSettings.showAddTransactionButtonInDesktopNavbar);
 const isEnableApplicationLock = computed<boolean>(() => settingsStore.appSettings.applicationLock);
 
 function handleNavScroll(e: Event): void {
@@ -313,6 +323,10 @@ function logout(): void {
         }
     });
 }
+
+function showAddDialogInTransactionListPage(): void {
+    desktopPageStore.setShowAddTransactionDialogInTransactionList();
+}
 </script>
 
 <style>

src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue

@@ -60,6 +60,28 @@
             </v-card>
         </v-col>
 
+        <v-col cols="12">
+            <v-card :title="tt('Navigation Bar')">
+                <v-form>
+                    <v-card-text>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="value"
+                                    persistent-placeholder
+                                    :label="tt('Show Add Transaction Button')"
+                                    :placeholder="tt('Show Add Transaction Button')"
+                                    :items="enableDisableOptions"
+                                    v-model="showAddTransactionButtonInDesktopNavbar"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-form>
+            </v-card>
+        </v-col>
+
         <v-col cols="12">
             <v-card :title="tt('Overview Page')">
                 <v-form>
@@ -247,4 +269,9 @@ const currentTheme = computed<string>({
         }
     }
 });
+
+const showAddTransactionButtonInDesktopNavbar = computed<boolean>({
+    get: () => settingsStore.appSettings.showAddTransactionButtonInDesktopNavbar,
+    set: (value) => settingsStore.setShowAddTransactionButtonInDesktopNavbar(value)
+});
 </script>

src/views/desktop/transactions/ListPage.vue

@@ -59,7 +59,7 @@
                                                 {{ tt('Import') }}
                                             </v-btn>
                                             <v-btn density="compact" color="default" variant="text" size="24"
-                                                   class="ml-2" :icon="true" :loading="loading" @click="reload">
+                                                   class="ml-2" :icon="true" :loading="loading" @click="reload(true, false)">
                                                 <template #loader>
                                                     <v-progress-circular indeterminate size="20"/>
                                                 </template>
@@ -604,6 +604,7 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { type TransactionMonthList, useTransactionsStore } from '@/stores/transaction.ts';
 import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.ts';
+import { useDesktopPageStore } from '@/stores/desktopPage.ts';
 
 import type { TypeAndDisplayName } from '@/core/base.ts';
 import {
@@ -757,6 +758,7 @@ const transactionCategoriesStore = useTransactionCategoriesStore();
 const transactionTagsStore = useTransactionTagsStore();
 const transactionsStore = useTransactionsStore();
 const transactionTemplatesStore = useTransactionTemplatesStore();
+const desktopPageStore = useDesktopPageStore();
 
 const tagFilterIconMap: Record<number, string> = {
     [TransactionTagFilterType.HasAny.type]: mdiPlusBoxMultipleOutline,
@@ -927,7 +929,7 @@ const countPerPage = computed<number>({
         temporaryCountPerPage.value = value;
 
         if (!queryMonthlyData.value) {
-            reload(false);
+            reload(false, false);
         }
     }
 });
@@ -940,7 +942,7 @@ const paginationCurrentPage = computed<number>({
         currentPage.value = value;
 
         if (!queryMonthlyData.value) {
-            reload(false);
+            reload(false, false);
         }
     }
 });
@@ -1038,7 +1040,7 @@ function init(initProps: TransactionListProps): void {
     currentAmountFilterType.value = '';
 
     currentPage.value = 1;
-    reload(false);
+    reload(false, true);
 
     transactionTemplatesStore.loadAllTemplates({
         templateType: TemplateType.Normal.type,
@@ -1046,7 +1048,7 @@ function init(initProps: TransactionListProps): void {
     });
 }
 
-function reload(force: boolean): void {
+function reload(force: boolean, init: boolean): void {
     loading.value = true;
 
     const page = currentPage.value;
@@ -1056,6 +1058,13 @@ function reload(force: boolean): void {
         transactionCategoriesStore.loadAllCategories({ force: false }),
         transactionTagsStore.loadAllTags({ force: false })
     ]).then(() => {
+        if (init) {
+            if (desktopPageStore.showAddTransactionDialogInTransactionList) {
+                desktopPageStore.resetShowAddTransactionDialogInTransactionList();
+                add();
+            }
+        }
+
         if (queryMonthlyData.value) {
             const currentMonthMinDate = parseDateFromUnixTime(query.value.minTime);
             const currentYear = getYear(currentMonthMinDate);
@@ -1352,7 +1361,7 @@ function add(template?: TransactionTemplate): void {
             snackbar.value?.showMessage(result.message);
         }
 
-        reload(false);
+        reload(false, false);
     }).catch(error => {
         if (error) {
             snackbar.value?.showError(error);
@@ -1362,7 +1371,7 @@ function add(template?: TransactionTemplate): void {
 
 function importTransaction(): void {
     importDialog.value?.open().then(() => {
-        reload(false);
+        reload(false, false);
     }).catch(error => {
         if (error) {
             snackbar.value?.showError(error);
@@ -1383,7 +1392,7 @@ function show(transaction: Transaction): void {
             snackbar.value?.showMessage(result.message);
         }
 
-        reload(false);
+        reload(false, false);
     }).catch(error => {
         if (error) {
             snackbar.value?.showError(error);
@@ -1481,6 +1490,13 @@ watch(() => display.mdAndUp.value, (newValue) => {
     }
 });
 
+watch(() => desktopPageStore.showAddTransactionDialogInTransactionList, (newValue) => {
+    if (newValue) {
+        desktopPageStore.resetShowAddTransactionDialogInTransactionList();
+        add();
+    }
+});
+
 init(props);
 </script>