Merge branch

Conflicts:
	src/apps/admin/src/admin-app.routes.tsx
	src/apps/admin/src/config/routes.config.ts
	src/apps/admin/src/lib/components/common/Layout/Layout.tsx
	src/apps/admin/src/lib/components/common/Tab/config/system-admin-tabs-config.ts

Author: nqviet

src/apps/admin/src/admin-app.routes.tsx

@@ -1,3 +1,4 @@
+import { baseDetailPath, createBadgePath } from '~/apps/gamification-admin'
 import { AppSubdomain, ToolTitle } from '~/config'
 import {
     lazyLoad,
@@ -9,14 +10,15 @@ import {
 
 import {
     billingAccountRouteId,
+    gamificationAdminRouteId,
     manageChallengeRouteId,
     manageReviewRouteId,
     permissionManagementRouteId,
     platformRouteId,
     rootRoute,
     userManagementRouteId,
 } from './config/routes.config'
-import { platformSkillRouteId } from './platform-management/routes.config'
+import { platformSkillRouteId } from './platform/routes.config'
 
 const AdminApp: LazyLoadedComponent = lazyLoad(() => import('./AdminApp'))
 
@@ -109,16 +111,23 @@ const PermissionAddGroupMembersPage: LazyLoadedComponent = lazyLoad(
     'PermissionAddGroupMembersPage',
 )
 
-const PlatformManagement: LazyLoadedComponent = lazyLoad(
-    () => import('./platform-management/PlatformManagement'),
-)
+const Platform: LazyLoadedComponent = lazyLoad(() => import('./platform/Platform'))
 const SkillManagement: LazyLoadedComponent = lazyLoad(
-    () => import('./platform-management/skill-management/SkillManagement'),
+    () => import('./platform/skill-management/SkillManagement'),
 )
 const SkillManagementLandingPage: LazyLoadedComponent = lazyLoad(
-    () => import('./platform-management/skill-management/LandingPage'),
+    () => import('./platform/skill-management/LandingPage'),
     'LandingPage',
 )
+const BadgeDetailPage: LazyLoadedComponent = lazyLoad(
+    () => import('../../gamification-admin/src/pages/badge-detail/BadgeDetailPage'),
+)
+const BadgeListingPage: LazyLoadedComponent = lazyLoad(
+    () => import('../../gamification-admin/src/pages/badge-listing/BadgeListingPage'),
+)
+const CreateBadgePage: LazyLoadedComponent = lazyLoad(
+    () => import('../../gamification-admin/src/pages/create-badge/CreateBadgePage'),
+)
 
 export const toolTitle: string = ToolTitle.admin
 
@@ -269,6 +278,7 @@ export const adminRoutes: ReadonlyArray<PlatformRoute> = [
                 id: permissionManagementRouteId,
                 route: permissionManagementRouteId,
             },
+
             // Platform Management Module
             {
                 children: [
@@ -284,8 +294,24 @@ export const adminRoutes: ReadonlyArray<PlatformRoute> = [
                         id: platformSkillRouteId,
                         route: platformSkillRouteId,
                     },
+                    {
+                        element: (
+                            <BadgeListingPage
+                                rootPage={`${rootRoute}/${platformRouteId}/${gamificationAdminRouteId}`}
+                            />
+                        ),
+                        route: gamificationAdminRouteId,
+                    },
+                    {
+                        element: <CreateBadgePage />,
+                        route: `${gamificationAdminRouteId}${createBadgePath}`,
+                    },
+                    {
+                        element: <BadgeDetailPage />,
+                        route: `${gamificationAdminRouteId}${baseDetailPath}/:id`,
+                    },
                 ],
-                element: <PlatformManagement />,
+                element: <Platform />,
                 id: platformRouteId,
                 route: platformRouteId,
             },

src/apps/admin/src/config/routes.config.ts

@@ -13,4 +13,5 @@ export const manageReviewRouteId = 'review-management'
 export const userManagementRouteId = 'user-management'
 export const billingAccountRouteId = 'billing-account'
 export const permissionManagementRouteId = 'permission-management'
+export const gamificationAdminRouteId = 'gamification-admin'
 export const platformRouteId = 'platform'

src/apps/admin/src/lib/components/common/Layout/Layout.module.scss

@@ -13,6 +13,15 @@
         @include ltelg {
             padding: $sp-4;
         }
+
+        &.isPlatformPage {
+            padding: 0;
+            background-color: white;
+
+            @include ltelg {
+                padding: 0;
+            }
+        }
     }
 }
 

src/apps/admin/src/lib/components/common/Layout/Layout.tsx

@@ -1,19 +1,18 @@
+
 import { FC, PropsWithChildren, useContext } from 'react'
 import cn from 'classnames'
 
