mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-19 17:24:26 +08:00
update name to insights explorer
This commit is contained in:
MaysWind
@@ -45,9 +45,9 @@
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<router-link to="/insights/explore">
|
||||
<router-link to="/insights/explorer">
|
||||
<v-icon class="nav-item-icon" :icon="mdiCompassOutline"/>
|
||||
<span class="nav-item-title">{{ tt('Insights & Explore') }}</span>
|
||||
<span class="nav-item-title">{{ tt('Insights Explorer') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="nav-section-title">
|
||||
|
||||
@@ -225,7 +225,7 @@
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-card :title="tt('Insights & Explore Page')">
|
||||
<v-card :title="tt('Insights Explorer Page')">
|
||||
<v-form>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
@@ -236,8 +236,8 @@
|
||||
persistent-placeholder
|
||||
:label="tt('Default Date Range')"
|
||||
:placeholder="tt('Default Date Range')"
|
||||
:items="allInsightsExploreDefaultDateRanges"
|
||||
v-model="insightsExploreDefaultDateRangeType"
|
||||
:items="allInsightsExplorerDefaultDateRanges"
|
||||
v-model="insightsExplorerDefaultDateRangeType"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
@@ -249,7 +249,7 @@
|
||||
:label="tt('Timezone Used for Date Range')"
|
||||
:placeholder="tt('Timezone Used for Date Range')"
|
||||
:items="allTimezoneTypesUsedForStatistics"
|
||||
v-model="timezoneUsedForInsightsExplorePage"
|
||||
v-model="timezoneUsedForInsightsExplorerPage"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -339,7 +339,7 @@ import { useAppSettingPageBase } from '@/views/base/settings/AppSettingsPageBase
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useAccountsStore } from '@/stores/account.ts';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
|
||||
import { useExploresStore } from '@/stores/explore.ts';
|
||||
import { useExplorersStore } from '@/stores/explorer.ts';
|
||||
|
||||
import type { LocalizedSwitchOption } from '@/core/base.ts';
|
||||
import { ThemeType } from '@/core/theme.ts';
|
||||
@@ -383,7 +383,7 @@ const {
|
||||
const settingsStore = useSettingsStore();
|
||||
const accountsStore = useAccountsStore();
|
||||
const transactionCategoriesStore = useTransactionCategoriesStore();
|
||||
const exploresStore = useExploresStore();
|
||||
const explorersStore = useExplorersStore();
|
||||
|
||||
const snackbar = useTemplateRef<SnackBarType>('snackbar');
|
||||
|
||||
@@ -392,7 +392,7 @@ const showTransactionCategoriesIncludedInHomePageOverviewDialog = ref<boolean>(f
|
||||
const showAccountsIncludedInTotalDialog = ref<boolean>(false);
|
||||
|
||||
const enableDisableOptions = computed<LocalizedSwitchOption[]>(() => getAllEnableDisableOptions());
|
||||
const allInsightsExploreDefaultDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.InsightsExplore, false));
|
||||
const allInsightsExplorerDefaultDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.InsightsExplorer, false));
|
||||
|
||||
const currentTheme = computed<string>({
|
||||
get: () => settingsStore.appSettings.theme,
|
||||
@@ -414,16 +414,16 @@ const showAddTransactionButtonInDesktopNavbar = computed<boolean>({
|
||||
set: (value) => settingsStore.setShowAddTransactionButtonInDesktopNavbar(value)
|
||||
});
|
||||
|
||||
const insightsExploreDefaultDateRangeType = computed<number>({
|
||||
get: () => settingsStore.appSettings.insightsExploreDefaultDateRangeType,
|
||||
set: (value) => settingsStore.setInsightsExploreDefaultDateRangeType(value)
|
||||
const insightsExplorerDefaultDateRangeType = computed<number>({
|
||||
get: () => settingsStore.appSettings.insightsExplorerDefaultDateRangeType,
|
||||
set: (value) => settingsStore.setInsightsExplorerDefaultDateRangeType(value)
|
||||
});
|
||||
|
||||
const timezoneUsedForInsightsExplorePage = computed<number>({
|
||||
get: () => settingsStore.appSettings.timezoneUsedForInsightsExplorePage,
|
||||
const timezoneUsedForInsightsExplorerPage = computed<number>({
|
||||
get: () => settingsStore.appSettings.timezoneUsedForInsightsExplorerPage,
|
||||
set: (value: number) => {
|
||||
settingsStore.setTimezoneUsedForInsightsExplorePage(value);
|
||||
exploresStore.updateTransactionExploreInvalidState(true);
|
||||
settingsStore.setTimezoneUsedForInsightsExplorerPage(value);
|
||||
explorersStore.updateTransactionExplorerInvalidState(true);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
+40
-40
@@ -19,9 +19,9 @@
|
||||
/>
|
||||
</div>
|
||||
<v-tabs show-arrows class="my-4" direction="vertical"
|
||||
:disabled="loading" v-model="currentExploreId">
|
||||
:disabled="loading" v-model="currentExplorationId">
|
||||
<v-tab class="tab-text-truncate" key="new" value="">
|
||||
<span class="text-truncate">{{ tt('New Explore') }}</span>
|
||||
<span class="text-truncate">{{ tt('New Exploration') }}</span>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</v-navigation-drawer>
|
||||
@@ -33,7 +33,7 @@
|
||||
:ripple="false" :icon="true" @click="showNav = !showNav">
|
||||
<v-icon :icon="mdiMenu" size="24" />
|
||||
</v-btn>
|
||||
<span>{{ tt('Insights & Explore') }}</span>
|
||||
<span>{{ tt('Insights Explorer') }}</span>
|
||||
<v-btn-group class="ms-4" color="default" density="comfortable" variant="outlined" divided>
|
||||
<v-btn class="button-icon-with-direction" :icon="mdiArrowLeft"
|
||||
:disabled="loading || !canShiftDateRange"
|
||||
@@ -94,15 +94,15 @@
|
||||
|
||||
<v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container" v-model="activeTab">
|
||||
<v-window-item value="query">
|
||||
<explore-query-tab :loading="loading" />
|
||||
<explorer-query-tab :loading="loading" />
|
||||
</v-window-item>
|
||||
<v-window-item value="table">
|
||||
<explore-data-table-tab ref="exploreDataTableTab"
|
||||
<explorer-data-table-tab ref="explorerDataTableTab"
|
||||
:loading="loading"
|
||||
v-model:count-per-page="countPerPage" />
|
||||
</v-window-item>
|
||||
<v-window-item value="chart">
|
||||
<explore-chart-tab ref="exploreChartTab"
|
||||
<explorer-chart-tab ref="explorerChartTab"
|
||||
:loading="loading" />
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
@@ -126,9 +126,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ExploreQueryTab from '@/views/desktop/insights/tabs/ExploreQueryTab.vue';
|
||||
import ExploreDataTableTab from '@/views/desktop/insights/tabs/ExploreDataTableTab.vue';
|
||||
import ExploreChartTab from '@/views/desktop/insights/tabs/ExploreChartTab.vue';
|
||||
import ExplorerQueryTab from '@/views/desktop/insights/tabs/ExplorerQueryTab.vue';
|
||||
import ExplorerDataTableTab from '@/views/desktop/insights/tabs/ExplorerDataTableTab.vue';
|
||||
import ExplorerChartTab from '@/views/desktop/insights/tabs/ExplorerChartTab.vue';
|
||||
import ExportDialog from '@/views/desktop/statistics/transaction/dialogs/ExportDialog.vue';
|
||||
import SnackBar from '@/components/desktop/SnackBar.vue';
|
||||
|
||||
@@ -142,7 +142,7 @@ import { useUserStore } from '@/stores/user.ts';
|
||||
import { useAccountsStore } from '@/stores/account.ts';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
|
||||
import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
|
||||
import { type TransactionExplorePartialFilter, type TransactionExploreFilter, useExploresStore } from '@/stores/explore.ts';
|
||||
import { type TransactionExplorerPartialFilter, type TransactionExplorerFilter, useExplorersStore } from '@/stores/explorer.ts';
|
||||
|
||||
import type { NameNumeralValue } from '@/core/base.ts';
|
||||
import type { NumeralSystem } from '@/core/numeral.ts';
|
||||
@@ -169,7 +169,7 @@ import {
|
||||
mdiExport
|
||||
} from '@mdi/js';
|
||||
|
||||
interface InsightsExploreProps {
|
||||
interface InsightsExplorerProps {
|
||||
initId?: string;
|
||||
initActiveTab?: string,
|
||||
initDateRangeType?: string,
|
||||
@@ -177,12 +177,12 @@ interface InsightsExploreProps {
|
||||
initEndTime?: string,
|
||||
}
|
||||
|
||||
const props = defineProps<InsightsExploreProps>();
|
||||
const props = defineProps<InsightsExplorerProps>();
|
||||
|
||||
type ExplorePageTabType = 'query' | 'table' | 'chart';
|
||||
type ExplorerPageTabType = 'query' | 'table' | 'chart';
|
||||
type SnackBarType = InstanceType<typeof SnackBar>;
|
||||
type ExploreDataTableTabType = InstanceType<typeof ExploreDataTableTab>;
|
||||
type ExploreChartTabType = InstanceType<typeof ExploreChartTab>;
|
||||
type ExplorerDataTableTabType = InstanceType<typeof ExplorerDataTableTab>;
|
||||
type ExplorerChartTabType = InstanceType<typeof ExplorerChartTab>;
|
||||
type ExportDialogType = InstanceType<typeof ExportDialog>;
|
||||
|
||||
const router = useRouter();
|
||||
@@ -200,19 +200,19 @@ const userStore = useUserStore();
|
||||
const accountsStore = useAccountsStore();
|
||||
const transactionCategoriesStore = useTransactionCategoriesStore();
|
||||
const transactionTagsStore = useTransactionTagsStore();
|
||||
const exploresStore = useExploresStore();
|
||||
const explorersStore = useExplorersStore();
|
||||
|
||||
const snackbar = useTemplateRef<SnackBarType>('snackbar');
|
||||
const exploreDataTableTab = useTemplateRef<ExploreDataTableTabType>('exploreDataTableTab');
|
||||
const exploreChartTab = useTemplateRef<ExploreChartTabType>('exploreChartTab');
|
||||
const explorerDataTableTab = useTemplateRef<ExplorerDataTableTabType>('explorerDataTableTab');
|
||||
const explorerChartTab = useTemplateRef<ExplorerChartTabType>('explorerChartTab');
|
||||
const exportDialog = useTemplateRef<ExportDialogType>('exportDialog');
|
||||
|
||||
const loading = ref<boolean>(true);
|
||||
const initing = ref<boolean>(true);
|
||||
const alwaysShowNav = ref<boolean>(display.mdAndUp.value);
|
||||
const showNav = ref<boolean>(display.mdAndUp.value);
|
||||
const activeTab = ref<ExplorePageTabType>('query');
|
||||
const currentExploreId = ref<string>('');
|
||||
const activeTab = ref<ExplorerPageTabType>('query');
|
||||
const currentExplorationId = ref<string>('');
|
||||
const countPerPage = ref<number>(15);
|
||||
const showCustomDateRangeDialog = ref<boolean>(false);
|
||||
|
||||
@@ -220,16 +220,16 @@ const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDa
|
||||
const fiscalYearStart = computed<number>(() => userStore.currentUserFiscalYearStart);
|
||||
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
|
||||
|
||||
const query = computed<TransactionExploreFilter>(() => exploresStore.transactionExploreFilter);
|
||||
const filteredTransactions = computed<TransactionInsightDataItem[]>(() => exploresStore.filteredTransactions);
|
||||
const query = computed<TransactionExplorerFilter>(() => explorersStore.transactionExplorerFilter);
|
||||
const filteredTransactions = computed<TransactionInsightDataItem[]>(() => explorersStore.filteredTransactions);
|
||||
|
||||
const allDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.InsightsExplore, true));
|
||||
const allDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.InsightsExplorer, true));
|
||||
const canShiftDateRange = computed<boolean>(() => query.value.dateRangeType !== DateRange.All.type);
|
||||
const displayQueryDateRangeName = computed<string>(() => formatDateRange(query.value.dateRangeType, query.value.startTime, query.value.endTime));
|
||||
const displayQueryStartTime = computed<string>(() => formatDateTimeToLongDateTime(parseDateTimeFromUnixTime(query.value.startTime)));
|
||||
const displayQueryEndTime = computed<string>(() => formatDateTimeToLongDateTime(parseDateTimeFromUnixTime(query.value.endTime)));
|
||||
|
||||
const allTabs = computed<{ name: string, value: ExplorePageTabType }[]>(() => {
|
||||
const allTabs = computed<{ name: string, value: ExplorerPageTabType }[]>(() => {
|
||||
return [
|
||||
{
|
||||
name: tt('Query'),
|
||||
@@ -260,11 +260,11 @@ const allPageCounts = computed<NameNumeralValue[]>(() => {
|
||||
});
|
||||
|
||||
function getFilterLinkUrl(): string {
|
||||
return `/insights/explore?${exploresStore.getTransactionExplorePageParams(currentExploreId.value, activeTab.value)}`;
|
||||
return `/insights/explorer?${explorersStore.getTransactionExplorerPageParams(currentExplorationId.value, activeTab.value)}`;
|
||||
}
|
||||
|
||||
function init(initProps: InsightsExploreProps): void {
|
||||
const filter: TransactionExplorePartialFilter = {
|
||||
function init(initProps: InsightsExplorerProps): void {
|
||||
const filter: TransactionExplorerPartialFilter = {
|
||||
dateRangeType: initProps.initDateRangeType ? parseInt(initProps.initDateRangeType) : undefined,
|
||||
startTime: initProps.initStartTime ? parseInt(initProps.initStartTime) : undefined,
|
||||
endTime: initProps.initEndTime ? parseInt(initProps.initEndTime) : undefined
|
||||
@@ -290,9 +290,9 @@ function init(initProps: InsightsExploreProps): void {
|
||||
activeTab.value = 'query';
|
||||
}
|
||||
|
||||
exploresStore.initTransactionExploreFilter(filter);
|
||||
explorersStore.initTransactionExplorerFilter(filter);
|
||||
|
||||
if (!needReload && !exploresStore.transactionExploreStateInvalid) {
|
||||
if (!needReload && !explorersStore.transactionExplorerStateInvalid) {
|
||||
loading.value = false;
|
||||
initing.value = false;
|
||||
return;
|
||||
@@ -303,7 +303,7 @@ function init(initProps: InsightsExploreProps): void {
|
||||
transactionCategoriesStore.loadAllCategories({ force: false }),
|
||||
transactionTagsStore.loadAllTags({ force: false })
|
||||
]).then(() => {
|
||||
return exploresStore.loadAllTransactions({ force: false });
|
||||
return explorersStore.loadAllTransactions({ force: false });
|
||||
}).then(() => {
|
||||
loading.value = false;
|
||||
initing.value = false;
|
||||
@@ -320,7 +320,7 @@ function init(initProps: InsightsExploreProps): void {
|
||||
function reload(force: boolean): Promise<unknown> | null {
|
||||
loading.value = true;
|
||||
|
||||
return exploresStore.loadAllTransactions({
|
||||
return explorersStore.loadAllTransactions({
|
||||
force: force
|
||||
}).then(() => {
|
||||
loading.value = false;
|
||||
@@ -339,13 +339,13 @@ function reload(force: boolean): Promise<unknown> | null {
|
||||
|
||||
function exportResults(): void {
|
||||
if (activeTab.value === 'table' && filteredTransactions.value) {
|
||||
const results = exploreDataTableTab.value?.buildExportResults();
|
||||
const results = explorerDataTableTab.value?.buildExportResults();
|
||||
|
||||
if (results) {
|
||||
exportDialog.value?.open(results);
|
||||
}
|
||||
} else if (activeTab.value === 'chart') {
|
||||
const results = exploreChartTab.value?.buildExportResults();
|
||||
const results = explorerChartTab.value?.buildExportResults();
|
||||
|
||||
if (results) {
|
||||
exportDialog.value?.open(results);
|
||||
@@ -367,7 +367,7 @@ function setDateFilter(dateType: number): void {
|
||||
return;
|
||||
}
|
||||
|
||||
const changed = exploresStore.updateTransactionExploreFilter({
|
||||
const changed = explorersStore.updateTransactionExplorerFilter({
|
||||
dateRangeType: dateRange.dateType,
|
||||
startTime: dateRange.minTime,
|
||||
endTime: dateRange.maxTime
|
||||
@@ -375,7 +375,7 @@ function setDateFilter(dateType: number): void {
|
||||
|
||||
if (changed) {
|
||||
loading.value = true;
|
||||
exploresStore.updateTransactionExploreInvalidState(true);
|
||||
explorersStore.updateTransactionExplorerInvalidState(true);
|
||||
router.push(getFilterLinkUrl());
|
||||
}
|
||||
}
|
||||
@@ -385,9 +385,9 @@ function setCustomDateFilter(startTime: number, endTime: number): void {
|
||||
return;
|
||||
}
|
||||
|
||||
const chartDateType = getDateTypeByDateRange(startTime, endTime, firstDayOfWeek.value, fiscalYearStart.value, DateRangeScene.InsightsExplore);
|
||||
const chartDateType = getDateTypeByDateRange(startTime, endTime, firstDayOfWeek.value, fiscalYearStart.value, DateRangeScene.InsightsExplorer);
|
||||
|
||||
const changed = exploresStore.updateTransactionExploreFilter({
|
||||
const changed = explorersStore.updateTransactionExplorerFilter({
|
||||
dateRangeType: chartDateType,
|
||||
startTime: startTime,
|
||||
endTime: endTime
|
||||
@@ -397,7 +397,7 @@ function setCustomDateFilter(startTime: number, endTime: number): void {
|
||||
|
||||
if (changed) {
|
||||
loading.value = true;
|
||||
exploresStore.updateTransactionExploreInvalidState(true);
|
||||
explorersStore.updateTransactionExplorerInvalidState(true);
|
||||
router.push(getFilterLinkUrl());
|
||||
}
|
||||
}
|
||||
@@ -409,7 +409,7 @@ function shiftDateRange(scale: number): void {
|
||||
|
||||
const newDateRange = getShiftedDateRangeAndDateType(query.value.startTime, query.value.endTime, scale, firstDayOfWeek.value, fiscalYearStart.value, DateRangeScene.Normal);
|
||||
|
||||
const changed = exploresStore.updateTransactionExploreFilter({
|
||||
const changed = explorersStore.updateTransactionExplorerFilter({
|
||||
dateRangeType: newDateRange.dateType,
|
||||
startTime: newDateRange.minTime,
|
||||
endTime: newDateRange.maxTime
|
||||
@@ -417,7 +417,7 @@ function shiftDateRange(scale: number): void {
|
||||
|
||||
if (changed) {
|
||||
loading.value = true;
|
||||
exploresStore.updateTransactionExploreInvalidState(true);
|
||||
explorersStore.updateTransactionExplorerInvalidState(true);
|
||||
router.push(getFilterLinkUrl());
|
||||
}
|
||||
}
|
||||
+72
-72
@@ -11,9 +11,9 @@
|
||||
density="compact"
|
||||
:disabled="loading"
|
||||
:label="tt('Chart Type')"
|
||||
:items="allTransactionExploreChartTypes"
|
||||
:items="allTransactionExplorerChartTypes"
|
||||
:model-value="currentChartType"
|
||||
@update:model-value="updateChartType($event as TransactionExploreChartTypeValue)"
|
||||
@update:model-value="updateChartType($event as TransactionExplorerChartTypeValue)"
|
||||
/>
|
||||
<v-select
|
||||
class="flex-0-0"
|
||||
@@ -23,9 +23,9 @@
|
||||
density="compact"
|
||||
:disabled="loading"
|
||||
:label="tt('Axis / Category')"
|
||||
:items="allTransactionExploreDataDimensions"
|
||||
:items="allTransactionExplorerDataDimensions"
|
||||
:model-value="currentCategoryDimension"
|
||||
@update:model-value="updateCategoryDimension($event as TransactionExploreDataDimensionType)"
|
||||
@update:model-value="updateCategoryDimension($event as TransactionExplorerDataDimensionType)"
|
||||
/>
|
||||
<v-select
|
||||
class="flex-0-0"
|
||||
@@ -33,14 +33,14 @@
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
density="compact"
|
||||
:disabled="loading || !TransactionExploreChartType.valueOf(currentChartType)?.seriesDimensionRequired"
|
||||
:disabled="loading || !TransactionExplorerChartType.valueOf(currentChartType)?.seriesDimensionRequired"
|
||||
:label="tt('Series')"
|
||||
:items="allTransactionExploreDataDimensions"
|
||||
:model-value="TransactionExploreChartType.valueOf(currentChartType)?.seriesDimensionRequired ? currentSeriesDimension : TransactionExploreDataDimension.None.value"
|
||||
@update:model-value="updateSeriesDimension($event as TransactionExploreDataDimensionType)"
|
||||
:items="allTransactionExplorerDataDimensions"
|
||||
:model-value="TransactionExplorerChartType.valueOf(currentChartType)?.seriesDimensionRequired ? currentSeriesDimension : TransactionExplorerDataDimension.None.value"
|
||||
@update:model-value="updateSeriesDimension($event as TransactionExplorerDataDimensionType)"
|
||||
>
|
||||
<template #item="{ props, item }">
|
||||
<v-list-item :disabled="item.value === currentCategoryDimension && item.value !== TransactionExploreDataDimension.SeriesDimensionDefault.value" v-bind="props">
|
||||
<v-list-item :disabled="item.value === currentCategoryDimension && item.value !== TransactionExplorerDataDimension.SeriesDimensionDefault.value" v-bind="props">
|
||||
<template #title>
|
||||
<div class="text-truncate">{{ item.raw.name }}</div>
|
||||
</template>
|
||||
@@ -55,16 +55,16 @@
|
||||
density="compact"
|
||||
:disabled="loading"
|
||||
:label="tt('Value Metric')"
|
||||
:items="allTransactionExploreValueMetrics"
|
||||
:items="allTransactionExplorerValueMetrics"
|
||||
:model-value="currentValueMetric"
|
||||
@update:model-value="updateValueMetric($event as TransactionExploreValueMetricType)"
|
||||
@update:model-value="updateValueMetric($event as TransactionExplorerValueMetricType)"
|
||||
/>
|
||||
<v-spacer class="flex-1-1"/>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-text :class="{ 'readonly': loading }" v-if="currentChartType === TransactionExploreChartType.Pie.value">
|
||||
<v-card-text :class="{ 'readonly': loading }" v-if="currentChartType === TransactionExplorerChartType.Pie.value">
|
||||
<pie-chart
|
||||
:items="[
|
||||
{id: '1', name: '---', value: 60, color: '7c7c7f'},
|
||||
@@ -79,12 +79,12 @@
|
||||
v-if="loading"
|
||||
/>
|
||||
<pie-chart
|
||||
:items="categoryDimensionTransactionExploreData && categoryDimensionTransactionExploreData.length ? categoryDimensionTransactionExploreData : []"
|
||||
:items="categoryDimensionTransactionExplorerData && categoryDimensionTransactionExplorerData.length ? categoryDimensionTransactionExplorerData : []"
|
||||
:min-valid-percent="0.0001"
|
||||
:show-value="true"
|
||||
:show-percent="true"
|
||||
:enable-click-item="true"
|
||||
:amount-value="exploresStore.transactionExploreFilter.valueMetric !== TransactionExploreValueMetric.TransactionCount.value"
|
||||
:amount-value="explorersStore.transactionExplorerFilter.valueMetric !== TransactionExplorerValueMetric.TransactionCount.value"
|
||||
:default-currency="defaultCurrency"
|
||||
id-field="categoryId"
|
||||
name-field="categoryDisplayName"
|
||||
@@ -93,7 +93,7 @@
|
||||
@click="onClickPieChartItem"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-text :class="{ 'readonly': loading }" v-if="currentChartType === TransactionExploreChartType.Radar.value">
|
||||
<v-card-text :class="{ 'readonly': loading }" v-if="currentChartType === TransactionExplorerChartType.Radar.value">
|
||||
<radar-chart
|
||||
:items="[
|
||||
{name: '---', value: 10},
|
||||
@@ -109,11 +109,11 @@
|
||||
v-if="loading"
|
||||
/>
|
||||
<radar-chart
|
||||
:items="categoryDimensionTransactionExploreData && categoryDimensionTransactionExploreData.length ? categoryDimensionTransactionExploreData : []"
|
||||
:items="categoryDimensionTransactionExplorerData && categoryDimensionTransactionExplorerData.length ? categoryDimensionTransactionExplorerData : []"
|
||||
:min-valid-percent="0.0001"
|
||||
:show-value="true"
|
||||
:show-percent="true"
|
||||
:amount-value="exploresStore.transactionExploreFilter.valueMetric !== TransactionExploreValueMetric.TransactionCount.value"
|
||||
:amount-value="explorersStore.transactionExplorerFilter.valueMetric !== TransactionExplorerValueMetric.TransactionCount.value"
|
||||
:default-currency="defaultCurrency"
|
||||
name-field="categoryDisplayName"
|
||||
value-field="value"
|
||||
@@ -132,20 +132,20 @@ import { useUserStore } from '@/stores/user.ts';
|
||||
import {
|
||||
type CategoriedInfo,
|
||||
type SeriesedInfo,
|
||||
TransactionExploreDimensionType,
|
||||
useExploresStore
|
||||
} from '@/stores/explore.ts';
|
||||
TransactionExplorerDimensionType,
|
||||
useExplorersStore
|
||||
} from '@/stores/explorer.ts';
|
||||
|
||||
import { type NameValue } from '@/core/base.ts';
|
||||
import { Month, WeekDay } from '@/core/datetime.ts';
|
||||
import {
|
||||
TransactionExploreChartTypeValue,
|
||||
TransactionExploreChartType,
|
||||
TransactionExploreDataDimensionType,
|
||||
TransactionExploreDataDimension,
|
||||
TransactionExploreValueMetricType,
|
||||
TransactionExploreValueMetric
|
||||
} from '@/core/explore.ts';
|
||||
TransactionExplorerChartTypeValue,
|
||||
TransactionExplorerChartType,
|
||||
TransactionExplorerDataDimensionType,
|
||||
TransactionExplorerDataDimension,
|
||||
TransactionExplorerValueMetricType,
|
||||
TransactionExplorerValueMetric
|
||||
} from '@/core/explorer.ts';
|
||||
|
||||
import {
|
||||
isDefined
|
||||
@@ -155,26 +155,26 @@ import {
|
||||
parseDateTimeFromUnixTime
|
||||
} from '@/lib/datetime.ts';
|
||||
|
||||
interface InsightsExploreDataTableTabProps {
|
||||
interface InsightsExplorerDataTableTabProps {
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
interface CategoryDimensionData {
|
||||
categoryDisplayName: string;
|
||||
categoryId: string;
|
||||
categoryIdType: TransactionExploreDimensionType;
|
||||
categoryIdType: TransactionExplorerDimensionType;
|
||||
value: number;
|
||||
}
|
||||
|
||||
defineProps<InsightsExploreDataTableTabProps>();
|
||||
defineProps<InsightsExplorerDataTableTabProps>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
tt,
|
||||
getAllTransactionExploreDataDimensions,
|
||||
getAllTransactionExploreValueMetrics,
|
||||
getAllTransactionExploreChartTypes,
|
||||
getAllTransactionExplorerDataDimensions,
|
||||
getAllTransactionExplorerValueMetrics,
|
||||
getAllTransactionExplorerChartTypes,
|
||||
getMonthLongName,
|
||||
getMonthdayShortName,
|
||||
getWeekdayLongName,
|
||||
@@ -190,31 +190,31 @@ const {
|
||||
} = useI18n();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const exploresStore = useExploresStore();
|
||||
const explorersStore = useExplorersStore();
|
||||
|
||||
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
|
||||
|
||||
const allTransactionExploreDataDimensions = computed<NameValue[]>(() => getAllTransactionExploreDataDimensions());
|
||||
const allTransactionExploreValueMetrics = computed<NameValue[]>(() => getAllTransactionExploreValueMetrics());
|
||||
const allTransactionExploreChartTypes = computed<NameValue[]>(() => getAllTransactionExploreChartTypes());
|
||||
const allTransactionExplorerDataDimensions = computed<NameValue[]>(() => getAllTransactionExplorerDataDimensions());
|
||||
const allTransactionExplorerValueMetrics = computed<NameValue[]>(() => getAllTransactionExplorerValueMetrics());
|
||||
const allTransactionExplorerChartTypes = computed<NameValue[]>(() => getAllTransactionExplorerChartTypes());
|
||||
|
||||
const currentCategoryDimension = computed<TransactionExploreDataDimensionType>(() => exploresStore.transactionExploreFilter.categoryDimension);
|
||||
const currentSeriesDimension = computed<TransactionExploreDataDimensionType>(() => exploresStore.transactionExploreFilter.seriesDimension);
|
||||
const currentValueMetric = computed<TransactionExploreValueMetricType>(() => exploresStore.transactionExploreFilter.valueMetric);
|
||||
const currentChartType = computed<TransactionExploreChartTypeValue>(() => exploresStore.transactionExploreFilter.chartType);
|
||||
const currentCategoryDimension = computed<TransactionExplorerDataDimensionType>(() => explorersStore.transactionExplorerFilter.categoryDimension);
|
||||
const currentSeriesDimension = computed<TransactionExplorerDataDimensionType>(() => explorersStore.transactionExplorerFilter.seriesDimension);
|
||||
const currentValueMetric = computed<TransactionExplorerValueMetricType>(() => explorersStore.transactionExplorerFilter.valueMetric);
|
||||
const currentChartType = computed<TransactionExplorerChartTypeValue>(() => explorersStore.transactionExplorerFilter.chartType);
|
||||
|
||||
const categoryDimensionTransactionExploreData = computed<CategoryDimensionData[]>(() => {
|
||||
if (currentChartType.value !== TransactionExploreChartType.Pie.value && currentChartType.value !== TransactionExploreChartType.Radar.value) {
|
||||
const categoryDimensionTransactionExplorerData = computed<CategoryDimensionData[]>(() => {
|
||||
if (currentChartType.value !== TransactionExplorerChartType.Pie.value && currentChartType.value !== TransactionExplorerChartType.Radar.value) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (!exploresStore.categoriedTransactionExploreData || !exploresStore.categoriedTransactionExploreData.length) {
|
||||
if (!explorersStore.categoriedTransactionExplorerData || !explorersStore.categoriedTransactionExplorerData.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const result: CategoryDimensionData[] = [];
|
||||
|
||||
for (const categoriedData of exploresStore.categoriedTransactionExploreData) {
|
||||
for (const categoriedData of explorersStore.categoriedTransactionExplorerData) {
|
||||
const data = categoriedData.data[0];
|
||||
|
||||
if (!isDefined(data)) {
|
||||
@@ -238,18 +238,18 @@ function getCategoriedDataDisplayName(info: CategoriedInfo | SeriesedInfo): stri
|
||||
let name: string = '';
|
||||
let needI18n: boolean | undefined = false;
|
||||
let i18nParameters: Record<string, unknown> | undefined = undefined;
|
||||
let dimessionType: TransactionExploreDataDimensionType = TransactionExploreDataDimension.None.value;
|
||||
let dimessionType: TransactionExplorerDataDimensionType = TransactionExplorerDataDimension.None.value;
|
||||
|
||||
if ('categoryName' in info) {
|
||||
name = info.categoryName;
|
||||
needI18n = info.categoryNameNeedI18n;
|
||||
i18nParameters = info.categoryNameI18nParameters;
|
||||
dimessionType = exploresStore.transactionExploreFilter.categoryDimension;
|
||||
dimessionType = explorersStore.transactionExplorerFilter.categoryDimension;
|
||||
} else if ('seriesName' in info) {
|
||||
name = info.seriesName;
|
||||
needI18n = info.seriesNameNeedI18n;
|
||||
i18nParameters = info.seriesNameI18nParameters;
|
||||
dimessionType = exploresStore.transactionExploreFilter.seriesDimension;
|
||||
dimessionType = explorersStore.transactionExplorerFilter.seriesDimension;
|
||||
}
|
||||
|
||||
let displayName: string = name;
|
||||
@@ -262,32 +262,32 @@ function getCategoriedDataDisplayName(info: CategoriedInfo | SeriesedInfo): stri
|
||||
}
|
||||
|
||||
// convert the name to formatted date time if needed
|
||||
if (dimessionType === TransactionExploreDataDimension.DateTime.value) {
|
||||
if (dimessionType === TransactionExplorerDataDimension.DateTime.value) {
|
||||
displayName = formatDateTimeToShortDateTime(parseDateTimeFromUnixTime(parseInt(name)));
|
||||
} else if (dimessionType === TransactionExploreDataDimension.DateTimeByYearMonthDay.value) {
|
||||
} else if (dimessionType === TransactionExplorerDataDimension.DateTimeByYearMonthDay.value) {
|
||||
displayName = formatDateTimeToShortDate(parseDateTimeFromUnixTime(parseInt(name)));
|
||||
} else if (dimessionType === TransactionExploreDataDimension.DateTimeByYearMonth.value) {
|
||||
} else if (dimessionType === TransactionExplorerDataDimension.DateTimeByYearMonth.value) {
|
||||
displayName = formatDateTimeToGregorianLikeShortYearMonth(parseDateTimeFromUnixTime(parseInt(name)));
|
||||
} else if (dimessionType === TransactionExploreDataDimension.DateTimeByYearQuarter.value) {
|
||||
} else if (dimessionType === TransactionExplorerDataDimension.DateTimeByYearQuarter.value) {
|
||||
displayName = formatDateTimeToGregorianLikeYearQuarter(parseDateTimeFromUnixTime(parseInt(name)));
|
||||
} else if (dimessionType === TransactionExploreDataDimension.DateTimeByYear.value) {
|
||||
} else if (dimessionType === TransactionExplorerDataDimension.DateTimeByYear.value) {
|
||||
displayName = formatDateTimeToGregorianLikeShortYear(parseDateTimeFromUnixTime(parseInt(name)));
|
||||
} else if (dimessionType === TransactionExploreDataDimension.DateTimeByFiscalYear.value) {
|
||||
} else if (dimessionType === TransactionExplorerDataDimension.DateTimeByFiscalYear.value) {
|
||||
displayName = formatDateTimeToGregorianLikeFiscalYear(parseDateTimeFromUnixTime(parseInt(name)));
|
||||
} else if (dimessionType === TransactionExploreDataDimension.DateTimeByDayOfWeek.value) {
|
||||
} else if (dimessionType === TransactionExplorerDataDimension.DateTimeByDayOfWeek.value) {
|
||||
const weekDay = WeekDay.parse(name);
|
||||
displayName = weekDay ? getWeekdayLongName(weekDay) : tt('Unknown');
|
||||
} else if (dimessionType === TransactionExploreDataDimension.DateTimeByDayOfMonth.value) {
|
||||
} else if (dimessionType === TransactionExplorerDataDimension.DateTimeByDayOfMonth.value) {
|
||||
displayName = getMonthdayShortName(parseInt(name));
|
||||
} else if (dimessionType === TransactionExploreDataDimension.DateTimeByMonthOfYear.value) {
|
||||
} else if (dimessionType === TransactionExplorerDataDimension.DateTimeByMonthOfYear.value) {
|
||||
const month = Month.valueOf(parseInt(name));
|
||||
displayName = month ? getMonthLongName(month.name) : tt('Unknown');
|
||||
} else if (dimessionType === TransactionExploreDataDimension.DateTimeByQuarterOfYear.value) {
|
||||
} else if (dimessionType === TransactionExplorerDataDimension.DateTimeByQuarterOfYear.value) {
|
||||
displayName = getQuarterName(parseInt(name));
|
||||
}
|
||||
|
||||
if (dimessionType === TransactionExploreDataDimension.SourceAmount.value
|
||||
|| dimessionType === TransactionExploreDataDimension.DestinationAmount.value) {
|
||||
if (dimessionType === TransactionExplorerDataDimension.SourceAmount.value
|
||||
|| dimessionType === TransactionExplorerDataDimension.DestinationAmount.value) {
|
||||
if (name !== '' && name !== 'none' && Number.isFinite(parseInt(name))) {
|
||||
displayName = formatAmountToLocalizedNumerals(parseInt(name));
|
||||
}
|
||||
@@ -296,26 +296,26 @@ function getCategoriedDataDisplayName(info: CategoriedInfo | SeriesedInfo): stri
|
||||
return displayName;
|
||||
}
|
||||
|
||||
function updateCategoryDimension(categoryDimension: TransactionExploreDataDimensionType): void {
|
||||
exploresStore.updateTransactionExploreFilter({
|
||||
function updateCategoryDimension(categoryDimension: TransactionExplorerDataDimensionType): void {
|
||||
explorersStore.updateTransactionExplorerFilter({
|
||||
categoryDimension: categoryDimension,
|
||||
});
|
||||
}
|
||||
|
||||
function updateSeriesDimension(seriesDimension: TransactionExploreDataDimensionType): void {
|
||||
exploresStore.updateTransactionExploreFilter({
|
||||
function updateSeriesDimension(seriesDimension: TransactionExplorerDataDimensionType): void {
|
||||
explorersStore.updateTransactionExplorerFilter({
|
||||
seriesDimension: seriesDimension,
|
||||
});
|
||||
}
|
||||
|
||||
function updateValueMetric(valueMetric: TransactionExploreValueMetricType): void {
|
||||
exploresStore.updateTransactionExploreFilter({
|
||||
function updateValueMetric(valueMetric: TransactionExplorerValueMetricType): void {
|
||||
explorersStore.updateTransactionExplorerFilter({
|
||||
valueMetric: valueMetric,
|
||||
});
|
||||
}
|
||||
|
||||
function updateChartType(chartType: TransactionExploreChartTypeValue): void {
|
||||
exploresStore.updateTransactionExploreFilter({
|
||||
function updateChartType(chartType: TransactionExplorerChartTypeValue): void {
|
||||
explorersStore.updateTransactionExplorerFilter({
|
||||
chartType: chartType,
|
||||
});
|
||||
}
|
||||
@@ -326,7 +326,7 @@ function onClickPieChartItem(item: Record<string, unknown>): void {
|
||||
}
|
||||
|
||||
const data = (item as unknown) as CategoryDimensionData;
|
||||
const params: string = exploresStore.getTransactionListPageParams(data.categoryIdType, data.categoryId);
|
||||
const params: string = explorersStore.getTransactionListPageParams(data.categoryIdType, data.categoryId);
|
||||
|
||||
if (params) {
|
||||
router.push(`/transaction/list?${params}`);
|
||||
@@ -334,15 +334,15 @@ function onClickPieChartItem(item: Record<string, unknown>): void {
|
||||
}
|
||||
|
||||
function buildExportResults(): { headers: string[], data: string[][] } | undefined {
|
||||
if (currentChartType.value === TransactionExploreChartType.Pie.value || currentChartType.value === TransactionExploreChartType.Radar.value) {
|
||||
const valueMetric = TransactionExploreValueMetric.valueOf(exploresStore.transactionExploreFilter.valueMetric);
|
||||
if (currentChartType.value === TransactionExplorerChartType.Pie.value || currentChartType.value === TransactionExplorerChartType.Radar.value) {
|
||||
const valueMetric = TransactionExplorerValueMetric.valueOf(explorersStore.transactionExplorerFilter.valueMetric);
|
||||
|
||||
return {
|
||||
headers: [
|
||||
tt('Name'),
|
||||
tt(valueMetric?.name ?? 'Unknown')
|
||||
],
|
||||
data: categoryDimensionTransactionExploreData.value.map(data => [
|
||||
data: categoryDimensionTransactionExplorerData.value.map(data => [
|
||||
data.categoryDisplayName,
|
||||
valueMetric?.isAmount ? formatAmountToWesternArabicNumeralsWithoutDigitGrouping(data.value) : data.value.toString(10)
|
||||
])
|
||||
+8
-8
@@ -4,7 +4,7 @@
|
||||
fixed-footer
|
||||
multi-sort
|
||||
item-value="index"
|
||||
:class="{ 'insights-explore-table': true, 'text-sm': true, 'disabled': loading, 'loading-skeleton': loading }"
|
||||
:class="{ 'insights-explorer-table': true, 'text-sm': true, 'disabled': loading, 'loading-skeleton': loading }"
|
||||
:headers="dataTableHeaders"
|
||||
:items="filteredTransactions"
|
||||
:hover="true"
|
||||
@@ -77,7 +77,7 @@ import { ref, computed } from 'vue';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
import { useExploresStore } from '@/stores/explore.ts';
|
||||
import { useExplorersStore } from '@/stores/explorer.ts';
|
||||
|
||||
import { TransactionType } from '@/core/transaction.ts';
|
||||
|
||||
@@ -96,12 +96,12 @@ import {
|
||||
mdiPencilBoxOutline
|
||||
} from '@mdi/js';
|
||||
|
||||
interface InsightsExploreDataTableTabProps {
|
||||
interface InsightsExplorerDataTableTabProps {
|
||||
loading?: boolean;
|
||||
countPerPage: number;
|
||||
}
|
||||
|
||||
const props = defineProps<InsightsExploreDataTableTabProps>();
|
||||
const props = defineProps<InsightsExplorerDataTableTabProps>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:countPerPage', value: number): void;
|
||||
}>();
|
||||
@@ -115,13 +115,13 @@ const {
|
||||
} = useI18n();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const exploresStore = useExploresStore();
|
||||
const explorersStore = useExplorersStore();
|
||||
|
||||
const currentPage = ref<number>(1);
|
||||
|
||||
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
|
||||
|
||||
const filteredTransactions = computed<TransactionInsightDataItem[]>(() => exploresStore.filteredTransactions);
|
||||
const filteredTransactions = computed<TransactionInsightDataItem[]>(() => explorersStore.filteredTransactions);
|
||||
|
||||
const itemsPerPage = computed<number>({
|
||||
get: () => props.countPerPage,
|
||||
@@ -274,7 +274,7 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-table.insights-explore-table > .v-table__wrapper > table {
|
||||
.v-table.insights-explorer-table > .v-table__wrapper > table {
|
||||
th:not(:last-child),
|
||||
td:not(:last-child) {
|
||||
width: auto !important;
|
||||
@@ -287,7 +287,7 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
|
||||
.v-table.insights-explore-table.loading-skeleton tr.v-data-table-rows-no-data > td {
|
||||
.v-table.insights-explorer-table.loading-skeleton tr.v-data-table-rows-no-data > td {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
+55
-55
@@ -91,8 +91,8 @@
|
||||
density="compact"
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
:items="[{ value: TransactionExploreConditionRelation.First, displayName: tt('WHERE') }]"
|
||||
:model-value="TransactionExploreConditionRelation.First"
|
||||
:items="[{ value: TransactionExplorerConditionRelation.First, displayName: tt('WHERE') }]"
|
||||
:model-value="TransactionExplorerConditionRelation.First"
|
||||
v-if="conditionIndex < 1"
|
||||
/>
|
||||
|
||||
@@ -104,8 +104,8 @@
|
||||
item-value="value"
|
||||
:disabled="loading || !!editingQuery"
|
||||
:items="[
|
||||
{ value: TransactionExploreConditionRelation.And, displayName: tt('AND') },
|
||||
{ value: TransactionExploreConditionRelation.Or, displayName: tt('OR') }
|
||||
{ value: TransactionExplorerConditionRelation.And, displayName: tt('AND') },
|
||||
{ value: TransactionExplorerConditionRelation.Or, displayName: tt('OR') }
|
||||
]"
|
||||
v-model="conditionWithRelation.relation"
|
||||
v-else-if="conditionIndex >= 1"
|
||||
@@ -117,8 +117,8 @@
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
:disabled="loading || !!editingQuery"
|
||||
:items="allTransactionExploreConditionFields"
|
||||
@update:model-value="updateConditionField(queryIndex, conditionIndex, TransactionExploreConditionField.valueOf($event))"
|
||||
:items="allTransactionExplorerConditionFields"
|
||||
@update:model-value="updateConditionField(queryIndex, conditionIndex, TransactionExplorerConditionField.valueOf($event))"
|
||||
v-model="conditionWithRelation.condition.field"
|
||||
/>
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
:disabled="loading || !!editingQuery"
|
||||
:items="getAllTransactionExploreConditionOperators(conditionWithRelation.getSupportedOperators())"
|
||||
:items="getAllTransactionExplorerConditionOperators(conditionWithRelation.getSupportedOperators())"
|
||||
v-model="conditionWithRelation.condition.operator"
|
||||
/>
|
||||
|
||||
@@ -146,7 +146,7 @@
|
||||
{ type: TransactionType.Transfer, displayName: tt('Transfer') }
|
||||
]"
|
||||
v-model="conditionWithRelation.condition.value"
|
||||
v-if="conditionWithRelation.condition.field === TransactionExploreConditionField.TransactionType.value"
|
||||
v-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionType.value"
|
||||
>
|
||||
<template #item="{ props, item }">
|
||||
<v-list-item :value="item.value" v-bind="props">
|
||||
@@ -170,7 +170,7 @@
|
||||
:placeholder="tt('None')"
|
||||
:model-value="getFilteredTransactionCategoriesDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
|
||||
@click="currentCondition = conditionWithRelation.condition; showFilterTransactionCategoriesDialog = true"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExploreConditionField.TransactionCategory.value"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionCategory.value"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
@@ -184,7 +184,7 @@
|
||||
:placeholder="tt('None')"
|
||||
:model-value="getFilteredAccountsDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
|
||||
@click="currentCondition = conditionWithRelation.condition; showFilterSourceAccountsDialog = true"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExploreConditionField.SourceAccount.value"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.SourceAccount.value"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
@@ -198,37 +198,37 @@
|
||||
:placeholder="tt('None')"
|
||||
:model-value="getFilteredAccountsDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
|
||||
@click="currentCondition = conditionWithRelation.condition; showFilterDestinationAccountsDialog = true"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExploreConditionField.DestinationAccount.value"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.DestinationAccount.value"
|
||||
/>
|
||||
|
||||
<div class="d-flex w-100 align-center gap-2"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExploreConditionField.SourceAmount.value ||
|
||||
conditionWithRelation.condition.field === TransactionExploreConditionField.DestinationAmount.value">
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.SourceAmount.value ||
|
||||
conditionWithRelation.condition.field === TransactionExplorerConditionField.DestinationAmount.value">
|
||||
<amount-input density="compact"
|
||||
:currency="defaultCurrency"
|
||||
:disabled="loading || !!editingQuery"
|
||||
v-model="conditionWithRelation.condition.value[0]"
|
||||
/>
|
||||
<span class="ms-2 me-2"
|
||||
v-if="conditionWithRelation.condition.operator === TransactionExploreConditionOperator.Between.value ||
|
||||
conditionWithRelation.condition.operator === TransactionExploreConditionOperator.NotBetween.value">~</span>
|
||||
v-if="conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.Between.value ||
|
||||
conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value">~</span>
|
||||
<amount-input density="compact"
|
||||
:currency="defaultCurrency"
|
||||
:disabled="loading || !!editingQuery"
|
||||
v-model="conditionWithRelation.condition.value[1]"
|
||||
v-if="conditionWithRelation.condition.operator === TransactionExploreConditionOperator.Between.value ||
|
||||
conditionWithRelation.condition.operator === TransactionExploreConditionOperator.NotBetween.value"
|
||||
v-if="conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.Between.value ||
|
||||
conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="d-flex w-100" v-else-if="conditionWithRelation.condition.field === TransactionExploreConditionField.TransactionTag.value">
|
||||
<div class="d-flex w-100" v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionTag.value">
|
||||
<v-text-field
|
||||
disabled
|
||||
persistent-placeholder
|
||||
density="compact"
|
||||
:placeholder="tt('None')"
|
||||
v-if="conditionWithRelation.condition.field === TransactionExploreConditionField.TransactionTag.value &&
|
||||
(conditionWithRelation.condition.operator === TransactionExploreConditionOperator.IsEmpty.value || conditionWithRelation.condition.operator === TransactionExploreConditionOperator.IsNotEmpty.value)"
|
||||
v-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionTag.value &&
|
||||
(conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsEmpty.value || conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsNotEmpty.value)"
|
||||
/>
|
||||
|
||||
<v-autocomplete
|
||||
@@ -245,7 +245,7 @@
|
||||
:items="allTags"
|
||||
v-model="conditionWithRelation.condition.value"
|
||||
v-model:search="tagSearchContent"
|
||||
v-else-if="conditionWithRelation.condition.operator !== TransactionExploreConditionOperator.IsEmpty.value && conditionWithRelation.condition.operator !== TransactionExploreConditionOperator.IsNotEmpty.value"
|
||||
v-else-if="conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsEmpty.value && conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsNotEmpty.value"
|
||||
>
|
||||
<template #chip="{ props, item }">
|
||||
<v-chip :prepend-icon="mdiPound" :text="item.title" v-bind="props"/>
|
||||
@@ -285,16 +285,16 @@
|
||||
|
||||
<v-text-field disabled density="compact"
|
||||
:placeholder="tt('None')"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExploreConditionField.Description.value &&
|
||||
conditionWithRelation.condition.operator === TransactionExploreConditionOperator.IsEmpty.value || conditionWithRelation.condition.operator === TransactionExploreConditionOperator.IsNotEmpty.value"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Description.value &&
|
||||
conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsEmpty.value || conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsNotEmpty.value"
|
||||
/>
|
||||
|
||||
<v-text-field density="compact"
|
||||
:disabled="loading || !!editingQuery"
|
||||
:placeholder="tt('None')"
|
||||
v-model="conditionWithRelation.condition.value"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExploreConditionField.Description.value &&
|
||||
conditionWithRelation.condition.operator !== TransactionExploreConditionOperator.IsEmpty.value && conditionWithRelation.condition.operator !== TransactionExploreConditionOperator.IsNotEmpty.value"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Description.value &&
|
||||
conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsEmpty.value && conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsNotEmpty.value"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -371,25 +371,25 @@ import { useUserStore } from '@/stores/user.ts';
|
||||
import { useAccountsStore } from '@/stores/account.ts';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
|
||||
import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
|
||||
import { useExploresStore } from '@/stores/explore.ts';
|
||||
import { useExplorersStore } from '@/stores/explorer.ts';
|
||||
|
||||
import { type NameValue, entries, values } from '@/core/base.ts';
|
||||
import { AccountType } from '@/core/account.ts';
|
||||
import { TransactionType } from '@/core/transaction.ts';
|
||||
import {
|
||||
TransactionExploreConditionRelation,
|
||||
TransactionExploreConditionField,
|
||||
TransactionExploreConditionOperator
|
||||
} from '@/core/explore.ts';
|
||||
TransactionExplorerConditionRelation,
|
||||
TransactionExplorerConditionField,
|
||||
TransactionExplorerConditionOperator
|
||||
} from '@/core/explorer.ts';
|
||||
|
||||
import {
|
||||
type TransactionTag
|
||||
} from '@/models/transaction_tag.ts';
|
||||
|
||||
import {
|
||||
type TransactionExploreCondition,
|
||||
TransactionExploreQuery
|
||||
} from '@/models/explore.ts';
|
||||
type TransactionExplorerCondition,
|
||||
TransactionExplorerQuery
|
||||
} from '@/models/explorer.ts';
|
||||
|
||||
import {
|
||||
isArray,
|
||||
@@ -409,46 +409,46 @@ import {
|
||||
mdiPound
|
||||
} from '@mdi/js';
|
||||
|
||||
interface ExploreQueryTabProps {
|
||||
interface ExplorerQueryTabProps {
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
type SnackBarType = InstanceType<typeof SnackBar>;
|
||||
|
||||
const props = defineProps<ExploreQueryTabProps>();
|
||||
const props = defineProps<ExplorerQueryTabProps>();
|
||||
|
||||
const {
|
||||
tt,
|
||||
joinMultiText,
|
||||
getAllTransactionExploreConditionFields,
|
||||
getAllTransactionExploreConditionOperators
|
||||
getAllTransactionExplorerConditionFields,
|
||||
getAllTransactionExplorerConditionOperators
|
||||
} = useI18n();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const accountsStore = useAccountsStore();
|
||||
const transactionCategoriesStore = useTransactionCategoriesStore();
|
||||
const transactionTagsStore = useTransactionTagsStore();
|
||||
const exploresStore = useExploresStore();
|
||||
const explorersStore = useExplorersStore();
|
||||
|
||||
const snackbar = useTemplateRef<SnackBarType>('snackbar');
|
||||
|
||||
const currentCondition = ref<TransactionExploreCondition | undefined>(undefined);
|
||||
const currentCondition = ref<TransactionExplorerCondition | undefined>(undefined);
|
||||
const showExpression = ref<Record<number, boolean>>({});
|
||||
const showFilterSourceAccountsDialog = ref<boolean>(false);
|
||||
const showFilterDestinationAccountsDialog = ref<boolean>(false);
|
||||
const showFilterTransactionCategoriesDialog = ref<boolean>(false);
|
||||
const tagSearchContent = ref<string>('');
|
||||
const editingQuery = ref<TransactionExploreQuery | undefined>(undefined);
|
||||
const editingQuery = ref<TransactionExplorerQuery | undefined>(undefined);
|
||||
const editingQueryName = ref<string>('');
|
||||
|
||||
const queries = computed<TransactionExploreQuery[]>(() => exploresStore.transactionExploreFilter.query);
|
||||
const queries = computed<TransactionExplorerQuery[]>(() => explorersStore.transactionExplorerFilter.query);
|
||||
|
||||
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
|
||||
const hasAnyAccount = computed<boolean>(() => accountsStore.allPlainAccounts.length > 0);
|
||||
const hasAnyTransactionCategory = computed<boolean>(() => !isObjectEmpty(transactionCategoriesStore.allTransactionCategoriesMap));
|
||||
const allTags = computed<TransactionTag[]>(() => transactionTagsStore.allTransactionTags);
|
||||
|
||||
const allTransactionExploreConditionFields = computed<NameValue[]>(() => getAllTransactionExploreConditionFields());
|
||||
const allTransactionExplorerConditionFields = computed<NameValue[]>(() => getAllTransactionExplorerConditionFields());
|
||||
|
||||
const isAllFilteredTagHidden = computed<boolean>(() => {
|
||||
const lowerCaseTagSearchContent = tagSearchContent.value.toLowerCase();
|
||||
@@ -534,10 +534,10 @@ function getFilteredTransactionCategoriesDisplayContent(filterTransactionCategor
|
||||
}
|
||||
|
||||
function addQuery(): void {
|
||||
queries.value.push(TransactionExploreQuery.create());
|
||||
queries.value.push(TransactionExplorerQuery.create());
|
||||
}
|
||||
|
||||
function updateQueryName(query: TransactionExploreQuery): void {
|
||||
function updateQueryName(query: TransactionExplorerQuery): void {
|
||||
query.name = editingQueryName.value;
|
||||
editingQuery.value = undefined;
|
||||
editingQueryName.value = '';
|
||||
@@ -548,7 +548,7 @@ function cancelUpdateQueryName(): void {
|
||||
editingQueryName.value = '';
|
||||
}
|
||||
|
||||
function duplicateQuery(query: TransactionExploreQuery): void {
|
||||
function duplicateQuery(query: TransactionExplorerQuery): void {
|
||||
queries.value.push(query.clone());
|
||||
}
|
||||
|
||||
@@ -572,13 +572,13 @@ function removeQuery(queryIndex: number): void {
|
||||
showExpression.value = newShowExpression;
|
||||
|
||||
if (queries.value.length < 1) {
|
||||
queries.value.push(TransactionExploreQuery.create());
|
||||
queries.value.push(TransactionExplorerQuery.create());
|
||||
}
|
||||
}
|
||||
|
||||
function clearAllQueries(): void {
|
||||
queries.value.length = 0;
|
||||
queries.value.push(TransactionExploreQuery.create());
|
||||
queries.value.push(TransactionExplorerQuery.create());
|
||||
}
|
||||
|
||||
function addCondition(queryIndex: number): void {
|
||||
@@ -588,7 +588,7 @@ function addCondition(queryIndex: number): void {
|
||||
return;
|
||||
}
|
||||
|
||||
const newCondition = query.addNewCondition(TransactionExploreConditionField.TransactionType, query.conditions.length < 1);
|
||||
const newCondition = query.addNewCondition(TransactionExplorerConditionField.TransactionType, query.conditions.length < 1);
|
||||
query.conditions.push(newCondition);
|
||||
}
|
||||
|
||||
@@ -605,12 +605,12 @@ function removeCondition(queryIndex: number, conditionIndex: number): void {
|
||||
const newFirstCondition = query.conditions[0];
|
||||
|
||||
if (newFirstCondition) {
|
||||
newFirstCondition.relation = TransactionExploreConditionRelation.First;
|
||||
newFirstCondition.relation = TransactionExplorerConditionRelation.First;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateConditionField(queryIndex: number, conditionIndex: number, newField: TransactionExploreConditionField | undefined): void {
|
||||
function updateConditionField(queryIndex: number, conditionIndex: number, newField: TransactionExplorerConditionField | undefined): void {
|
||||
if (!newField) {
|
||||
return;
|
||||
}
|
||||
@@ -632,7 +632,7 @@ function updateConditionField(queryIndex: number, conditionIndex: number, newFie
|
||||
}
|
||||
|
||||
function updateSourceAccount(changed: boolean, selectedAccountIds?: string[]): void {
|
||||
if (!changed || !currentCondition.value || currentCondition.value.field !== TransactionExploreConditionField.SourceAccount.value) {
|
||||
if (!changed || !currentCondition.value || currentCondition.value.field !== TransactionExplorerConditionField.SourceAccount.value) {
|
||||
showFilterSourceAccountsDialog.value = false;
|
||||
return;
|
||||
}
|
||||
@@ -643,7 +643,7 @@ function updateSourceAccount(changed: boolean, selectedAccountIds?: string[]): v
|
||||
}
|
||||
|
||||
function updateDestinationAccount(changed: boolean, selectedAccountIds?: string[]): void {
|
||||
if (!changed || !currentCondition.value || currentCondition.value.field !== TransactionExploreConditionField.DestinationAccount.value) {
|
||||
if (!changed || !currentCondition.value || currentCondition.value.field !== TransactionExplorerConditionField.DestinationAccount.value) {
|
||||
showFilterDestinationAccountsDialog.value = false;
|
||||
return;
|
||||
}
|
||||
@@ -654,7 +654,7 @@ function updateDestinationAccount(changed: boolean, selectedAccountIds?: string[
|
||||
}
|
||||
|
||||
function updateTransactionCategories(changed: boolean, selectedCategoryIds?: string[]): void {
|
||||
if (!changed || !currentCondition.value || currentCondition.value.field !== TransactionExploreConditionField.TransactionCategory.value) {
|
||||
if (!changed || !currentCondition.value || currentCondition.value.field !== TransactionExplorerConditionField.TransactionCategory.value) {
|
||||
showFilterTransactionCategoriesDialog.value = false;
|
||||
return;
|
||||
}
|
||||
@@ -674,14 +674,14 @@ function getExpression(queryIndex: number): string {
|
||||
try {
|
||||
return query.toExpression(transactionCategoriesStore.allTransactionCategoriesMap, accountsStore.allAccountsMap, transactionTagsStore.allTransactionTagsMap);
|
||||
} catch (ex) {
|
||||
logger.error('failed to generate expression for explore query#' + queryIndex, ex);
|
||||
logger.error('failed to generate expression for explorer query#' + queryIndex, ex);
|
||||
snackbar.value?.showError(tt('Failed to generate expression'));
|
||||
return tt('Failed to generate expression');
|
||||
}
|
||||
}
|
||||
|
||||
if (queries.value.length === 0) {
|
||||
queries.value.push(TransactionExploreQuery.create());
|
||||
queries.value.push(TransactionExplorerQuery.create());
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user