modify overview page loading style
This commit is contained in:
MaysWind
@@ -21,15 +21,17 @@
|
||||
|
||||
<v-card-text>
|
||||
<h5 class="text-2xl font-weight-medium text-primary">
|
||||
{{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }}
|
||||
<v-btn density="compact" color="default" variant="text"
|
||||
<span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }}</span>
|
||||
<v-skeleton-loader class="d-inline-block overview-card-skeleton mt-4" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
|
||||
<v-btn class="ml-1" density="compact" color="default" variant="text"
|
||||
:icon="true" @click="showAmountInHomePage = !showAmountInHomePage">
|
||||
<v-icon :icon="showAmountInHomePage ? icons.eyeSlash : icons.eye" size="20" />
|
||||
</v-btn>
|
||||
</h5>
|
||||
<div class="mt-2 mb-3">
|
||||
<span class="mr-2">{{ $t('Monthly income') }}</span>
|
||||
<span>{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span>
|
||||
<span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span>
|
||||
<v-skeleton-loader class="d-inline-block overview-card-skeleton" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
|
||||
</div>
|
||||
<v-btn size="small" to="/transactions?dateType=7">{{ $t('View Details') }}</v-btn>
|
||||
<v-img class="overview-card-background" src="img/desktop/card-background.png"/>
|
||||
@@ -40,10 +42,10 @@
|
||||
|
||||
<v-col cols="12" lg="2" md="6">
|
||||
<income-expense-overview-card
|
||||
:disabled="loadingOverview" :icon="icons.calendarToday"
|
||||
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarToday"
|
||||
:title="$t('Today')"
|
||||
:expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : '-'"
|
||||
:income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : '-'"
|
||||
:expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : ''"
|
||||
:income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : ''"
|
||||
:datetime="displayDateRange.today.displayTime"
|
||||
>
|
||||
<template #menus>
|
||||
@@ -56,10 +58,10 @@
|
||||
|
||||
<v-col cols="12" lg="2" md="6">
|
||||
<income-expense-overview-card
|
||||
:disabled="loadingOverview" :icon="icons.calendarWeek"
|
||||
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarWeek"
|
||||
:title="$t('This Week')"
|
||||
:expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : '-'"
|
||||
:income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : '-'"
|
||||
:expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : ''"
|
||||
:income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : ''"
|
||||
:datetime="displayDateRange.thisWeek.startTime + '-' + displayDateRange.thisWeek.endTime"
|
||||
>
|
||||
<template #menus>
|
||||
@@ -72,10 +74,10 @@
|
||||
|
||||
<v-col cols="12" lg="2" md="6">
|
||||
<income-expense-overview-card
|
||||
:disabled="loadingOverview" :icon="icons.calendarMonth"
|
||||
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarMonth"
|
||||
:title="$t('This Month')"
|
||||
:expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-'"
|
||||
:income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-'"
|
||||
:expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : ''"
|
||||
:income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : ''"
|
||||
:datetime="displayDateRange.thisMonth.startTime + '-' + displayDateRange.thisMonth.endTime"
|
||||
>
|
||||
<template #menus>
|
||||
@@ -88,10 +90,10 @@
|
||||
|
||||
<v-col cols="12" lg="2" md="6">
|
||||
<income-expense-overview-card
|
||||
:disabled="loadingOverview" :icon="icons.calendarYear"
|
||||
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarYear"
|
||||
:title="$t('This Year')"
|
||||
:expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayExpenseAmount(transactionOverview.thisYear) : '-'"
|
||||
:income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayIncomeAmount(transactionOverview.thisYear) : '-'"
|
||||
:expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayExpenseAmount(transactionOverview.thisYear) : ''"
|
||||
:income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayIncomeAmount(transactionOverview.thisYear) : ''"
|
||||
:datetime="displayDateRange.thisYear.displayTime"
|
||||
>
|
||||
<template #menus>
|
||||
@@ -308,4 +310,8 @@ export default {
|
||||
inset-block-end: 0.5rem;
|
||||
inset-inline-end: 1rem;
|
||||
}
|
||||
|
||||
.overview-card-skeleton .v-skeleton-loader__text {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,10 +16,10 @@
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
<v-card-text class="pb-2">
|
||||
<div class="d-flex align-center mb-2">
|
||||
<span class="font-weight-semibold text-truncate text-red text-h5 text-income me-2">{{ incomeAmount }}</span>
|
||||
</div>
|
||||
<span class="text-truncate text-h6 text-expense">{{ expenseAmount }}</span>
|
||||
<div class="font-weight-semibold text-truncate text-red text-h5 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
|
||||
<v-skeleton-loader class="income-expense-overview-card-skeleton mt-4 mb-6" type="text" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
|
||||
<div class="text-truncate text-h6 text-expense" v-if="!loading || expenseAmount">{{ expenseAmount }}</div>
|
||||
<v-skeleton-loader class="income-expense-overview-card-skeleton mb-2" type="text" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<span class="text-caption">{{ datetime }}</span>
|
||||
@@ -34,6 +34,7 @@ import {
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'loading',
|
||||
'disabled',
|
||||
'icon',
|
||||
'title',
|
||||
@@ -50,3 +51,9 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.income-expense-overview-card-skeleton .v-skeleton-loader__text {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,13 +4,36 @@
|
||||
<span class="text-2xl font-weight-bold">{{ $t('Trend in Income and Expense') }}</span>
|
||||
</template>
|
||||
|
||||
<v-card-text class="overview-monthly-chart overview-monthly-chart-no-data-tips" v-if="!loading && !hasAnyData">
|
||||
<v-card-text class="overview-monthly-chart-container overview-monthly-chart-overlay" v-if="loading && !hasAnyData">
|
||||
<div class="overview-monthly-chart-skeleton-container h-100" style="margin-top: -30px">
|
||||
<div class="d-flex w-100 h-100 align-center justify-center">
|
||||
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
|
||||
</div>
|
||||
<div class="d-flex w-100 h-100 align-center justify-center">
|
||||
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
|
||||
</div>
|
||||
<div class="d-flex w-100 h-100 align-center justify-center">
|
||||
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
|
||||
</div>
|
||||
<div class="d-flex w-100 h-100 align-center justify-center">
|
||||
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
|
||||
</div>
|
||||
<div class="d-flex w-100 h-100 align-center justify-center">
|
||||
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
|
||||
</div>
|
||||
<div class="d-flex w-100 h-100 align-center justify-center">
|
||||
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="overview-monthly-chart-container overview-monthly-chart-overlay" v-else-if="!loading && !hasAnyData">
|
||||
<div class="d-flex flex-column align-center justify-center w-100 h-100">
|
||||
<h2 style="margin-top: -40px">{{ $t('No data') }}</h2>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<v-chart autoresize class="overview-monthly-chart" :class="{ 'readonly': !hasAnyData }" :option="chartOptions"/>
|
||||
<v-chart autoresize class="overview-monthly-chart-container" :class="{ 'readonly': !hasAnyData }" :option="chartOptions"/>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
@@ -266,14 +289,19 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.overview-monthly-chart-no-data-tips {
|
||||
.overview-monthly-chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.overview-monthly-chart-overlay {
|
||||
position: absolute !important;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.overview-monthly-chart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
.overview-monthly-chart-skeleton-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.overview-monthly-chart-tooltip-indicator {
|
||||
|
||||
Reference in New Issue
Block a user