mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-18 16:54:25 +08:00
Upgrade to vue3 (#16)
* upgrade to vue 3.x and framework7 8.x * change calendar plugin to vue-datepicker * disable export button when user does not hava any transaction * implement new pin code input * append thousands separator in amount in exchange rates page
This commit is contained in:
mayswind
@@ -8,73 +8,73 @@
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
|
||||
<f7-card>
|
||||
<f7-card-content class="no-safe-areas" :padding="false" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
|
||||
<f7-list>
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Base Currency')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Base Currency'), searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
>
|
||||
<f7-block slot="title" class="no-padding no-margin">
|
||||
<span>{{ $t(`currency.${baseCurrency}`) }} </span>
|
||||
<small class="smaller">{{ baseCurrency }}</small>
|
||||
</f7-block>
|
||||
<select v-model="baseCurrency">
|
||||
<option v-for="exchangeRate in availableExchangeRates"
|
||||
:key="exchangeRate.currencyCode"
|
||||
:value="exchangeRate.currencyCode">{{ exchangeRate.currencyDisplayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
<f7-list-item
|
||||
class="currency-base-amount"
|
||||
link="#" no-chevron
|
||||
:style="{ fontSize: baseAmountFontSize + 'px' }"
|
||||
:header="$t('Base Amount')"
|
||||
:title="baseAmount | currency"
|
||||
@click="showBaseAmountSheet = true"
|
||||
>
|
||||
<number-pad-sheet :min-value="$constants.transaction.minAmount"
|
||||
:max-value="$constants.transaction.maxAmount"
|
||||
:show.sync="showBaseAmountSheet"
|
||||
v-model="baseAmount"
|
||||
></number-pad-sheet>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
<f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Base Currency')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Base Currency'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<template #title>
|
||||
<div class="no-padding no-margin">
|
||||
<span>{{ $t(`currency.${baseCurrency}`) }} </span>
|
||||
<small class="smaller">{{ baseCurrency }}</small>
|
||||
</div>
|
||||
</template>
|
||||
<select v-model="baseCurrency">
|
||||
<option :value="exchangeRate.currencyCode"
|
||||
:key="exchangeRate.currencyCode"
|
||||
v-for="exchangeRate in availableExchangeRates">{{ exchangeRate.currencyDisplayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
<f7-list-item
|
||||
class="currency-base-amount"
|
||||
link="#" no-chevron
|
||||
:style="{ fontSize: baseAmountFontSize + 'px' }"
|
||||
:header="$t('Base Amount')"
|
||||
:title="displayBaseAmount"
|
||||
@click="showBaseAmountSheet = true"
|
||||
>
|
||||
<number-pad-sheet :min-value="$constants.transaction.minAmount"
|
||||
:max-value="$constants.transaction.maxAmount"
|
||||
v-model:show="showBaseAmountSheet"
|
||||
v-model="baseAmount"
|
||||
></number-pad-sheet>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-card>
|
||||
<f7-card-content class="no-safe-areas" :padding="false" v-if="!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length">
|
||||
<f7-list>
|
||||
<f7-list-item :title="$t('No exchange rates data')"></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
<f7-card-content class="no-safe-areas" :padding="false" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
|
||||
<f7-list>
|
||||
<f7-list-item v-for="exchangeRate in availableExchangeRates" :key="exchangeRate.currencyCode"
|
||||
:after="getConvertedAmount(exchangeRate) | exchangeRate"
|
||||
swipeout>
|
||||
<f7-block slot="title" class="no-padding no-margin">
|
||||
<span style="margin-right: 5px">{{ exchangeRate.currencyDisplayName }}</span>
|
||||
<small class="smaller">{{ exchangeRate.currencyCode }}</small>
|
||||
</f7-block>
|
||||
<f7-swipeout-actions right>
|
||||
<f7-swipeout-button color="primary" close :text="$t('Set As Baseline')" @click="setAsBaseline(exchangeRate.currencyCode, getConvertedAmount(exchangeRate))"></f7-swipeout-button>
|
||||
</f7-swipeout-actions>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
<f7-card-footer v-if="exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
|
||||
<span>{{ $t('Last Updated') }}</span>
|
||||
<span>{{ exchangeRatesData.updateTime | moment($t('format.date.long')) }}</span>
|
||||
</f7-card-footer>
|
||||
<f7-card-footer v-if="exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
|
||||
<span>{{ $t('Data source') }}</span>
|
||||
<f7-link external target="_blank" :href="exchangeRatesData.referenceUrl" v-if="exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</f7-link>
|
||||
<span v-else-if="!exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
|
||||
</f7-card-footer>
|
||||
</f7-card>
|
||||
<f7-list strong inset dividers class="margin-vertical" v-if="!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length">
|
||||
<f7-list-item :title="$t('No exchange rates data')"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
|
||||
<f7-list-item swipeout
|
||||
:after="getDisplayConvertedAmount(exchangeRate)"
|
||||
:key="exchangeRate.currencyCode" v-for="exchangeRate in availableExchangeRates">
|
||||
<template #title>
|
||||
<div class="no-padding no-margin">
|
||||
<span style="margin-right: 5px">{{ exchangeRate.currencyDisplayName }}</span>
|
||||
<small class="smaller">{{ exchangeRate.currencyCode }}</small>
|
||||
</div>
|
||||
</template>
|
||||
<f7-swipeout-actions right>
|
||||
<f7-swipeout-button color="primary" close :text="$t('Set As Baseline')" @click="setAsBaseline(exchangeRate.currencyCode, getConvertedAmount(exchangeRate))"></f7-swipeout-button>
|
||||
</f7-swipeout-actions>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
|
||||
<f7-list-item v-if="exchangeRatesDataUpdateTime">
|
||||
<small>{{ $t('Last Updated') }}</small>
|
||||
<small>{{ exchangeRatesDataUpdateTime }}</small>
|
||||
</f7-list-item>
|
||||
<f7-list-item>
|
||||
<small>{{ $t('Data source') }}</small>
|
||||
<small>
|
||||
<f7-link external target="_blank" :href="exchangeRatesData.referenceUrl" v-if="exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</f7-link>
|
||||
<span v-else-if="!exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
|
||||
</small>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
|
||||
<f7-actions-group>
|
||||
@@ -106,6 +106,13 @@ export default {
|
||||
exchangeRatesData() {
|
||||
return this.$store.state.latestExchangeRates.data;
|
||||
},
|
||||
exchangeRatesDataUpdateTime() {
|
||||
if (!this.exchangeRatesData) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return this.$utilities.formatUnixTime(this.exchangeRatesData.updateTime, this.$t('format.date.long'));
|
||||
},
|
||||
exchangeRateMap() {
|
||||
const exchangeRateMap = {};
|
||||
|
||||
@@ -143,6 +150,9 @@ export default {
|
||||
|
||||
return availableExchangeRates;
|
||||
},
|
||||
displayBaseAmount() {
|
||||
return this.$locale.getDisplayCurrency(this.baseAmount);
|
||||
},
|
||||
baseAmountFontSize() {
|
||||
return this.getFontSizeByAmount(this.baseAmount);
|
||||
}
|
||||
@@ -213,6 +223,25 @@ export default {
|
||||
|
||||
return this.$utilities.getExchangedAmount(this.baseAmount / 100, fromExchangeRate.rate, toExchangeRate.rate);
|
||||
},
|
||||
getDisplayConvertedAmount(toExchangeRate) {
|
||||
const rateStr = this.getConvertedAmount(toExchangeRate).toString();
|
||||
|
||||
if (rateStr.indexOf('.') < 0) {
|
||||
return this.$utilities.appendThousandsSeparator(rateStr);
|
||||
} else {
|
||||
let firstNonZeroPos = 0;
|
||||
|
||||
for (let i = 0; i < rateStr.length; i++) {
|
||||
if (rateStr.charAt(i) !== '.' && rateStr.charAt(i) !== '0') {
|
||||
firstNonZeroPos = Math.min(i + 4, rateStr.length);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const trimmedRateStr = rateStr.substring(0, Math.max(6, Math.max(firstNonZeroPos, rateStr.indexOf('.') + 2)));
|
||||
return this.$utilities.appendThousandsSeparator(trimmedRateStr);
|
||||
}
|
||||
},
|
||||
setAsBaseline(currency, amount) {
|
||||
if (!this.$utilities.isNumber(amount)) {
|
||||
amount = '';
|
||||
|
||||
Reference in New Issue
Block a user