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

This commit is contained in:
MaysWind
2025-03-09 20:15:04 +08:00
parent 6632dd64b3
commit a29ff0d553
13 changed files with 110 additions and 9 deletions
+2
View File
@@ -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,
+2
View File
@@ -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",
+2
View File
@@ -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",
+2
View File
@@ -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",
+2
View File
@@ -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": "タイムゾーンタイプ",
+2
View File
@@ -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": "Тип часового пояса",
+2
View File
@@ -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ờ",
+2
View File
@@ -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": "时区类型",
+22
View File
@@ -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
}
});
+6
View File
@@ -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,
+15 -1
View File
@@ -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>
@@ -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>
+24 -8
View File
@@ -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>