mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-18 00:34:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

code refactor

Browse Source
This commit is contained in:
MaysWind
2024-05-26 19:42:30 +08:00
parent 0884af038d
commit a917d16c26
8 changed files with 111 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue
+3 -6
View File
@@ -12,10 +12,7 @@
persistent-placeholder
:label="$t('Default Chart Type')"
:placeholder="$t('Default Chart Type')"
:items="[
{ type: allChartTypes.Pie, displayName: $t('Pie Chart') },
{ type: allChartTypes.Bar, displayName: $t('Bar Chart') }
]"
:items="allCategoricalChartTypes"
v-model="defaultChartType"
/>
</v-col>
@@ -99,8 +96,8 @@ export default {
},
computed: {
...mapStores(useSettingsStore),
allChartTypes() {
return statisticsConstants.allChartTypes;
allCategoricalChartTypes() {
return this.$locale.getAllCategoricalChartTypes();
},
allChartDataTypes() {
return this.$locale.getAllStatisticsChartDataTypes();
src/views/desktop/statistics/TransactionPage.vue
+24 -49
View File
@@ -13,42 +13,26 @@
<div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
<span class="text-subtitle-2">{{ $t('Chart Type') }}</span>
<v-select
item-title="name"
item-title="displayName"
item-value="type"
class="mt-2"
density="compact"
:disabled="loading"
:items="allChartTypesArray"
:items="allChartTypes"
v-model="queryChartType"
>
<template #selection="{ item }">
<span class="cursor-pointer">{{ $t(item.title) }}</span>
</template>
<template #item="{ props, item }">
<v-list-item v-bind="props" :title="$t(item.title)"></v-list-item>
</template>
</v-select>
/>
</div>
<div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
<span class="text-subtitle-2">{{ $t('Sort Order') }}</span>
<v-select
item-title="name"
item-title="displayName"
item-value="type"
class="mt-2"
density="compact"
:disabled="loading"
:items="allSortingTypesArray"
v-model="querySortingType"
>
<template #selection="{ item }">
<span class="cursor-pointer">{{ $t(item.title) }}</span>
</template>
<template #item="{ props, item }">
<v-list-item v-bind="props" :title="$t(item.title)"></v-list-item>
</template>
</v-select>
/>
</div>
<v-tabs show-arrows class="my-4" direction="vertical"
:disabled="loading" v-model="query.chartDataType"
@@ -134,12 +118,12 @@
</template>
<v-card-text class="statistics-overview-title pt-0" :class="{ 'disabled': loading }"
v-if="initing || (statisticsData && statisticsData.items && statisticsData.items.length)">
v-if="initing || (categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length)">
<span class="statistics-subtitle">{{ totalAmountName }}</span>
<span class="statistics-overview-amount ml-3"
:class="statisticsTextColor"
v-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length">
{{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency) }}
v-if="!initing && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
{{ getDisplayAmount(categoricalAnalysisData.totalAmount, defaultCurrency) }}
</span>
<v-skeleton-loader class="skeleton-no-margin ml-3 mb-2"
width="120px" type="text" :loading="true"
@@ -147,11 +131,11 @@
</v-card-text>
<v-card-text class="statistics-overview-title pt-0"
v-else-if="!initing && (!statisticsData || !statisticsData.items || !statisticsData.items.length)">
v-else-if="!initing && (!categoricalAnalysisData || !categoricalAnalysisData.items || !categoricalAnalysisData.items.length)">
<span class="statistics-subtitle statistics-overview-empty-tip">{{ $t('No transaction data') }}</span>
</v-card-text>
<v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allChartTypes.Pie">
<v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allCategoricalChartTypes.Pie">
<pie-chart
:items="[
{id: '1', name: '---', value: 60, color: '7c7c7f'},
@@ -166,7 +150,7 @@
v-if="initing"
></pie-chart>
<pie-chart
:items="statisticsData && statisticsData.items && statisticsData.items.length ? statisticsData.items : []"
:items="categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length ? categoricalAnalysisData.items : []"
:min-valid-percent="0.0001"
:show-value="showAmountInChart"
:enable-click-item="true"
@@ -182,7 +166,7 @@
/>
</v-card-text>
<v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allChartTypes.Bar">
<v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allCategoricalChartTypes.Bar">
<v-list rounded lines="two" v-if="initing">
<template :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]">
<v-list-item class="pl-0">
@@ -204,9 +188,9 @@
<v-divider v-if="itemIdx < 3"/>
</template>
</v-list>
<v-list class="py-0" rounded lines="two" v-else-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length">
<v-list class="py-0" rounded lines="two" v-else-if="!initing && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
<template :key="idx"
v-for="(item, idx) in statisticsData.items">
v-for="(item, idx) in categoricalAnalysisData.items">
<v-list-item class="pl-0" v-if="!item.hidden">
<template #prepend>
<router-link class="statistics-list-item" :to="getItemLinkUrl(item)">
@@ -232,7 +216,7 @@
</div>
</router-link>
</v-list-item>
<v-divider v-if="!item.hidden && idx !== statisticsData.items.length - 1"/>
<v-divider v-if="!item.hidden && idx !== categoricalAnalysisData.items.length - 1"/>
</template>
</v-list>
</v-card-text>
@@ -348,7 +332,7 @@ export default {
return this.statisticsStore.transactionStatisticsFilter;
},
queryChartDataCategory() {
return this.statisticsStore.transactionStatisticsChartDataCategory;
return this.statisticsStore.categoricalAnalysisChartDataCategory;
},
queryChartType: {
get: function () {
@@ -373,19 +357,10 @@ export default {
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.endTime);
},
allChartTypes() {
return statisticsConstants.allChartTypes;
return this.$locale.getAllCategoricalChartTypes();
},
allChartTypesArray() {
return [
{
name: 'Pie Chart',
type: this.allChartTypes.Pie
},
{
name: 'Bar Chart',
type: this.allChartTypes.Bar
}
];
allCategoricalChartTypes() {
return statisticsConstants.allCategoricalChartTypes;
},
allChartDataTypes() {
return statisticsConstants.allChartDataTypes;
@@ -394,7 +369,7 @@ export default {
return statisticsConstants.allSortingTypes;
},
allSortingTypesArray() {
return statisticsConstants.allSortingTypesArray;
return this.$locale.getAllStatisticsSortingTypes();
},
allDateRanges() {
return datetimeConstants.allDateRanges;
@@ -419,8 +394,8 @@ export default {
return this.$t('Total Amount');
},
statisticsData() {
return this.statisticsStore.statisticsData;
categoricalAnalysisData() {
return this.statisticsStore.categoricalAnalysisData;
},
statisticsTextColor() {
if (this.query.chartDataType === this.allChartDataTypes.ExpenseByAccount.type ||
@@ -467,7 +442,7 @@ export default {
self.accountsStore.loadAllAccounts({ force: false }),
self.transactionCategoriesStore.loadAllCategories({ force: false })
]).then(() => {
return self.statisticsStore.loadTransactionStatistics({
return self.statisticsStore.loadCategoricalAnalysis({
force: false
});
}).then(() => {
@@ -504,7 +479,7 @@ export default {
self.query.chartDataType === self.allChartDataTypes.IncomeByAccount.type ||
self.query.chartDataType === self.allChartDataTypes.IncomeByPrimaryCategory.type ||
self.query.chartDataType === self.allChartDataTypes.IncomeBySecondaryCategory.type) {
dispatchPromise = self.statisticsStore.loadTransactionStatistics({
dispatchPromise = self.statisticsStore.loadCategoricalAnalysis({
force: force
});
} else if (self.query.chartDataType === self.allChartDataTypes.AccountTotalAssets.type ||
src/views/mobile/statistics/SettingsPage.vue
+5 -4
View File
@@ -7,8 +7,9 @@
:title="$t('Default Chart Type')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Chart Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
<select v-model="defaultChartType">
<option :value="allChartTypes.Pie">{{ $t('Pie Chart') }}</option>
<option :value="allChartTypes.Bar">{{ $t('Bar Chart') }}</option>
<option :value="chartType.type"
:key="chartType.type"
v-for="chartType in allCategoricalChartTypes">{{ chartType.displayName }}</option>
</select>
</f7-list-item>
@@ -68,8 +69,8 @@ import statisticsConstants from '@/consts/statistics.js';
export default {
computed: {
...mapStores(useSettingsStore),
allChartTypes() {
return statisticsConstants.allChartTypes;
allCategoricalChartTypes() {
return this.$locale.getAllCategoricalChartTypes();
},
allChartDataTypes() {
return this.$locale.getAllStatisticsChartDataTypes();
src/views/mobile/statistics/TransactionPage.vue
+25 -24
View File
@@ -28,7 +28,7 @@
</f7-list>
</f7-popover>
<f7-card v-if="query.chartType === allChartTypes.Pie">
<f7-card v-if="query.chartType === allCategoricalChartTypes.Pie">
<f7-card-header class="no-border display-block">
<div class="statistics-chart-header full-line text-align-right">
<span style="margin-right: 4px;">{{ $t('Sort by') }}</span>
@@ -48,7 +48,7 @@
v-if="loading"
></pie-chart>
<pie-chart
:items="statisticsData.items"
:items="categoricalAnalysisData.items"
:min-valid-percent="0.0001"
:show-value="showAmountInChart"
:show-center-text="true"
@@ -64,20 +64,20 @@
v-else-if="!loading"
@click="clickPieChartItem"
>
<text class="statistics-pie-chart-total-amount-title" v-if="statisticsData.items && statisticsData.items.length">
<text class="statistics-pie-chart-total-amount-title" v-if="categoricalAnalysisData.items && categoricalAnalysisData.items.length">
{{ totalAmountName }}
</text>
<text class="statistics-pie-chart-total-amount-value" v-if="statisticsData.items && statisticsData.items.length">
{{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency, 16) }}
<text class="statistics-pie-chart-total-amount-value" v-if="categoricalAnalysisData.items && categoricalAnalysisData.items.length">
{{ getDisplayAmount(categoricalAnalysisData.totalAmount, defaultCurrency, 16) }}
</text>
<text class="statistics-pie-chart-total-no-data" cy="50%" v-if="!statisticsData.items || !statisticsData.items.length">
<text class="statistics-pie-chart-total-no-data" cy="50%" v-if="!categoricalAnalysisData.items || !categoricalAnalysisData.items.length">
{{ $t('No data') }}
</text>
</pie-chart>
</f7-card-content>
</f7-card>
<f7-card v-else-if="query.chartType === allChartTypes.Bar">
<f7-card v-else-if="query.chartType === allCategoricalChartTypes.Bar">
<f7-card-header class="no-border display-block">
<div class="statistics-chart-header display-flex full-line justify-content-space-between">
<div>
@@ -90,10 +90,10 @@
</div>
<div class="display-flex full-line">
<div :class="{ 'statistics-list-item-overview-amount': true, 'text-color-teal': query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type, 'text-color-red': query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type }">
<span v-if="!loading && statisticsData && statisticsData.items && statisticsData.items.length">
{{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency) }}
<span v-if="!loading && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
{{ getDisplayAmount(categoricalAnalysisData.totalAmount, defaultCurrency) }}
</span>
<span :class="{ 'skeleton-text': loading }" v-else-if="loading || !statisticsData || !statisticsData.items || !statisticsData.items.length">
<span :class="{ 'skeleton-text': loading }" v-else-if="loading || !categoricalAnalysisData || !categoricalAnalysisData.items || !categoricalAnalysisData.items.length">
{{ loading ? '***.**' : '---' }}
</span>
</div>
@@ -128,15 +128,15 @@
</f7-list-item>
</f7-list>
<f7-list v-else-if="!loading && (!statisticsData || !statisticsData.items || !statisticsData.items.length)">
<f7-list v-else-if="!loading && (!categoricalAnalysisData || !categoricalAnalysisData.items || !categoricalAnalysisData.items.length)">
<f7-list-item :title="$t('No transaction data')"></f7-list-item>
</f7-list>
<f7-list v-else-if="!loading && statisticsData && statisticsData.items && statisticsData.items.length">
<f7-list v-else-if="!loading && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
<f7-list-item class="statistics-list-item"
:link="getItemLinkUrl(item)"
:key="idx"
v-for="(item, idx) in statisticsData.items"
v-for="(item, idx) in categoricalAnalysisData.items"
v-show="!item.hidden"
>
<template #media>
@@ -196,11 +196,9 @@
<f7-link :class="{ 'disabled': reloading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.startTime, query.endTime, 1)">
<f7-icon f7="arrow_right_square"></f7-icon>
</f7-link>
<f7-link class="tabbar-text-with-ellipsis" @click="setChartType(allChartTypes.Pie)">
<span :class="{ 'tabbar-item-changed': query.chartType === allChartTypes.Pie }">{{ $t('Pie Chart') }}</span>
</f7-link>
<f7-link class="tabbar-text-with-ellipsis" @click="setChartType(allChartTypes.Bar)">
<span :class="{ 'tabbar-item-changed': query.chartType === allChartTypes.Bar }">{{ $t('Bar Chart') }}</span>
<f7-link class="tabbar-text-with-ellipsis" :key="chartType.type"
v-for="chartType in allChartTypes" @click="setChartType(chartType.type)">
<span :class="{ 'tabbar-item-changed': query.chartType === chartType.type }">{{ chartType.displayName }}</span>
</f7-link>
</f7-toolbar>
@@ -295,7 +293,7 @@ export default {
return this.statisticsStore.transactionStatisticsFilter;
},
queryChartDataCategory() {
return this.statisticsStore.transactionStatisticsChartDataCategory;
return this.statisticsStore.categoricalAnalysisChartDataCategory;
},
queryChartDataTypeName() {
const queryChartDataTypeName = getNameByKeyValue(this.allChartDataTypes, this.query.chartDataType, 'type', 'name', 'Statistics');
@@ -312,7 +310,10 @@ export default {
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.endTime);
},
allChartTypes() {
return statisticsConstants.allChartTypes;
return this.$locale.getAllCategoricalChartTypes();
},
allCategoricalChartTypes() {
return statisticsConstants.allCategoricalChartTypes;
},
allChartDataTypes() {
return statisticsConstants.allChartDataTypes;
@@ -343,8 +344,8 @@ export default {
return this.$t('Total Amount');
},
statisticsData() {
return this.statisticsStore.statisticsData;
categoricalAnalysisData() {
return this.statisticsStore.categoricalAnalysisData;
},
showAmountInChart() {
if (!this.showAccountBalance
@@ -364,7 +365,7 @@ export default {
self.accountsStore.loadAllAccounts({ force: false }),
self.transactionCategoriesStore.loadAllCategories({ force: false })
]).then(() => {
return self.statisticsStore.loadTransactionStatistics({
return self.statisticsStore.loadCategoricalAnalysis({
force: false
});
}).then(() => {
@@ -399,7 +400,7 @@ export default {
self.query.chartDataType === self.allChartDataTypes.IncomeByAccount.type ||
self.query.chartDataType === self.allChartDataTypes.IncomeByPrimaryCategory.type ||
self.query.chartDataType === self.allChartDataTypes.IncomeBySecondaryCategory.type) {
dispatchPromise = self.statisticsStore.loadTransactionStatistics({
dispatchPromise = self.statisticsStore.loadCategoricalAnalysis({
force: force
});
} else if (self.query.chartDataType === self.allChartDataTypes.AccountTotalAssets.type ||