support custom quick save button styles on the mobile transaction edit page
This commit is contained in:
MaysWind
@@ -53,6 +53,7 @@ export const ALL_APPLICATION_CLOUD_SETTINGS: CategorizedApplicationCloudSettingI
|
||||
{
|
||||
categoryName: 'Transaction Edit Page',
|
||||
items: [
|
||||
{ settingKey: 'quickSaveButtonStyleInMobileTransactionListPage', settingName: 'Quick Save Button Style', mobile: true, desktop: false },
|
||||
{ settingKey: 'quickAddButtonActionInMobileTransactionEditPage', settingName: 'Quick Add Button Action', mobile: true, desktop: false },
|
||||
{ settingKey: 'autoSaveTransactionDraft', settingName: 'Automatically Save Draft', mobile: true, desktop: true },
|
||||
{ settingKey: 'autoGetCurrentGeoLocation', settingName: 'Automatically Add Geolocation', mobile: true, desktop: true },
|
||||
|
||||
@@ -95,6 +95,33 @@
|
||||
<f7-list-item
|
||||
class="item-truncate-after-text"
|
||||
link="#"
|
||||
@click="showQuickSaveButtonStyleInMobileTransactionListPagePopup = true"
|
||||
>
|
||||
<template #after-title>
|
||||
<div class="item-actual-title">
|
||||
<span>{{ tt('Quick Save Button Style') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #after>
|
||||
{{ findDisplayNameByType(allTransactionQuickSaveButtonStyles, quickSaveButtonStyleInMobileTransactionListPage) }}
|
||||
</template>
|
||||
<list-item-selection-popup value-type="item"
|
||||
key-field="type" value-field="type"
|
||||
title-field="displayName"
|
||||
:title="tt('Quick Save Button Style')"
|
||||
:enable-filter="true"
|
||||
:filter-placeholder="tt('Quick Save Button Style')"
|
||||
:filter-no-items-text="tt('No results')"
|
||||
:items="allTransactionQuickSaveButtonStyles"
|
||||
v-model:show="showQuickSaveButtonStyleInMobileTransactionListPagePopup"
|
||||
v-model="quickSaveButtonStyleInMobileTransactionListPage">
|
||||
</list-item-selection-popup>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="item-truncate-after-text"
|
||||
link="#"
|
||||
:disabled="quickSaveButtonStyleInMobileTransactionListPage === TransactionQuickSaveButtonStyle.Disabled.type"
|
||||
@click="showQuickAddButtonActionInMobileTransactionEditPagePopup = true"
|
||||
>
|
||||
<template #after-title>
|
||||
@@ -237,10 +264,15 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
|
||||
|
||||
import type { TypeAndDisplayName } from '@/core/base.ts';
|
||||
import { CategoryType } from '@/core/category.ts';
|
||||
import { TransactionQuickSaveButtonStyle } from '@/core/transaction.ts';
|
||||
|
||||
import { findNameByValue, findDisplayNameByType } from '@/lib/common.ts';
|
||||
|
||||
const { tt, getAllTransactionQuickAddButtonActionTypes } = useI18n();
|
||||
const {
|
||||
tt,
|
||||
getAllTransactionQuickSaveButtonStyles,
|
||||
getAllTransactionQuickAddButtonActionTypes
|
||||
} = useI18n();
|
||||
const { showToast } = useI18nUIComponents();
|
||||
const {
|
||||
loadingAccounts,
|
||||
@@ -269,12 +301,19 @@ const accountsStore = useAccountsStore();
|
||||
const transactionCategoriesStore = useTransactionCategoriesStore();
|
||||
|
||||
const showTimezoneUsedForStatisticsInHomePagePopup = ref<boolean>(false);
|
||||
const showQuickSaveButtonStyleInMobileTransactionListPagePopup = ref<boolean>(false);
|
||||
const showQuickAddButtonActionInMobileTransactionEditPagePopup = ref<boolean>(false);
|
||||
const showAutoSaveTransactionDraftPopup = ref<boolean>(false);
|
||||
const showCurrencySortByInExchangeRatesPagePopup = ref<boolean>(false);
|
||||
|
||||
const allTransactionQuickSaveButtonStyles = computed<TypeAndDisplayName[]>(() => getAllTransactionQuickSaveButtonStyles());
|
||||
const allTransactionQuickAddButtonActionTypes = computed<TypeAndDisplayName[]>(() => getAllTransactionQuickAddButtonActionTypes());
|
||||
|
||||
const quickSaveButtonStyleInMobileTransactionListPage = computed<number>({
|
||||
get: () => settingsStore.appSettings.quickSaveButtonStyleInMobileTransactionListPage,
|
||||
set: (value) => settingsStore.setQuickSaveButtonStyleInMobileTransactionListPage(value)
|
||||
});
|
||||
|
||||
const quickAddButtonActionInMobileTransactionEditPage = computed<number>({
|
||||
get: () => settingsStore.appSettings.quickAddButtonActionInMobileTransactionEditPage,
|
||||
set: (value) => settingsStore.setQuickAddButtonActionInMobileTransactionEditPage(value)
|
||||
|
||||
@@ -469,14 +469,20 @@
|
||||
</f7-actions-group>
|
||||
</f7-actions>
|
||||
|
||||
<template #fixed>
|
||||
<f7-fab id="quick-save-fab" position="right-bottom" :class="{ 'disabled': inputIsEmpty || submitting }"
|
||||
<template #fixed v-if="quickSaveButtonStyleType === TransactionQuickSaveButtonStyle.BottomLeftFloating.type || quickSaveButtonStyleType === TransactionQuickSaveButtonStyle.BottomCenterFloating.type || quickSaveButtonStyleType === TransactionQuickSaveButtonStyle.BottomRightFloating.type">
|
||||
<f7-fab id="quick-save-button" :class="{ 'disabled': inputIsEmpty || submitting }" :position="quickSaveButtonFloatingPosition"
|
||||
:text="tt(quickSaveButtonTitle)"
|
||||
@click="quickSave" v-if="mode !== TransactionEditPageMode.View">
|
||||
</f7-fab>
|
||||
</template>
|
||||
|
||||
<f7-popover class="quick-save-popover" target-el="#quick-save-fab"
|
||||
<f7-toolbar id="quick-save-button" tabbar bottom v-if="quickSaveButtonStyleType === TransactionQuickSaveButtonStyle.BottomFixed.type && mode !== TransactionEditPageMode.View">
|
||||
<f7-link :class="{ 'disabled': inputIsEmpty || submitting }" @click="quickSave">
|
||||
<span class="tabbar-primary-link">{{ tt(quickSaveButtonTitle) }}</span>
|
||||
</f7-link>
|
||||
</f7-toolbar>
|
||||
|
||||
<f7-popover class="quick-save-popover" target-el="#quick-save-button"
|
||||
v-model:opened="showQuickSavePopover">
|
||||
<f7-list>
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
@@ -521,8 +527,14 @@ import { useTransactionsStore } from '@/stores/transaction.ts';
|
||||
import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.ts';
|
||||
|
||||
import { CategoryType } from '@/core/category.ts';
|
||||
import { TransactionType, TransactionEditScopeType, TransactionQuickAddButtonActionType } from '@/core/transaction.ts';
|
||||
import {
|
||||
TransactionType,
|
||||
TransactionEditScopeType,
|
||||
TransactionQuickSaveButtonStyle,
|
||||
TransactionQuickAddButtonActionType
|
||||
} from '@/core/transaction.ts';
|
||||
import { ScheduledTemplateFrequencyType, TemplateType } from '@/core/template.ts';
|
||||
|
||||
import { TRANSACTION_MAX_AMOUNT, TRANSACTION_MIN_AMOUNT } from '@/consts/transaction.ts';
|
||||
import { KnownErrorCode } from '@/consts/api.ts';
|
||||
import { SUPPORTED_IMAGE_EXTENSIONS } from '@/consts/file.ts';
|
||||
@@ -650,6 +662,20 @@ const showTransactionPictures = ref<boolean>(pageTypeAndMode?.type === Transacti
|
||||
&& (pageTypeAndMode?.mode === TransactionEditPageMode.Add || pageTypeAndMode?.mode === TransactionEditPageMode.Edit)
|
||||
&& settingsStore.appSettings.alwaysShowTransactionPicturesInMobileTransactionEditPage);
|
||||
|
||||
const quickSaveButtonStyleType = computed<number>(() => settingsStore.appSettings.quickSaveButtonStyleInMobileTransactionListPage);
|
||||
const quickSaveButtonFloatingPosition = computed<string>(() => {
|
||||
switch (settingsStore.appSettings.quickSaveButtonStyleInMobileTransactionListPage) {
|
||||
case TransactionQuickSaveButtonStyle.BottomLeftFloating.type:
|
||||
return 'left-bottom';
|
||||
case TransactionQuickSaveButtonStyle.BottomCenterFloating.type:
|
||||
return 'center-bottom';
|
||||
case TransactionQuickSaveButtonStyle.BottomRightFloating.type:
|
||||
return 'right-bottom';
|
||||
default:
|
||||
return 'right-bottom';
|
||||
}
|
||||
});
|
||||
|
||||
const sourceAmountClass = computed<Record<string, boolean>>(() => {
|
||||
const classes: Record<string, boolean> = {
|
||||
'readonly': mode.value === TransactionEditPageMode.View,
|
||||
|
||||
Reference in New Issue
Block a user