update empty string to null

src/pages/ChatPage.vue

@@ -0,0 +1,91 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <pn-account-block-name/>
+      <q-btn
+        @click="logout()"
+        flat
+        round
+        icon="mdi-logout"
+      />
+    </template>
+
+    <pn-scroll-list>
+      <q-list separator>
+        <q-item
+          v-for="item in displayItems"
+          :key="item.id"
+          @click="goTo(item.pathName)"
+          clickable
+          v-ripple
+          >
+            <q-item-section avatar>
+              <q-avatar
+                :icon="item.icon"
+                :color="item.iconColor ? item.iconColor: 'brand'"
+                text-color="white"
+                rounded
+                font-size ="26px"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>
+                {{ $t(item.name) }}
+              </q-item-label>
+              <q-item-label class="text-caption" v-if="$te(item.description)">
+                {{ $t(item.description) }}
+              </q-item-label>
+            </q-item-section>
+        </q-item>
+      </q-list>
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { useAuthStore } from 'stores/auth'
+
+  const router = useRouter()
+  const authStore = useAuthStore()
+
+  interface ItemList {
+    id: number
+    name: string
+    description?: string
+    icon: string
+    iconColor?: string
+    pathName: string
+    display?: boolean 
+  }
+
+  const items = computed(() => ([
+    { id: 1, name: 'account__subscribe', description: 'account__subscribe_description', icon: 'mdi-crown-circle-outline', iconColor: 'orange', pathName: 'subscribe' },
+    { id: 2, name: 'account__auth_change_method', description: 'account__auth_change_method_description', icon: 'mdi-account-sync-outline', iconColor: 'primary', pathName: 'change_account_auth_method', display: !authStore.customer?.email },
+    { id: 3, name: 'account__auth_change_password', description: 'account__auth_change_password_description', icon: 'mdi-account-key-outline', iconColor: 'primary', pathName: 'change_account_password', display: !!authStore.customer?.email },
+    { id: 4, name: 'account__auth_change_account', description: 'account__auth_change_account_description', icon: 'mdi-account-switch-outline', iconColor: 'primary', pathName: 'change_account_email', display: !!authStore.customer?.email },
+    { id: 5, name: 'account__company_data', icon: 'mdi-account-group-outline', description: 'account__company_data_description', pathName: 'your_company' },
+    { id: 6, name: 'account__settings', icon: 'mdi-cog-outline', description: 'account__settings_description', iconColor: 'info', pathName: 'settings' },
+    { id: 7, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
+    { id: 9, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
+    { id: 10, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
+  ]))
+
+  const displayItems = computed(() => (
+    items.value.filter((item: ItemList) => !('display' in item) || item.display === true)
+  ))
+
+  async function goTo (path: string) {
+    await router.push({ name: path })
+  }
+
+  async function logout () {
+    await authStore.logout()
+    await router.push({ name: 'login' })
+  }
+
+</script>
+
+<style lang="scss">
+</style>