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

code refactor

Browse Source
This commit is contained in:
MaysWind
2023-07-24 23:25:33 +08:00
parent 848e5271ab
commit 683188f67a
1 changed files with 19 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/TransactionsPage.vue
+19 -41
View File
@@ -49,7 +49,7 @@
<div class="transaction-list-title d-flex align-center text-no-wrap"> <div class="transaction-list-title d-flex align-center text-no-wrap">
<span>{{ $t('Transaction List') }}</span> <span>{{ $t('Transaction List') }}</span>
<v-btn class="ml-3" color="default" variant="outlined" <v-btn class="ml-3" color="default" variant="outlined"
:disabled="loading" @click="add">{{ $t('Add') }}</v-btn> :disabled="loading || !canAddTransaction" @click="add">{{ $t('Add') }}</v-btn>
<v-btn density="compact" color="default" variant="text" <v-btn density="compact" color="default" variant="text"
class="ml-2" :icon="true" :disabled="loading" class="ml-2" :icon="true" :disabled="loading"
v-if="!loading" @click="reload"> v-if="!loading" @click="reload">
@@ -76,25 +76,23 @@
<span class="text-body-1">{{ $t('Date Range') }}</span> <span class="text-body-1">{{ $t('Date Range') }}</span>
<span class="text-body-1 transaction-list-datetime-range-text ml-2"> <span class="text-body-1 transaction-list-datetime-range-text ml-2">
<span v-if="!this.query.minTime && !this.query.maxTime">{{ $t('All') }}</span> <span v-if="!this.query.minTime && !this.query.maxTime">{{ $t('All') }}</span>
<span v-if="this.query.minTime || this.query.maxTime">{{ queryMinTime }}</span> <span v-else-if="this.query.minTime || this.query.maxTime">{{ `${queryMinTime} - ${queryMaxTime}` }}</span>
<span v-if="this.query.minTime || this.query.maxTime">&nbsp;-&nbsp;</span>
<span v-if="this.query.minTime || this.query.maxTime">{{ queryMaxTime }}</span>
</span> </span>
<v-spacer/> <v-spacer/>
<div class="transaction-list-total-amount-text d-flex align-center" v-if="isShowMonthlyData"> <div class="transaction-list-total-amount-text d-flex align-center" v-if="showTotalAmountInTransactionListPage && monthlyDataTotalAmount">
<span class="ml-2 text-subtitle-1">{{ $t('Total Income') }}</span> <span class="ml-2 text-subtitle-1">{{ $t('Total Income') }}</span>
<span class="text-income ml-2" v-if="loading"> <span class="text-income ml-2" v-if="loading">
<v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader> <v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader>
</span> </span>
<span class="text-income ml-2" v-else-if="!loading"> <span class="text-income ml-2" v-else-if="!loading">
{{ monthlyDataTotalIncome }} {{ monthlyDataTotalAmount.income }}
</span> </span>
<span class="text-subtitle-1 ml-2">{{ $t('Total Expense') }}</span> <span class="text-subtitle-1 ml-3">{{ $t('Total Expense') }}</span>
<span class="text-income ml-2" v-if="loading"> <span class="text-income ml-2" v-if="loading">
<v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader> <v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader>
</span> </span>
<span class="text-expense ml-2" v-else-if="!loading"> <span class="text-expense ml-2" v-else-if="!loading">
{{ monthlyDataTotalExpense }} {{ monthlyDataTotalAmount.expense }}
</span> </span>
</div> </div>
</div> </div>
@@ -304,10 +302,8 @@
<v-icon :icon="icons.arrowRight" v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id"></v-icon> <v-icon :icon="icons.arrowRight" v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id"></v-icon>
<span v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id">{{ transaction.destinationAccount.name }}</span> <span v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id">{{ transaction.destinationAccount.name }}</span>
</td> </td>
<td class="transaction-table-column-description"> <td class="transaction-table-column-description text-truncate">
<div class="d-flex align-center"> {{ transaction.comment }}
<span>{{ transaction.comment }}</span>
</div>
</td> </td>
</tr> </tr>
</template> </template>
@@ -525,45 +521,28 @@ export default {
return Number.MAX_SAFE_INTEGER; return Number.MAX_SAFE_INTEGER;
} }
}, },
monthlyDataTotalIncome() { monthlyDataTotalAmount() {
const recentDateRange = this.recentMonthDateRanges[this.recentDateRangeType]; const recentDateRange = this.recentMonthDateRanges[this.recentDateRangeType];
if (!recentDateRange || !recentDateRange.year || !recentDateRange.month) { if (!recentDateRange || !recentDateRange.year || !recentDateRange.month) {
return '-'; return null;
} }
if (!this.transactions || !this.transactions.length) { if (!this.transactions || !this.transactions.length) {
return '-'; return null;
} }
for (let i = 0; i < this.transactions.length; i++) { for (let i = 0; i < this.transactions.length; i++) {
if (this.transactions[i].year === recentDateRange.year && if (this.transactions[i].year === recentDateRange.year &&
this.transactions[i].month === recentDateRange.month) { this.transactions[i].month === recentDateRange.month) {
return this.getDisplayMonthTotalAmount(this.transactions[i].totalAmount.income, this.defaultCurrency, '', this.transactions[i].totalAmount.incompleteIncome) return {
income: this.getDisplayMonthTotalAmount(this.transactions[i].totalAmount.income, this.defaultCurrency, '', this.transactions[i].totalAmount.incompleteIncome),
expense: this.getDisplayMonthTotalAmount(this.transactions[i].totalAmount.expense, this.defaultCurrency, '', this.transactions[i].totalAmount.incompleteExpense)
};
} }
} }
return '-'; return null;
},
monthlyDataTotalExpense() {
const recentDateRange = this.recentMonthDateRanges[this.recentDateRangeType];
if (!recentDateRange || !recentDateRange.year || !recentDateRange.month) {
return '-';
}
if (!this.transactions || !this.transactions.length) {
return '-';
}
for (let i = 0; i < this.transactions.length; i++) {
if (this.transactions[i].year === recentDateRange.year &&
this.transactions[i].month === recentDateRange.month) {
return this.getDisplayMonthTotalAmount(this.transactions[i].totalAmount.expense, this.defaultCurrency, '', this.transactions[i].totalAmount.incompleteExpense)
}
}
return '-';
}, },
allTransactionTypes() { allTransactionTypes() {
return transactionConstants.allTransactionTypes; return transactionConstants.allTransactionTypes;
@@ -922,6 +901,7 @@ export default {
} }
.transaction-list-datetime-range { .transaction-list-datetime-range {
height: 28px;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
} }
@@ -966,10 +946,8 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
.transaction-table .transaction-table-column-description { .transaction-table-column-description {
white-space: nowrap; max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
} }
.transaction-table .transaction-table-column-category .v-btn, .transaction-table .transaction-table-column-category .v-btn,