+import { platformRouteId } from '~/apps/admin/src/config/routes.config'
 import { ContentLayout } from '~/libs/ui'
 import { routerContext, RouterContextData } from '~/libs/core'
-import { platformRouteId } from '~/apps/admin/src/config/routes.config'
-import { platformSkillRouteId } from '~/apps/admin/src/platform-management/routes.config'
+import { platformSkillRouteId } from '~/apps/admin/src/platform/routes.config'
 import { AppSubdomain, EnvironmentConfig } from '~/config'
 
 import { SystemAdminTabs } from '../Tab'
 
 import styles from './Layout.module.scss'
 
-export const NullLayout: FC<PropsWithChildren> = props => (
-    <>{props.children}</>
-)
+export const NullLayout: FC<PropsWithChildren> = props => <>{props.children}</>
 
 export type LayoutProps = PropsWithChildren<{
     classes?: { // eslint-disable-line react/no-unused-prop-types -- it's actually used
@@ -41,7 +40,13 @@ export const Layout: FC<LayoutProps> = props => (
     </ContentLayout>
 )
 
-export const PlatformManagementSkillsLayout: FC<LayoutProps> = props => (
+export const PlatformLayout: FC<LayoutProps> = props => (
+    <Layout classes={{ mainClass: styles.isPlatformPage }}>
+        {props.children}
+    </Layout>
+)
+
+export const PlatformSkillsLayout: FC<LayoutProps> = props => (
     <Layout classes={{ contentClass: styles.platformSkillsContentLayout }}>
         {props.children}
     </Layout>
@@ -52,13 +57,22 @@ export function useLayout(): { Layout: FC<LayoutProps> } {
 
     if (!routerContextData.initialized) return { Layout }
 
+    const platformBaseRouteId = EnvironmentConfig.SUBDOMAIN === AppSubdomain.admin
+        ? `/${platformRouteId}`
+        : `/${AppSubdomain.admin}/${platformRouteId}`
+
     const skillManagementRouteId = EnvironmentConfig.SUBDOMAIN === AppSubdomain.admin
         ? `/${platformRouteId}/${platformSkillRouteId}`
         : `/${AppSubdomain.admin}/${platformRouteId}/${platformSkillRouteId}`
 
     if (window.location.pathname.toLowerCase()
         .startsWith(skillManagementRouteId.toLowerCase())) {
-        return { Layout: PlatformManagementSkillsLayout }
+        return { Layout: PlatformSkillsLayout }
+    }
+
+    if (window.location.pathname.toLowerCase()
+        .startsWith(platformBaseRouteId.toLowerCase())) {
+        return { Layout: PlatformLayout }
     }
 
     return { Layout }

src/apps/admin/src/lib/components/common/Tab/config/system-admin-tabs-config.ts

@@ -3,13 +3,14 @@ import _ from 'lodash'
 import { TabsNavItem } from '~/libs/ui'
 import {
     billingAccountRouteId,
+    gamificationAdminRouteId,
     manageChallengeRouteId,
     manageReviewRouteId,
     permissionManagementRouteId,
     platformRouteId,
     userManagementRouteId,
 } from '~/apps/admin/src/config/routes.config'
-import { platformSkillRouteId } from '~/apps/admin/src/platform-management/routes.config'
+import { platformSkillRouteId } from '~/apps/admin/src/platform/routes.config'
 
 export const SystemAdminTabsConfig: TabsNavItem[] = [
     {
@@ -55,9 +56,15 @@ export const SystemAdminTabsConfig: TabsNavItem[] = [
     {
         children: [
             {
+
                 id: `${platformRouteId}/${platformSkillRouteId}`,
                 title: 'Skills',
             },
+            {
+                id: `${platformRouteId}/${gamificationAdminRouteId}`,
+                title: 'Badges',
+
+            },
         ],
         id: platformRouteId,
         title: 'Platform',

src/apps/admin/src/platform/Platform.tsx

@@ -0,0 +1,37 @@
+/**
+ * Wrapper for permission managment
+ */
+import { FC, useContext, useMemo } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { adminRoutes } from '../admin-app.routes'
+import { platformRouteId } from '../config/routes.config'
+
+/**
+ * The router outlet with layout.
+ */
+export const Platform: FC = () => {
+    const childRoutes = useChildRoutes()
+
+    return (
+        <>
+            <Outlet />
+            <Routes>{childRoutes}</Routes>
+        </>
+    )
+}
+
+function useChildRoutes(): Array<JSX.Element> | undefined {
+    const { getRouteElement }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(
+        () => adminRoutes[0].children
+            ?.find(r => r.id === platformRouteId)
+            ?.children?.map(getRouteElement),
+        [], // eslint-disable-line react-hooks/exhaustive-deps -- missing dependency: getRouteElement
+    )
+    return childRoutes
+}
+
+export default Platform