From 2a80db4544486c9051f93b6bc35e7fd44f0b8e01 Mon Sep 17 00:00:00 2001 From: berkay Date: Wed, 8 Jan 2025 12:06:30 +0300 Subject: [PATCH] Side Menu layer 2 updated --- apicalls/cookies/token.tsx | 10 + apicalls/events/available.tsx | 72 +++++- .../defaultLayout/MainBodyWithHeader.tsx | 4 +- src/components/defaultLayout/SideMenu.tsx | 128 +++-------- .../defaultLayout/SideMenuButtons.tsx | 212 ++++++++++++++++++ src/lib/getPageFromMappings.ts | 5 +- src/pages/LoginSelectEmployee/selectFrom.tsx | 1 - 7 files changed, 319 insertions(+), 113 deletions(-) create mode 100644 src/components/defaultLayout/SideMenuButtons.tsx diff --git a/apicalls/cookies/token.tsx b/apicalls/cookies/token.tsx index fffd34c..de2a822 100644 --- a/apicalls/cookies/token.tsx +++ b/apicalls/cookies/token.tsx @@ -43,6 +43,15 @@ async function retrieveAvailableEvents() { return decrpytAccessObject ? JSON.parse(decrpytAccessObject) : null; } +async function retrieveavailablePages() { + const cookieStore = await cookies(); + const encrpytAccessObject = cookieStore.get("availablePages")?.value || ""; + const decrpytAccessObject = await nextCrypto.decrypt(encrpytAccessObject); + return decrpytAccessObject + ? JSON.parse(decrpytAccessObject)?.availablePages || [] + : null; +} + async function retrieveAvatarInfo() { const response = await fetchDataWithToken( `${baseUrl}/authentication/avatar`, @@ -119,4 +128,5 @@ export { retrieveAccessObjects, retrieveAvailableEvents, retrieveUserSelection, + retrieveavailablePages, }; diff --git a/apicalls/events/available.tsx b/apicalls/events/available.tsx index 648a1ba..3a010ae 100644 --- a/apicalls/events/available.tsx +++ b/apicalls/events/available.tsx @@ -7,23 +7,70 @@ import { PagesInfosAndEndpoints } from "@/apimaps/mappingApi"; const availableEventsURL = `${baseUrl}/access/endpoints/available`; -async function checkPageAvaliablityByEndpoint(availableEvents: any) { - let availablePages: string[] = []; - const availableEventsList: string[] = availableEvents || []; - PagesInfosAndEndpoints.map((page) => { - const pageInfo = page?.pageInfo?.tr || []; +function iterateOverPageLayers( + availableEventsList: any, + availablePages: any, + iterLevel: any +) { + console.log("iterLevel", iterLevel); + if (Array.isArray(iterLevel)) { + iterLevel.map((page: any) => { + const pageInfo = page?.pageInfo?.tr || []; + if (pageInfo.length > 0) { + pageInfo.map((pageInfoItem: any) => { + const endpoint = pageInfoItem?.endpoint || ""; + if ( + availableEventsList.includes(endpoint) && + !availablePages.includes(page.name) + ) { + if (page.name) { + availablePages.push(page.name); + } + return; + } + }); + } + }); + } else { + const pageInfo = iterLevel?.pageInfo?.tr || []; if (pageInfo.length > 0) { - pageInfo.map((pageInfoItem) => { + pageInfo.map((pageInfoItem: any) => { const endpoint = pageInfoItem?.endpoint || ""; if ( availableEventsList.includes(endpoint) && - !availablePages.includes(page.name) + !availablePages.includes(iterLevel.name) ) { - availablePages.push(page.name); + availablePages.push(iterLevel.name); return; } }); } + } +} + +async function checkPageAvaliablityByEndpoint(availableEvents: any) { + let availablePages: string[] = []; + const availableEventsList: string[] = availableEvents || []; + let pageLayers = null; + PagesInfosAndEndpoints.map((page) => { + if (page.subCategories) { + pageLayers = page?.subCategories; + if (pageLayers) { + iterateOverPageLayers(availableEventsList, availablePages, pageLayers); + + const nestedLayers = pageLayers.find( + (layer) => layer.subCategories + )?.subCategories; + if (nestedLayers) { + iterateOverPageLayers( + availableEventsList, + availablePages, + nestedLayers + ); + } + } + } + iterateOverPageLayers(availableEventsList, availablePages, page); }); return availablePages; } @@ -44,15 +91,22 @@ async function setAvailableEvents() { const availableEventDataRes = await checkPageAvaliablityByEndpoint( availableEventData ); - console.log("availableEventDataRes", availableEventDataRes); const availableEvents = await nextCrypto.encrypt( JSON.stringify({ availableEvents: availableEventData }) ); + const availablePages = await nextCrypto.encrypt( + JSON.stringify({ availablePages: availableEventDataRes }) + ); cookieStore.set({ name: "availableEvents", value: availableEvents, ...cookieObject, }); + cookieStore.set({ + name: "availablePages", + value: availablePages, + ...cookieObject, + }); } } diff --git a/src/components/defaultLayout/MainBodyWithHeader.tsx b/src/components/defaultLayout/MainBodyWithHeader.tsx index a777fac..3ec1e0b 100644 --- a/src/components/defaultLayout/MainBodyWithHeader.tsx +++ b/src/components/defaultLayout/MainBodyWithHeader.tsx @@ -7,6 +7,7 @@ import MainPage from "@/components/commons/MainPage"; import { checkServerPageAvaliable } from "@/hooks/serverCheckPageAvailable"; import { MainPageProps } from "@/schemas/mainPage"; +import { retrieveavailablePages } from "@/apicalls/cookies/token"; interface MainBodyWithHeaderProps { children: any; @@ -18,6 +19,7 @@ const MainBodyWithHeader: React.FC = async ({ section, }) => { const user = await checkServerPageAvaliable(); + const restrictions = await retrieveavailablePages(); return (
Loading Profile...
}> @@ -26,7 +28,7 @@ const MainBodyWithHeader: React.FC = async ({
- +
diff --git a/src/components/defaultLayout/SideMenu.tsx b/src/components/defaultLayout/SideMenu.tsx index 9cd208d..80c3e6e 100644 --- a/src/components/defaultLayout/SideMenu.tsx +++ b/src/components/defaultLayout/SideMenu.tsx @@ -6,14 +6,19 @@ import { getIconByName } from "@/Icons/icons"; import { MainPageProps } from "@/schemas/mainPage"; import { getThreeLayerByPageName } from "@/lib/getPageFromMappings"; import { LanguagesSelectable } from "@/apimaps/mappingApi"; -import { checkEndpointAvailability } from "@/apimaps/mappingApiFunctions"; +import { FirstLayerMenu, SecondLayerMenu } from "./SideMenuButtons"; interface SideMenuProps { lang: string; section: MainPageProps; + restrictions: Array; } -const SideMenu: React.FC = async ({ section, lang }) => { +const SideMenu: React.FC = async ({ + section, + lang, + restrictions, +}) => { const { layer, currentPage, firstLayer, secondLayer, thirdLayer } = section; const pages = getThreeLayerByPageName({ lang, @@ -25,54 +30,23 @@ const SideMenu: React.FC = async ({ section, lang }) => { const firstLayerPage = pages?.firstLayer; const secondLayerPage = pages?.secondLayer; const thirdLayerPage = pages?.thirdLayer; + const fourthLayerPage = pages?.fourthLayer; const language = lang as LanguagesSelectable; if (layer === 1) { return ( ); @@ -80,62 +54,16 @@ const SideMenu: React.FC = async ({ section, lang }) => { return ( ); diff --git a/src/components/defaultLayout/SideMenuButtons.tsx b/src/components/defaultLayout/SideMenuButtons.tsx new file mode 100644 index 0000000..d76d525 --- /dev/null +++ b/src/components/defaultLayout/SideMenuButtons.tsx @@ -0,0 +1,212 @@ +"use server"; +import Link from "next/link"; +import React from "react"; +import { getIconByName } from "@/Icons/icons"; + +interface ButtonInterface { + url: string; + title: string; + Icon: React.FC; +} + +interface MappedLayersInterface { + firstLayer: any; + secondLayer: any; + thirdLayer: any; + fourthLayer: any; +} + +interface ActiveButtonInterface { + key: string; + url: string; + title: string; + Icon: React.FC; +} + +interface RenderMenuInterface { + key: string; + page: any; + currentPage: string; + mappedLayers: any | MappedLayersInterface; + lang: string; + restrictionsList?: any; +} + +const DisableButton: React.FC = ({ url, title, Icon }) => { + return ( + + + {title} + + ); +}; + +const ActiveButton: React.FC = ({ + key, + url, + title, + Icon, +}) => { + return ( + + + {title} + + ); +}; + +const ActiveButtonLight: React.FC = ({ + key, + url, + title, + Icon, +}) => { + return ( + + + {title} + + ); +}; + +const LayerButton: React.FC = ({ + key, + url, + title, + Icon, +}) => { + return ( + + + {title} + + ); +}; + +const FirstLayerMenu: React.FC = ({ + key, + page, + currentPage, + mappedLayers, + restrictionsList, + lang, +}) => { + if (restrictionsList.includes(String(page.name))) { + if (page.name === currentPage) { + return ( +
+ +
+ {mappedLayers.secondLayer.map((subPage: any) => { + if (restrictionsList.includes(String(subPage.name))) { + return ( + + ); + } + })} +
+
+ ); + } + if (restrictionsList.includes(String(page.name))) { + return ( + <> + + + ); + } + } +}; + +const SecondLayerMenu: React.FC = ({ + key, + page, + currentPage, + mappedLayers, + restrictionsList, + lang, +}) => { + if (restrictionsList.includes(String(mappedLayers.firstLayer.name))) { + if (mappedLayers.firstLayer.name === page.name) { + return ( +
+ +
+ {mappedLayers.secondLayer.map((subPage: any) => { + console.log("subPage", subPage); + if (restrictionsList.includes(String(subPage.name))) { + if (subPage.name === currentPage) { + return ( + + ); + } else { + return ( + + ); + } + } + })} +
+
+ ); + } + if (restrictionsList.includes(String(page.name))) { + return ( +
+ +
+ ); + } + } +}; + +export { FirstLayerMenu, SecondLayerMenu }; diff --git a/src/lib/getPageFromMappings.ts b/src/lib/getPageFromMappings.ts index 8f7fc75..ff02deb 100644 --- a/src/lib/getPageFromMappings.ts +++ b/src/lib/getPageFromMappings.ts @@ -51,8 +51,9 @@ export function getThreeLayerByPageName({ const thirdLayerPage = retrievePageByComponentName(thirdLayer || "", lang); return { firstLayer: firstLayerpage, - secondLayer: secondLayerPage, - thirdLayer: thirdLayerPage, + secondLayer: firstLayerpage?.subCategories || null, + thirdLayer: secondLayerPage?.subCategories || null, + fourthLayer: thirdLayerPage?.subCategories || null, layer: 3, }; } diff --git a/src/pages/LoginSelectEmployee/selectFrom.tsx b/src/pages/LoginSelectEmployee/selectFrom.tsx index 4649aba..369876e 100644 --- a/src/pages/LoginSelectEmployee/selectFrom.tsx +++ b/src/pages/LoginSelectEmployee/selectFrom.tsx @@ -12,7 +12,6 @@ const SelectEmployeeFrom: React.FC = ({ companyList, }) => { const router = useRouter(); - console.log("companyList", companyList); function onClick(data: any) { loginSelectEmployee({ company_uu_id: data?.uu_id }) .then((responseData: any) => {