mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-21 10:14:26 +08:00
update name to insights explorer
This commit is contained in:
MaysWind
+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