feat: add groupUserTotalCount to tab header

Signed-off-by: sulmo <[email protected]>
cloudforet-io · Aug 29, 2024 · 89f8f62 · 89f8f62
1 parent 711153a
commit 89f8f62
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/apps/web/src/services/landing/components/LandingWorkspaceGroupTab.vue b/apps/web/src/services/landing/components/LandingWorkspaceGroupTab.vue
@@ -1,40 +1,48 @@
 <script setup lang="ts">
 import { reactive, computed } from 'vue';
 
-import { PTab } from '@cloudforet/mirinae';
+import { PTab, PBadge } from '@cloudforet/mirinae';
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
 import { i18n } from '@/translations';
 
 import { WORKSPACE_GROUP_TABS } from '@/services/advanced/constants/workspace-group-constant';
 import LandingWorkspaceGroupTabGroupUser from '@/services/landing/components/LandingWorkspaceGroupTabGroupUser.vue';
 import LandingWorkspaceGroupTabWorkspace from '@/services/landing/components/LandingWorkspaceGroupTabWorkspace.vue';
+import { useLandingPageStore } from '@/services/landing/store/landing-page-store';
 
-const emit = defineEmits<{(e: 'refresh', payload: { isGroupUser?: boolean, isWorkspace?: boolean }): void; }>();
-
-const singleItemTabState = reactive({
+const landingPageStore = useLandingPageStore();
+const landingPageStoreGetter = landingPageStore.getters;
+const state = reactive({
     tabs: computed<TabItem[]>(() => ([
-        { label: i18n.t('IAM.WORKSPACE_GROUP.TAB.WORKSPACE'), name: WORKSPACE_GROUP_TABS.WORKSPACE },
         { label: i18n.t('IAM.WORKSPACE_GROUP.TAB.GROUP_USER'), name: WORKSPACE_GROUP_TABS.GROUP_USER },
+        { label: i18n.t('IAM.WORKSPACE_GROUP.TAB.WORKSPACE'), name: WORKSPACE_GROUP_TABS.WORKSPACE },
     ])),
-    activeTab: WORKSPACE_GROUP_TABS.WORKSPACE,
+    activeTab: WORKSPACE_GROUP_TABS.GROUP_USER,
 });
 
-const handleRefresh = (value) => {
-    emit('refresh', value);
-};
 </script>
 
 <template>
     <section class="workspace-group-tab">
-        <p-tab :tabs="singleItemTabState.tabs"
-               :active-tab.sync="singleItemTabState.activeTab"
+        <p-tab :tabs="state.tabs"
+               :active-tab.sync="state.activeTab"
         >
+            <template #extra="{name}">
+                <p-badge v-if="name === WORKSPACE_GROUP_TABS.GROUP_USER"
+                         shape="round"
+                         badge-type="subtle"
+                         style-type="gray100"
+                         size="sm"
+                >
+                    {{ landingPageStoreGetter.workspaceGroupUserTotalCount }}
+                </p-badge>
+            </template>
             <template #group_user>
-                <landing-workspace-group-tab-group-user @refresh="handleRefresh" />
+                <landing-workspace-group-tab-group-user />
             </template>
             <template #workspace>
-                <landing-workspace-group-tab-workspace @refresh="handleRefresh" />
+                <landing-workspace-group-tab-workspace />
             </template>
         </p-tab>
     </section>