refactor: optimize performance of data fetching in the dashboard component
This commit is contained in:
puriphatt
parent
8dd3268738
commit
f62463dc80
1 changed files with 260 additions and 269 deletions
|
|
@ -83,292 +83,283 @@ onMounted(async () => {
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<q-btn
|
||||||
<q-btn
|
rounded
|
||||||
rounded
|
dense
|
||||||
dense
|
flat
|
||||||
flat
|
no-caps
|
||||||
no-caps
|
color="dark"
|
||||||
color="dark"
|
class="q-pa-none account-menu-down dropdown-menu"
|
||||||
class="q-pa-none account-menu-down dropdown-menu"
|
>
|
||||||
>
|
<div class="row items-center">
|
||||||
<div class="row items-center">
|
<div class="q-pa-none">
|
||||||
<div class="q-pa-none">
|
<q-avatar
|
||||||
<q-avatar
|
class="surface-1 bordered"
|
||||||
class="surface-1 bordered"
|
:size="$q.screen.lt.sm ? '30px' : '40px'"
|
||||||
:size="$q.screen.lt.sm ? '30px' : '40px'"
|
|
||||||
>
|
|
||||||
<q-img
|
|
||||||
:ratio="1"
|
|
||||||
class="text-center"
|
|
||||||
:src="userImage"
|
|
||||||
v-if="userImage"
|
|
||||||
>
|
|
||||||
<template #error>
|
|
||||||
<div
|
|
||||||
class="no-padding full-width full-height flex items-center justify-center"
|
|
||||||
style="
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
rgba(43, 137, 223, 1) 0%,
|
|
||||||
rgba(230, 51, 81, 1) 100%
|
|
||||||
);
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-img
|
|
||||||
v-if="gender"
|
|
||||||
:ratio="1"
|
|
||||||
:src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
|
|
||||||
></q-img>
|
|
||||||
<q-icon
|
|
||||||
v-else
|
|
||||||
name="mdi-account-outline"
|
|
||||||
color="white"
|
|
||||||
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</q-img>
|
|
||||||
<q-icon
|
|
||||||
v-else
|
|
||||||
name="mdi-account-outline"
|
|
||||||
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
|
|
||||||
/>
|
|
||||||
</q-avatar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="text-left q-px-md"
|
|
||||||
v-if="$q.screen.gt.sm"
|
|
||||||
style="color: var(--foreground)"
|
|
||||||
>
|
>
|
||||||
<div class="text-caption column">
|
<q-img
|
||||||
<span
|
:ratio="1"
|
||||||
v-if="isLoggedIn()"
|
class="text-center"
|
||||||
class="text-weight-bold ellipsis"
|
:src="userImage"
|
||||||
style="max-width: 9vw"
|
v-if="userImage"
|
||||||
>
|
>
|
||||||
|
<template #error>
|
||||||
|
<div
|
||||||
|
class="no-padding full-width full-height flex items-center justify-center"
|
||||||
|
style="
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(43, 137, 223, 1) 0%,
|
||||||
|
rgba(230, 51, 81, 1) 100%
|
||||||
|
);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<q-img
|
||||||
|
v-if="gender"
|
||||||
|
:ratio="1"
|
||||||
|
:src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
|
||||||
|
></q-img>
|
||||||
|
<q-icon
|
||||||
|
v-else
|
||||||
|
name="mdi-account-outline"
|
||||||
|
color="white"
|
||||||
|
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</q-img>
|
||||||
|
<q-icon
|
||||||
|
v-else
|
||||||
|
name="mdi-account-outline"
|
||||||
|
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
|
||||||
|
/>
|
||||||
|
</q-avatar>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="text-left q-px-md"
|
||||||
|
v-if="$q.screen.gt.sm"
|
||||||
|
style="color: var(--foreground)"
|
||||||
|
>
|
||||||
|
<div class="text-caption column">
|
||||||
|
<span
|
||||||
|
v-if="isLoggedIn()"
|
||||||
|
class="text-weight-bold ellipsis"
|
||||||
|
style="max-width: 9vw"
|
||||||
|
>
|
||||||
|
{{ getName() }}
|
||||||
|
<q-tooltip>
|
||||||
{{ getName() }}
|
{{ getName() }}
|
||||||
<q-tooltip>
|
</q-tooltip>
|
||||||
{{ getName() }}
|
</span>
|
||||||
</q-tooltip>
|
<span
|
||||||
</span>
|
v-else
|
||||||
<span
|
class="text-weight-bold q-pb-xs ellipsis"
|
||||||
v-else
|
style="max-width: 9vw"
|
||||||
class="text-weight-bold q-pb-xs ellipsis"
|
>
|
||||||
style="max-width: 9vw"
|
{{ 'Guest' }}
|
||||||
>
|
<q-tooltip>
|
||||||
{{ 'Guest' }}
|
{{ 'Guest' }}
|
||||||
<q-tooltip>
|
</q-tooltip>
|
||||||
{{ 'Guest' }}
|
</span>
|
||||||
</q-tooltip>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div style="font-size: 11px">
|
<div style="font-size: 11px">
|
||||||
{{ filterRole?.join(' | ') }}
|
{{ filterRole?.join(' | ') }}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="$q.screen.gt.sm" class="text-right">
|
|
||||||
<q-icon name="mdi-chevron-down" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-menu :offset="[5, 10]" max-width="300px">
|
<div v-if="$q.screen.gt.sm" class="text-right">
|
||||||
<div
|
<q-icon name="mdi-chevron-down" />
|
||||||
no-padding
|
</div>
|
||||||
class="row justify-center bordered rounded"
|
</div>
|
||||||
style="overflow: hidden"
|
|
||||||
>
|
|
||||||
<div class="column col-12 items-center">
|
|
||||||
<div
|
|
||||||
class="full-width row justify-center"
|
|
||||||
style="position: relative"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="full-width account-cover"
|
|
||||||
:class="{ dark: $q.dark.isActive }"
|
|
||||||
></div>
|
|
||||||
<div class="avartar-border">
|
|
||||||
<q-avatar
|
|
||||||
id="changeAvatar"
|
|
||||||
size="72px"
|
|
||||||
class="surface-1 bordered"
|
|
||||||
:class="{ 'hover-profile': isLoggedIn() }"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
isLoggedIn() ? inputFile.click() : '';
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-img
|
|
||||||
:ratio="1"
|
|
||||||
class="text-center"
|
|
||||||
:src="userImage"
|
|
||||||
v-if="userImage"
|
|
||||||
>
|
|
||||||
<template #error>
|
|
||||||
<div
|
|
||||||
class="no-padding full-width full-height flex items-center justify-center"
|
|
||||||
style="
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
rgba(43, 137, 223, 1) 0%,
|
|
||||||
rgba(230, 51, 81, 1) 100%
|
|
||||||
);
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-img
|
|
||||||
v-if="gender"
|
|
||||||
:ratio="1"
|
|
||||||
:src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
|
|
||||||
></q-img>
|
|
||||||
<q-icon
|
|
||||||
v-else
|
|
||||||
name="mdi-account-outline"
|
|
||||||
color="white"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</q-img>
|
|
||||||
<q-icon name="mdi-account-outline" v-else />
|
|
||||||
</q-avatar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<q-menu :offset="[5, 10]" max-width="300px">
|
||||||
|
<div
|
||||||
|
no-padding
|
||||||
|
class="row justify-center bordered rounded"
|
||||||
|
style="overflow: hidden"
|
||||||
|
>
|
||||||
|
<div class="column col-12 items-center">
|
||||||
|
<div class="full-width row justify-center" style="position: relative">
|
||||||
<div
|
<div
|
||||||
class="text-subtitle2 q-mb-xs text-center full-width ellipsis q-px-md"
|
class="full-width account-cover"
|
||||||
style="margin-top: 58px"
|
:class="{ dark: $q.dark.isActive }"
|
||||||
>
|
></div>
|
||||||
|
<div class="avartar-border">
|
||||||
|
<q-avatar
|
||||||
|
id="changeAvatar"
|
||||||
|
size="72px"
|
||||||
|
class="surface-1 bordered"
|
||||||
|
:class="{ 'hover-profile': isLoggedIn() }"
|
||||||
|
@click="
|
||||||
|
() => {
|
||||||
|
isLoggedIn() ? inputFile.click() : '';
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<q-img
|
||||||
|
:ratio="1"
|
||||||
|
class="text-center"
|
||||||
|
:src="userImage"
|
||||||
|
v-if="userImage"
|
||||||
|
>
|
||||||
|
<template #error>
|
||||||
|
<div
|
||||||
|
class="no-padding full-width full-height flex items-center justify-center"
|
||||||
|
style="
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(43, 137, 223, 1) 0%,
|
||||||
|
rgba(230, 51, 81, 1) 100%
|
||||||
|
);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<q-img
|
||||||
|
v-if="gender"
|
||||||
|
:ratio="1"
|
||||||
|
:src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
|
||||||
|
></q-img>
|
||||||
|
<q-icon v-else name="mdi-account-outline" color="white" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</q-img>
|
||||||
|
<q-icon name="mdi-account-outline" v-else />
|
||||||
|
</q-avatar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="text-subtitle2 q-mb-xs text-center full-width ellipsis q-px-md"
|
||||||
|
style="margin-top: 58px"
|
||||||
|
>
|
||||||
|
<span v-if="isLoggedIn()">
|
||||||
|
{{ getName() }}
|
||||||
|
</span>
|
||||||
|
<span v-else>{{ 'Guest' }}</span>
|
||||||
|
<q-tooltip>
|
||||||
<span v-if="isLoggedIn()">
|
<span v-if="isLoggedIn()">
|
||||||
{{ getName() }}
|
{{ getName() }}
|
||||||
</span>
|
</span>
|
||||||
<span v-else>{{ 'Guest' }}</span>
|
<span v-else>{{ 'Guest' }}</span>
|
||||||
<q-tooltip>
|
</q-tooltip>
|
||||||
<span v-if="isLoggedIn()">
|
|
||||||
{{ getName() }}
|
|
||||||
</span>
|
|
||||||
<span v-else>{{ 'Guest' }}</span>
|
|
||||||
</q-tooltip>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="badge q-px-sm q-mb-md text-caption"
|
|
||||||
:class="{ dark: $q.dark.isActive }"
|
|
||||||
>
|
|
||||||
{{ filterRole?.join(' | ') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
<div class="column col-12">
|
class="badge q-px-sm q-mb-md text-caption"
|
||||||
<q-separator />
|
:class="{ dark: $q.dark.isActive }"
|
||||||
<div class="column justify-center">
|
>
|
||||||
<q-list
|
{{ filterRole?.join(' | ') }}
|
||||||
:dense="true"
|
|
||||||
v-for="op in options"
|
|
||||||
:key="op.value"
|
|
||||||
:id="op.value"
|
|
||||||
>
|
|
||||||
<q-item
|
|
||||||
v-if="op.value !== 'mode'"
|
|
||||||
clickable
|
|
||||||
:disable="op.disabled"
|
|
||||||
:id="`btn-${op.value}`"
|
|
||||||
@click="$emit(op.value)"
|
|
||||||
>
|
|
||||||
<q-item-section avatar>
|
|
||||||
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
{{ $t(op.label) }}
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-separator v-if="op.value === 'mode'" />
|
|
||||||
<q-item
|
|
||||||
v-if="op.value === 'mode'"
|
|
||||||
clickable
|
|
||||||
:id="`btn-${op.value}`"
|
|
||||||
@click="$emit(op.value)"
|
|
||||||
>
|
|
||||||
<q-item-section avatar>
|
|
||||||
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div class="row justify-between">
|
|
||||||
<span>
|
|
||||||
{{ $t(op.label) }}
|
|
||||||
</span>
|
|
||||||
<span class="app-text-muted-2">
|
|
||||||
{{
|
|
||||||
$t(
|
|
||||||
`general.${theme === Theme.Auto ? 'baseOnDevice' : theme}`,
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
<q-icon name="mdi-chevron-right" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
|
|
||||||
<q-menu
|
|
||||||
class="bordered rounded"
|
|
||||||
anchor="top right"
|
|
||||||
self="top left"
|
|
||||||
max-width="200"
|
|
||||||
:offset="[10, 0]"
|
|
||||||
style="width: 160px"
|
|
||||||
:touch-position="$q.screen.lt.sm"
|
|
||||||
>
|
|
||||||
<div v-for="(mode, index) in themeMode" :key="index">
|
|
||||||
<q-item clickable @click="theme = setTheme(mode.value)">
|
|
||||||
<q-item-section>
|
|
||||||
<div class="row justify-between">
|
|
||||||
<span>
|
|
||||||
{{ $t(`general.${mode.label}`) }}
|
|
||||||
</span>
|
|
||||||
<q-icon
|
|
||||||
v-if="mode.value === theme"
|
|
||||||
name="mdi-check"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</div>
|
|
||||||
</q-menu>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</div>
|
|
||||||
<q-separator />
|
|
||||||
<q-btn
|
|
||||||
v-if="isLoggedIn()"
|
|
||||||
no-caps
|
|
||||||
dense
|
|
||||||
unelevated
|
|
||||||
class="q-ma-md app-text-negative"
|
|
||||||
:class="{ dark: $q.dark.isActive }"
|
|
||||||
:label="$t('general.logout')"
|
|
||||||
@click="$emit('logout')"
|
|
||||||
id="btn-logout"
|
|
||||||
style="background-color: hsla(var(--negative-bg) / 0.1)"
|
|
||||||
v-close-popup
|
|
||||||
/>
|
|
||||||
<q-btn
|
|
||||||
v-else
|
|
||||||
no-caps
|
|
||||||
dense
|
|
||||||
color="primary"
|
|
||||||
unelevated
|
|
||||||
class="q-ma-md app-text-negative"
|
|
||||||
:label="$t('general.login')"
|
|
||||||
@click="$emit('login')"
|
|
||||||
id="btn-login"
|
|
||||||
v-close-popup
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
<div class="column col-12">
|
||||||
</div>
|
<q-separator />
|
||||||
|
<div class="column justify-center">
|
||||||
|
<q-list
|
||||||
|
:dense="true"
|
||||||
|
v-for="op in options"
|
||||||
|
:key="op.value"
|
||||||
|
:id="op.value"
|
||||||
|
>
|
||||||
|
<q-item
|
||||||
|
v-if="op.value !== 'mode'"
|
||||||
|
clickable
|
||||||
|
:disable="op.disabled"
|
||||||
|
:id="`btn-${op.value}`"
|
||||||
|
@click="$emit(op.value)"
|
||||||
|
>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section class="q-py-sm">
|
||||||
|
{{ $t(op.label) }}
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
|
||||||
|
<q-separator v-if="op.value === 'mode'" />
|
||||||
|
<q-item
|
||||||
|
v-if="op.value === 'mode'"
|
||||||
|
clickable
|
||||||
|
:id="`btn-${op.value}`"
|
||||||
|
@click="$emit(op.value)"
|
||||||
|
>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section class="q-py-sm">
|
||||||
|
<div class="row justify-between">
|
||||||
|
<span>
|
||||||
|
{{ $t(op.label) }}
|
||||||
|
</span>
|
||||||
|
<span class="app-text-muted-2">
|
||||||
|
{{
|
||||||
|
$t(
|
||||||
|
`general.${theme === Theme.Auto ? 'baseOnDevice' : theme}`,
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
<q-icon name="mdi-chevron-right" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</q-item-section>
|
||||||
|
|
||||||
|
<q-menu
|
||||||
|
class="bordered rounded"
|
||||||
|
anchor="top right"
|
||||||
|
self="top left"
|
||||||
|
max-width="200"
|
||||||
|
:offset="[10, 0]"
|
||||||
|
style="width: 160px"
|
||||||
|
:touch-position="$q.screen.lt.sm"
|
||||||
|
>
|
||||||
|
<div v-for="(mode, index) in themeMode" :key="index">
|
||||||
|
<q-item clickable @click="theme = setTheme(mode.value)">
|
||||||
|
<q-item-section>
|
||||||
|
<div class="row justify-between">
|
||||||
|
<span>
|
||||||
|
{{ $t(`general.${mode.label}`) }}
|
||||||
|
</span>
|
||||||
|
<q-icon
|
||||||
|
v-if="mode.value === theme"
|
||||||
|
name="mdi-check"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</div>
|
||||||
|
</q-menu>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
<q-btn
|
||||||
|
v-if="isLoggedIn()"
|
||||||
|
no-caps
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
class="q-ma-md app-text-negative"
|
||||||
|
:class="{ dark: $q.dark.isActive }"
|
||||||
|
:label="$t('general.logout')"
|
||||||
|
@click="$emit('logout')"
|
||||||
|
id="btn-logout"
|
||||||
|
style="background-color: hsla(var(--negative-bg) / 0.1)"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
v-else
|
||||||
|
no-caps
|
||||||
|
dense
|
||||||
|
color="primary"
|
||||||
|
unelevated
|
||||||
|
class="q-ma-md app-text-negative"
|
||||||
|
:label="$t('general.login')"
|
||||||
|
@click="$emit('login')"
|
||||||
|
id="btn-login"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.account-menu-down {
|
.account-menu-down {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue