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

support drag-and-drop to change query display orders

Browse Source
This commit is contained in:
MaysWind
2026-01-07 23:08:30 +08:00
parent d462d0164c
commit ab88b0bf44
4 changed files with 364 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/models/explorer.ts
+35 -27
View File
@@ -28,7 +28,7 @@ export class InsightsExplorerBasicInfo implements InsightsExplorerInfoResponse {
public name: string; public name: string;
public displayOrder: number; public displayOrder: number;
public hidden: boolean; public hidden: boolean;
public data: Record<string, string | number | string[]> = {}; public data: Record<string, string | number | object[]> = {};
private constructor(id: string, name: string, displayOrder: number, hidden: boolean) { private constructor(id: string, name: string, displayOrder: number, hidden: boolean) {
this.id = id; this.id = id;
@@ -98,9 +98,9 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
this.chartSortingType = chartSortingType; this.chartSortingType = chartSortingType;
} }
public get data(): Record<string, string | number | string[]> { public get data(): Record<string, string | number | object[]> {
return { return {
queries: this.queries.map(q => q.toJson()), queries: this.queries.map(q => q.toJsonObject()),
timezoneUsedForDateRange: this.timezoneUsedForDateRange, timezoneUsedForDateRange: this.timezoneUsedForDateRange,
chartType: this.chartType, chartType: this.chartType,
categoryDimension: this.categoryDimension, categoryDimension: this.categoryDimension,
@@ -139,10 +139,10 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
if (data) { if (data) {
if (Array.isArray(data['queries'])) { if (Array.isArray(data['queries'])) {
const textualQueries = data['queries'] as string[]; const queryItems = data['queries'] as object[];
for (const textualQuery of textualQueries) { for (const queryItem of queryItems) {
const query = TransactionExplorerQuery.parse(textualQuery); const query = TransactionExplorerQuery.parse(queryItem);
if (query) { if (query) {
queries.push(query); queries.push(query);
@@ -190,13 +190,13 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
); );
} }
public static createNewExplorer(name?: string): InsightsExplorer { public static createNewExplorer(newQueryId: string): InsightsExplorer {
return new InsightsExplorer( return new InsightsExplorer(
'', '',
name || '', '',
0, 0,
false, false,
[TransactionExplorerQuery.create()], [TransactionExplorerQuery.create(newQueryId)],
InsightsExplorer.Default.timezoneUsedForDateRange, InsightsExplorer.Default.timezoneUsedForDateRange,
InsightsExplorer.Default.chartType, InsightsExplorer.Default.chartType,
InsightsExplorer.Default.categoryDimension, InsightsExplorer.Default.categoryDimension,
@@ -209,14 +209,14 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
export interface InsightsExplorerCreateRequest { export interface InsightsExplorerCreateRequest {
readonly name: string; readonly name: string;
readonly data: Record<string, string | number | string[]>; readonly data: Record<string, string | number | object[]>;
readonly clientSessionId?: string; readonly clientSessionId?: string;
} }
export interface InsightsExplorerModifyRequest { export interface InsightsExplorerModifyRequest {
readonly id: string; readonly id: string;
readonly name: string; readonly name: string;
readonly data: Record<string, string | number | string[]>; readonly data: Record<string, string | number | object[]>;
readonly hidden: boolean; readonly hidden: boolean;
readonly clientSessionId?: string; readonly clientSessionId?: string;
} }
@@ -244,7 +244,7 @@ export interface InsightsExplorerInfoResponse {
readonly name: string; readonly name: string;
readonly displayOrder: number; readonly displayOrder: number;
readonly hidden: boolean; readonly hidden: boolean;
readonly data: Record<string, string | number | string[]>; readonly data: Record<string, string | number | object[]>;
} }
interface ExpressionNode { interface ExpressionNode {
@@ -253,10 +253,12 @@ interface ExpressionNode {
} }
export class TransactionExplorerQuery { export class TransactionExplorerQuery {
public id: string;
public name: string; public name: string;
public conditions: TransactionExplorerConditionWithRelation[]; public conditions: TransactionExplorerConditionWithRelation[];
private constructor(name: string, conditions: TransactionExplorerConditionWithRelation[]) { private constructor(id: string, name: string, conditions: TransactionExplorerConditionWithRelation[]) {
this.id = id;
this.name = name; this.name = name;
this.conditions = conditions; this.conditions = conditions;
} }
@@ -450,7 +452,7 @@ export class TransactionExplorerQuery {
return finalTokens; return finalTokens;
} }
public clone(): TransactionExplorerQuery { public clone(newId: string): TransactionExplorerQuery {
const clonedConditions: TransactionExplorerConditionWithRelation[] = []; const clonedConditions: TransactionExplorerConditionWithRelation[] = [];
for (const condition of this.conditions) { for (const condition of this.conditions) {
@@ -463,29 +465,35 @@ export class TransactionExplorerQuery {
clonedConditions.push(clonedCondition); clonedConditions.push(clonedCondition);
} }
return new TransactionExplorerQuery(this.name, clonedConditions); return new TransactionExplorerQuery(newId, this.name, clonedConditions);
} }
public toJson(): string { public toJsonObject(): object {
return JSON.stringify({ return {
id: this.id,
name: this.name, name: this.name,
conditions: this.conditions.map(condition => condition.toJsonObject()) conditions: this.conditions.map(condition => condition.toJsonObject())
}); };
} }
public static create(): TransactionExplorerQuery { public static create(id: string): TransactionExplorerQuery {
return new TransactionExplorerQuery("", []); return new TransactionExplorerQuery(id, "", []);
} }
public static parse(json: string): TransactionExplorerQuery | null { public static parse(obj: object): TransactionExplorerQuery | null {
const parsed = JSON.parse(json); if (!('id' in obj) || !('name' in obj) || !('conditions' in obj)) {
const nameFieldValue = parsed['name'] as unknown;
const conditionsFieldValue = parsed['conditions'] as unknown;
if (typeof nameFieldValue !== 'string' || !Array.isArray(conditionsFieldValue)) {
return null; return null;
} }
const idFieldValue = obj['id'] as unknown;
const nameFieldValue = obj['name'] as unknown;
const conditionsFieldValue = obj['conditions'] as unknown;
if (typeof idFieldValue !== 'string' || typeof nameFieldValue !== 'string' || !Array.isArray(conditionsFieldValue)) {
return null;
}
const id: string = idFieldValue;
const name: string = nameFieldValue; const name: string = nameFieldValue;
const conditions: TransactionExplorerConditionWithRelation[] = []; const conditions: TransactionExplorerConditionWithRelation[] = [];
@@ -505,7 +513,7 @@ export class TransactionExplorerQuery {
conditions.push(condition); conditions.push(condition);
} }
return new TransactionExplorerQuery(name, conditions); return new TransactionExplorerQuery(id, name, conditions);
} }
} }
src/stores/explorer.ts
+4 -3
View File
@@ -48,6 +48,7 @@ import {
getDateRangeByDateType, getDateRangeByDateType,
getFiscalYearFromUnixTime getFiscalYearFromUnixTime
} from '@/lib/datetime.ts'; } from '@/lib/datetime.ts';
import { generateRandomUUID } from '@/lib/misc.ts';
import services, { type ApiResponsePromise } from '@/lib/services.ts'; import services, { type ApiResponsePromise } from '@/lib/services.ts';
import logger from '@/lib/logger.ts'; import logger from '@/lib/logger.ts';
@@ -473,7 +474,7 @@ export const useExplorersStore = defineStore('explorers', () => {
const allInsightsExplorerBasicInfos = ref<InsightsExplorerBasicInfo[]>([]); const allInsightsExplorerBasicInfos = ref<InsightsExplorerBasicInfo[]>([]);
const allInsightsExplorerBasicInfosMap = ref<Record<string, InsightsExplorerBasicInfo>>({}); const allInsightsExplorerBasicInfosMap = ref<Record<string, InsightsExplorerBasicInfo>>({});
const currentInsightsExplorer = ref<InsightsExplorer>(InsightsExplorer.createNewExplorer()); const currentInsightsExplorer = ref<InsightsExplorer>(InsightsExplorer.createNewExplorer(generateRandomUUID()));
const insightsExplorerListStateInvalid = ref<boolean>(true); const insightsExplorerListStateInvalid = ref<boolean>(true);
const allTransactions = computed<TransactionInsightDataItem[]>(() => { const allTransactions = computed<TransactionInsightDataItem[]>(() => {
@@ -743,7 +744,7 @@ export const useExplorersStore = defineStore('explorers', () => {
transactionExplorerFilter.value.startTime = 0; transactionExplorerFilter.value.startTime = 0;
transactionExplorerFilter.value.endTime = 0; transactionExplorerFilter.value.endTime = 0;
transactionExplorerAllData.value = []; transactionExplorerAllData.value = [];
currentInsightsExplorer.value = InsightsExplorer.createNewExplorer(); currentInsightsExplorer.value = InsightsExplorer.createNewExplorer(generateRandomUUID());
transactionExplorerStateInvalid.value = true; transactionExplorerStateInvalid.value = true;
} }
@@ -784,7 +785,7 @@ export const useExplorersStore = defineStore('explorers', () => {
} }
if (resetQuery) { if (resetQuery) {
currentInsightsExplorer.value = InsightsExplorer.createNewExplorer(); currentInsightsExplorer.value = InsightsExplorer.createNewExplorer(generateRandomUUID());
} }
} }
src/views/desktop/insights/ExplorerPage.vue
+2 -2
View File
@@ -340,7 +340,7 @@ function init(initProps: InsightsExplorerProps): void {
loadExplorer(initProps.initId); loadExplorer(initProps.initId);
} }
} else { } else {
explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer()); explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer(generateRandomUUID()));
} }
if (!needReload && !explorersStore.transactionExplorerStateInvalid && !explorersStore.insightsExplorerListStateInvalid) { if (!needReload && !explorersStore.transactionExplorerStateInvalid && !explorersStore.insightsExplorerListStateInvalid) {
@@ -394,7 +394,7 @@ function createNewExplorer(): void {
return; return;
} }
explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer()); explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer(generateRandomUUID()));
router.push(getFilterLinkUrl()); router.push(getFilterLinkUrl());
} }
src/views/desktop/insights/tabs/ExplorerQueryTab.vue
+63 -70
View File
@@ -10,66 +10,77 @@
@click="clearAllQueries">{{ tt('Clear All') }}</v-btn> @click="clearAllQueries">{{ tt('Clear All') }}</v-btn>
</div> </div>
</v-card-subtitle> </v-card-subtitle>
<v-card-text class="pt-0"> <v-card-text class="pt-0 pb-0">
<div :key="queryIndex" v-for="(query, queryIndex) in queries"> <draggable-list
<v-card border class="card-title-with-bg mt-4"> item-key="id"
handle=".drag-handle"
ghost-class="dragging-item"
v-model="queries"
>
<template #item="{ element, index }">
<v-card border class="card-title-with-bg mt-4 mb-8">
<v-card-title class="d-flex align-center py-2 px-5"> <v-card-title class="d-flex align-center py-2 px-5">
<v-icon :icon="mdiTextBoxSearchOutline" size="20" /> <v-icon :icon="mdiTextBoxSearchOutline" size="20" />
<span class="query-name text-subtitle-1 ms-2" v-if="editingQuery !== query">{{ query.name || tt('format.misc.queryIndex', { index: queryIndex + 1 }) }}</span> <span class="query-name text-subtitle-1 ms-2" v-if="editingQuery !== element">{{ element.name || tt('format.misc.queryIndex', { index: index + 1 }) }}</span>
<div class="query-name-edit ms-2" v-if="editingQuery === query"> <div class="query-name-edit ms-2" v-if="editingQuery === element">
<v-text-field autofocus type="text" density="compact" variant="underlined" <v-text-field autofocus type="text" density="compact" variant="underlined"
:disabled="loading || disabled" :disabled="loading || disabled"
:placeholder="tt('format.misc.queryIndex', { index: queryIndex + 1 })" :placeholder="tt('format.misc.queryIndex', { index: index + 1 })"
v-text-field-auto-width="{ minWidth: 20, maxWidth: 300, auxSpanId: `query-name-aux-span-${queryIndex + 1}` }" v-text-field-auto-width="{ minWidth: 20, maxWidth: 300, auxSpanId: `query-name-aux-span-${index + 1}-${element.id}` }"
v-model="editingQueryName" v-model="editingQueryName"
@keyup.esc="cancelUpdateQueryName" @keyup.esc="cancelUpdateQueryName"
@keyup.enter="updateQueryName(query)" /> @keyup.enter="updateQueryName(element)" />
<span :id="`query-name-aux-span-${queryIndex + 1}`" /> <span :id="`query-name-aux-span-${index + 1}-${element.id}`" />
</div> </div>
<v-btn class="ms-2" density="compact" color="primary" variant="text" size="small" <v-btn class="ms-2" density="compact" color="primary" variant="text" size="small"
:icon="true" :disabled="loading || disabled" :icon="true" :disabled="loading || disabled"
@click="updateQueryName(query)" @click="updateQueryName(element)"
v-if="editingQuery === query"> v-if="editingQuery === element">
<v-icon :icon="mdiCheck" size="18" /> <v-icon :icon="mdiCheck" size="18" />
<v-tooltip activator="parent">{{ tt('Update') }}</v-tooltip> <v-tooltip activator="parent">{{ tt('Update') }}</v-tooltip>
</v-btn> </v-btn>
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small" <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
:icon="true" :disabled="loading || disabled" :icon="true" :disabled="loading || disabled"
@click="cancelUpdateQueryName" @click="cancelUpdateQueryName"
v-if="editingQuery === query"> v-if="editingQuery === element">
<v-icon :icon="mdiClose" size="18" /> <v-icon :icon="mdiClose" size="18" />
<v-tooltip activator="parent">{{ tt('Cancel') }}</v-tooltip> <v-tooltip activator="parent">{{ tt('Cancel') }}</v-tooltip>
</v-btn> </v-btn>
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small" <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
:icon="true" :disabled="loading || disabled || !!editingQuery" :icon="true" :disabled="loading || disabled || !!editingQuery"
@click="editingQueryName = query.name; editingQuery = query" @click="editingQueryName = element.name; editingQuery = element"
v-if="!editingQuery || editingQuery !== query"> v-if="!editingQuery || editingQuery !== element">
<v-icon :icon="mdiPencilOutline" size="18" /> <v-icon :icon="mdiPencilOutline" size="18" />
<v-tooltip activator="parent">{{ tt('Modify Query Name') }}</v-tooltip> <v-tooltip activator="parent">{{ tt('Modify Query Name') }}</v-tooltip>
</v-btn> </v-btn>
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small" <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
:icon="true" :disabled="loading || disabled || !!editingQuery" :icon="true" :disabled="loading || disabled || !!editingQuery"
@click="duplicateQuery(query)" @click="duplicateQuery(element)"
v-if="!editingQuery || editingQuery !== query"> v-if="!editingQuery || editingQuery !== element">
<v-icon :icon="mdiContentCopy" size="18" /> <v-icon :icon="mdiContentCopy" size="18" />
<v-tooltip activator="parent">{{ tt('Duplicate') }}</v-tooltip> <v-tooltip activator="parent">{{ tt('Duplicate') }}</v-tooltip>
</v-btn> </v-btn>
<v-spacer /> <v-spacer />
<v-switch class="bidirectional-switch ms-2" color="secondary" <v-switch class="bidirectional-switch ms-2" color="secondary"
:disabled="loading || disabled || !!editingQuery || !query.conditions || query.conditions.length < 1" :disabled="loading || disabled || !!editingQuery || !element.conditions || element.conditions.length < 1"
:label="tt('Expression')" :label="tt('Expression')"
v-model="showExpression[queryIndex]" v-model="showExpression[element.id]"
@click="showExpression[queryIndex] = !showExpression[queryIndex]"> @click="showExpression[element.id] = !showExpression[element.id]">
<template #prepend> <template #prepend>
<span>{{ tt('Editor') }}</span> <span>{{ tt('Editor') }}</span>
</template> </template>
</v-switch> </v-switch>
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small" <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
:icon="true" :disabled="loading || disabled || !!editingQuery || queries.length < 1" :icon="true" :disabled="loading || disabled || !!editingQuery || queries.length < 1 || (queries.length === 1 && (!element.conditions || element.conditions.length < 1))"
@click="removeQuery(queryIndex)"> @click="removeQuery(index)">
<v-icon :icon="mdiClose" size="18" /> <v-icon :icon="mdiClose" size="18" />
<v-tooltip activator="parent">{{ tt('Remove Query') }}</v-tooltip> <v-tooltip activator="parent">{{ tt('Remove Query') }}</v-tooltip>
</v-btn> </v-btn>
<span class="ms-2 mb-1">
<v-icon :class="!loading && !disabled && !editingQuery && queries.length > 1 ? 'drag-handle' : 'disabled'"
:icon="mdiDrag"/>
<v-tooltip activator="parent" v-if="!loading && !disabled && !editingQuery && queries.length > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
</span>
</v-card-title> </v-card-title>
<v-divider /> <v-divider />
@@ -77,12 +88,12 @@
<v-card-text> <v-card-text>
<v-row> <v-row>
<v-col cols="12"> <v-col cols="12">
<div class="text-center py-4" v-if="!query.conditions || query.conditions.length < 1"> <div class="text-center py-4" v-if="!element.conditions || element.conditions.length < 1">
{{ tt('No conditions defined. All transactions will match.') }} {{ tt('No conditions defined. All transactions will match.') }}
</div> </div>
<div v-else-if="query.conditions && query.conditions.length > 0 && !showExpression[queryIndex]"> <div v-else-if="element.conditions && element.conditions.length > 0 && !showExpression[element.id]">
<div :key="conditionIndex" v-for="(conditionWithRelation, conditionIndex) in query.conditions"> <div :key="conditionIndex" v-for="(conditionWithRelation, conditionIndex) in element.conditions">
<div class="d-flex overflow-x-auto align-center gap-2 mb-4"> <div class="d-flex overflow-x-auto align-center gap-2 mb-4">
<v-select <v-select
disabled disabled
@@ -118,7 +129,7 @@
item-value="value" item-value="value"
:disabled="loading || disabled || !!editingQuery" :disabled="loading || disabled || !!editingQuery"
:items="allTransactionExplorerConditionFields" :items="allTransactionExplorerConditionFields"
@update:model-value="updateConditionField(queryIndex, conditionIndex, TransactionExplorerConditionField.valueOf($event))" @update:model-value="updateConditionField(element, conditionIndex, TransactionExplorerConditionField.valueOf($event))"
v-model="conditionWithRelation.condition.field" v-model="conditionWithRelation.condition.field"
/> />
@@ -312,38 +323,32 @@
variant="text" size="small" variant="text" size="small"
:icon="true" :icon="true"
:disabled="loading || disabled || !!editingQuery" :disabled="loading || disabled || !!editingQuery"
@click="removeCondition(queryIndex, conditionIndex)"> @click="removeCondition(element, conditionIndex)">
<v-icon :icon="mdiClose" size="18" /> <v-icon :icon="mdiClose" size="18" />
<v-tooltip activator="parent">{{ tt('Remove Condition') }}</v-tooltip> <v-tooltip activator="parent">{{ tt('Remove Condition') }}</v-tooltip>
</v-btn> </v-btn>
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="query.conditions && query.conditions.length > 0 && showExpression[queryIndex]"> <div v-else-if="element.conditions && element.conditions.length > 0 && showExpression[element.id]">
<div class="w-100 code-container"> <div class="w-100 code-container">
<v-textarea class="w-100 always-cursor-text mb-4" :readonly="true" <v-textarea class="w-100 always-cursor-text mb-4" :readonly="true"
:value="getExpression(queryIndex)"></v-textarea> :value="getExpression(element, index)"></v-textarea>
</div> </div>
</div> </div>
<v-btn class="px-2" density="comfortable" color="primary" variant="text" size="small" <v-btn class="px-2" density="comfortable" color="primary" variant="text" size="small"
:prepend-icon="mdiPlus" :prepend-icon="mdiPlus"
:disabled="loading || disabled || !!editingQuery || showExpression[queryIndex]" :disabled="loading || disabled || !!editingQuery || showExpression[element.id]"
@click="addCondition(queryIndex)"> @click="addCondition(element)">
{{ tt('Add Condition') }} {{ tt('Add Condition') }}
</v-btn> </v-btn>
</v-col> </v-col>
</v-row> </v-row>
</v-card-text> </v-card-text>
</v-card> </v-card>
</template>
<div class="query-group-separator d-flex align-center justify-center my-4" </draggable-list>
v-if="queries.length > 1 && queryIndex < queries.length - 1">
<v-chip color="primary" variant="outlined" size="small">
{{ tt('or') }}
</v-chip>
</div>
</div>
</v-card-text> </v-card-text>
<v-dialog width="800" v-model="showFilterSourceAccountsDialog"> <v-dialog width="800" v-model="showFilterSourceAccountsDialog">
@@ -407,6 +412,8 @@ import {
arrayItemToObjectField arrayItemToObjectField
} from '@/lib/common.ts'; } from '@/lib/common.ts';
import { generateRandomUUID } from '@/lib/misc.ts';
import logger from '@/lib/logger.ts'; import logger from '@/lib/logger.ts';
import { import {
@@ -416,6 +423,7 @@ import {
mdiContentCopy, mdiContentCopy,
mdiCheck, mdiCheck,
mdiClose, mdiClose,
mdiDrag,
mdiPound mdiPound
} from '@mdi/js'; } from '@mdi/js';
@@ -444,7 +452,7 @@ const explorersStore = useExplorersStore();
const snackbar = useTemplateRef<SnackBarType>('snackbar'); const snackbar = useTemplateRef<SnackBarType>('snackbar');
const currentCondition = ref<TransactionExplorerCondition | undefined>(undefined); const currentCondition = ref<TransactionExplorerCondition | undefined>(undefined);
const showExpression = ref<Record<number, boolean>>({}); const showExpression = ref<Record<string, boolean>>({});
const showFilterSourceAccountsDialog = ref<boolean>(false); const showFilterSourceAccountsDialog = ref<boolean>(false);
const showFilterDestinationAccountsDialog = ref<boolean>(false); const showFilterDestinationAccountsDialog = ref<boolean>(false);
const showFilterTransactionCategoriesDialog = ref<boolean>(false); const showFilterTransactionCategoriesDialog = ref<boolean>(false);
@@ -452,7 +460,12 @@ const tagSearchContent = ref<string>('');
const editingQuery = ref<TransactionExplorerQuery | undefined>(undefined); const editingQuery = ref<TransactionExplorerQuery | undefined>(undefined);
const editingQueryName = ref<string>(''); const editingQueryName = ref<string>('');
const queries = computed<TransactionExplorerQuery[]>(() => explorersStore.currentInsightsExplorer.queries); const queries = computed<TransactionExplorerQuery[]>({
get: () => explorersStore.currentInsightsExplorer.queries,
set: (value: TransactionExplorerQuery[]) => {
explorersStore.currentInsightsExplorer.queries = value;
}
});
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency); const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
const hasAnyAccount = computed<boolean>(() => accountsStore.allPlainAccounts.length > 0); const hasAnyAccount = computed<boolean>(() => accountsStore.allPlainAccounts.length > 0);
@@ -545,7 +558,7 @@ function getFilteredTransactionCategoriesDisplayContent(filterTransactionCategor
} }
function addQuery(): void { function addQuery(): void {
queries.value.push(TransactionExplorerQuery.create()); queries.value.push(TransactionExplorerQuery.create(generateRandomUUID()));
} }
function updateQueryName(query: TransactionExplorerQuery): void { function updateQueryName(query: TransactionExplorerQuery): void {
@@ -560,7 +573,7 @@ function cancelUpdateQueryName(): void {
} }
function duplicateQuery(query: TransactionExplorerQuery): void { function duplicateQuery(query: TransactionExplorerQuery): void {
queries.value.push(query.clone()); queries.value.push(query.clone(generateRandomUUID()));
} }
function removeQuery(queryIndex: number): void { function removeQuery(queryIndex: number): void {
@@ -583,33 +596,21 @@ function removeQuery(queryIndex: number): void {
showExpression.value = newShowExpression; showExpression.value = newShowExpression;
if (queries.value.length < 1) { if (queries.value.length < 1) {
queries.value.push(TransactionExplorerQuery.create()); queries.value.push(TransactionExplorerQuery.create(generateRandomUUID()));
} }
} }
function clearAllQueries(): void { function clearAllQueries(): void {
queries.value.length = 0; queries.value.length = 0;
queries.value.push(TransactionExplorerQuery.create()); queries.value.push(TransactionExplorerQuery.create(generateRandomUUID()));
}
function addCondition(queryIndex: number): void {
const query = queries.value[queryIndex];
if (!query) {
return;
} }
function addCondition(query: TransactionExplorerQuery): void {
const newCondition = query.addNewCondition(TransactionExplorerConditionField.TransactionType, query.conditions.length < 1); const newCondition = query.addNewCondition(TransactionExplorerConditionField.TransactionType, query.conditions.length < 1);
query.conditions.push(newCondition); query.conditions.push(newCondition);
} }
function removeCondition(queryIndex: number, conditionIndex: number): void { function removeCondition(query: TransactionExplorerQuery, conditionIndex: number): void {
const query = queries.value[queryIndex];
if (!query) {
return;
}
query.conditions.splice(conditionIndex, 1); query.conditions.splice(conditionIndex, 1);
if (conditionIndex === 0 && query.conditions.length > 0) { if (conditionIndex === 0 && query.conditions.length > 0) {
@@ -621,17 +622,11 @@ function removeCondition(queryIndex: number, conditionIndex: number): void {
} }
} }
function updateConditionField(queryIndex: number, conditionIndex: number, newField: TransactionExplorerConditionField | undefined): void { function updateConditionField(query: TransactionExplorerQuery, conditionIndex: number, newField: TransactionExplorerConditionField | undefined): void {
if (!newField) { if (!newField) {
return; return;
} }
const query = queries.value[queryIndex];
if (!query) {
return;
}
const oldConditionWithRelation = query.conditions[conditionIndex]; const oldConditionWithRelation = query.conditions[conditionIndex];
if (!oldConditionWithRelation) { if (!oldConditionWithRelation) {
@@ -675,10 +670,8 @@ function updateTransactionCategories(changed: boolean, selectedCategoryIds?: str
showFilterTransactionCategoriesDialog.value = false; showFilterTransactionCategoriesDialog.value = false;
} }
function getExpression(queryIndex: number): string { function getExpression(query: TransactionExplorerQuery, queryIndex: number): string {
const query = queries.value[queryIndex]; if (!query.conditions || query.conditions.length < 1) {
if (!query || !query.conditions || query.conditions.length < 1) {
return ''; return '';
} }
@@ -692,7 +685,7 @@ function getExpression(queryIndex: number): string {
} }
if (queries.value.length === 0) { if (queries.value.length === 0) {
queries.value.push(TransactionExplorerQuery.create()); queries.value.push(TransactionExplorerQuery.create(generateRandomUUID()));
} }
</script> </script>