From f3b0d29404cdec0fe7c282585b7eff2f8f26d2c2 Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Mon, 9 Dec 2024 23:41:25 +0530 Subject: [PATCH 01/13] horizontal tab for mobile screen on seeting screen --- .../layouts/admin/pages/settings.tsx | 43 ++++++++++++++----- 1 file changed, 32 insertions(+), 11 deletions(-) diff --git a/ui-community/src/components/layouts/admin/pages/settings.tsx b/ui-community/src/components/layouts/admin/pages/settings.tsx index 11e3806b..ecbc8018 100644 --- a/ui-community/src/components/layouts/admin/pages/settings.tsx +++ b/ui-community/src/components/layouts/admin/pages/settings.tsx @@ -1,26 +1,31 @@ import { BookOutlined, SettingOutlined } from '@ant-design/icons'; import { PageHeader } from '@ant-design/pro-layout'; -import { theme } from 'antd'; - +import { Col, Grid, Menu, Row, theme } from 'antd'; import { SubPageLayout } from '../sub-page-layout'; import { SettingsGeneral } from './settings-general'; import { SettingsRoles } from './settings-roles'; import { Helmet } from 'react-helmet-async'; -import { VerticalTabs,RouteDefinition } from '../../../shared/vertical-tabs'; +import { VerticalTabs, RouteDefinition } from '../../../shared/vertical-tabs'; +import { Link, Navigate, Route, Routes } from 'react-router-dom'; export const Settings: React.FC = () => { const { token: { colorTextBase } } = theme.useToken(); - - - const pages:RouteDefinition[] = [ - { id: "1", link:'', path: '', title: 'General', icon: , element: }, - { id: "2", link:'saml', path: 'saml', title: 'Saml', icon: , element: }, + const pages: RouteDefinition[] = [ + { id: '1', link: 'general', path: 'general', title: 'General', icon: , element: }, + { id: '2', link: 'saml', path: 'saml', title: 'Saml', icon: , element: } ]; + const screens = Grid.useBreakpoint(); + const isMobile = screens.xs; + + const profileNavigationMenu = pages.map((page) => ({ + key: page.id, + label: {page.title} + })); return ( = () => { /> } > - + Admin Settings - - + + {isMobile ? ( + + + + + + + } /> + {pages.map((page) => ( + + ))} + + + + ) : ( + + )} ); }; From 3ee3c12e95153a0804f76291a3170635728b25cc Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Mon, 16 Dec 2024 20:16:00 +0530 Subject: [PATCH 02/13] mobile responsiveness : if screen is mobile removed username --- .../ui/molecules/logged-in-user/logged-in.tsx | 33 ++++++++++++------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/ui-community/src/components/ui/molecules/logged-in-user/logged-in.tsx b/ui-community/src/components/ui/molecules/logged-in-user/logged-in.tsx index 0958ff5d..e55283ca 100644 --- a/ui-community/src/components/ui/molecules/logged-in-user/logged-in.tsx +++ b/ui-community/src/components/ui/molecules/logged-in-user/logged-in.tsx @@ -1,4 +1,4 @@ -import { Avatar, Button, Image } from 'antd'; +import { Avatar, Button, Grid, Image } from 'antd'; import PropTypes from 'prop-types'; import { FC } from 'react'; import { Link } from 'react-router-dom'; @@ -27,15 +27,26 @@ export type LoggedInPropTypes = PropTypes.InferProps & Co export const LoggedIn: FC = (props) => { const initials = (props.data.firstName.charAt(0) + props.data.lastName.charAt(0)).toUpperCase(); - const profileImage = props.data.profileImage ? : - return
- {initials}{' '}{props.data.firstName} {props.data.lastName}{' '} + const profileImage = props.data.profileImage ? ( + + ) : ( + + ); - - - My Community(s) - + const screen = Grid.useBreakpoint(); + const isMobile = screen.xs; -
-} + return ( +
+ + {initials} + + {!isMobile ? props.data.firstName + ' ' + props.data.lastName : ''} + + + + My Community(s) + +
+ ); +}; From 7b58fd55ee579f5c262aef796e3899ad440ec0df Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Mon, 23 Dec 2024 23:55:03 +0530 Subject: [PATCH 03/13] Refactor VerticalTabs component for big screen tab was very small --- .../src/components/shared/vertical-tabs.tsx | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/ui-community/src/components/shared/vertical-tabs.tsx b/ui-community/src/components/shared/vertical-tabs.tsx index 87abaccb..d9d2caa9 100644 --- a/ui-community/src/components/shared/vertical-tabs.tsx +++ b/ui-community/src/components/shared/vertical-tabs.tsx @@ -2,46 +2,46 @@ import { Col, Menu, Row, theme } from 'antd'; import { Link, Route, RouteObject, Routes, matchRoutes, useLocation, useResolvedPath } from 'react-router-dom'; import { useMemo } from 'react'; - export interface RouteDefinition { id: string; - link:string; + link: string; path: string; title: string; icon: React.ReactNode; element: React.ReactNode; } -export const VerticalTabs: React.FC<{pages: RouteDefinition[]}> = ({pages}) => { +export const VerticalTabs: React.FC<{ pages: RouteDefinition[] }> = ({ pages }) => { const location = useLocation(); const convertedRoutes = useMemo(() => { return pages.map((x) => { - return { id: x.id, path: useResolvedPath(x.path).pathname} as RouteObject ; + return { id: x.id, path: useResolvedPath(x.path).pathname } as RouteObject; }); }, [pages]); - const matchedPages = matchRoutes(convertedRoutes,location) - const matchedIds = matchedPages ? matchedPages.map((x:any) => x.route.id.toString()) : []; + const matchedPages = matchRoutes(convertedRoutes, location); + const matchedIds = matchedPages ? matchedPages.map((x: any) => x.route.id.toString()) : []; const { token: { colorTextBase } } = theme.useToken(); return ( - + - - { - pages.map((page) => ( - - {page.title} - - )) - } - + + {pages.map((page) => ( + + {page.title} + + ))} + - + {pages.map((page) => ( @@ -50,4 +50,4 @@ export const VerticalTabs: React.FC<{pages: RouteDefinition[]}> = ({pages}) => { ); -} \ No newline at end of file +}; From aa2baaa893e45ca6e7707ef067e82bef72d6c372 Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Tue, 24 Dec 2024 00:38:56 +0530 Subject: [PATCH 04/13] route fix on first render genral should be first tab --- ui-community/src/components/layouts/admin/pages/settings.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui-community/src/components/layouts/admin/pages/settings.tsx b/ui-community/src/components/layouts/admin/pages/settings.tsx index ecbc8018..78cf7208 100644 --- a/ui-community/src/components/layouts/admin/pages/settings.tsx +++ b/ui-community/src/components/layouts/admin/pages/settings.tsx @@ -15,7 +15,7 @@ export const Settings: React.FC = () => { } = theme.useToken(); const pages: RouteDefinition[] = [ - { id: '1', link: 'general', path: 'general', title: 'General', icon: , element: }, + { id: '1', link: '', path: '', title: 'General', icon: , element: }, { id: '2', link: 'saml', path: 'saml', title: 'Saml', icon: , element: } ]; @@ -54,7 +54,6 @@ export const Settings: React.FC = () => { - } /> {pages.map((page) => ( ))} From ac00206043993839a4d208768dd888074d2153c9 Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Tue, 24 Dec 2024 22:23:13 +0530 Subject: [PATCH 05/13] removed unused code --- ui-community/src/components/layouts/admin/pages/settings.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui-community/src/components/layouts/admin/pages/settings.tsx b/ui-community/src/components/layouts/admin/pages/settings.tsx index 78cf7208..a04f9a7a 100644 --- a/ui-community/src/components/layouts/admin/pages/settings.tsx +++ b/ui-community/src/components/layouts/admin/pages/settings.tsx @@ -1,13 +1,12 @@ import { BookOutlined, SettingOutlined } from '@ant-design/icons'; import { PageHeader } from '@ant-design/pro-layout'; import { Col, Grid, Menu, Row, theme } from 'antd'; - import { SubPageLayout } from '../sub-page-layout'; import { SettingsGeneral } from './settings-general'; import { SettingsRoles } from './settings-roles'; import { Helmet } from 'react-helmet-async'; import { VerticalTabs, RouteDefinition } from '../../../shared/vertical-tabs'; -import { Link, Navigate, Route, Routes } from 'react-router-dom'; +import { Link, Route, Routes } from 'react-router-dom'; export const Settings: React.FC = () => { const { From 939ee4b1b23d30638942b9d8fc9dda45ffab4e93 Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Tue, 31 Dec 2024 21:34:56 +0530 Subject: [PATCH 06/13] Add AdminPage component with routing and menu layout --- .../layouts/admin/pages/admin-page.tsx | 207 ++++++++++++++++++ 1 file changed, 207 insertions(+) create mode 100644 ui-community/src/components/layouts/admin/pages/admin-page.tsx diff --git a/ui-community/src/components/layouts/admin/pages/admin-page.tsx b/ui-community/src/components/layouts/admin/pages/admin-page.tsx new file mode 100644 index 00000000..a8e03fa1 --- /dev/null +++ b/ui-community/src/components/layouts/admin/pages/admin-page.tsx @@ -0,0 +1,207 @@ +import { BarsOutlined, ContactsOutlined, HomeOutlined, LayoutOutlined, SafetyOutlined, ScheduleOutlined, SettingOutlined } from '@ant-design/icons'; +import ProLayout from '@ant-design/pro-layout'; +import { Grid, Menu } from 'antd'; +import { Content } from 'antd/es/layout/layout'; +import React, { useState } from 'react'; +import { Link, Route, Routes, useResolvedPath, useLocation } from 'react-router-dom'; +import { ServiceTickets } from './service-tickets'; +import { Properties } from './properties'; +import { Settings } from './settings'; +import { SiteEditor } from './site-editor'; +import { Roles } from './roles'; +import { Home } from './home'; +import { Members } from './members'; + +interface HomeProps {} + +export const AdminPage: React.FC = () => { + const casesRoutePath = useResolvedPath('cases'); + const settingsRoutePath = useResolvedPath('settings'); + const profileRoutePath = useResolvedPath('profile'); + const location = useLocation(); + + const [hoveredId, setHoveredId] = useState(null); + const [clickedId, setClickedId] = useState(null); + const screen = Grid.useBreakpoint(); + const isMobile = screen.xs; + + const MenuContent: React.FC<{ matchedIds: string[]; pageLayouts: any[] }> = ({ matchedIds, pageLayouts }) => { + const createMenuItems = () => { + return pageLayouts.map((layout) => { + const isHovered = hoveredId === layout.id; + const isClicked = clickedId === layout.id; + const isSelected = matchedIds.includes(layout.id); + const icon = + (isHovered || isClicked || isSelected) && layout.filledIcon + ? React.cloneElement(layout.filledIcon, { style: { color: '#3f4373', fontSize: '24px' } }) + : layout.icon + ? React.cloneElement(layout.icon, { style: { fontSize: '24px' } }) + : null; + + return { + key: layout.id, + label: ( + +
{icon}
+
{layout.title}
+ + ), + style: { + paddingTop: '16px', + paddingBottom: '16px', + paddingLeft: '24px', + paddingRight: '24px', + minHeight: '70px', + minWidth: '55px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + textAlign: 'center', + lineHeight: '1.2', + borderRadius: '0', + backgroundColor: isSelected ? '#d3d6f8' : 'transparent', + fontSize: '10px', + width: '100%', + marginInline: '0px', + marginBlock: '0px' + }, + onMouseEnter: () => setHoveredId(layout.id), + onMouseLeave: () => setHoveredId(null), + onClick: () => { + setClickedId(layout.id); + if (isMobile) { + setCollapsed(true); + } + } + }; + }); + }; + + return ( + + ); + }; + + const pathLocations = { + home: '*', + settings: 'settings/*', + siteEditor: 'site-editor/*', + roles: 'roles/*', + members: 'members/*', + properties: 'properties/*', + serviceTickets: 'service-tickets/*' + }; + + const pageLayouts = [ + { path: pathLocations.home, title: 'Home', icon: , id: 'ROOT' }, + { + path: pathLocations.settings, + title: 'Settings', + icon: , + id: 2, + parent: 'ROOT' + // hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageCommunitySettings ?? false + }, + { + path: pathLocations.siteEditor, + title: 'Site Editor', + icon: , + id: 3, + parent: 'ROOT' + // hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageSiteContent ?? false + }, + { + path: pathLocations.roles, + title: 'Roles', + icon: , + id: 4, + parent: 'ROOT' + // hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageRolesAndPermissions ?? false + }, + { + path: pathLocations.members, + title: 'Members', + icon: , + id: 5, + parent: 'ROOT' + // hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageMembers ?? false + }, + { + path: pathLocations.properties, + title: 'Properties', + icon: , + id: 6, + parent: 'ROOT' + // hasPermissions: (member: Member) => member?.role?.permissions?.propertyPermissions?.canManageProperties ?? false + }, + { + path: pathLocations.serviceTickets, + title: 'Tickets', + icon: , + id: 7, + parent: 'ROOT' + // hasPermissions: (member: Member) =>(member?.role?.permissions?.serviceTicketPermissions?.canManageTickets || member?.role?.permissions?.violationTicketPermissions?.canManageTickets) ?? false + } + ]; + + const matchPartialRoute = (currentPath: string, routePath: string) => { + return currentPath.startsWith(routePath); + }; + + const getMatchedPageIds = (pageLayouts: any[], location: { pathname: string }) => { + const currentPath = location.pathname; + + return pageLayouts.filter((layout) => matchPartialRoute(currentPath, layout.path)).map((layout) => layout.id.toString()); + }; + + const matchedIds = getMatchedPageIds(pageLayouts, location); + + const [collapsed, setCollapsed] = useState(true); + + return ( + } + menuHeaderRender={() => null} + footerRender={() => null} + collapsedButtonRender={() => null} + onCollapse={() => setCollapsed(!collapsed)} + collapsed={collapsed} + siderWidth={86} + contentStyle={{ + paddingBlock: '0px', + paddingInline: '0px', + height: '100%', + width: '100%', + backgroundColor: '#ffffff', + zIndex: 1 + }} + > + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + ); +}; From 5410c881c09a791e909f2a94d94f3a33dced66a8 Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Tue, 31 Dec 2024 21:35:17 +0530 Subject: [PATCH 07/13] Update Admin layout to include AdminPage --- .../src/components/layouts/admin/index.tsx | 31 +++++-------------- 1 file changed, 8 insertions(+), 23 deletions(-) diff --git a/ui-community/src/components/layouts/admin/index.tsx b/ui-community/src/components/layouts/admin/index.tsx index 3cefad38..dad33a57 100644 --- a/ui-community/src/components/layouts/admin/index.tsx +++ b/ui-community/src/components/layouts/admin/index.tsx @@ -1,12 +1,4 @@ -import { - BarsOutlined, - ContactsOutlined, - HomeOutlined, - LayoutOutlined, - SafetyOutlined, - ScheduleOutlined, - SettingOutlined -} from '@ant-design/icons'; +import { BarsOutlined, ContactsOutlined, HomeOutlined, LayoutOutlined, SafetyOutlined, ScheduleOutlined, SettingOutlined } from '@ant-design/icons'; import { Route, Routes, useParams } from 'react-router-dom'; import { BlobToLocalStorage } from '../../shared/blob-to-local-storage'; import { Home } from './pages/home'; @@ -18,6 +10,7 @@ import { Settings } from './pages/settings'; import { SiteEditor } from './pages/site-editor'; import { SectionLayoutContainer } from './section-layout.container'; import { Member } from '../../../generated'; +import { AdminPage } from './pages/admin-page'; export interface PageLayoutProps { path: string; @@ -40,7 +33,7 @@ export const Admin: React.FC = (_props) => { properties: 'properties/*', serviceTickets: 'service-tickets/*' }; - + const pageLayouts: PageLayoutProps[] = [ { path: pathLocations.home, title: 'Home', icon: , id: 'ROOT' }, { @@ -49,8 +42,7 @@ export const Admin: React.FC = (_props) => { icon: , id: 2, parent: 'ROOT', - hasPermissions: (member: Member) => - member?.role?.permissions?.communityPermissions?.canManageCommunitySettings ?? false + hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageCommunitySettings ?? false }, { path: pathLocations.siteEditor, @@ -66,8 +58,7 @@ export const Admin: React.FC = (_props) => { icon: , id: 4, parent: 'ROOT', - hasPermissions: (member: Member) => - member?.role?.permissions?.communityPermissions?.canManageRolesAndPermissions ?? false + hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageRolesAndPermissions ?? false }, { path: pathLocations.members, @@ -91,8 +82,8 @@ export const Admin: React.FC = (_props) => { icon: , id: 7, parent: 'ROOT', - hasPermissions: (member: Member) => (member?.role?.permissions?.serviceTicketPermissions?.canManageTickets || - member?.role?.permissions?.violationTicketPermissions?.canManageTickets) ?? false + hasPermissions: (member: Member) => + (member?.role?.permissions?.serviceTicketPermissions?.canManageTickets || member?.role?.permissions?.violationTicketPermissions?.canManageTickets) ?? false } ]; @@ -100,13 +91,7 @@ export const Admin: React.FC = (_props) => { }> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + } /> From d96a1bfea6eba63ae0a70716b6934b5839c7e356 Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Tue, 31 Dec 2024 21:36:11 +0530 Subject: [PATCH 08/13] Refactor route resolution in SiteEditor and VerticalTabs components for improved performance --- .../src/components/layouts/admin/pages/site-editor.tsx | 3 ++- ui-community/src/components/shared/vertical-tabs.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/ui-community/src/components/layouts/admin/pages/site-editor.tsx b/ui-community/src/components/layouts/admin/pages/site-editor.tsx index 445d91ec..e39df455 100644 --- a/ui-community/src/components/layouts/admin/pages/site-editor.tsx +++ b/ui-community/src/components/layouts/admin/pages/site-editor.tsx @@ -28,7 +28,8 @@ export const SiteEditor: React.FC = () => { {id:'files', path:'files', title:'Files'} ] - const convertedRoutes = useMemo(() => pages.map((x) => {return {id: x.id, path: useResolvedPath(x.path).pathname} as RouteObject}), [pages]); + const resolvedPaths = pages.map((x) => useResolvedPath(x.path).pathname); + const convertedRoutes = useMemo(() => pages.map((x, index) => {return {id: x.id, path: resolvedPaths[index]} as RouteObject}), [pages, resolvedPaths]); const matchedPages = matchRoutes(convertedRoutes, location); const selectedPage = (matchedPages ? matchedPages.map((x:any) => x.route.id.toString()) : ['page-tree'])[0]; diff --git a/ui-community/src/components/shared/vertical-tabs.tsx b/ui-community/src/components/shared/vertical-tabs.tsx index d9d2caa9..93bc242c 100644 --- a/ui-community/src/components/shared/vertical-tabs.tsx +++ b/ui-community/src/components/shared/vertical-tabs.tsx @@ -13,11 +13,12 @@ export interface RouteDefinition { export const VerticalTabs: React.FC<{ pages: RouteDefinition[] }> = ({ pages }) => { const location = useLocation(); + const resolvedPaths = pages.map((x) => useResolvedPath(x.path).pathname); const convertedRoutes = useMemo(() => { - return pages.map((x) => { - return { id: x.id, path: useResolvedPath(x.path).pathname } as RouteObject; + return pages.map((x, index) => { + return { id: x.id, path: resolvedPaths[index] } as RouteObject; }); - }, [pages]); + }, [pages, resolvedPaths]); const matchedPages = matchRoutes(convertedRoutes, location); const matchedIds = matchedPages ? matchedPages.map((x: any) => x.route.id.toString()) : []; From cb2905ef6ff7f3c0db3d2f1ac8945711abdd2f72 Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Tue, 31 Dec 2024 21:36:23 +0530 Subject: [PATCH 09/13] Refactor SectionLayout component for improved layout and styling --- .../layouts/admin/section-layout.tsx | 85 +++++++------------ 1 file changed, 33 insertions(+), 52 deletions(-) diff --git a/ui-community/src/components/layouts/admin/section-layout.tsx b/ui-community/src/components/layouts/admin/section-layout.tsx index 3e952edf..0982d8ce 100644 --- a/ui-community/src/components/layouts/admin/section-layout.tsx +++ b/ui-community/src/components/layouts/admin/section-layout.tsx @@ -8,6 +8,7 @@ import { LoggedInUserContainer } from '../../ui/organisms/header/logged-in-user. import { MenuComponent } from '../shared/components/menu-component'; import './section-layout.css'; import { Member } from '../../../generated'; +import { Content } from 'antd/es/layout/layout'; const { Sider, Header } = Layout; @@ -25,67 +26,47 @@ export const SectionLayout: React.FC = (props) => { } = theme.useToken(); return ( - +
-
-
- -
- - View Member Site - - - -
+ + + View Member Site + +
- - - handleToggler(isExpanded, setIsExpanded)} - style={{ - overflow: 'auto', - height: 'calc(100vh - 64px)', - position: 'relative', - left: 0, - top: 0, - bottom: 0, - backgroundColor: colorBgContainer - }} - > -
- - - - - + - + ); From ef502c380e48315e8ced8302b8afa13a87f8de23 Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Tue, 31 Dec 2024 21:41:19 +0530 Subject: [PATCH 10/13] remove unsed code --- .../src/components/layouts/admin/index.tsx | 75 +------------------ .../admin/section-layout.container.tsx | 31 +++----- .../layouts/admin/section-layout.tsx | 18 +---- 3 files changed, 16 insertions(+), 108 deletions(-) diff --git a/ui-community/src/components/layouts/admin/index.tsx b/ui-community/src/components/layouts/admin/index.tsx index dad33a57..4fd5ef93 100644 --- a/ui-community/src/components/layouts/admin/index.tsx +++ b/ui-community/src/components/layouts/admin/index.tsx @@ -1,16 +1,8 @@ -import { BarsOutlined, ContactsOutlined, HomeOutlined, LayoutOutlined, SafetyOutlined, ScheduleOutlined, SettingOutlined } from '@ant-design/icons'; import { Route, Routes, useParams } from 'react-router-dom'; import { BlobToLocalStorage } from '../../shared/blob-to-local-storage'; -import { Home } from './pages/home'; -import { Members } from './pages/members'; -import { Properties } from './pages/properties'; -import { Roles } from './pages/roles'; -import { ServiceTickets } from './pages/service-tickets'; -import { Settings } from './pages/settings'; -import { SiteEditor } from './pages/site-editor'; import { SectionLayoutContainer } from './section-layout.container'; -import { Member } from '../../../generated'; import { AdminPage } from './pages/admin-page'; +import { Member } from '../../../generated'; export interface PageLayoutProps { path: string; @@ -24,73 +16,10 @@ export interface PageLayoutProps { export const Admin: React.FC = (_props) => { const params = useParams(); - const pathLocations = { - home: '', - settings: 'settings/*', - siteEditor: 'site-editor/*', - roles: 'roles/*', - members: 'members/*', - properties: 'properties/*', - serviceTickets: 'service-tickets/*' - }; - - const pageLayouts: PageLayoutProps[] = [ - { path: pathLocations.home, title: 'Home', icon: , id: 'ROOT' }, - { - path: pathLocations.settings, - title: 'Settings', - icon: , - id: 2, - parent: 'ROOT', - hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageCommunitySettings ?? false - }, - { - path: pathLocations.siteEditor, - title: 'Site Editor', - icon: , - id: 3, - parent: 'ROOT', - hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageSiteContent ?? false - }, - { - path: pathLocations.roles, - title: 'Roles', - icon: , - id: 4, - parent: 'ROOT', - hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageRolesAndPermissions ?? false - }, - { - path: pathLocations.members, - title: 'Members', - icon: , - id: 5, - parent: 'ROOT', - hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageMembers ?? false - }, - { - path: pathLocations.properties, - title: 'Properties', - icon: , - id: 6, - parent: 'ROOT', - hasPermissions: (member: Member) => member?.role?.permissions?.propertyPermissions?.canManageProperties ?? false - }, - { - path: pathLocations.serviceTickets, - title: 'Tickets', - icon: , - id: 7, - parent: 'ROOT', - hasPermissions: (member: Member) => - (member?.role?.permissions?.serviceTicketPermissions?.canManageTickets || member?.role?.permissions?.violationTicketPermissions?.canManageTickets) ?? false - } - ]; - return ( - }> + }> } /> diff --git a/ui-community/src/components/layouts/admin/section-layout.container.tsx b/ui-community/src/components/layouts/admin/section-layout.container.tsx index dd5c5ea7..0ec5f542 100644 --- a/ui-community/src/components/layouts/admin/section-layout.container.tsx +++ b/ui-community/src/components/layouts/admin/section-layout.container.tsx @@ -1,16 +1,13 @@ import { useLazyQuery } from '@apollo/client'; -import { PageLayoutProps } from '.'; -import { Member, SectionLayoutContainerMemberByIdQueryDocument } from '../../../generated'; +import { SectionLayoutContainerMemberByIdQueryDocument } from '../../../generated'; import { useParams } from 'react-router-dom'; import { ComponentQueryLoader } from '../../ui/molecules/component-query-loader'; import { SectionLayout } from './section-layout'; -import { useEffect, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; -interface SectionLayoutContainerProps { - pageLayouts: PageLayoutProps[]; -} +interface SectionLayoutContainerProps {} -export const SectionLayoutContainer = (props: SectionLayoutContainerProps) => { +export const SectionLayoutContainer: FC = () => { const params = useParams(); const [memberQuery] = useLazyQuery(SectionLayoutContainerMemberByIdQueryDocument); @@ -20,7 +17,7 @@ export const SectionLayoutContainer = (props: SectionLayoutContainerProps) => { useEffect(() => { const getData = async () => { - try{ + try { const { data: memberDataTemp, loading: memberLoadingTemp, @@ -31,22 +28,14 @@ export const SectionLayoutContainer = (props: SectionLayoutContainerProps) => { } }); setMemberData(memberDataTemp); - setMemberError(memberErrorTemp); - setMemberLoading(memberLoadingTemp); - } - catch(e){ - console.error("Error fetching data in section layout: ", e); + setMemberError(memberErrorTemp); + setMemberLoading(memberLoadingTemp); + } catch (e) { + console.error('Error fetching data in section layout: ', e); } }; getData(); }, [params]); - return ( - } - error={memberError} - /> - ); + return } error={memberError} />; }; diff --git a/ui-community/src/components/layouts/admin/section-layout.tsx b/ui-community/src/components/layouts/admin/section-layout.tsx index 0982d8ce..317cd2c8 100644 --- a/ui-community/src/components/layouts/admin/section-layout.tsx +++ b/ui-community/src/components/layouts/admin/section-layout.tsx @@ -1,26 +1,17 @@ import { Layout, theme } from 'antd'; -import React, { useState } from 'react'; +import React from 'react'; import { Link, Outlet, useParams } from 'react-router-dom'; -import { PageLayoutProps } from '.'; -import { LocalSettingsKeys, handleToggler } from '../../../constants'; import { CommunitiesDropdownContainer } from '../../ui/organisms/dropdown-menu/communities-dropdown-container'; import { LoggedInUserContainer } from '../../ui/organisms/header/logged-in-user.container'; -import { MenuComponent } from '../shared/components/menu-component'; import './section-layout.css'; -import { Member } from '../../../generated'; import { Content } from 'antd/es/layout/layout'; -const { Sider, Header } = Layout; +const { Header } = Layout; -interface AdminSectionLayoutProps { - pageLayouts: PageLayoutProps[]; - memberData: Member; -} +interface AdminSectionLayoutProps {} -export const SectionLayout: React.FC = (props) => { +export const SectionLayout: React.FC = () => { const params = useParams(); - const sidebarCollapsed = localStorage.getItem(LocalSettingsKeys.SidebarCollapsed); - const [isExpanded, setIsExpanded] = useState(!sidebarCollapsed); const { token: { colorBgContainer } } = theme.useToken(); @@ -61,7 +52,6 @@ export const SectionLayout: React.FC = (props) => { From 9d9efb4eb24f3b04a9cb1cb5e48bdfbca7de19cd Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Tue, 31 Dec 2024 21:48:54 +0530 Subject: [PATCH 11/13] Add PageLayoutProps interface to AdminPage for improved type safety --- .../components/layouts/admin/pages/admin-page.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/ui-community/src/components/layouts/admin/pages/admin-page.tsx b/ui-community/src/components/layouts/admin/pages/admin-page.tsx index a8e03fa1..18fc090e 100644 --- a/ui-community/src/components/layouts/admin/pages/admin-page.tsx +++ b/ui-community/src/components/layouts/admin/pages/admin-page.tsx @@ -11,13 +11,20 @@ import { SiteEditor } from './site-editor'; import { Roles } from './roles'; import { Home } from './home'; import { Members } from './members'; +import { Member } from '../../../../generated'; interface HomeProps {} +export interface PageLayoutProps { + path: string; + title: string; + icon: React.JSX.Element; + id: string | number; + parent?: string; + hasPermissions?: (member: Member) => boolean; +} + export const AdminPage: React.FC = () => { - const casesRoutePath = useResolvedPath('cases'); - const settingsRoutePath = useResolvedPath('settings'); - const profileRoutePath = useResolvedPath('profile'); const location = useLocation(); const [hoveredId, setHoveredId] = useState(null); @@ -102,7 +109,7 @@ export const AdminPage: React.FC = () => { serviceTickets: 'service-tickets/*' }; - const pageLayouts = [ + const pageLayouts: PageLayoutProps[] = [ { path: pathLocations.home, title: 'Home', icon: , id: 'ROOT' }, { path: pathLocations.settings, From d8ec68d99876e70919140df36b6296878ef6335a Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Tue, 31 Dec 2024 21:58:36 +0530 Subject: [PATCH 12/13] Refactor route paths in Admin layout for improved routing consistency --- ui-community/src/components/layouts/admin/index.tsx | 4 ++-- .../src/components/layouts/admin/pages/admin-page.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui-community/src/components/layouts/admin/index.tsx b/ui-community/src/components/layouts/admin/index.tsx index 4fd5ef93..ea5146d5 100644 --- a/ui-community/src/components/layouts/admin/index.tsx +++ b/ui-community/src/components/layouts/admin/index.tsx @@ -19,8 +19,8 @@ export const Admin: React.FC = (_props) => { return ( - }> - } /> + }> + } /> diff --git a/ui-community/src/components/layouts/admin/pages/admin-page.tsx b/ui-community/src/components/layouts/admin/pages/admin-page.tsx index 18fc090e..eafbdac8 100644 --- a/ui-community/src/components/layouts/admin/pages/admin-page.tsx +++ b/ui-community/src/components/layouts/admin/pages/admin-page.tsx @@ -3,7 +3,7 @@ import ProLayout from '@ant-design/pro-layout'; import { Grid, Menu } from 'antd'; import { Content } from 'antd/es/layout/layout'; import React, { useState } from 'react'; -import { Link, Route, Routes, useResolvedPath, useLocation } from 'react-router-dom'; +import { Link, Route, Routes, useLocation } from 'react-router-dom'; import { ServiceTickets } from './service-tickets'; import { Properties } from './properties'; import { Settings } from './settings'; From e00213501fd2d35563c6d2d0bc96ab57d324f40f Mon Sep 17 00:00:00 2001 From: dev-kishor Date: Thu, 2 Jan 2025 23:44:20 +0530 Subject: [PATCH 13/13] Refactor CommunityDetail and Admin components and routing issue --- .../components/community-detail.container.tsx | 7 +++-- .../admin/components/community-detail.tsx | 16 +++++----- .../src/components/layouts/admin/index.tsx | 4 +-- .../layouts/admin/pages/admin-page.tsx | 2 +- .../components/layouts/admin/pages/home.tsx | 30 +++++++++++-------- 5 files changed, 32 insertions(+), 27 deletions(-) diff --git a/ui-community/src/components/layouts/admin/components/community-detail.container.tsx b/ui-community/src/components/layouts/admin/components/community-detail.container.tsx index 5625bd54..44136053 100644 --- a/ui-community/src/components/layouts/admin/components/community-detail.container.tsx +++ b/ui-community/src/components/layouts/admin/components/community-detail.container.tsx @@ -10,13 +10,14 @@ export const CommunityDetailContainer: React.FC = (props) => { loading: communityLoading, error: communityError } = useQuery(AdminCommunityDetailContainerCommunityByIdDocument, { - variables: { id: props.data.id ?? '' } - }); + variables: { id: props.data.id }, + fetchPolicy: 'network-only' + },); return ( } error={communityError} /> diff --git a/ui-community/src/components/layouts/admin/components/community-detail.tsx b/ui-community/src/components/layouts/admin/components/community-detail.tsx index d68204c2..f65fc3ea 100644 --- a/ui-community/src/components/layouts/admin/components/community-detail.tsx +++ b/ui-community/src/components/layouts/admin/components/community-detail.tsx @@ -10,10 +10,10 @@ export interface CommunityDetailProps { export const CommunityDetail: React.FC = (props) => { const whiteLabelDetails = () => { - if (props.data.whiteLabelDomain) { + if (props.data?.whiteLabelDomain) { return ( - {props.data.whiteLabelDomain} + {props.data?.whiteLabelDomain} ); } else { @@ -22,20 +22,20 @@ export const CommunityDetail: React.FC = (props) => { }; const domainDetails = () => { - if (props.data.domain) { + if (props.data?.domain) { return ( - {props.data.domain} + {props.data?.domain} ); } }; const handleDetails = () => { - if (props.data.handle) { + if (props.data?.handle) { return ( - {props.data.handle} + {props.data?.handle} ); } else { @@ -65,10 +65,10 @@ export const CommunityDetail: React.FC = (props) => { - {props.data.id} + {props.data?.id} - {props.data.name} + {props.data?.name} {whiteLabelDetails()} {domainDetails()} diff --git a/ui-community/src/components/layouts/admin/index.tsx b/ui-community/src/components/layouts/admin/index.tsx index ea5146d5..7fb1e8cf 100644 --- a/ui-community/src/components/layouts/admin/index.tsx +++ b/ui-community/src/components/layouts/admin/index.tsx @@ -19,8 +19,8 @@ export const Admin: React.FC = (_props) => { return ( - }> - } /> + }> + } /> diff --git a/ui-community/src/components/layouts/admin/pages/admin-page.tsx b/ui-community/src/components/layouts/admin/pages/admin-page.tsx index eafbdac8..6a7ed9af 100644 --- a/ui-community/src/components/layouts/admin/pages/admin-page.tsx +++ b/ui-community/src/components/layouts/admin/pages/admin-page.tsx @@ -200,13 +200,13 @@ export const AdminPage: React.FC = () => { > - } /> } /> } /> } /> } /> } /> } /> + } /> diff --git a/ui-community/src/components/layouts/admin/pages/home.tsx b/ui-community/src/components/layouts/admin/pages/home.tsx index a5b6239f..f07c32b3 100644 --- a/ui-community/src/components/layouts/admin/pages/home.tsx +++ b/ui-community/src/components/layouts/admin/pages/home.tsx @@ -4,6 +4,7 @@ import { theme } from 'antd'; import { useParams } from 'react-router-dom'; import { CommunityDetailContainer } from '../components/community-detail.container'; import { SubPageLayout } from '../sub-page-layout'; +import { useEffect } from 'react'; export const Home: React.FC = () => { @@ -14,18 +15,21 @@ export const Home: React.FC = () => { }=theme.useToken() const params = useParams(); return ( - Home - } - />}> - - Home - Admin - - - + <> + {params.communityId !== null && ( + Home + } + />}> + + Home - Admin + + + + )} + ); };