show add transaction button in desktop navigation bar (#59)
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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": "タイムゾーンタイプ",
|
||||
|
||||
@@ -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": "Тип часового пояса",
|
||||
|
||||
@@ -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ờ",
|
||||
|
||||
@@ -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": "时区类型",
|
||||
|
||||
@@ -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
|
||||
}
|
||||
});
|
||||
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user