mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-17 16:24:25 +08:00
use pinia to replace vuex, code refactor
This commit is contained in:
MaysWind
@@ -10,9 +10,9 @@
|
||||
|
||||
<f7-subnavbar>
|
||||
<f7-segmented strong :class="{ 'readonly': mode !== 'add' }">
|
||||
<f7-button :text="$t('Expense')" :active="transaction.type === $constants.transaction.allTransactionTypes.Expense" @click="transaction.type = $constants.transaction.allTransactionTypes.Expense"></f7-button>
|
||||
<f7-button :text="$t('Income')" :active="transaction.type === $constants.transaction.allTransactionTypes.Income" @click="transaction.type = $constants.transaction.allTransactionTypes.Income"></f7-button>
|
||||
<f7-button :text="$t('Transfer')" :active="transaction.type === $constants.transaction.allTransactionTypes.Transfer" @click="transaction.type = $constants.transaction.allTransactionTypes.Transfer"></f7-button>
|
||||
<f7-button :text="$t('Expense')" :active="transaction.type === allTransactionTypes.Expense" @click="transaction.type = allTransactionTypes.Expense"></f7-button>
|
||||
<f7-button :text="$t('Income')" :active="transaction.type === allTransactionTypes.Income" @click="transaction.type = allTransactionTypes.Income"></f7-button>
|
||||
<f7-button :text="$t('Transfer')" :active="transaction.type === allTransactionTypes.Transfer" @click="transaction.type = allTransactionTypes.Transfer"></f7-button>
|
||||
</f7-segmented>
|
||||
</f7-subnavbar>
|
||||
</f7-navbar>
|
||||
@@ -43,14 +43,14 @@
|
||||
<f7-list-item
|
||||
class="transaction-edit-amount"
|
||||
link="#" no-chevron
|
||||
:class="{ 'readonly': mode === 'view', 'color-teal': transaction.type === $constants.transaction.allTransactionTypes.Expense, 'color-red': transaction.type === $constants.transaction.allTransactionTypes.Income }"
|
||||
:class="{ 'readonly': mode === 'view', 'color-teal': transaction.type === allTransactionTypes.Expense, 'color-red': transaction.type === allTransactionTypes.Income }"
|
||||
:style="{ fontSize: sourceAmountFontSize + 'px' }"
|
||||
:header="$t(sourceAmountName)"
|
||||
:title="getDisplayAmount(transaction.sourceAmount, transaction.hideAmount)"
|
||||
@click="showSourceAmountSheet = true"
|
||||
>
|
||||
<number-pad-sheet :min-value="$constants.transaction.minAmount"
|
||||
:max-value="$constants.transaction.maxAmount"
|
||||
<number-pad-sheet :min-value="allowedMinAmount"
|
||||
:max-value="allowedMaxAmount"
|
||||
v-model:show="showSourceAmountSheet"
|
||||
v-model="transaction.sourceAmount"
|
||||
></number-pad-sheet>
|
||||
@@ -64,10 +64,10 @@
|
||||
:header="$t('Transfer In Amount')"
|
||||
:title="getDisplayAmount(transaction.destinationAmount, transaction.hideAmount)"
|
||||
@click="showDestinationAmountSheet = true"
|
||||
v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
|
||||
v-if="transaction.type === allTransactionTypes.Transfer"
|
||||
>
|
||||
<number-pad-sheet :min-value="$constants.transaction.minAmount"
|
||||
:max-value="$constants.transaction.maxAmount"
|
||||
<number-pad-sheet :min-value="allowedMinAmount"
|
||||
:max-value="allowedMaxAmount"
|
||||
v-model:show="showDestinationAmountSheet"
|
||||
v-model="transaction.destinationAmount"
|
||||
></number-pad-sheet>
|
||||
@@ -80,13 +80,13 @@
|
||||
:class="{ 'disabled': !hasAvailableExpenseCategories, 'readonly': mode === 'view' }"
|
||||
:header="$t('Category')"
|
||||
@click="showCategorySheet = true"
|
||||
v-if="transaction.type === $constants.transaction.allTransactionTypes.Expense"
|
||||
v-if="transaction.type === allTransactionTypes.Expense"
|
||||
>
|
||||
<template #title>
|
||||
<div class="list-item-custom-title" v-if="hasAvailableExpenseCategories">
|
||||
<span>{{ getPrimaryCategoryName(transaction.expenseCategory, allCategories[$constants.category.allCategoryTypes.Expense]) }}</span>
|
||||
<span>{{ getPrimaryCategoryName(transaction.expenseCategory, allCategories[allCategoryTypes.Expense]) }}</span>
|
||||
<f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
|
||||
<span>{{ getSecondaryCategoryName(transaction.expenseCategory, allCategories[$constants.category.allCategoryTypes.Expense]) }}</span>
|
||||
<span>{{ getSecondaryCategoryName(transaction.expenseCategory, allCategories[allCategoryTypes.Expense]) }}</span>
|
||||
</div>
|
||||
<div class="list-item-custom-title" v-else-if="!hasAvailableExpenseCategories">
|
||||
<span>{{ $t('None') }}</span>
|
||||
@@ -97,7 +97,7 @@
|
||||
primary-sub-items-field="subCategories"
|
||||
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
|
||||
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
|
||||
:items="allCategories[$constants.category.allCategoryTypes.Expense]"
|
||||
:items="allCategories[allCategoryTypes.Expense]"
|
||||
v-model:show="showCategorySheet"
|
||||
v-model="transaction.expenseCategory">
|
||||
</tree-view-selection-sheet>
|
||||
@@ -110,13 +110,13 @@
|
||||
:class="{ 'disabled': !hasAvailableIncomeCategories, 'readonly': mode === 'view' }"
|
||||
:header="$t('Category')"
|
||||
@click="showCategorySheet = true"
|
||||
v-if="transaction.type === $constants.transaction.allTransactionTypes.Income"
|
||||
v-if="transaction.type === allTransactionTypes.Income"
|
||||
>
|
||||
<template #title>
|
||||
<div class="list-item-custom-title" v-if="hasAvailableIncomeCategories">
|
||||
<span>{{ getPrimaryCategoryName(transaction.incomeCategory, allCategories[$constants.category.allCategoryTypes.Income]) }}</span>
|
||||
<span>{{ getPrimaryCategoryName(transaction.incomeCategory, allCategories[allCategoryTypes.Income]) }}</span>
|
||||
<f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
|
||||
<span>{{ getSecondaryCategoryName(transaction.incomeCategory, allCategories[$constants.category.allCategoryTypes.Income]) }}</span>
|
||||
<span>{{ getSecondaryCategoryName(transaction.incomeCategory, allCategories[allCategoryTypes.Income]) }}</span>
|
||||
</div>
|
||||
<div class="list-item-custom-title" v-else-if="!hasAvailableIncomeCategories">
|
||||
<span>{{ $t('None') }}</span>
|
||||
@@ -127,7 +127,7 @@
|
||||
primary-sub-items-field="subCategories"
|
||||
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
|
||||
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
|
||||
:items="allCategories[$constants.category.allCategoryTypes.Income]"
|
||||
:items="allCategories[allCategoryTypes.Income]"
|
||||
v-model:show="showCategorySheet"
|
||||
v-model="transaction.incomeCategory">
|
||||
</tree-view-selection-sheet>
|
||||
@@ -140,13 +140,13 @@
|
||||
:class="{ 'disabled': !hasAvailableTransferCategories, 'readonly': mode === 'view' }"
|
||||
:header="$t('Category')"
|
||||
@click="showCategorySheet = true"
|
||||
v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
|
||||
v-if="transaction.type === allTransactionTypes.Transfer"
|
||||
>
|
||||
<template #title>
|
||||
<div class="list-item-custom-title" v-if="hasAvailableTransferCategories">
|
||||
<span>{{ getPrimaryCategoryName(transaction.transferCategory, allCategories[$constants.category.allCategoryTypes.Transfer]) }}</span>
|
||||
<span>{{ getPrimaryCategoryName(transaction.transferCategory, allCategories[allCategoryTypes.Transfer]) }}</span>
|
||||
<f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
|
||||
<span>{{ getSecondaryCategoryName(transaction.transferCategory, allCategories[$constants.category.allCategoryTypes.Transfer]) }}</span>
|
||||
<span>{{ getSecondaryCategoryName(transaction.transferCategory, allCategories[allCategoryTypes.Transfer]) }}</span>
|
||||
</div>
|
||||
<div class="list-item-custom-title" v-else-if="!hasAvailableTransferCategories">
|
||||
<span>{{ $t('None') }}</span>
|
||||
@@ -157,7 +157,7 @@
|
||||
primary-sub-items-field="subCategories"
|
||||
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
|
||||
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
|
||||
:items="allCategories[$constants.category.allCategoryTypes.Transfer]"
|
||||
:items="allCategories[allCategoryTypes.Transfer]"
|
||||
v-model:show="showCategorySheet"
|
||||
v-model="transaction.transferCategory">
|
||||
</tree-view-selection-sheet>
|
||||
@@ -167,8 +167,8 @@
|
||||
class="list-item-with-header-and-title"
|
||||
link="#" no-chevron
|
||||
:class="{ 'disabled': !allVisibleAccounts.length, 'readonly': mode === 'view' }"
|
||||
:header="$t(sourceAccountName)"
|
||||
:title="transaction.sourceAccountId ? $utilities.getNameByKeyValue(allAccounts, transaction.sourceAccountId, 'id', 'name') : $t('None')"
|
||||
:header="$t(sourceAccountTitle)"
|
||||
:title="sourceAccountName"
|
||||
@click="showSourceAccountSheet = true"
|
||||
>
|
||||
<two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category"
|
||||
@@ -190,8 +190,8 @@
|
||||
link="#" no-chevron
|
||||
:class="{ 'disabled': !allVisibleAccounts.length, 'readonly': mode === 'view' }"
|
||||
:header="$t('Destination Account')"
|
||||
:title="transaction.destinationAccountId ? $utilities.getNameByKeyValue(allAccounts, transaction.destinationAccountId, 'id', 'name') : $t('None')"
|
||||
v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
|
||||
:title="destinationAccountName"
|
||||
v-if="transaction.type === allTransactionTypes.Transfer"
|
||||
@click="showDestinationAccountSheet = true"
|
||||
>
|
||||
<two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category"
|
||||
@@ -213,7 +213,7 @@
|
||||
link="#" no-chevron
|
||||
:class="{ 'readonly': mode === 'view' }"
|
||||
:header="$t('Transaction Time')"
|
||||
:title="$utilities.formatUnixTime($utilities.getActualUnixTimeForStore(transaction.time, $utilities.getTimezoneOffsetMinutes(), $utilities.getBrowserTimezoneOffsetMinutes()), $locale.getLongDateTimeFormat())"
|
||||
:title="transactionDisplayTime"
|
||||
@click="showTransactionDateTimeSheet = true"
|
||||
>
|
||||
<date-time-selection-sheet v-model:show="showTransactionDateTimeSheet"
|
||||
@@ -234,8 +234,8 @@
|
||||
</select>
|
||||
<template #title>
|
||||
<f7-block class="list-item-custom-title no-padding no-margin">
|
||||
<span>{{ `(UTC${$utilities.getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)})` }}</span>
|
||||
<span class="transaction-edit-timezone-name" v-if="transaction.timeZone || transaction.timeZone === ''">{{ $utilities.getNameByKeyValue(allTimezones, transaction.timeZone, 'name', 'displayName') }}</span>
|
||||
<span>{{ `(${transactionDisplayTimezone})` }}</span>
|
||||
<span class="transaction-edit-timezone-name" v-if="transaction.timeZone || transaction.timeZone === ''">{{ transactionDisplayTimezoneName }}</span>
|
||||
</f7-block>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
@@ -273,7 +273,7 @@
|
||||
<template #footer>
|
||||
<f7-block class="margin-top-half no-padding no-margin" v-if="transaction.tagIds && transaction.tagIds.length">
|
||||
<f7-chip media-bg-color="black" class="transaction-edit-tag"
|
||||
:text="$utilities.getNameByKeyValue(allTags, tagId, 'id', 'name')"
|
||||
:text="getTagName(tagId)"
|
||||
:key="tagId"
|
||||
v-for="tagId in transaction.tagIds">
|
||||
<template #media>
|
||||
@@ -332,6 +332,43 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useUserStore } from '@/stores/user.js';
|
||||
import { useAccountsStore } from '@/stores/account.js';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
|
||||
import { useTransactionTagsStore } from '@/stores/transactionTag.js';
|
||||
import { useTransactionsStore } from '@/stores/transaction.js';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
|
||||
|
||||
import categoryConstants from '@/consts/category.js';
|
||||
import transactionConstants from '@/consts/transaction.js';
|
||||
import logger from '@/lib/logger.js';
|
||||
import {
|
||||
isNumber,
|
||||
copyObjectTo,
|
||||
getNameByKeyValue
|
||||
} from '@/lib/common.js';
|
||||
import {
|
||||
getCurrentUnixTime,
|
||||
getTimezoneOffsetMinutes,
|
||||
getBrowserTimezoneOffsetMinutes,
|
||||
getUtcOffsetByUtcOffsetMinutes,
|
||||
getDummyUnixTimeForLocalUsage,
|
||||
getActualUnixTimeForStore
|
||||
} from '@/lib/datetime.js';
|
||||
import {
|
||||
stringCurrencyToNumeric
|
||||
} from '@/lib/currency.js';
|
||||
import {
|
||||
getCategorizedAccounts,
|
||||
getAllFilteredAccountsBalance
|
||||
} from '@/lib/account.js';
|
||||
import {
|
||||
categoryTypeToTransactionType,
|
||||
getTransactionPrimaryCategoryName,
|
||||
getTransactionSecondaryCategoryName
|
||||
} from '@/lib/category.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7route',
|
||||
@@ -340,15 +377,15 @@ export default {
|
||||
data() {
|
||||
const self = this;
|
||||
const query = self.f7route.query;
|
||||
const now = self.$utilities.getCurrentUnixTime();
|
||||
const now = getCurrentUnixTime();
|
||||
const currentTimezone = self.$locale.getTimezone();
|
||||
|
||||
let defaultType = self.$constants.transaction.allTransactionTypes.Expense;
|
||||
let defaultType = transactionConstants.allTransactionTypes.Expense;
|
||||
|
||||
if (query.type === self.$constants.transaction.allTransactionTypes.Income.toString()) {
|
||||
defaultType = self.$constants.transaction.allTransactionTypes.Income;
|
||||
} else if (query.type === self.$constants.transaction.allTransactionTypes.Transfer.toString()) {
|
||||
defaultType = self.$constants.transaction.allTransactionTypes.Transfer;
|
||||
if (query.type === transactionConstants.allTransactionTypes.Income.toString()) {
|
||||
defaultType = transactionConstants.allTransactionTypes.Income;
|
||||
} else if (query.type === transactionConstants.allTransactionTypes.Transfer.toString()) {
|
||||
defaultType = transactionConstants.allTransactionTypes.Transfer;
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -358,7 +395,7 @@ export default {
|
||||
type: defaultType,
|
||||
time: now,
|
||||
timeZone: currentTimezone,
|
||||
utcOffset: self.$utilities.getTimezoneOffsetMinutes(currentTimezone),
|
||||
utcOffset: getTimezoneOffsetMinutes(currentTimezone),
|
||||
expenseCategory: '',
|
||||
incomeCategory: '',
|
||||
transferCategory: '',
|
||||
@@ -390,6 +427,7 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore, useExchangeRatesStore),
|
||||
title() {
|
||||
if (this.mode === 'add') {
|
||||
return 'Add Transaction';
|
||||
@@ -407,48 +445,51 @@ export default {
|
||||
}
|
||||
},
|
||||
sourceAmountName() {
|
||||
if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Expense) {
|
||||
if (this.transaction.type === this.allTransactionTypes.Expense) {
|
||||
return 'Expense Amount';
|
||||
} else if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Income) {
|
||||
} else if (this.transaction.type === this.allTransactionTypes.Income) {
|
||||
return 'Income Amount';
|
||||
} else if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Transfer) {
|
||||
} else if (this.transaction.type === this.allTransactionTypes.Transfer) {
|
||||
return 'Transfer Out Amount';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
sourceAccountName() {
|
||||
if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Expense || this.transaction.type === this.$constants.transaction.allTransactionTypes.Income) {
|
||||
sourceAccountTitle() {
|
||||
if (this.transaction.type === this.allTransactionTypes.Expense || this.transaction.type === this.allTransactionTypes.Income) {
|
||||
return 'Account';
|
||||
} else if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Transfer) {
|
||||
} else if (this.transaction.type === this.allTransactionTypes.Transfer) {
|
||||
return 'Source Account';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
defaultCurrency() {
|
||||
return this.$store.getters.currentUserDefaultCurrency;
|
||||
return this.userStore.currentUserDefaultCurrency;
|
||||
},
|
||||
defaultAccountId() {
|
||||
return this.$store.getters.currentUserDefaultAccountId;
|
||||
return this.userStore.currentUserDefaultAccountId;
|
||||
},
|
||||
defaultFirstDayOfWeek() {
|
||||
return this.$store.getters.currentUserFirstDayOfWeek;
|
||||
allTransactionTypes() {
|
||||
return transactionConstants.allTransactionTypes;
|
||||
},
|
||||
allCategoryTypes() {
|
||||
return categoryConstants.allCategoryTypes;
|
||||
},
|
||||
allTimezones() {
|
||||
return this.$locale.getAllTimezones(true);
|
||||
},
|
||||
allAccounts() {
|
||||
return this.$store.getters.allPlainAccounts;
|
||||
return this.accountsStore.allPlainAccounts;
|
||||
},
|
||||
allVisibleAccounts() {
|
||||
return this.$store.getters.allVisiblePlainAccounts;
|
||||
return this.accountsStore.allVisiblePlainAccounts;
|
||||
},
|
||||
allAccountsMap() {
|
||||
return this.$store.state.allAccountsMap;
|
||||
return this.accountsStore.allAccountsMap;
|
||||
},
|
||||
categorizedAccounts() {
|
||||
const categorizedAccounts = this.$utilities.copyObjectTo(this.$utilities.getCategorizedAccounts(this.allVisibleAccounts), {});
|
||||
const categorizedAccounts = copyObjectTo(getCategorizedAccounts(this.allVisibleAccounts), {});
|
||||
|
||||
for (let category in categorizedAccounts) {
|
||||
if (!Object.prototype.hasOwnProperty.call(categorizedAccounts, category)) {
|
||||
@@ -472,7 +513,7 @@ export default {
|
||||
}
|
||||
|
||||
if (this.showAccountBalance) {
|
||||
const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(categorizedAccounts, account => account.category === accountCategory.category);
|
||||
const accountsBalance = getAllFilteredAccountsBalance(categorizedAccounts, account => account.category === accountCategory.category);
|
||||
let totalBalance = 0;
|
||||
let hasUnCalculatedAmount = false;
|
||||
|
||||
@@ -484,9 +525,9 @@ export default {
|
||||
totalBalance -= accountsBalance[i].balance;
|
||||
}
|
||||
} else {
|
||||
const balance = this.$store.getters.getExchangedAmount(accountsBalance[i].balance, accountsBalance[i].currency, this.defaultCurrency);
|
||||
const balance = this.exchangeRatesStore.getExchangedAmount(accountsBalance[i].balance, accountsBalance[i].currency, this.defaultCurrency);
|
||||
|
||||
if (!this.$utilities.isNumber(balance)) {
|
||||
if (!isNumber(balance)) {
|
||||
hasUnCalculatedAmount = true;
|
||||
continue;
|
||||
}
|
||||
@@ -512,38 +553,61 @@ export default {
|
||||
return categorizedAccounts;
|
||||
},
|
||||
allCategories() {
|
||||
return this.$store.state.allTransactionCategories;
|
||||
return this.transactionCategoriesStore.allTransactionCategories;
|
||||
},
|
||||
allCategoriesMap() {
|
||||
return this.$store.state.allTransactionCategoriesMap;
|
||||
return this.transactionCategoriesStore.allTransactionCategoriesMap;
|
||||
},
|
||||
allTags() {
|
||||
return this.$store.state.allTransactionTags;
|
||||
return this.transactionTagsStore.allTransactionTags;
|
||||
},
|
||||
hasAvailableExpenseCategories() {
|
||||
if (!this.allCategories || !this.allCategories[this.$constants.category.allCategoryTypes.Expense] || !this.allCategories[this.$constants.category.allCategoryTypes.Expense].length) {
|
||||
if (!this.allCategories || !this.allCategories[this.allCategoryTypes.Expense] || !this.allCategories[this.allCategoryTypes.Expense].length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.$constants.category.allCategoryTypes.Expense]);
|
||||
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Expense]);
|
||||
return firstAvailableCategoryId !== '';
|
||||
},
|
||||
hasAvailableIncomeCategories() {
|
||||
if (!this.allCategories || !this.allCategories[this.$constants.category.allCategoryTypes.Income] || !this.allCategories[this.$constants.category.allCategoryTypes.Income].length) {
|
||||
if (!this.allCategories || !this.allCategories[this.allCategoryTypes.Income] || !this.allCategories[this.allCategoryTypes.Income].length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.$constants.category.allCategoryTypes.Income]);
|
||||
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Income]);
|
||||
return firstAvailableCategoryId !== '';
|
||||
},
|
||||
hasAvailableTransferCategories() {
|
||||
if (!this.allCategories || !this.allCategories[this.$constants.category.allCategoryTypes.Transfer] || !this.allCategories[this.$constants.category.allCategoryTypes.Transfer].length) {
|
||||
if (!this.allCategories || !this.allCategories[this.allCategoryTypes.Transfer] || !this.allCategories[this.allCategoryTypes.Transfer].length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.$constants.category.allCategoryTypes.Transfer]);
|
||||
const firstAvailableCategoryId = this.getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Transfer]);
|
||||
return firstAvailableCategoryId !== '';
|
||||
},
|
||||
sourceAccountName() {
|
||||
if (this.transaction.sourceAccountId) {
|
||||
return getNameByKeyValue(this.allAccounts, this.transaction.sourceAccountId, 'id', 'name');
|
||||
} else {
|
||||
return this.$t('None');
|
||||
}
|
||||
},
|
||||
destinationAccountName() {
|
||||
if (this.transaction.destinationAccountId) {
|
||||
return getNameByKeyValue(this.allAccounts, this.transaction.destinationAccountId, 'id', 'name');
|
||||
} else {
|
||||
return this.$t('None');
|
||||
}
|
||||
},
|
||||
transactionDisplayTime() {
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, getActualUnixTimeForStore(this.transaction.time, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))
|
||||
},
|
||||
transactionDisplayTimezone() {
|
||||
return `UTC${getUtcOffsetByUtcOffsetMinutes(this.transaction.utcOffset)}`;
|
||||
},
|
||||
transactionDisplayTimezoneName() {
|
||||
return getNameByKeyValue(this.allTimezones, this.transaction.timeZone, 'name', 'displayName');
|
||||
},
|
||||
sourceAmountFontSize() {
|
||||
return this.getFontSizeByAmount(this.transaction.sourceAmount);
|
||||
},
|
||||
@@ -559,6 +623,12 @@ export default {
|
||||
return this.$t('No Location');
|
||||
}
|
||||
},
|
||||
allowedMinAmount() {
|
||||
return transactionConstants.minAmount;
|
||||
},
|
||||
allowedMaxAmount() {
|
||||
return transactionConstants.maxAmount;
|
||||
},
|
||||
inputIsEmpty() {
|
||||
return !!this.inputEmptyProblemMessage;
|
||||
},
|
||||
@@ -572,28 +642,28 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Expense || this.transaction.type === this.$constants.transaction.allTransactionTypes.Income) {
|
||||
if (this.transaction.type === this.allTransactionTypes.Expense || this.transaction.type === this.allTransactionTypes.Income) {
|
||||
this.transaction.destinationAmount = newValue;
|
||||
} else if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Transfer) {
|
||||
} else if (this.transaction.type === this.allTransactionTypes.Transfer) {
|
||||
const sourceAccount = this.allAccountsMap[this.transaction.sourceAccountId]
|
||||
const destinationAccount = this.allAccountsMap[this.transaction.destinationAccountId]
|
||||
|
||||
if (sourceAccount && destinationAccount && sourceAccount.currency !== destinationAccount.currency) {
|
||||
const exchangedOldValue = this.$store.getters.getExchangedAmount(oldValue, sourceAccount.currency, destinationAccount.currency);
|
||||
const exchangedNewValue = this.$store.getters.getExchangedAmount(newValue, sourceAccount.currency, destinationAccount.currency);
|
||||
const exchangedOldValue = this.exchangeRatesStore.getExchangedAmount(oldValue, sourceAccount.currency, destinationAccount.currency);
|
||||
const exchangedNewValue = this.exchangeRatesStore.getExchangedAmount(newValue, sourceAccount.currency, destinationAccount.currency);
|
||||
|
||||
if (this.$utilities.isNumber(exchangedOldValue)) {
|
||||
if (isNumber(exchangedOldValue)) {
|
||||
oldValue = Math.floor(exchangedOldValue);
|
||||
}
|
||||
|
||||
if (this.$utilities.isNumber(exchangedNewValue)) {
|
||||
if (isNumber(exchangedNewValue)) {
|
||||
newValue = Math.floor(exchangedNewValue);
|
||||
}
|
||||
}
|
||||
|
||||
if ((!sourceAccount || !destinationAccount || this.transaction.destinationAmount === oldValue) &&
|
||||
(this.$utilities.stringCurrencyToNumeric(this.$constants.transaction.minAmount) <= newValue &&
|
||||
newValue <= this.$utilities.stringCurrencyToNumeric(this.$constants.transaction.maxAmount))) {
|
||||
(stringCurrencyToNumeric(this.allowedMinAmount) <= newValue &&
|
||||
newValue <= stringCurrencyToNumeric(this.allowedMaxAmount))) {
|
||||
this.transaction.destinationAmount = newValue;
|
||||
}
|
||||
}
|
||||
@@ -603,7 +673,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Expense || this.transaction.type === this.$constants.transaction.allTransactionTypes.Income) {
|
||||
if (this.transaction.type === this.allTransactionTypes.Expense || this.transaction.type === this.allTransactionTypes.Income) {
|
||||
this.transaction.sourceAmount = newValue;
|
||||
}
|
||||
},
|
||||
@@ -629,9 +699,9 @@ export default {
|
||||
self.loading = true;
|
||||
|
||||
const promises = [
|
||||
self.$store.dispatch('loadAllAccounts', { force: false }),
|
||||
self.$store.dispatch('loadAllCategories', { force: false }),
|
||||
self.$store.dispatch('loadAllTags', { force: false })
|
||||
self.accountsStore.loadAllAccounts({ force: false }),
|
||||
self.transactionCategoriesStore.loadAllCategories({ force: false }),
|
||||
self.transactionTagsStore.loadAllTags({ force: false })
|
||||
];
|
||||
|
||||
if (query.id) {
|
||||
@@ -639,12 +709,12 @@ export default {
|
||||
self.editTransactionId = query.id;
|
||||
}
|
||||
|
||||
promises.push(self.$store.dispatch('getTransaction', { transactionId: query.id }));
|
||||
promises.push(self.transactionsStore.getTransaction({ transactionId: query.id }));
|
||||
}
|
||||
|
||||
if (query.type && query.type !== '0' &&
|
||||
query.type >= self.$constants.transaction.allTransactionTypes.Income &&
|
||||
query.type <= self.$constants.transaction.allTransactionTypes.Transfer) {
|
||||
query.type >= self.allTransactionTypes.Income &&
|
||||
query.type <= self.allTransactionTypes.Transfer) {
|
||||
self.transaction.type = parseInt(query.type);
|
||||
}
|
||||
|
||||
@@ -657,43 +727,43 @@ export default {
|
||||
|
||||
if ((!query.type || query.type === '0') && query.categoryId && query.categoryId !== '0' && self.allCategoriesMap[query.categoryId]) {
|
||||
const category = self.allCategoriesMap[query.categoryId];
|
||||
const type = self.$utilities.categoryTypeToTransactionType(category.type);
|
||||
const type = categoryTypeToTransactionType(category.type);
|
||||
|
||||
if (self.$utilities.isNumber(type)) {
|
||||
if (isNumber(type)) {
|
||||
self.transaction.type = type;
|
||||
}
|
||||
}
|
||||
|
||||
if (self.allCategories[self.$constants.category.allCategoryTypes.Expense] &&
|
||||
self.allCategories[self.$constants.category.allCategoryTypes.Expense].length) {
|
||||
if (query.categoryId && query.categoryId !== '0' && self.isCategoryIdAvailable(self.allCategories[self.$constants.category.allCategoryTypes.Expense], query.categoryId)) {
|
||||
if (self.allCategories[self.allCategoryTypes.Expense] &&
|
||||
self.allCategories[self.allCategoryTypes.Expense].length) {
|
||||
if (query.categoryId && query.categoryId !== '0' && self.isCategoryIdAvailable(self.allCategories[self.allCategoryTypes.Expense], query.categoryId)) {
|
||||
self.transaction.expenseCategory = query.categoryId;
|
||||
}
|
||||
|
||||
if (!self.transaction.expenseCategory) {
|
||||
self.transaction.expenseCategory = self.getFirstAvailableCategoryId(self.allCategories[self.$constants.category.allCategoryTypes.Expense]);
|
||||
self.transaction.expenseCategory = self.getFirstAvailableCategoryId(self.allCategories[self.allCategoryTypes.Expense]);
|
||||
}
|
||||
}
|
||||
|
||||
if (self.allCategories[self.$constants.category.allCategoryTypes.Income] &&
|
||||
self.allCategories[self.$constants.category.allCategoryTypes.Income].length) {
|
||||
if (query.categoryId && query.categoryId !== '0' && self.isCategoryIdAvailable(self.allCategories[self.$constants.category.allCategoryTypes.Income], query.categoryId)) {
|
||||
if (self.allCategories[self.allCategoryTypes.Income] &&
|
||||
self.allCategories[self.allCategoryTypes.Income].length) {
|
||||
if (query.categoryId && query.categoryId !== '0' && self.isCategoryIdAvailable(self.allCategories[self.allCategoryTypes.Income], query.categoryId)) {
|
||||
self.transaction.incomeCategory = query.categoryId;
|
||||
}
|
||||
|
||||
if (!self.transaction.incomeCategory) {
|
||||
self.transaction.incomeCategory = self.getFirstAvailableCategoryId(self.allCategories[self.$constants.category.allCategoryTypes.Income]);
|
||||
self.transaction.incomeCategory = self.getFirstAvailableCategoryId(self.allCategories[self.allCategoryTypes.Income]);
|
||||
}
|
||||
}
|
||||
|
||||
if (self.allCategories[self.$constants.category.allCategoryTypes.Transfer] &&
|
||||
self.allCategories[self.$constants.category.allCategoryTypes.Transfer].length) {
|
||||
if (query.categoryId && query.categoryId !== '0' && self.isCategoryIdAvailable(self.allCategories[self.$constants.category.allCategoryTypes.Transfer], query.categoryId)) {
|
||||
if (self.allCategories[self.allCategoryTypes.Transfer] &&
|
||||
self.allCategories[self.allCategoryTypes.Transfer].length) {
|
||||
if (query.categoryId && query.categoryId !== '0' && self.isCategoryIdAvailable(self.allCategories[self.allCategoryTypes.Transfer], query.categoryId)) {
|
||||
self.transaction.transferCategory = query.categoryId;
|
||||
}
|
||||
|
||||
if (!self.transaction.transferCategory) {
|
||||
self.transaction.transferCategory = self.getFirstAvailableCategoryId(self.allCategories[self.$constants.category.allCategoryTypes.Transfer]);
|
||||
self.transaction.transferCategory = self.getFirstAvailableCategoryId(self.allCategories[self.allCategoryTypes.Transfer]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -734,18 +804,18 @@ export default {
|
||||
|
||||
self.transaction.type = transaction.type;
|
||||
|
||||
if (self.transaction.type === self.$constants.transaction.allTransactionTypes.Expense) {
|
||||
if (self.transaction.type === self.allTransactionTypes.Expense) {
|
||||
self.transaction.expenseCategory = transaction.categoryId;
|
||||
} else if (self.transaction.type === self.$constants.transaction.allTransactionTypes.Income) {
|
||||
} else if (self.transaction.type === self.allTransactionTypes.Income) {
|
||||
self.transaction.incomeCategory = transaction.categoryId;
|
||||
} else if (self.transaction.type === self.$constants.transaction.allTransactionTypes.Transfer) {
|
||||
} else if (self.transaction.type === self.allTransactionTypes.Transfer) {
|
||||
self.transaction.transferCategory = transaction.categoryId;
|
||||
}
|
||||
|
||||
if (self.mode === 'edit' || self.mode === 'view') {
|
||||
self.transaction.utcOffset = transaction.utcOffset;
|
||||
self.transaction.timeZone = null;
|
||||
self.transaction.time = self.$utilities.getDummyUnixTimeForLocalUsage(transaction.time, self.transaction.utcOffset, self.$utilities.getBrowserTimezoneOffsetMinutes());
|
||||
self.transaction.time = getDummyUnixTimeForLocalUsage(transaction.time, self.transaction.utcOffset, getBrowserTimezoneOffsetMinutes());
|
||||
}
|
||||
|
||||
self.transaction.sourceAccountId = transaction.sourceAccountId;
|
||||
@@ -771,7 +841,7 @@ export default {
|
||||
|
||||
self.loading = false;
|
||||
}).catch(error => {
|
||||
self.$logger.error('failed to load essential data for editing transaction', error);
|
||||
logger.error('failed to load essential data for editing transaction', error);
|
||||
|
||||
if (error.processed) {
|
||||
self.loading = false;
|
||||
@@ -800,7 +870,7 @@ export default {
|
||||
|
||||
const submitTransaction = {
|
||||
type: self.transaction.type,
|
||||
time: self.$utilities.getActualUnixTimeForStore(self.transaction.time, self.transaction.utcOffset, self.$utilities.getBrowserTimezoneOffsetMinutes()),
|
||||
time: getActualUnixTimeForStore(self.transaction.time, self.transaction.utcOffset, getBrowserTimezoneOffsetMinutes()),
|
||||
sourceAccountId: self.transaction.sourceAccountId,
|
||||
sourceAmount: self.transaction.sourceAmount,
|
||||
destinationAccountId: '0',
|
||||
@@ -812,11 +882,11 @@ export default {
|
||||
utcOffset: self.transaction.utcOffset
|
||||
};
|
||||
|
||||
if (self.transaction.type === self.$constants.transaction.allTransactionTypes.Expense) {
|
||||
if (self.transaction.type === self.allTransactionTypes.Expense) {
|
||||
submitTransaction.categoryId = self.transaction.expenseCategory;
|
||||
} else if (self.transaction.type === self.$constants.transaction.allTransactionTypes.Income) {
|
||||
} else if (self.transaction.type === self.allTransactionTypes.Income) {
|
||||
submitTransaction.categoryId = self.transaction.incomeCategory;
|
||||
} else if (self.transaction.type === self.$constants.transaction.allTransactionTypes.Transfer) {
|
||||
} else if (self.transaction.type === self.allTransactionTypes.Transfer) {
|
||||
submitTransaction.categoryId = self.transaction.transferCategory;
|
||||
submitTransaction.destinationAccountId = self.transaction.destinationAccountId;
|
||||
submitTransaction.destinationAmount = self.transaction.destinationAmount;
|
||||
@@ -833,7 +903,7 @@ export default {
|
||||
self.submitting = true;
|
||||
self.$showLoading(() => self.submitting);
|
||||
|
||||
self.$store.dispatch('saveTransaction', {
|
||||
self.transactionsStore.saveTransaction({
|
||||
transaction: submitTransaction,
|
||||
defaultCurrency: self.defaultCurrency
|
||||
}).then(() => {
|
||||
@@ -869,7 +939,7 @@ export default {
|
||||
const self = this;
|
||||
|
||||
if (!self.isSupportGeoLocation) {
|
||||
self.$logger.warn('this browser does not support geo location');
|
||||
logger.warn('this browser does not support geo location');
|
||||
|
||||
if (forceUpdate) {
|
||||
self.$toast('Unable to get current position');
|
||||
@@ -879,7 +949,7 @@ export default {
|
||||
|
||||
navigator.geolocation.getCurrentPosition(function (position) {
|
||||
if (!position || !position.coords) {
|
||||
self.$logger.error('current position is null');
|
||||
logger.error('current position is null');
|
||||
self.geoLocationStatus = 'error';
|
||||
|
||||
if (forceUpdate) {
|
||||
@@ -896,7 +966,7 @@ export default {
|
||||
longitude: position.coords.longitude
|
||||
};
|
||||
}, function (err) {
|
||||
self.$logger.error('cannot get current position', err);
|
||||
logger.error('cannot get current position', err);
|
||||
self.geoLocationStatus = 'error';
|
||||
|
||||
if (forceUpdate) {
|
||||
@@ -953,10 +1023,13 @@ export default {
|
||||
return this.$locale.getDisplayCurrency(amount);
|
||||
},
|
||||
getPrimaryCategoryName(categoryId, allCategories) {
|
||||
return this.$utilities.getTransactionPrimaryCategoryName(categoryId, allCategories);
|
||||
return getTransactionPrimaryCategoryName(categoryId, allCategories);
|
||||
},
|
||||
getSecondaryCategoryName(categoryId, allCategories) {
|
||||
return this.$utilities.getTransactionSecondaryCategoryName(categoryId, allCategories);
|
||||
return getTransactionSecondaryCategoryName(categoryId, allCategories);
|
||||
},
|
||||
getTagName(tagId) {
|
||||
return getNameByKeyValue(this.allTags, tagId, 'id', 'name');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
<f7-list-item>
|
||||
<template #title>
|
||||
<small>
|
||||
<span>{{ $utilities.formatTime(transactionMonthList.yearMonth, $locale.getLongYearMonthFormat()) }}</span>
|
||||
<span>{{ getDisplayYearMonth(transactionMonthList) }}</span>
|
||||
</small>
|
||||
<small class="transaction-amount-statistics" v-if="showTotalAmountInTransactionListPage && transactionMonthList.totalAmount">
|
||||
<span class="text-color-red">
|
||||
@@ -144,7 +144,7 @@
|
||||
<f7-list-item swipeout chevron-center
|
||||
class="transaction-info"
|
||||
:id="getTransactionDomId(transaction)"
|
||||
:link="transaction.type !== $constants.transaction.allTransactionTypes.ModifyBalance ? `/transaction/detail?id=${transaction.id}&type=${transaction.type}` : null"
|
||||
:link="transaction.type !== allTransactionTypes.ModifyBalance ? `/transaction/detail?id=${transaction.id}&type=${transaction.type}` : null"
|
||||
:key="transaction.id"
|
||||
v-for="(transaction, idx) in transactionMonthList.items"
|
||||
>
|
||||
@@ -175,20 +175,20 @@
|
||||
<div class="item-title-row">
|
||||
<div class="item-title">
|
||||
<div class="transaction-category-name no-padding">
|
||||
<span v-if="transaction.type === $constants.transaction.allTransactionTypes.ModifyBalance">
|
||||
<span v-if="transaction.type === allTransactionTypes.ModifyBalance">
|
||||
{{ $t('Modify Balance') }}
|
||||
</span>
|
||||
<span v-else-if="transaction.type !== $constants.transaction.allTransactionTypes.ModifyBalance && transaction.category">
|
||||
<span v-else-if="transaction.type !== allTransactionTypes.ModifyBalance && transaction.category">
|
||||
{{ transaction.category.name }}
|
||||
</span>
|
||||
<span v-else-if="transaction.type !== $constants.transaction.allTransactionTypes.ModifyBalance && !transaction.category">
|
||||
<span v-else-if="transaction.type !== allTransactionTypes.ModifyBalance && !transaction.category">
|
||||
{{ getTransactionTypeName(transaction.type, 'Transaction') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-after">
|
||||
<div class="transaction-amount" v-if="transaction.sourceAccount"
|
||||
:class="{ 'text-color-teal': transaction.type === $constants.transaction.allTransactionTypes.Expense, 'text-color-red': transaction.type === $constants.transaction.allTransactionTypes.Income }">
|
||||
:class="{ 'text-color-teal': transaction.type === allTransactionTypes.Expense, 'text-color-red': transaction.type === allTransactionTypes.Income }">
|
||||
<span v-if="!query.accountId || query.accountId === '0' || (transaction.sourceAccount && (transaction.sourceAccount.id === query.accountId || transaction.sourceAccount.parentId === query.accountId))">{{ getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount) }}</span>
|
||||
<span v-else-if="query.accountId && query.accountId !== '0' && transaction.destinationAccount && (transaction.destinationAccount.id === query.accountId || transaction.destinationAccount.parentId === query.accountId)">{{ getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount) }}</span>
|
||||
<span v-else></span>
|
||||
@@ -202,12 +202,12 @@
|
||||
</div>
|
||||
<div class="item-footer">
|
||||
<div class="transaction-footer">
|
||||
<span>{{ $utilities.formatUnixTime(transaction.time, $locale.getShortTimeFormat(), transaction.utcOffset, currentTimezoneOffsetMinutes) }}</span>
|
||||
<span v-if="transaction.utcOffset !== currentTimezoneOffsetMinutes">{{ `(UTC${$utilities.getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)})` }}</span>
|
||||
<span>{{ getDisplayTime(transaction) }}</span>
|
||||
<span v-if="transaction.utcOffset !== currentTimezoneOffsetMinutes">{{ `(${getDisplayTimezone(transaction)})` }}</span>
|
||||
<span v-if="transaction.sourceAccount">·</span>
|
||||
<span v-if="transaction.sourceAccount">{{ transaction.sourceAccount.name }}</span>
|
||||
<span v-if="transaction.sourceAccount && transaction.type === $constants.transaction.allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id">→</span>
|
||||
<span v-if="transaction.sourceAccount && transaction.type === $constants.transaction.allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id">{{ transaction.destinationAccount.name }}</span>
|
||||
<span v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id">→</span>
|
||||
<span v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id">{{ transaction.destinationAccount.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -216,11 +216,11 @@
|
||||
<f7-swipeout-actions right>
|
||||
<f7-swipeout-button color="primary" close
|
||||
:text="$t('Duplicate')"
|
||||
v-if="transaction.type !== $constants.transaction.allTransactionTypes.ModifyBalance"
|
||||
v-if="transaction.type !== allTransactionTypes.ModifyBalance"
|
||||
@click="duplicate(transaction)"></f7-swipeout-button>
|
||||
<f7-swipeout-button color="orange" close
|
||||
:text="$t('Edit')"
|
||||
v-if="transaction.editable && transaction.type !== $constants.transaction.allTransactionTypes.ModifyBalance"
|
||||
v-if="transaction.editable && transaction.type !== allTransactionTypes.ModifyBalance"
|
||||
@click="edit(transaction)"></f7-swipeout-button>
|
||||
<f7-swipeout-button color="red" class="padding-left padding-right"
|
||||
v-if="transaction.editable"
|
||||
@@ -251,11 +251,11 @@
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="dateRange.type === $constants.datetime.allDateRanges.Custom.type && query.dateType === $constants.datetime.allDateRanges.Custom.type && query.minTime && query.maxTime">
|
||||
<span>{{ $utilities.formatUnixTime(query.minTime, $locale.getLongDateTimeFormat()) }}</span>
|
||||
<div v-if="dateRange.type === allDateRanges.Custom.type && query.dateType === allDateRanges.Custom.type && query.minTime && query.maxTime">
|
||||
<span>{{ queryMinTime }}</span>
|
||||
<span> - </span>
|
||||
<br/>
|
||||
<span>{{ $utilities.formatUnixTime(query.maxTime, $locale.getLongDateTimeFormat()) }}</span>
|
||||
<span>{{ queryMaxTime }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
@@ -318,9 +318,9 @@
|
||||
class="no-margin-vertical"
|
||||
:key="categoryType"
|
||||
v-for="(categories, categoryType) in allPrimaryCategories"
|
||||
v-show="!query.type || $utilities.categoryTypeToTransactionType(parseInt(categoryType)) === query.type"
|
||||
v-show="!query.type || getTransactionTypeFromCategoryType(categoryType) === query.type"
|
||||
>
|
||||
<f7-list-item divider :title="getTransactionTypeName($utilities.categoryTypeToTransactionType(parseInt(categoryType)), 'Type')"></f7-list-item>
|
||||
<f7-list-item divider :title="getTransactionTypeName(getTransactionTypeFromCategoryType(categoryType), 'Type')"></f7-list-item>
|
||||
<f7-list-item accordion-item
|
||||
:title="category.name"
|
||||
:class="getCategoryListItemCheckedClass(category, query.categoryId)"
|
||||
@@ -407,6 +407,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useUserStore } from '@/stores/user.js';
|
||||
import { useAccountsStore } from '@/stores/account.js';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
|
||||
import { useTransactionsStore } from '@/stores/transaction.js';
|
||||
|
||||
import datetimeConstants from '@/consts/datetime.js';
|
||||
import currencyConstants from '@/consts/currency.js';
|
||||
import accountConstants from '@/consts/account.js';
|
||||
import transactionConstants from '@/consts/transaction.js';
|
||||
import { getNameByKeyValue } from '@/lib/common.js';
|
||||
import {
|
||||
getUtcOffsetByUtcOffsetMinutes,
|
||||
getTimezoneOffsetMinutes,
|
||||
getDateRangeByDateType
|
||||
} from '@/lib/datetime.js';
|
||||
import { categoryTypeToTransactionType, transactionTypeToCategoryType } from '@/lib/category.js';
|
||||
import { onSwipeoutDeleted } from '@/lib/ui.mobile.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7route',
|
||||
@@ -430,22 +449,23 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionsStore),
|
||||
defaultCurrency() {
|
||||
if (this.query.accountId && this.query.accountId !== '0') {
|
||||
const account = this.allAccounts[this.query.accountId];
|
||||
|
||||
if (account && account.currency && account.currency !== this.$constants.currency.parentAccountCurrencyPlaceholder) {
|
||||
if (account && account.currency && account.currency !== currencyConstants.parentAccountCurrencyPlaceholder) {
|
||||
return account.currency;
|
||||
}
|
||||
}
|
||||
|
||||
return this.$store.getters.currentUserDefaultCurrency;
|
||||
return this.userStore.currentUserDefaultCurrency;
|
||||
},
|
||||
canAddTransaction() {
|
||||
if (this.query.accountId && this.query.accountId !== '0') {
|
||||
const account = this.allAccounts[this.query.accountId];
|
||||
|
||||
if (account && account.type === this.$constants.account.allAccountTypes.MultiSubAccounts) {
|
||||
if (account && account.type === accountConstants.allAccountTypes.MultiSubAccounts) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -453,38 +473,13 @@ export default {
|
||||
return true;
|
||||
},
|
||||
currentTimezoneOffsetMinutes() {
|
||||
return this.$utilities.getTimezoneOffsetMinutes();
|
||||
return getTimezoneOffsetMinutes();
|
||||
},
|
||||
firstDayOfWeek() {
|
||||
return this.$store.getters.currentUserFirstDayOfWeek;
|
||||
return this.userStore.currentUserFirstDayOfWeek;
|
||||
},
|
||||
query() {
|
||||
return this.$store.state.transactionsFilter;
|
||||
},
|
||||
transactions() {
|
||||
if (this.loading) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return this.$store.state.transactions;
|
||||
},
|
||||
noTransaction() {
|
||||
return this.$store.getters.noTransaction;
|
||||
},
|
||||
hasMoreTransaction() {
|
||||
return this.$store.getters.hasMoreTransaction;
|
||||
},
|
||||
allAccounts() {
|
||||
return this.$store.state.allAccountsMap;
|
||||
},
|
||||
allCategories() {
|
||||
return this.$store.state.allTransactionCategoriesMap;
|
||||
},
|
||||
allPrimaryCategories() {
|
||||
return this.$store.state.allTransactionCategories;
|
||||
},
|
||||
allDateRanges() {
|
||||
return this.$constants.datetime.allDateRanges;
|
||||
return this.transactionsStore.transactionsFilter;
|
||||
},
|
||||
queryDateRangeName() {
|
||||
if (this.query.dateType === this.allDateRanges.All.type) {
|
||||
@@ -505,24 +500,58 @@ export default {
|
||||
|
||||
return this.$t('Date');
|
||||
},
|
||||
queryMinTime() {
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.minTime);
|
||||
},
|
||||
queryMaxTime() {
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.maxTime);
|
||||
},
|
||||
queryTransactionTypeName() {
|
||||
return this.getTransactionTypeName(this.query.type, 'Type');
|
||||
},
|
||||
queryCategoryName() {
|
||||
return this.$utilities.getNameByKeyValue(this.allCategories, this.query.categoryId, null, 'name', this.$t('Category'));
|
||||
return getNameByKeyValue(this.allCategories, this.query.categoryId, null, 'name', this.$t('Category'));
|
||||
},
|
||||
queryAccountName() {
|
||||
return this.$utilities.getNameByKeyValue(this.allAccounts, this.query.accountId, null, 'name', this.$t('Account'));
|
||||
return getNameByKeyValue(this.allAccounts, this.query.accountId, null, 'name', this.$t('Account'));
|
||||
},
|
||||
transactions() {
|
||||
if (this.loading) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return this.transactionsStore.transactions;
|
||||
},
|
||||
noTransaction() {
|
||||
return this.transactionsStore.noTransaction;
|
||||
},
|
||||
hasMoreTransaction() {
|
||||
return this.transactionsStore.hasMoreTransaction;
|
||||
},
|
||||
allTransactionTypes() {
|
||||
return transactionConstants.allTransactionTypes;
|
||||
},
|
||||
allAccounts() {
|
||||
return this.accountsStore.allAccountsMap;
|
||||
},
|
||||
allCategories() {
|
||||
return this.transactionCategoriesStore.allTransactionCategoriesMap;
|
||||
},
|
||||
allPrimaryCategories() {
|
||||
return this.transactionCategoriesStore.allTransactionCategories;
|
||||
},
|
||||
allDateRanges() {
|
||||
return datetimeConstants.allDateRanges;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const self = this;
|
||||
const query = self.f7route.query;
|
||||
|
||||
let dateRange = self.$utilities.getDateRangeByDateType(query.dateType ? parseInt(query.dateType) : undefined, self.firstDayOfWeek);
|
||||
let dateRange = getDateRangeByDateType(query.dateType ? parseInt(query.dateType) : undefined, self.firstDayOfWeek);
|
||||
|
||||
if (!dateRange &&
|
||||
query.dateType === self.$constants.datetime.allDateRanges.Custom.type.toString() &&
|
||||
query.dateType === self.allDateRanges.Custom.type.toString() &&
|
||||
parseInt(query.maxTime) > 0 && parseInt(query.minTime) > 0) {
|
||||
dateRange = {
|
||||
dateType: parseInt(query.dateType),
|
||||
@@ -531,7 +560,7 @@ export default {
|
||||
};
|
||||
}
|
||||
|
||||
this.$store.dispatch('initTransactionListFilter', {
|
||||
this.transactionsStore.initTransactionListFilter({
|
||||
dateType: dateRange ? dateRange.dateType : undefined,
|
||||
maxTime: dateRange ? dateRange.maxTime : undefined,
|
||||
minTime: dateRange ? dateRange.minTime : undefined,
|
||||
@@ -544,7 +573,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onPageAfterIn() {
|
||||
if (this.$store.state.transactionListStateInvalid && !this.loading) {
|
||||
if (this.transactionsStore.transactionListStateInvalid && !this.loading) {
|
||||
this.reload(null);
|
||||
}
|
||||
|
||||
@@ -558,10 +587,10 @@ export default {
|
||||
}
|
||||
|
||||
Promise.all([
|
||||
self.$store.dispatch('loadAllAccounts', { force: false }),
|
||||
self.$store.dispatch('loadAllCategories', { force: false })
|
||||
self.accountsStore.loadAllAccounts({ force: false }),
|
||||
self.transactionCategoriesStore.loadAllCategories({ force: false })
|
||||
]).then(() => {
|
||||
return self.$store.dispatch('loadTransactions', {
|
||||
return self.transactionsStore.loadTransactions({
|
||||
reload: true,
|
||||
autoExpand: true,
|
||||
defaultCurrency: self.defaultCurrency
|
||||
@@ -603,7 +632,7 @@ export default {
|
||||
|
||||
self.loadingMore = true;
|
||||
|
||||
self.$store.dispatch('loadTransactions', {
|
||||
self.transactionsStore.loadTransactions({
|
||||
reload: false,
|
||||
autoExpand: autoExpand,
|
||||
defaultCurrency: self.defaultCurrency
|
||||
@@ -618,13 +647,13 @@ export default {
|
||||
});
|
||||
},
|
||||
collapseTransactionMonthList(month, collapse) {
|
||||
this.$store.dispatch('collapseMonthInTransactionList', {
|
||||
this.transactionsStore.collapseMonthInTransactionList({
|
||||
month: month,
|
||||
collapse: collapse
|
||||
});
|
||||
},
|
||||
changeDateFilter(dateType) {
|
||||
if (dateType === this.$constants.datetime.allDateRanges.Custom.type) { // Custom
|
||||
if (dateType === this.allDateRanges.Custom.type) { // Custom
|
||||
this.showCustomDateRangeSheet = true;
|
||||
this.showDatePopover = false;
|
||||
return;
|
||||
@@ -632,13 +661,13 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
const dateRange = this.$utilities.getDateRangeByDateType(dateType, this.firstDayOfWeek);
|
||||
const dateRange = getDateRangeByDateType(dateType, this.firstDayOfWeek);
|
||||
|
||||
if (!dateRange) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$store.dispatch('updateTransactionListFilter', {
|
||||
this.transactionsStore.updateTransactionListFilter({
|
||||
dateType: dateRange.dateType,
|
||||
maxTime: dateRange.maxTime,
|
||||
minTime: dateRange.minTime
|
||||
@@ -652,8 +681,8 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$store.dispatch('updateTransactionListFilter', {
|
||||
dateType: this.$constants.datetime.allDateRanges.Custom.type,
|
||||
this.transactionsStore.updateTransactionListFilter({
|
||||
dateType: this.allDateRanges.Custom.type,
|
||||
maxTime: maxTime,
|
||||
minTime: minTime
|
||||
});
|
||||
@@ -672,12 +701,12 @@ export default {
|
||||
if (type && this.query.categoryId) {
|
||||
const category = this.allCategories[this.query.categoryId];
|
||||
|
||||
if (category && category.type !== this.$utilities.transactionTypeToCategoryType(type)) {
|
||||
if (category && category.type !== transactionTypeToCategoryType(type)) {
|
||||
removeCategoryFilter = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.$store.dispatch('updateTransactionListFilter', {
|
||||
this.transactionsStore.updateTransactionListFilter({
|
||||
type: type,
|
||||
categoryId: removeCategoryFilter ? '0' : undefined
|
||||
});
|
||||
@@ -690,7 +719,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$store.dispatch('updateTransactionListFilter', {
|
||||
this.transactionsStore.updateTransactionListFilter({
|
||||
categoryId: categoryId
|
||||
});
|
||||
|
||||
@@ -702,7 +731,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$store.dispatch('updateTransactionListFilter', {
|
||||
this.transactionsStore.updateTransactionListFilter({
|
||||
accountId: accountId
|
||||
});
|
||||
|
||||
@@ -714,7 +743,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$store.dispatch('updateTransactionListFilter', {
|
||||
this.transactionsStore.updateTransactionListFilter({
|
||||
keyword: keyword
|
||||
});
|
||||
|
||||
@@ -744,11 +773,11 @@ export default {
|
||||
self.transactionToDelete = null;
|
||||
self.$showLoading();
|
||||
|
||||
self.$store.dispatch('deleteTransaction', {
|
||||
self.transactionsStore.deleteTransaction({
|
||||
transaction: transaction,
|
||||
defaultCurrency: self.defaultCurrency,
|
||||
beforeResolve: (done) => {
|
||||
self.$ui.onSwipeoutDeleted(self.getTransactionDomId(transaction), done);
|
||||
onSwipeoutDeleted(self.getTransactionDomId(transaction), done);
|
||||
}
|
||||
}).then(() => {
|
||||
self.$hideLoading();
|
||||
@@ -781,6 +810,15 @@ export default {
|
||||
|
||||
container.scrollTop(targetPos);
|
||||
},
|
||||
getDisplayYearMonth(transactionMonthList) {
|
||||
return this.$locale.formatTimeToLongYearMonth(this.userStore, transactionMonthList.yearMonth);
|
||||
},
|
||||
getDisplayTime(transaction) {
|
||||
return this.$locale.formatUnixTimeToShortTime(this.userStore, transaction.time, transaction.utcOffset, this.currentTimezoneOffsetMinutes);
|
||||
},
|
||||
getDisplayTimezone(transaction) {
|
||||
return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)}`;
|
||||
},
|
||||
getDisplayAmount(amount, currency, hideAmount) {
|
||||
if (hideAmount) {
|
||||
return this.$locale.getDisplayCurrency('***', currency);
|
||||
@@ -794,18 +832,21 @@ export default {
|
||||
},
|
||||
getTransactionTypeName(type, defaultName) {
|
||||
switch (type){
|
||||
case this.$constants.transaction.allTransactionTypes.ModifyBalance:
|
||||
case this.allTransactionTypes.ModifyBalance:
|
||||
return this.$t('Modify Balance');
|
||||
case this.$constants.transaction.allTransactionTypes.Income:
|
||||
case this.allTransactionTypes.Income:
|
||||
return this.$t('Income');
|
||||
case this.$constants.transaction.allTransactionTypes.Expense:
|
||||
case this.allTransactionTypes.Expense:
|
||||
return this.$t('Expense');
|
||||
case this.$constants.transaction.allTransactionTypes.Transfer:
|
||||
case this.allTransactionTypes.Transfer:
|
||||
return this.$t('Transfer');
|
||||
default:
|
||||
return this.$t(defaultName);
|
||||
}
|
||||
},
|
||||
getTransactionTypeFromCategoryType(categoryType) {
|
||||
return categoryTypeToTransactionType(parseInt(categoryType));
|
||||
},
|
||||
getTransactionDomId(transaction) {
|
||||
return 'transaction_' + transaction.id;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user