mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 07:57:33 +08:00
support drag-and-drop to change query display orders
This commit is contained in:
MaysWind
@@ -340,7 +340,7 @@ function init(initProps: InsightsExplorerProps): void {
|
||||
loadExplorer(initProps.initId);
|
||||
}
|
||||
} else {
|
||||
explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer());
|
||||
explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer(generateRandomUUID()));
|
||||
}
|
||||
|
||||
if (!needReload && !explorersStore.transactionExplorerStateInvalid && !explorersStore.insightsExplorerListStateInvalid) {
|
||||
@@ -394,7 +394,7 @@ function createNewExplorer(): void {
|
||||
return;
|
||||
}
|
||||
|
||||
explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer());
|
||||
explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer(generateRandomUUID()));
|
||||
router.push(getFilterLinkUrl());
|
||||
}
|
||||
|
||||
|
||||
@@ -10,340 +10,345 @@
|
||||
@click="clearAllQueries">{{ tt('Clear All') }}</v-btn>
|
||||
</div>
|
||||
</v-card-subtitle>
|
||||
<v-card-text class="pt-0">
|
||||
<div :key="queryIndex" v-for="(query, queryIndex) in queries">
|
||||
<v-card border class="card-title-with-bg mt-4">
|
||||
<v-card-title class="d-flex align-center py-2 px-5">
|
||||
<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>
|
||||
<div class="query-name-edit ms-2" v-if="editingQuery === query">
|
||||
<v-text-field autofocus type="text" density="compact" variant="underlined"
|
||||
:disabled="loading || disabled"
|
||||
:placeholder="tt('format.misc.queryIndex', { index: queryIndex + 1 })"
|
||||
v-text-field-auto-width="{ minWidth: 20, maxWidth: 300, auxSpanId: `query-name-aux-span-${queryIndex + 1}` }"
|
||||
v-model="editingQueryName"
|
||||
@keyup.esc="cancelUpdateQueryName"
|
||||
@keyup.enter="updateQueryName(query)" />
|
||||
<span :id="`query-name-aux-span-${queryIndex + 1}`" />
|
||||
</div>
|
||||
<v-btn class="ms-2" density="compact" color="primary" variant="text" size="small"
|
||||
:icon="true" :disabled="loading || disabled"
|
||||
@click="updateQueryName(query)"
|
||||
v-if="editingQuery === query">
|
||||
<v-icon :icon="mdiCheck" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Update') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
|
||||
:icon="true" :disabled="loading || disabled"
|
||||
@click="cancelUpdateQueryName"
|
||||
v-if="editingQuery === query">
|
||||
<v-icon :icon="mdiClose" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Cancel') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
|
||||
:icon="true" :disabled="loading || disabled || !!editingQuery"
|
||||
@click="editingQueryName = query.name; editingQuery = query"
|
||||
v-if="!editingQuery || editingQuery !== query">
|
||||
<v-icon :icon="mdiPencilOutline" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Modify Query Name') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
|
||||
:icon="true" :disabled="loading || disabled || !!editingQuery"
|
||||
@click="duplicateQuery(query)"
|
||||
v-if="!editingQuery || editingQuery !== query">
|
||||
<v-icon :icon="mdiContentCopy" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Duplicate') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-spacer />
|
||||
<v-switch class="bidirectional-switch ms-2" color="secondary"
|
||||
:disabled="loading || disabled || !!editingQuery || !query.conditions || query.conditions.length < 1"
|
||||
:label="tt('Expression')"
|
||||
v-model="showExpression[queryIndex]"
|
||||
@click="showExpression[queryIndex] = !showExpression[queryIndex]">
|
||||
<template #prepend>
|
||||
<span>{{ tt('Editor') }}</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
|
||||
:icon="true" :disabled="loading || disabled || !!editingQuery || queries.length < 1"
|
||||
@click="removeQuery(queryIndex)">
|
||||
<v-icon :icon="mdiClose" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Remove Query') }}</v-tooltip>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-card-text class="pt-0 pb-0">
|
||||
<draggable-list
|
||||
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-icon :icon="mdiTextBoxSearchOutline" size="20" />
|
||||
<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 === element">
|
||||
<v-text-field autofocus type="text" density="compact" variant="underlined"
|
||||
:disabled="loading || disabled"
|
||||
:placeholder="tt('format.misc.queryIndex', { index: index + 1 })"
|
||||
v-text-field-auto-width="{ minWidth: 20, maxWidth: 300, auxSpanId: `query-name-aux-span-${index + 1}-${element.id}` }"
|
||||
v-model="editingQueryName"
|
||||
@keyup.esc="cancelUpdateQueryName"
|
||||
@keyup.enter="updateQueryName(element)" />
|
||||
<span :id="`query-name-aux-span-${index + 1}-${element.id}`" />
|
||||
</div>
|
||||
<v-btn class="ms-2" density="compact" color="primary" variant="text" size="small"
|
||||
:icon="true" :disabled="loading || disabled"
|
||||
@click="updateQueryName(element)"
|
||||
v-if="editingQuery === element">
|
||||
<v-icon :icon="mdiCheck" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Update') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
|
||||
:icon="true" :disabled="loading || disabled"
|
||||
@click="cancelUpdateQueryName"
|
||||
v-if="editingQuery === element">
|
||||
<v-icon :icon="mdiClose" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Cancel') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
|
||||
:icon="true" :disabled="loading || disabled || !!editingQuery"
|
||||
@click="editingQueryName = element.name; editingQuery = element"
|
||||
v-if="!editingQuery || editingQuery !== element">
|
||||
<v-icon :icon="mdiPencilOutline" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Modify Query Name') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
|
||||
:icon="true" :disabled="loading || disabled || !!editingQuery"
|
||||
@click="duplicateQuery(element)"
|
||||
v-if="!editingQuery || editingQuery !== element">
|
||||
<v-icon :icon="mdiContentCopy" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Duplicate') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-spacer />
|
||||
<v-switch class="bidirectional-switch ms-2" color="secondary"
|
||||
:disabled="loading || disabled || !!editingQuery || !element.conditions || element.conditions.length < 1"
|
||||
:label="tt('Expression')"
|
||||
v-model="showExpression[element.id]"
|
||||
@click="showExpression[element.id] = !showExpression[element.id]">
|
||||
<template #prepend>
|
||||
<span>{{ tt('Editor') }}</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
|
||||
:icon="true" :disabled="loading || disabled || !!editingQuery || queries.length < 1 || (queries.length === 1 && (!element.conditions || element.conditions.length < 1))"
|
||||
@click="removeQuery(index)">
|
||||
<v-icon :icon="mdiClose" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Remove Query') }}</v-tooltip>
|
||||
</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-divider />
|
||||
<v-divider />
|
||||
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<div class="text-center py-4" v-if="!query.conditions || query.conditions.length < 1">
|
||||
{{ tt('No conditions defined. All transactions will match.') }}
|
||||
</div>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<div class="text-center py-4" v-if="!element.conditions || element.conditions.length < 1">
|
||||
{{ tt('No conditions defined. All transactions will match.') }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="query.conditions && query.conditions.length > 0 && !showExpression[queryIndex]">
|
||||
<div :key="conditionIndex" v-for="(conditionWithRelation, conditionIndex) in query.conditions">
|
||||
<div class="d-flex overflow-x-auto align-center gap-2 mb-4">
|
||||
<v-select
|
||||
disabled
|
||||
class="flex-0-0"
|
||||
width="120px"
|
||||
density="compact"
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
:items="[{ value: TransactionExplorerConditionRelation.First, displayName: tt('WHERE') }]"
|
||||
:model-value="TransactionExplorerConditionRelation.First"
|
||||
v-if="conditionIndex < 1"
|
||||
/>
|
||||
|
||||
<v-select
|
||||
class="flex-0-0"
|
||||
width="120px"
|
||||
density="compact"
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
:items="[
|
||||
{ value: TransactionExplorerConditionRelation.And, displayName: tt('AND') },
|
||||
{ value: TransactionExplorerConditionRelation.Or, displayName: tt('OR') }
|
||||
]"
|
||||
v-model="conditionWithRelation.relation"
|
||||
v-else-if="conditionIndex >= 1"
|
||||
/>
|
||||
|
||||
<v-select
|
||||
class="flex-0-0"
|
||||
density="compact"
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
:items="allTransactionExplorerConditionFields"
|
||||
@update:model-value="updateConditionField(queryIndex, conditionIndex, TransactionExplorerConditionField.valueOf($event))"
|
||||
v-model="conditionWithRelation.condition.field"
|
||||
/>
|
||||
|
||||
<v-select
|
||||
class="flex-0-0"
|
||||
density="compact"
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
:items="getAllTransactionExplorerConditionOperators(conditionWithRelation.getSupportedOperators())"
|
||||
v-model="conditionWithRelation.condition.operator"
|
||||
/>
|
||||
|
||||
<div class="d-flex w-100 flex-1-1" style="min-width: 280px;">
|
||||
<div v-else-if="element.conditions && element.conditions.length > 0 && !showExpression[element.id]">
|
||||
<div :key="conditionIndex" v-for="(conditionWithRelation, conditionIndex) in element.conditions">
|
||||
<div class="d-flex overflow-x-auto align-center gap-2 mb-4">
|
||||
<v-select
|
||||
multiple chips closable-chips
|
||||
disabled
|
||||
class="flex-0-0"
|
||||
width="120px"
|
||||
density="compact"
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
item-value="value"
|
||||
:items="[{ value: TransactionExplorerConditionRelation.First, displayName: tt('WHERE') }]"
|
||||
:model-value="TransactionExplorerConditionRelation.First"
|
||||
v-if="conditionIndex < 1"
|
||||
/>
|
||||
|
||||
<v-select
|
||||
class="flex-0-0"
|
||||
width="120px"
|
||||
density="compact"
|
||||
item-title="displayName"
|
||||
item-value="value"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
:placeholder="tt('None')"
|
||||
:items="[
|
||||
{ type: TransactionType.Expense, displayName: tt('Expense') },
|
||||
{ type: TransactionType.Income, displayName: tt('Income') },
|
||||
{ type: TransactionType.Transfer, displayName: tt('Transfer') }
|
||||
{ value: TransactionExplorerConditionRelation.And, displayName: tt('AND') },
|
||||
{ value: TransactionExplorerConditionRelation.Or, displayName: tt('OR') }
|
||||
]"
|
||||
v-model="conditionWithRelation.condition.value"
|
||||
v-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionType.value"
|
||||
>
|
||||
<template #item="{ props, item }">
|
||||
<v-list-item :value="item.value" v-bind="props">
|
||||
<template #title>
|
||||
<v-list-item-title>
|
||||
<div class="d-flex align-center">{{ item.title }}</div>
|
||||
</v-list-item-title>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-select>
|
||||
v-model="conditionWithRelation.relation"
|
||||
v-else-if="conditionIndex >= 1"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
class="always-cursor-pointer text-field-truncate"
|
||||
<v-select
|
||||
class="flex-0-0"
|
||||
density="compact"
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:readonly="true"
|
||||
:disabled="loading || disabled || !!editingQuery || !hasAnyTransactionCategory"
|
||||
: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 === TransactionExplorerConditionField.TransactionCategory.value"
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
:items="allTransactionExplorerConditionFields"
|
||||
@update:model-value="updateConditionField(element, conditionIndex, TransactionExplorerConditionField.valueOf($event))"
|
||||
v-model="conditionWithRelation.condition.field"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
class="always-cursor-pointer text-field-truncate"
|
||||
<v-select
|
||||
class="flex-0-0"
|
||||
density="compact"
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:readonly="true"
|
||||
:disabled="loading || disabled || !!editingQuery || !hasAnyAccount"
|
||||
: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 === TransactionExplorerConditionField.SourceAccount.value"
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
:items="getAllTransactionExplorerConditionOperators(conditionWithRelation.getSupportedOperators())"
|
||||
v-model="conditionWithRelation.condition.operator"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
class="always-cursor-pointer text-field-truncate"
|
||||
density="compact"
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:readonly="true"
|
||||
:disabled="loading || disabled || !!editingQuery || !hasAnyAccount"
|
||||
: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 === TransactionExplorerConditionField.DestinationAccount.value"
|
||||
/>
|
||||
|
||||
<div class="d-flex w-100 align-center gap-2"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.SourceAmount.value ||
|
||||
conditionWithRelation.condition.field === TransactionExplorerConditionField.DestinationAmount.value">
|
||||
<amount-input density="compact"
|
||||
:currency="defaultCurrency"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
v-model="conditionWithRelation.condition.value[0]"
|
||||
/>
|
||||
<span class="ms-2 me-2"
|
||||
v-if="conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.Between.value ||
|
||||
conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value">~</span>
|
||||
<amount-input density="compact"
|
||||
:currency="defaultCurrency"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
v-model="conditionWithRelation.condition.value[1]"
|
||||
v-if="conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.Between.value ||
|
||||
conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-text-field disabled density="compact"
|
||||
:placeholder="tt('None')"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.GeoLocation.value"
|
||||
/>
|
||||
|
||||
<div class="d-flex w-100" v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionTag.value">
|
||||
<v-text-field
|
||||
disabled
|
||||
persistent-placeholder
|
||||
<div class="d-flex w-100 flex-1-1" style="min-width: 280px;">
|
||||
<v-select
|
||||
multiple chips closable-chips
|
||||
density="compact"
|
||||
:placeholder="tt('None')"
|
||||
v-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionTag.value &&
|
||||
(conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsEmpty.value || conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsNotEmpty.value)"
|
||||
/>
|
||||
|
||||
<v-autocomplete
|
||||
density="compact"
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
auto-select-first
|
||||
persistent-placeholder
|
||||
multiple
|
||||
chips
|
||||
closable-chips
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
:placeholder="tt('None')"
|
||||
:items="allTags"
|
||||
:items="[
|
||||
{ type: TransactionType.Expense, displayName: tt('Expense') },
|
||||
{ type: TransactionType.Income, displayName: tt('Income') },
|
||||
{ type: TransactionType.Transfer, displayName: tt('Transfer') }
|
||||
]"
|
||||
v-model="conditionWithRelation.condition.value"
|
||||
v-model:search="tagSearchContent"
|
||||
v-else-if="conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsEmpty.value && conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsNotEmpty.value"
|
||||
v-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionType.value"
|
||||
>
|
||||
<template #chip="{ props, item }">
|
||||
<v-chip :prepend-icon="mdiPound" :text="item.title" v-bind="props"/>
|
||||
</template>
|
||||
|
||||
<template #item="{ props, item }">
|
||||
<v-list-item :value="item.value" v-bind="props" v-if="!item.raw.hidden">
|
||||
<v-list-item :value="item.value" v-bind="props">
|
||||
<template #title>
|
||||
<v-list-item-title>
|
||||
<div class="d-flex align-center">
|
||||
<v-icon size="20" start :icon="mdiPound"/>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</v-list-item-title>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item :disabled="true" v-bind="props"
|
||||
v-if="item.raw.hidden && item.raw.name.toLowerCase().indexOf(tagSearchContent.toLowerCase()) >= 0 && isAllFilteredTagHidden">
|
||||
<template #title>
|
||||
<v-list-item-title>
|
||||
<div class="d-flex align-center">
|
||||
<v-icon size="20" start :icon="mdiPound"/>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="d-flex align-center">{{ item.title }}</div>
|
||||
</v-list-item-title>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-select>
|
||||
|
||||
<template #no-data>
|
||||
<v-list class="py-0">
|
||||
<v-list-item>{{ tt('No available tag') }}</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
<v-text-field
|
||||
class="always-cursor-pointer text-field-truncate"
|
||||
density="compact"
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:readonly="true"
|
||||
:disabled="loading || disabled || !!editingQuery || !hasAnyTransactionCategory"
|
||||
: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 === TransactionExplorerConditionField.TransactionCategory.value"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
class="always-cursor-pointer text-field-truncate"
|
||||
density="compact"
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:readonly="true"
|
||||
:disabled="loading || disabled || !!editingQuery || !hasAnyAccount"
|
||||
: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 === TransactionExplorerConditionField.SourceAccount.value"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
class="always-cursor-pointer text-field-truncate"
|
||||
density="compact"
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
persistent-placeholder
|
||||
:readonly="true"
|
||||
:disabled="loading || disabled || !!editingQuery || !hasAnyAccount"
|
||||
: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 === TransactionExplorerConditionField.DestinationAccount.value"
|
||||
/>
|
||||
|
||||
<div class="d-flex w-100 align-center gap-2"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.SourceAmount.value ||
|
||||
conditionWithRelation.condition.field === TransactionExplorerConditionField.DestinationAmount.value">
|
||||
<amount-input density="compact"
|
||||
:currency="defaultCurrency"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
v-model="conditionWithRelation.condition.value[0]"
|
||||
/>
|
||||
<span class="ms-2 me-2"
|
||||
v-if="conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.Between.value ||
|
||||
conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value">~</span>
|
||||
<amount-input density="compact"
|
||||
:currency="defaultCurrency"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
v-model="conditionWithRelation.condition.value[1]"
|
||||
v-if="conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.Between.value ||
|
||||
conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-text-field disabled density="compact"
|
||||
:placeholder="tt('None')"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.GeoLocation.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 === TransactionExplorerConditionField.TransactionTag.value &&
|
||||
(conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsEmpty.value || conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsNotEmpty.value)"
|
||||
/>
|
||||
|
||||
<v-autocomplete
|
||||
density="compact"
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
auto-select-first
|
||||
persistent-placeholder
|
||||
multiple
|
||||
chips
|
||||
closable-chips
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
:placeholder="tt('None')"
|
||||
:items="allTags"
|
||||
v-model="conditionWithRelation.condition.value"
|
||||
v-model:search="tagSearchContent"
|
||||
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"/>
|
||||
</template>
|
||||
|
||||
<template #item="{ props, item }">
|
||||
<v-list-item :value="item.value" v-bind="props" v-if="!item.raw.hidden">
|
||||
<template #title>
|
||||
<v-list-item-title>
|
||||
<div class="d-flex align-center">
|
||||
<v-icon size="20" start :icon="mdiPound"/>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</v-list-item-title>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item :disabled="true" v-bind="props"
|
||||
v-if="item.raw.hidden && item.raw.name.toLowerCase().indexOf(tagSearchContent.toLowerCase()) >= 0 && isAllFilteredTagHidden">
|
||||
<template #title>
|
||||
<v-list-item-title>
|
||||
<div class="d-flex align-center">
|
||||
<v-icon size="20" start :icon="mdiPound"/>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</v-list-item-title>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<template #no-data>
|
||||
<v-list class="py-0">
|
||||
<v-list-item>{{ tt('No available tag') }}</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
</div>
|
||||
|
||||
<v-text-field disabled density="compact"
|
||||
:placeholder="tt('None')"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Pictures.value"
|
||||
/>
|
||||
|
||||
<v-text-field disabled density="compact"
|
||||
:placeholder="tt('None')"
|
||||
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 || disabled || !!editingQuery"
|
||||
:placeholder="tt('None')"
|
||||
v-model="conditionWithRelation.condition.value"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Description.value &&
|
||||
conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsEmpty.value && conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsNotEmpty.value"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-text-field disabled density="compact"
|
||||
:placeholder="tt('None')"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Pictures.value"
|
||||
/>
|
||||
|
||||
<v-text-field disabled density="compact"
|
||||
:placeholder="tt('None')"
|
||||
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 || disabled || !!editingQuery"
|
||||
:placeholder="tt('None')"
|
||||
v-model="conditionWithRelation.condition.value"
|
||||
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Description.value &&
|
||||
conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsEmpty.value && conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsNotEmpty.value"
|
||||
/>
|
||||
<v-btn color="default" density="compact"
|
||||
variant="text" size="small"
|
||||
:icon="true"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
@click="removeCondition(element, conditionIndex)">
|
||||
<v-icon :icon="mdiClose" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Remove Condition') }}</v-tooltip>
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-btn color="default" density="compact"
|
||||
variant="text" size="small"
|
||||
:icon="true"
|
||||
:disabled="loading || disabled || !!editingQuery"
|
||||
@click="removeCondition(queryIndex, conditionIndex)">
|
||||
<v-icon :icon="mdiClose" size="18" />
|
||||
<v-tooltip activator="parent">{{ tt('Remove Condition') }}</v-tooltip>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="query.conditions && query.conditions.length > 0 && showExpression[queryIndex]">
|
||||
<div class="w-100 code-container">
|
||||
<v-textarea class="w-100 always-cursor-text mb-4" :readonly="true"
|
||||
:value="getExpression(queryIndex)"></v-textarea>
|
||||
<div v-else-if="element.conditions && element.conditions.length > 0 && showExpression[element.id]">
|
||||
<div class="w-100 code-container">
|
||||
<v-textarea class="w-100 always-cursor-text mb-4" :readonly="true"
|
||||
:value="getExpression(element, index)"></v-textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-btn class="px-2" density="comfortable" color="primary" variant="text" size="small"
|
||||
:prepend-icon="mdiPlus"
|
||||
:disabled="loading || disabled || !!editingQuery || showExpression[queryIndex]"
|
||||
@click="addCondition(queryIndex)">
|
||||
{{ tt('Add Condition') }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<div class="query-group-separator d-flex align-center justify-center my-4"
|
||||
v-if="queries.length > 1 && queryIndex < queries.length - 1">
|
||||
<v-chip color="primary" variant="outlined" size="small">
|
||||
{{ tt('or') }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
<v-btn class="px-2" density="comfortable" color="primary" variant="text" size="small"
|
||||
:prepend-icon="mdiPlus"
|
||||
:disabled="loading || disabled || !!editingQuery || showExpression[element.id]"
|
||||
@click="addCondition(element)">
|
||||
{{ tt('Add Condition') }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
</draggable-list>
|
||||
</v-card-text>
|
||||
|
||||
<v-dialog width="800" v-model="showFilterSourceAccountsDialog">
|
||||
@@ -407,6 +412,8 @@ import {
|
||||
arrayItemToObjectField
|
||||
} from '@/lib/common.ts';
|
||||
|
||||
import { generateRandomUUID } from '@/lib/misc.ts';
|
||||
|
||||
import logger from '@/lib/logger.ts';
|
||||
|
||||
import {
|
||||
@@ -416,6 +423,7 @@ import {
|
||||
mdiContentCopy,
|
||||
mdiCheck,
|
||||
mdiClose,
|
||||
mdiDrag,
|
||||
mdiPound
|
||||
} from '@mdi/js';
|
||||
|
||||
@@ -444,7 +452,7 @@ const explorersStore = useExplorersStore();
|
||||
const snackbar = useTemplateRef<SnackBarType>('snackbar');
|
||||
|
||||
const currentCondition = ref<TransactionExplorerCondition | undefined>(undefined);
|
||||
const showExpression = ref<Record<number, boolean>>({});
|
||||
const showExpression = ref<Record<string, boolean>>({});
|
||||
const showFilterSourceAccountsDialog = ref<boolean>(false);
|
||||
const showFilterDestinationAccountsDialog = ref<boolean>(false);
|
||||
const showFilterTransactionCategoriesDialog = ref<boolean>(false);
|
||||
@@ -452,7 +460,12 @@ const tagSearchContent = ref<string>('');
|
||||
const editingQuery = ref<TransactionExplorerQuery | undefined>(undefined);
|
||||
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 hasAnyAccount = computed<boolean>(() => accountsStore.allPlainAccounts.length > 0);
|
||||
@@ -545,7 +558,7 @@ function getFilteredTransactionCategoriesDisplayContent(filterTransactionCategor
|
||||
}
|
||||
|
||||
function addQuery(): void {
|
||||
queries.value.push(TransactionExplorerQuery.create());
|
||||
queries.value.push(TransactionExplorerQuery.create(generateRandomUUID()));
|
||||
}
|
||||
|
||||
function updateQueryName(query: TransactionExplorerQuery): void {
|
||||
@@ -560,7 +573,7 @@ function cancelUpdateQueryName(): void {
|
||||
}
|
||||
|
||||
function duplicateQuery(query: TransactionExplorerQuery): void {
|
||||
queries.value.push(query.clone());
|
||||
queries.value.push(query.clone(generateRandomUUID()));
|
||||
}
|
||||
|
||||
function removeQuery(queryIndex: number): void {
|
||||
@@ -583,33 +596,21 @@ function removeQuery(queryIndex: number): void {
|
||||
showExpression.value = newShowExpression;
|
||||
|
||||
if (queries.value.length < 1) {
|
||||
queries.value.push(TransactionExplorerQuery.create());
|
||||
queries.value.push(TransactionExplorerQuery.create(generateRandomUUID()));
|
||||
}
|
||||
}
|
||||
|
||||
function clearAllQueries(): void {
|
||||
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);
|
||||
query.conditions.push(newCondition);
|
||||
}
|
||||
|
||||
function removeCondition(queryIndex: number, conditionIndex: number): void {
|
||||
const query = queries.value[queryIndex];
|
||||
|
||||
if (!query) {
|
||||
return;
|
||||
}
|
||||
|
||||
function removeCondition(query: TransactionExplorerQuery, conditionIndex: number): void {
|
||||
query.conditions.splice(conditionIndex, 1);
|
||||
|
||||
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) {
|
||||
return;
|
||||
}
|
||||
|
||||
const query = queries.value[queryIndex];
|
||||
|
||||
if (!query) {
|
||||
return;
|
||||
}
|
||||
|
||||
const oldConditionWithRelation = query.conditions[conditionIndex];
|
||||
|
||||
if (!oldConditionWithRelation) {
|
||||
@@ -675,10 +670,8 @@ function updateTransactionCategories(changed: boolean, selectedCategoryIds?: str
|
||||
showFilterTransactionCategoriesDialog.value = false;
|
||||
}
|
||||
|
||||
function getExpression(queryIndex: number): string {
|
||||
const query = queries.value[queryIndex];
|
||||
|
||||
if (!query || !query.conditions || query.conditions.length < 1) {
|
||||
function getExpression(query: TransactionExplorerQuery, queryIndex: number): string {
|
||||
if (!query.conditions || query.conditions.length < 1) {
|
||||
return '';
|
||||
}
|
||||
|
||||
@@ -692,7 +685,7 @@ function getExpression(queryIndex: number): string {
|
||||
}
|
||||
|
||||
if (queries.value.length === 0) {
|
||||
queries.value.push(TransactionExplorerQuery.create());
|
||||
queries.value.push(TransactionExplorerQuery.create(generateRandomUUID()));
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user