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>
|
||||
<template>
|
||||
<div>
|
||||
<q-btn
|
||||
rounded
|
||||
dense
|
||||
flat
|
||||
no-caps
|
||||
color="dark"
|
||||
class="q-pa-none account-menu-down dropdown-menu"
|
||||
>
|
||||
<div class="row items-center">
|
||||
<div class="q-pa-none">
|
||||
<q-avatar
|
||||
class="surface-1 bordered"
|
||||
: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)"
|
||||
<q-btn
|
||||
rounded
|
||||
dense
|
||||
flat
|
||||
no-caps
|
||||
color="dark"
|
||||
class="q-pa-none account-menu-down dropdown-menu"
|
||||
>
|
||||
<div class="row items-center">
|
||||
<div class="q-pa-none">
|
||||
<q-avatar
|
||||
class="surface-1 bordered"
|
||||
:size="$q.screen.lt.sm ? '30px' : '40px'"
|
||||
>
|
||||
<div class="text-caption column">
|
||||
<span
|
||||
v-if="isLoggedIn()"
|
||||
class="text-weight-bold ellipsis"
|
||||
style="max-width: 9vw"
|
||||
>
|
||||
<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">
|
||||
<span
|
||||
v-if="isLoggedIn()"
|
||||
class="text-weight-bold ellipsis"
|
||||
style="max-width: 9vw"
|
||||
>
|
||||
{{ getName() }}
|
||||
<q-tooltip>
|
||||
{{ getName() }}
|
||||
<q-tooltip>
|
||||
{{ getName() }}
|
||||
</q-tooltip>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-weight-bold q-pb-xs ellipsis"
|
||||
style="max-width: 9vw"
|
||||
>
|
||||
</q-tooltip>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-weight-bold q-pb-xs ellipsis"
|
||||
style="max-width: 9vw"
|
||||
>
|
||||
{{ 'Guest' }}
|
||||
<q-tooltip>
|
||||
{{ 'Guest' }}
|
||||
<q-tooltip>
|
||||
{{ 'Guest' }}
|
||||
</q-tooltip>
|
||||
</span>
|
||||
</q-tooltip>
|
||||
</span>
|
||||
|
||||
<div style="font-size: 11px">
|
||||
{{ filterRole?.join(' | ') }}
|
||||
</div>
|
||||
<div style="font-size: 11px">
|
||||
{{ filterRole?.join(' | ') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="$q.screen.gt.sm" class="text-right">
|
||||
<q-icon name="mdi-chevron-down" />
|
||||
</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
|
||||
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>
|
||||
<div v-if="$q.screen.gt.sm" class="text-right">
|
||||
<q-icon name="mdi-chevron-down" />
|
||||
</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
|
||||
class="text-subtitle2 q-mb-xs text-center full-width ellipsis q-px-md"
|
||||
style="margin-top: 58px"
|
||||
>
|
||||
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>
|
||||
|
||||
<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()">
|
||||
{{ getName() }}
|
||||
</span>
|
||||
<span v-else>{{ 'Guest' }}</span>
|
||||
<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>
|
||||
</q-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="column col-12">
|
||||
<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
|
||||
class="badge q-px-sm q-mb-md text-caption"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
>
|
||||
{{ filterRole?.join(' | ') }}
|
||||
</div>
|
||||
</div>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="column col-12">
|
||||
<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>
|
||||
<style scoped lang="scss">
|
||||
.account-menu-down {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue