reduce dialog margins and make the action buttons always at the bottom of the dialog
This commit is contained in:
MaysWind
@@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<v-dialog width="640" :persistent="true" v-model="showState">
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-4">
|
||||
<v-card class="pa-sm-1 pa-md-2">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<h4 class="text-h4 text-error text-wrap">{{ tt('Are you sure you want to clear all transactions?') }}</h4>
|
||||
</div>
|
||||
<h4 class="text-h4 text-error text-wrap">{{ tt('Are you sure you want to clear all transactions?') }}</h4>
|
||||
</template>
|
||||
<v-card-text class="pb-2 text-error">{{ tt('format.misc.clearTransactionsInAccountTip', { account: currentAccount?.name }) }}</v-card-text>
|
||||
<v-card-text class="mb-md-4 w-100 d-flex justify-center">
|
||||
<v-card-text class="w-100 d-flex justify-center">
|
||||
<div class="w-100">
|
||||
<v-text-field
|
||||
autocomplete="current-password"
|
||||
@@ -20,8 +18,8 @@
|
||||
/>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-text class="overflow-y-visible">
|
||||
<div class="w-100 d-flex justify-center gap-4">
|
||||
<v-card-text>
|
||||
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
|
||||
<v-btn color="error" :disabled="!currentPassword || clearingData" @click="confirm">
|
||||
{{ tt('Confirm') }}
|
||||
<v-progress-circular indeterminate size="22" class="ms-2" v-if="clearingData"></v-progress-circular>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<v-dialog :width="account.type === AccountType.MultiSubAccounts.type ? 1000 : 800" :persistent="isAccountModified" v-model="showState">
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-8">
|
||||
<v-card class="pa-sm-1 pa-md-2">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<div class="d-flex w-100 align-center justify-center">
|
||||
<div class="d-flex align-center">
|
||||
<h4 class="text-h4">{{ tt(title) }}</h4>
|
||||
<v-progress-circular indeterminate size="22" class="ms-2" v-if="loading"></v-progress-circular>
|
||||
</div>
|
||||
<v-spacer/>
|
||||
<v-btn density="comfortable" color="default" variant="text" class="ms-2" :icon="true"
|
||||
:disabled="loading || submitting || account.type !== AccountType.MultiSubAccounts.type">
|
||||
<v-icon :icon="mdiDotsVertical" />
|
||||
@@ -20,7 +21,7 @@
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
<v-card-text class="d-flex flex-column flex-md-row mt-md-4 pt-0">
|
||||
<v-card-text class="d-flex flex-column flex-md-row flex-grow-1 overflow-y-auto">
|
||||
<div class="mb-4" v-if="account.type === AccountType.MultiSubAccounts.type">
|
||||
<v-tabs direction="vertical" :disabled="loading || submitting" v-model="currentAccountIndex">
|
||||
<v-tab :value="-1">
|
||||
@@ -167,8 +168,8 @@
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card-text>
|
||||
<v-card-text class="overflow-y-visible">
|
||||
<div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
|
||||
<v-card-text>
|
||||
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
|
||||
<v-tooltip :disabled="!inputIsEmpty" :text="inputEmptyProblemMessage ? tt(inputEmptyProblemMessage) : ''">
|
||||
<template v-slot:activator="{ props }">
|
||||
<div v-bind="props" class="d-inline-block">
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<v-dialog width="640" :persistent="true" v-model="showState">
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-4">
|
||||
<v-card class="pa-sm-1 pa-md-2">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<h4 class="text-h4 text-wrap">{{ tt('Are you sure you want to move all transactions?') }}</h4>
|
||||
</div>
|
||||
<h4 class="text-h4 text-wrap">{{ tt('Are you sure you want to move all transactions?') }}</h4>
|
||||
</template>
|
||||
<v-card-text>{{ tt('format.misc.moveTransactionsInAccountTip', { fromAccount: fromAccount?.name, toAccount: displayToAccountName }) }}</v-card-text>
|
||||
<v-card-text class="mb-md-4 w-100 d-flex justify-center">
|
||||
<v-card-text class="w-100 d-flex justify-center">
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<two-column-select primary-key-field="id" primary-value-field="category"
|
||||
@@ -39,8 +37,8 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-text class="overflow-y-visible">
|
||||
<div class="w-100 d-flex justify-center gap-4">
|
||||
<v-card-text>
|
||||
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
|
||||
<v-btn :disabled="!fromAccount || !toAccountId || fromAccount?.id === toAccountId || !toAccountName || !isToAccountNameValid || moving" @click="confirm">
|
||||
{{ tt('Confirm') }}
|
||||
<v-progress-circular indeterminate size="22" class="ms-2" v-if="moving"></v-progress-circular>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<v-dialog :min-height="400" :persistent="loading" v-model="showState">
|
||||
<v-card class="pa-6 pa-sm-10 pa-md-12">
|
||||
<v-dialog :persistent="loading" v-model="showState">
|
||||
<v-card class="pa-sm-1 pa-md-2">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<div class="d-flex w-100 align-center justify-center">
|
||||
<div class="d-flex flex-wrap w-100 align-center">
|
||||
<h4 class="text-h4">{{ tt('Reconciliation Statement') }}</h4>
|
||||
<v-btn density="compact" color="default" variant="text" size="24"
|
||||
class="ms-2" :icon="true" :loading="loading" @click="reload(true)">
|
||||
@@ -13,6 +13,15 @@
|
||||
<v-icon :icon="mdiRefresh" size="24" />
|
||||
<v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-switch class="bidirectional-switch ms-2 pt-1" color="secondary"
|
||||
:disabled="loading"
|
||||
:label="tt('Account Balance Trends')"
|
||||
v-model="showAccountBalanceTrendsCharts"
|
||||
@click="showAccountBalanceTrendsCharts = !showAccountBalanceTrendsCharts">
|
||||
<template #prepend>
|
||||
<span>{{ tt('Transaction List') }}</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
</div>
|
||||
<v-btn density="comfortable" color="default" variant="text" class="ms-2"
|
||||
:icon="true" :disabled="loading"
|
||||
@@ -67,185 +76,179 @@
|
||||
</template>
|
||||
|
||||
<template #subtitle>
|
||||
<div class="text-body-1 text-center text-wrap mt-2" v-if="!startTime && !endTime">
|
||||
<div class="text-body-1 text-wrap mt-2" v-if="!startTime && !endTime">
|
||||
<span>{{ tt('All') }}</span>
|
||||
</div>
|
||||
<div class="text-body-1 text-center text-wrap mt-2" v-if="startTime || endTime">
|
||||
<div class="text-body-1 text-wrap mt-2" v-if="startTime || endTime">
|
||||
<span>{{ displayStartDateTime }}</span>
|
||||
<span> - </span>
|
||||
<span>{{ displayEndDateTime }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-card-text class="py-0 w-100 d-flex justify-center mt-n4">
|
||||
<v-switch class="bidirectional-switch" color="secondary"
|
||||
:label="tt('Account Balance Trends')"
|
||||
v-model="showAccountBalanceTrendsCharts"
|
||||
@click="showAccountBalanceTrendsCharts = !showAccountBalanceTrendsCharts">
|
||||
<template #prepend>
|
||||
<span>{{ tt('Transaction List') }}</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
</v-card-text>
|
||||
|
||||
<div class="d-flex align-center mb-4">
|
||||
<div class="d-flex align-center text-body-1">
|
||||
<span class="ms-2">{{ tt('Opening Balance') }}</span>
|
||||
<span class="text-primary" v-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
<span class="text-primary ms-2" v-else-if="!loading">
|
||||
{{ displayOpeningBalance }}
|
||||
</span>
|
||||
<span class="ms-3">{{ tt('Closing Balance') }}</span>
|
||||
<span class="text-primary" v-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
<span class="text-primary ms-2" v-else-if="!loading">
|
||||
{{ displayClosingBalance }}
|
||||
</span>
|
||||
</div>
|
||||
<v-spacer/>
|
||||
<div class="d-flex align-center text-body-1">
|
||||
<span class="ms-2">{{ tt('Total Inflows') }}</span>
|
||||
<span class="text-income" v-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
<span class="text-income ms-2" v-else-if="!loading">
|
||||
{{ displayTotalInflows }}
|
||||
</span>
|
||||
<span class="ms-3">{{ tt('Total Outflows') }}</span>
|
||||
<span class="text-expense" v-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
<span class="text-expense ms-2" v-else-if="!loading">
|
||||
{{ displayTotalOutflows }}
|
||||
</span>
|
||||
<span class="ms-3">{{ tt('Net Cash Flow') }}</span>
|
||||
<span class="text-primary" v-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
<span class="text-primary ms-2" v-else-if="!loading">
|
||||
{{ displayTotalBalance }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-data-table
|
||||
fixed-header
|
||||
fixed-footer
|
||||
multi-sort
|
||||
density="compact"
|
||||
item-value="index"
|
||||
:class="{ 'reconciliation-statement-table': true, 'disabled': loading }"
|
||||
:headers="dataTableHeaders"
|
||||
:items="reconciliationStatements?.transactions ?? []"
|
||||
:hover="true"
|
||||
:no-data-text="loading ? '' : tt('No transaction data')"
|
||||
v-model:items-per-page="countPerPage"
|
||||
v-model:page="currentPage"
|
||||
v-if="!showAccountBalanceTrendsCharts"
|
||||
>
|
||||
<template #item.time="{ item }">
|
||||
<span>{{ getDisplayDateTime(item) }}</span>
|
||||
<v-chip class="ms-1" variant="flat" color="secondary" size="x-small"
|
||||
v-if="item.utcOffset !== currentTimezoneOffsetMinutes">{{ getDisplayTimezone(item) }}</v-chip>
|
||||
</template>
|
||||
<template #item.type="{ item }">
|
||||
<v-chip label variant="outlined" size="x-small"
|
||||
:class="{ 'text-income' : item.type === TransactionType.Income, 'text-expense': item.type === TransactionType.Expense }"
|
||||
:color="getTransactionTypeColor(item)">{{ getDisplayTransactionType(item) }}</v-chip>
|
||||
</template>
|
||||
<template #item.categoryName="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<ItemIcon size="24px" icon-type="category"
|
||||
:icon-id="item.category?.icon ?? ''"
|
||||
:color="item.category?.color ?? ''"
|
||||
v-if="item.category && item.category?.color"></ItemIcon>
|
||||
<v-icon size="24" :icon="mdiPencilBoxOutline" v-else-if="!item.category || !item.category?.color" />
|
||||
<span class="ms-2" v-if="item.type === TransactionType.ModifyBalance">
|
||||
{{ tt('Modify Balance') }}
|
||||
</span>
|
||||
<span class="ms-2" v-else-if="item.type !== TransactionType.ModifyBalance && item.category">
|
||||
{{ item.category?.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.sourceAmount="{ item }">
|
||||
<span :class="{ 'text-expense': item.type === TransactionType.Expense, 'text-income': item.type === TransactionType.Income }">{{ getDisplaySourceAmount(item) }}</span>
|
||||
<v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId && getDisplaySourceAmount(item) !== getDisplayDestinationAmount(item)"></v-icon>
|
||||
<span v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId && getDisplaySourceAmount(item) !== getDisplayDestinationAmount(item)">{{ getDisplayDestinationAmount(item) }}</span>
|
||||
</template>
|
||||
<template #item.sourceAccountName="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<span v-if="item.sourceAccount">{{ item.sourceAccount?.name }}</span>
|
||||
<v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
|
||||
<span v-if="item.type === TransactionType.Transfer && item.destinationAccount">{{ item.destinationAccount?.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.accountBalance="{ item }">
|
||||
<span>{{ getDisplayAccountBalance(item) }}</span>
|
||||
</template>
|
||||
<template #item.operation="{ item }">
|
||||
<v-btn density="compact" variant="text" color="default" :disabled="loading || item.type === TransactionType.ModifyBalance"
|
||||
@click="showTransaction(item)">
|
||||
{{ tt('View') }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<template #bottom>
|
||||
<div class="title-and-toolbar d-flex align-center text-no-wrap mt-2" v-if="loading || (reconciliationStatements && reconciliationStatements.transactions && reconciliationStatements.transactions.length)">
|
||||
<span class="ms-2">{{ tt('Total Transactions') }}</span>
|
||||
<span v-if="loading">
|
||||
<v-card-text>
|
||||
<div class="d-flex align-center mb-4">
|
||||
<div class="d-flex align-center text-body-1">
|
||||
<span>{{ tt('Opening Balance') }}</span>
|
||||
<span class="text-primary" v-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
<span class="ms-2" v-else-if="!loading">
|
||||
{{ formatNumberToLocalizedNumerals(reconciliationStatements?.transactions.length ?? 0) }}
|
||||
<span class="text-primary ms-2" v-else-if="!loading">
|
||||
{{ displayOpeningBalance }}
|
||||
</span>
|
||||
<v-spacer/>
|
||||
<span v-if="reconciliationStatements && reconciliationStatements.transactions && reconciliationStatements.transactions.length > 10">
|
||||
{{ tt('Transactions Per Page') }}
|
||||
<span class="ms-3">{{ tt('Closing Balance') }}</span>
|
||||
<span class="text-primary" v-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
<span class="text-primary ms-2" v-else-if="!loading">
|
||||
{{ displayClosingBalance }}
|
||||
</span>
|
||||
<v-select class="ms-2" density="compact" max-width="100"
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
:disabled="loading"
|
||||
:items="reconciliationStatementsTablePageOptions"
|
||||
v-model="countPerPage"
|
||||
v-if="reconciliationStatements && reconciliationStatements.transactions && reconciliationStatements.transactions.length > 10"
|
||||
/>
|
||||
<pagination-buttons density="compact"
|
||||
:disabled="loading"
|
||||
:totalPageCount="totalPageCount"
|
||||
v-model="currentPage"
|
||||
v-if="reconciliationStatements && reconciliationStatements.transactions && reconciliationStatements.transactions.length > 10">
|
||||
</pagination-buttons>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-spacer/>
|
||||
<div class="d-flex align-center text-body-1">
|
||||
<span class="ms-2">{{ tt('Total Inflows') }}</span>
|
||||
<span class="text-income" v-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
<span class="text-income ms-2" v-else-if="!loading">
|
||||
{{ displayTotalInflows }}
|
||||
</span>
|
||||
<span class="ms-3">{{ tt('Total Outflows') }}</span>
|
||||
<span class="text-expense" v-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
<span class="text-expense ms-2" v-else-if="!loading">
|
||||
{{ displayTotalOutflows }}
|
||||
</span>
|
||||
<span class="ms-3">{{ tt('Net Cash Flow') }}</span>
|
||||
<span class="text-primary" v-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
<span class="text-primary ms-2" v-else-if="!loading">
|
||||
{{ displayTotalBalance }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<account-balance-trends-chart
|
||||
:type="chartType"
|
||||
:date-aggregation-type="chartDataDateAggregationType"
|
||||
:fiscal-year-start="fiscalYearStart"
|
||||
:items="[]"
|
||||
:legend-name="isCurrentLiabilityAccount ? tt('Account Outstanding Balance') : tt('Account Balance')"
|
||||
:account="currentAccount"
|
||||
:skeleton="true"
|
||||
v-if="showAccountBalanceTrendsCharts && loading"
|
||||
/>
|
||||
<v-data-table
|
||||
fixed-header
|
||||
fixed-footer
|
||||
multi-sort
|
||||
density="compact"
|
||||
item-value="index"
|
||||
:class="{ 'reconciliation-statement-table': true, 'disabled': loading }"
|
||||
:height="dataTableHeight"
|
||||
:headers="dataTableHeaders"
|
||||
:items="reconciliationStatements?.transactions ?? []"
|
||||
:hover="true"
|
||||
:no-data-text="loading ? '' : tt('No transaction data')"
|
||||
v-model:items-per-page="countPerPage"
|
||||
v-model:page="currentPage"
|
||||
v-if="!showAccountBalanceTrendsCharts"
|
||||
>
|
||||
<template #item.time="{ item }">
|
||||
<span>{{ getDisplayDateTime(item) }}</span>
|
||||
<v-chip class="ms-1" variant="flat" color="secondary" size="x-small"
|
||||
v-if="item.utcOffset !== currentTimezoneOffsetMinutes">{{ getDisplayTimezone(item) }}</v-chip>
|
||||
</template>
|
||||
<template #item.type="{ item }">
|
||||
<v-chip label variant="outlined" size="x-small"
|
||||
:class="{ 'text-income' : item.type === TransactionType.Income, 'text-expense': item.type === TransactionType.Expense }"
|
||||
:color="getTransactionTypeColor(item)">{{ getDisplayTransactionType(item) }}</v-chip>
|
||||
</template>
|
||||
<template #item.categoryName="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<ItemIcon size="24px" icon-type="category"
|
||||
:icon-id="item.category?.icon ?? ''"
|
||||
:color="item.category?.color ?? ''"
|
||||
v-if="item.category && item.category?.color"></ItemIcon>
|
||||
<v-icon size="24" :icon="mdiPencilBoxOutline" v-else-if="!item.category || !item.category?.color" />
|
||||
<span class="ms-2" v-if="item.type === TransactionType.ModifyBalance">
|
||||
{{ tt('Modify Balance') }}
|
||||
</span>
|
||||
<span class="ms-2" v-else-if="item.type !== TransactionType.ModifyBalance && item.category">
|
||||
{{ item.category?.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.sourceAmount="{ item }">
|
||||
<span :class="{ 'text-expense': item.type === TransactionType.Expense, 'text-income': item.type === TransactionType.Income }">{{ getDisplaySourceAmount(item) }}</span>
|
||||
<v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId && getDisplaySourceAmount(item) !== getDisplayDestinationAmount(item)"></v-icon>
|
||||
<span v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId && getDisplaySourceAmount(item) !== getDisplayDestinationAmount(item)">{{ getDisplayDestinationAmount(item) }}</span>
|
||||
</template>
|
||||
<template #item.sourceAccountName="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<span v-if="item.sourceAccount">{{ item.sourceAccount?.name }}</span>
|
||||
<v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
|
||||
<span v-if="item.type === TransactionType.Transfer && item.destinationAccount">{{ item.destinationAccount?.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.accountBalance="{ item }">
|
||||
<span>{{ getDisplayAccountBalance(item) }}</span>
|
||||
</template>
|
||||
<template #item.operation="{ item }">
|
||||
<v-btn density="compact" variant="text" color="default" :disabled="loading || item.type === TransactionType.ModifyBalance"
|
||||
@click="showTransaction(item)">
|
||||
{{ tt('View') }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<template #bottom>
|
||||
<div class="title-and-toolbar d-flex align-center text-no-wrap mt-2" v-if="loading || (reconciliationStatements && reconciliationStatements.transactions && reconciliationStatements.transactions.length)">
|
||||
<span class="ms-2">{{ tt('Total Transactions') }}</span>
|
||||
<span v-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin ms-3" type="text" style="width: 80px" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
<span class="ms-2" v-else-if="!loading">
|
||||
{{ formatNumberToLocalizedNumerals(reconciliationStatements?.transactions.length ?? 0) }}
|
||||
</span>
|
||||
<v-spacer/>
|
||||
<span v-if="reconciliationStatements && reconciliationStatements.transactions && reconciliationStatements.transactions.length > 10">
|
||||
{{ tt('Transactions Per Page') }}
|
||||
</span>
|
||||
<v-select class="ms-2" density="compact" max-width="100"
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
:disabled="loading"
|
||||
:items="reconciliationStatementsTablePageOptions"
|
||||
v-model="countPerPage"
|
||||
v-if="reconciliationStatements && reconciliationStatements.transactions && reconciliationStatements.transactions.length > 10"
|
||||
/>
|
||||
<pagination-buttons density="compact"
|
||||
:disabled="loading"
|
||||
:totalPageCount="totalPageCount"
|
||||
v-model="currentPage"
|
||||
v-if="reconciliationStatements && reconciliationStatements.transactions && reconciliationStatements.transactions.length > 10">
|
||||
</pagination-buttons>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<account-balance-trends-chart
|
||||
:type="chartType"
|
||||
:date-aggregation-type="chartDataDateAggregationType"
|
||||
:fiscal-year-start="fiscalYearStart"
|
||||
:items="reconciliationStatements?.transactions"
|
||||
:legend-name="isCurrentLiabilityAccount ? tt('Account Outstanding Balance') : tt('Account Balance')"
|
||||
:account="currentAccount"
|
||||
v-if="showAccountBalanceTrendsCharts && !loading"
|
||||
/>
|
||||
<div class="d-flex">
|
||||
<account-balance-trends-chart
|
||||
:type="chartType"
|
||||
:date-aggregation-type="chartDataDateAggregationType"
|
||||
:fiscal-year-start="fiscalYearStart"
|
||||
:items="[]"
|
||||
:legend-name="isCurrentLiabilityAccount ? tt('Account Outstanding Balance') : tt('Account Balance')"
|
||||
:account="currentAccount"
|
||||
:skeleton="true"
|
||||
v-if="showAccountBalanceTrendsCharts && loading"
|
||||
/>
|
||||
|
||||
<v-card-text class="overflow-y-visible">
|
||||
<div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
|
||||
<account-balance-trends-chart
|
||||
:type="chartType"
|
||||
:date-aggregation-type="chartDataDateAggregationType"
|
||||
:fiscal-year-start="fiscalYearStart"
|
||||
:items="reconciliationStatements?.transactions"
|
||||
:legend-name="isCurrentLiabilityAccount ? tt('Account Outstanding Balance') : tt('Account Balance')"
|
||||
:account="currentAccount"
|
||||
v-if="showAccountBalanceTrendsCharts && !loading"
|
||||
/>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text>
|
||||
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
|
||||
<v-btn color="secondary" variant="tonal"
|
||||
:disabled="loading" @click="close">{{ tt('Close') }}</v-btn>
|
||||
</div>
|
||||
@@ -389,6 +392,14 @@ const totalPageCount = computed<number>(() => {
|
||||
return Math.ceil(count / countPerPage.value);
|
||||
});
|
||||
|
||||
const dataTableHeight = computed<number | undefined>(() => {
|
||||
if (countPerPage.value <= 10 || !reconciliationStatements.value?.transactions || reconciliationStatements.value?.transactions?.length <= 10) {
|
||||
return undefined;
|
||||
} else {
|
||||
return 380;
|
||||
}
|
||||
});
|
||||
|
||||
const dataTableHeaders = computed<object[]>(() => {
|
||||
const headers: object[] = [];
|
||||
const accountBalanceName = isCurrentLiabilityAccount.value ? 'Account Outstanding Balance' : 'Account Balance';
|
||||
|
||||
Reference in New Issue
Block a user