From f62463dc809139ff40de2e551fd01439b558a075 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 11:09:53 +0700
Subject: [PATCH] refactor: optimize performance of data fetching in the
 dashboard component

---
 src/layouts/ProfileMenu.vue | 529 ++++++++++++++++++------------------
 1 file changed, 260 insertions(+), 269 deletions(-)

diff --git a/src/layouts/ProfileMenu.vue b/src/layouts/ProfileMenu.vue
index 82980933..5c91f2d4 100644
--- a/src/layouts/ProfileMenu.vue
+++ b/src/layouts/ProfileMenu.vue
@@ -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 {