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

src/core/setting.ts

@@ -29,6 +29,7 @@ export interface ApplicationSettings extends BaseApplicationSetting {
     autoUpdateExchangeRatesData: boolean;
     autoSaveTransactionDraft: string;
     autoGetCurrentGeoLocation: boolean;
+    showAddTransactionButtonInDesktopNavbar: boolean;
     showAmountInHomePage: boolean;
     timezoneUsedForStatisticsInHomePage: number;
     itemsCountInTransactionListPage: number;
@@ -74,6 +75,7 @@ export const DEFAULT_APPLICATION_SETTINGS: ApplicationSettings = {
     autoUpdateExchangeRatesData: true,
     autoSaveTransactionDraft: 'disabled',
     autoGetCurrentGeoLocation: false,
+    showAddTransactionButtonInDesktopNavbar: true,
     showAmountInHomePage: true,
     timezoneUsedForStatisticsInHomePage: TimezoneTypeForStatistics.Default.type,
     itemsCountInTransactionListPage: 15,

src/locales/de.json

@@ -1789,6 +1789,8 @@
     "Show Account Balance": "Kontostand anzeigen",
     "Hide Account Balance": "Kontostand verbergen",
     "Page Settings": "Seiteneinstellungen",
+    "Navigation Bar": "Navigation Bar",
+    "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "Übersichtsseite",
     "Timezone Used for Statistics": "Zeitzone für Statistiken",
     "Timezone Type": "Zeitzonentyp",

src/locales/en.json

@@ -1789,6 +1789,8 @@
     "Show Account Balance": "Show Account Balance",
     "Hide Account Balance": "Hide Account Balance",
     "Page Settings": "Page Settings",
+    "Navigation Bar": "Navigation Bar",
+    "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "Overview Page",
     "Timezone Used for Statistics": "Timezone Used for Statistics",
     "Timezone Type": "Timezone Type",

src/locales/es.json

@@ -1789,6 +1789,8 @@
     "Show Account Balance": "Mostrar saldo de cuenta",
     "Hide Account Balance": "Ocultar saldo de cuenta",
     "Page Settings": "Configuración de página",
+    "Navigation Bar": "Navigation Bar",
+    "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "Página de descripción general",
     "Timezone Used for Statistics": "Zona horaria utilizada para estadísticas",
     "Timezone Type": "Tipo de zona horaria",

src/locales/ja.json

@@ -1789,6 +1789,8 @@
     "Show Account Balance": "口座残高を表示",
     "Hide Account Balance": "口座残高を非表示",
     "Page Settings": "ページ設定",
+    "Navigation Bar": "Navigation Bar",
+    "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "概要ページ",
     "Timezone Used for Statistics": "統計に使用されるタイムゾーン",
     "Timezone Type": "タイムゾーンタイプ",

src/locales/ru.json

@@ -1789,6 +1789,8 @@
     "Show Account Balance": "Показать баланс счета",
     "Hide Account Balance": "Скрыть баланс счета",
     "Page Settings": "Настройки страницы",
+    "Navigation Bar": "Navigation Bar",
+    "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "Страница обзора",
     "Timezone Used for Statistics": "Часовой пояс, используемый для статистики",
     "Timezone Type": "Тип часового пояса",

src/locales/vi.json

@@ -1789,6 +1789,8 @@
     "Show Account Balance": "Hiển thị số dư tài khoản",
     "Hide Account Balance": "Ẩn số dư tài khoản",
     "Page Settings": "Cài đặt trang",
+    "Navigation Bar": "Navigation Bar",
+    "Show Add Transaction Button": "Show Add Transaction Button",
     "Overview Page": "Trang tổng quan",
     "Timezone Used for Statistics": "Múi giờ được sử dụng cho thống kê",
     "Timezone Type": "Loại múi giờ",

src/locales/zh_Hans.json

@@ -1789,6 +1789,8 @@
     "Show Account Balance": "显示账户余额",
     "Hide Account Balance": "隐藏账户余额",
     "Page Settings": "页面设置",
+    "Navigation Bar": "导航栏",
+    "Show Add Transaction Button": "显示添加交易按钮",
     "Overview Page": "总览页面",
     "Timezone Used for Statistics": "统计时使用的时区",
     "Timezone Type": "时区类型",

src/stores/desktopPage.ts

@@ -0,0 +1,22 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useDesktopPageStore = defineStore('desktopPages', () => {
+    const showAddTransactionDialogInTransactionList = ref<boolean>(false);
+
+    function setShowAddTransactionDialogInTransactionList(): void {
+        showAddTransactionDialogInTransactionList.value = true;
+    }
+
+    function resetShowAddTransactionDialogInTransactionList(): void {
+        showAddTransactionDialogInTransactionList.value = false;
+    }
+
+    return {
+        // states
+        showAddTransactionDialogInTransactionList,
+        // functions
+        setShowAddTransactionDialogInTransactionList,
+        resetShowAddTransactionDialogInTransactionList
+    }
+});

src/stores/setting.ts

@@ -54,6 +54,11 @@ export const useSettingsStore = defineStore('settings', () => {
         appSettings.value.autoGetCurrentGeoLocation = value;
     }
 
+    function setShowAddTransactionButtonInDesktopNavbar(value: boolean): void {
+        updateApplicationSettingsValue('showAddTransactionButtonInDesktopNavbar', value);
+        appSettings.value.showAddTransactionButtonInDesktopNavbar = value;
+    }
+
     function setShowAmountInHomePage(value: boolean): void {
         updateApplicationSettingsValue('showAmountInHomePage', value);
         appSettings.value.showAmountInHomePage = value;
@@ -166,6 +171,7 @@ export const useSettingsStore = defineStore('settings', () => {
         setAutoUpdateExchangeRatesData,
         setAutoSaveTransactionDraft,
         setAutoGetCurrentGeoLocation,
+        setShowAddTransactionButtonInDesktopNavbar,
         setShowAmountInHomePage,
         setTimezoneUsedForStatisticsInHomePage,
         setItemsCountInTransactionListPage,

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>