mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-19 01:04:25 +08:00
modify style
This commit is contained in:
MaysWind
@@ -2,8 +2,8 @@
|
||||
<v-row class="match-height">
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<div class="d-flex flex-column flex-md-row">
|
||||
<div>
|
||||
<v-layout>
|
||||
<v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
|
||||
<div class="mx-6 my-4">
|
||||
<small>{{ $t('Data source') }}</small>
|
||||
<p class="text-body-1 mt-1 mb-3">
|
||||
@@ -11,14 +11,14 @@
|
||||
<span v-else-if="!loading && exchangeRatesData && !exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
|
||||
<span v-else-if="!loading && !exchangeRatesData">{{ $t('None') }}</span>
|
||||
<span v-else-if="loading">
|
||||
<v-skeleton-loader class="exchange-rates-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
|
||||
<v-skeleton-loader class="skeleton-no-margin mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
</p>
|
||||
<small v-if="exchangeRatesDataUpdateTime">{{ $t('Last Updated') }}</small>
|
||||
<p class="text-body-1 mt-1" v-if="exchangeRatesDataUpdateTime">
|
||||
<small v-if="exchangeRatesDataUpdateTime || loading">{{ $t('Last Updated') }}</small>
|
||||
<p class="text-body-1 mt-1" v-if="exchangeRatesDataUpdateTime || loading">
|
||||
<span v-if="!loading">{{ exchangeRatesDataUpdateTime }}</span>
|
||||
<span v-if="loading">
|
||||
<v-skeleton-loader class="exchange-rates-summary-skeleton mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
|
||||
<v-skeleton-loader class="skeleton-no-margin mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
@@ -35,82 +35,93 @@
|
||||
<v-tabs show-arrows class="mb-4" direction="vertical"
|
||||
:disabled="loading" v-model="baseCurrency"
|
||||
v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
|
||||
<v-tab :key="exchangeRate.currencyCode" :value="exchangeRate.currencyCode"
|
||||
<v-tab class="tab-text-truncate" :key="exchangeRate.currencyCode" :value="exchangeRate.currencyCode"
|
||||
v-for="exchangeRate in availableExchangeRates">
|
||||
{{ exchangeRate.currencyDisplayName }}
|
||||
<small class="smaller ml-1">{{ exchangeRate.currencyCode }}</small>
|
||||
<div class="text-truncate">
|
||||
<span>{{ exchangeRate.currencyDisplayName }}</span>
|
||||
<small class="smaller ml-1">{{ exchangeRate.currencyCode }}</small>
|
||||
</div>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<div class="mx-6 mt-2 mb-4"
|
||||
v-else-if="!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length">
|
||||
<span v-if="!loading">{{ $t('None') }}</span>
|
||||
<v-skeleton-loader type="paragraph" :loading="loading" v-else-if="loading"></v-skeleton-loader>
|
||||
<span v-else-if="loading">
|
||||
<v-skeleton-loader class="skeleton-no-margin pt-2 pb-5" type="text"
|
||||
:key="itemIdx" :loading="loading"
|
||||
v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]"></v-skeleton-loader>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</v-navigation-drawer>
|
||||
<v-main>
|
||||
<v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container" v-model="activeTab">
|
||||
<v-window-item value="exchangeRatesPage">
|
||||
<v-card variant="flat">
|
||||
<template #title>
|
||||
<div class="title-and-toolbar d-flex align-center">
|
||||
<v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
|
||||
:ripple="false" :icon="true" @click="showNav = !showNav">
|
||||
<v-icon :icon="icons.menu" size="24" />
|
||||
</v-btn>
|
||||
<span>{{ $t('Exchange Rates Data') }}</span>
|
||||
<v-btn density="compact" color="default" variant="text"
|
||||
class="ml-2" :icon="true"
|
||||
v-if="!loading" @click="reload">
|
||||
<v-icon :icon="icons.refresh" size="24" />
|
||||
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-window class="d-flex flex-grow-1 ml-md-5 disable-tab-transition w-100-window-container" v-model="activeTab">
|
||||
<v-window-item value="exchangeRatesPage">
|
||||
<v-card variant="flat">
|
||||
<template #title>
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ $t('Exchange Rates Data') }}</span>
|
||||
<v-btn density="compact" color="default" variant="text"
|
||||
class="ml-2" :icon="true"
|
||||
v-if="!loading" @click="reload">
|
||||
<v-icon :icon="icons.refresh" size="24" />
|
||||
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
|
||||
</div>
|
||||
</template>
|
||||
<v-table class="exchange-rates-table table-striped" :hover="!loading">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ $t('Currency') }}</span>
|
||||
<v-spacer/>
|
||||
<span>{{ $t('Amount') }}</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<v-table class="exchange-rates-table table-striped" :hover="!loading">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ $t('Currency') }}</span>
|
||||
<v-spacer/>
|
||||
<span>{{ $t('Amount') }}</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr :key="itemIdx"
|
||||
v-for="itemIdx in (loading && (!exchangeRatesData || !exchangeRatesData.exchangeRates || exchangeRatesData.exchangeRates.length < 1) ? [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] : [])">
|
||||
<td class="px-0">
|
||||
<v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tbody>
|
||||
<tr :key="itemIdx"
|
||||
v-for="itemIdx in (loading && (!exchangeRatesData || !exchangeRatesData.exchangeRates || exchangeRatesData.exchangeRates.length < 1) ? [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] : [])">
|
||||
<td class="px-0">
|
||||
<v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!loading && (!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length)">
|
||||
<td>{{ $t('No exchange rates data') }}</td>
|
||||
</tr>
|
||||
|
||||
<tr v-if="!loading && (!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length)">
|
||||
<td>{{ $t('No exchange rates data') }}</td>
|
||||
</tr>
|
||||
|
||||
<tr class="exchange-rates-table-row-data" :key="exchangeRate.currencyCode"
|
||||
v-for="exchangeRate in availableExchangeRates">
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<span class="text-sm">{{ exchangeRate.currencyDisplayName }}</span>
|
||||
<span class="text-caption ml-1">{{ exchangeRate.currencyCode }}</span>
|
||||
<v-spacer/>
|
||||
<v-btn class="hover-display px-2 ml-2 mr-3" color="default"
|
||||
density="comfortable" variant="text"
|
||||
@click="setAsBaseline(exchangeRate.currencyCode, exchangeRate)">
|
||||
{{ $t('Set As Baseline') }}
|
||||
</v-btn>
|
||||
<span>{{ getDisplayConvertedAmount(exchangeRate, isEnableThousandsSeparator) }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</div>
|
||||
<tr class="exchange-rates-table-row-data" :key="exchangeRate.currencyCode"
|
||||
v-for="exchangeRate in availableExchangeRates">
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<span class="text-sm">{{ exchangeRate.currencyDisplayName }}</span>
|
||||
<span class="text-caption ml-1">{{ exchangeRate.currencyCode }}</span>
|
||||
<v-spacer/>
|
||||
<v-btn class="hover-display px-2 ml-2 mr-3" color="default"
|
||||
density="comfortable" variant="text"
|
||||
@click="setAsBaseline(exchangeRate.currencyCode, exchangeRate)">
|
||||
{{ $t('Set As Baseline') }}
|
||||
</v-btn>
|
||||
<span>{{ getDisplayConvertedAmount(exchangeRate, isEnableThousandsSeparator) }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -119,6 +130,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useDisplay } from 'vuetify';
|
||||
|
||||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/setting.js';
|
||||
import { useUserStore } from '@/stores/user.js';
|
||||
@@ -130,11 +143,13 @@ import {
|
||||
} from '@/lib/currency.js';
|
||||
|
||||
import {
|
||||
mdiRefresh
|
||||
mdiRefresh,
|
||||
mdiMenu
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const { mdAndUp } = useDisplay();
|
||||
const userStore = useUserStore();
|
||||
|
||||
return {
|
||||
@@ -142,8 +157,11 @@ export default {
|
||||
baseCurrency: userStore.currentUserDefaultCurrency,
|
||||
baseAmount: '1',
|
||||
loading: true,
|
||||
alwaysShowNav: mdAndUp.value,
|
||||
showNav: mdAndUp.value,
|
||||
icons: {
|
||||
refresh: mdiRefresh
|
||||
refresh: mdiRefresh,
|
||||
menu: mdiMenu
|
||||
}
|
||||
};
|
||||
},
|
||||
@@ -166,6 +184,22 @@ export default {
|
||||
created() {
|
||||
this.reload(false);
|
||||
},
|
||||
setup() {
|
||||
const display = useDisplay();
|
||||
|
||||
return {
|
||||
display: display
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'display.mdAndUp.value': function (newValue) {
|
||||
this.alwaysShowNav = newValue;
|
||||
|
||||
if (!this.showNav) {
|
||||
this.showNav = newValue;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload(force) {
|
||||
const self = this;
|
||||
@@ -234,10 +268,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.exchange-rates-summary-skeleton .v-skeleton-loader__text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.exchange-rates-table tr.exchange-rates-table-row-data .hover-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user