Side Menu layer 2 updated

2025-01-08 12:06:30 +03:00 · 2025-01-08 12:06:30 +03:00 · 2a80db4544
parent 2dd267a570
commit 2a80db4544
7 changed files with 319 additions and 113 deletions
--- 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,
 };
--- 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,
+    });
  }
 }

--- 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<MainBodyWithHeaderProps> = async ({
  section,
 }) => {
  const user = await checkServerPageAvaliable();
+  const restrictions = await retrieveavailablePages();
  return (
    <div className="flex w-full h-full">
      <Suspense fallback={<div>Loading Profile...</div>}>
@ -26,7 +28,7 @@ const MainBodyWithHeader: React.FC<MainBodyWithHeaderProps> = async ({
            <SideMenuProfile profileInfo={user} />
          </div>
          <div className="basis-3/4 p-4 border-2 border-black">
-            <SideMenu section={section} lang={user?.lang ?? "tr"} />
+            <SideMenu section={section} lang={user?.lang ?? "tr"} restrictions={restrictions} />
          </div>
        </div>
      </Suspense>
--- 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<string>;
 }

-const SideMenu: React.FC<SideMenuProps> = async ({ section, lang }) => {
+const SideMenu: React.FC<SideMenuProps> = async ({
+  section,
+  lang,
+  restrictions,
+}) => {
  const { layer, currentPage, firstLayer, secondLayer, thirdLayer } = section;
  const pages = getThreeLayerByPageName({
    lang,
@ -25,54 +30,23 @@ const SideMenu: React.FC<SideMenuProps> = 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 (
      <nav className="flex flex-col text-sm">
        {PagesInfosAndEndpoints.map((page) => {
-          const isActive = page.name === currentPage;
-          const Icon = getIconByName(page.icon);
-          if (isActive) {
-            return (
-              <div>
-                <Link
-                  href={page.url}
-                  className={`px-10 border-gray-100 rounded-xl border-2  m-1 select-none pointer-events-none drag w-full p-4 flex items-center gap-2 "bg-gray-700 `}
-                >
-                  <Icon />
-                  {page.title?.[lang as LanguagesSelectable]}
-                </Link>
-                <div className="mb-6 mt-3 px-4">
-                  {secondLayerPage.map((subPage: any) => {
-                    const SubIcon = getIconByName(subPage.icon);
-                    return (
-                      <Link
-                        key={subPage.name}
-                        href={subPage.url}
-                        className={`w-full p-4 my-3  rounded-2xl m-1 flex items-center gap-2 bg-slate-300 hover:bg-slate-500`}
-                      >
-                        <SubIcon />
-                        {subPage.title?.[lang as LanguagesSelectable]}
-                      </Link>
-                    );
-                  })}
-                </div>
-              </div>
-            );
-          } else {
-            return (
-              <div>
-                <Link
-                  href={page.url}
-                  className={`w-full p-4 rounded-xl m-1 flex items-center gap-2 bg-gray-100 hover:bg-gray-300`}
-                >
-                  <Icon />
-                  {page.title?.[lang as LanguagesSelectable]}
-                </Link>
-              </div>
-            );
-          }
+          return (
+            <FirstLayerMenu
+              key={page.name}
+              page={page}
+              currentPage={currentPage}
+              mappedLayers={pages}
+              restrictionsList={restrictions}
+              lang={lang as LanguagesSelectable}
+            />
+          );
        })}
      </nav>
    );
@ -80,62 +54,16 @@ const SideMenu: React.FC<SideMenuProps> = async ({ section, lang }) => {
    return (
      <nav className="flex flex-col text-sm">
        {PagesInfosAndEndpoints.map((page) => {
-          const isActive = firstLayerPage.name === page.name;
-          const Icon = getIconByName(page.icon);
-          if (isActive) {
-            return (
-              <div>
-                <Link
-                  href={page.url}
-                  className={`w-full p-4 rounded-xl m-1 flex items-center gap-2 bg-gray-100 hover:bg-gray-300`}
-                >
-                  <Icon />
-                  {page.title?.[lang as LanguagesSelectable]}
-                </Link>
-                <div className="mb-6 mt-3 px-4">
-                  {secondLayerPage.map((subPage: any) => {
-                    const SubIcon = getIconByName(subPage.icon);
-                    const isActive = subPage.name === currentPage;
-                    if (isActive) {
-                      return (
-                        <Link
-                          key={subPage.name}
-                          href={subPage.url}
-                          className={`px-10 border-gray-100 rounded-xl border-2  m-1 select-none pointer-events-none drag w-full p-4 flex items-center gap-2 "bg-gray-700 `}
-                        >
-                          <SubIcon />
-                          {subPage.title?.[lang as LanguagesSelectable]}
-                        </Link>
-                      );
-                    } else {
-                      return (
-                        <Link
-                          key={subPage.name}
-                          href={subPage.url}
-                          className={`w-full p-4 my-3  rounded-2xl m-1 flex items-center gap-2 bg-slate-300 hover:bg-slate-500`}
-                        >
-                          <SubIcon />
-                          {subPage.title?.[lang as LanguagesSelectable]}
-                        </Link>
-                      );
-                    }
-                  })}
-                </div>
-              </div>
-            );
-          } else {
-            return (
-              <div>
-                <Link
-                  href={page.url}
-                  className={`w-full p-4 rounded-xl m-1 flex items-center gap-2 bg-gray-100 hover:bg-gray-300`}
-                >
-                  <Icon />
-                  {page.title?.[lang as LanguagesSelectable]}
-                </Link>
-              </div>
-            );
-          }
+          return (
+            <SecondLayerMenu
+              key={page.name}
+              page={page}
+              currentPage={currentPage}
+              mappedLayers={pages}
+              restrictionsList={restrictions}
+              lang={lang as LanguagesSelectable}
+            />
+          );
        })}
      </nav>
    );
--- a/src/components/defaultLayout/SideMenuButtons.tsx
+++ 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<ButtonInterface> = ({ url, title, Icon }) => {
+  return (
+    <Link
+      href={url}
+      className={`px-10 border-gray-100 rounded-xl border-2  m-1 select-none pointer-events-none drag w-full p-4 flex items-center gap-2 "bg-gray-700 `}
+    >
+      <Icon />
+      {title}
+    </Link>
+  );
+};
+
+const ActiveButton: React.FC<ActiveButtonInterface> = ({
+  key,
+  url,
+  title,
+  Icon,
+}) => {
+  return (
+    <Link
+      key={key}
+      href={url}
+      className={`w-full p-4 my-3  rounded-2xl m-1 flex items-center gap-2 bg-slate-300 hover:bg-slate-500`}
+    >
+      <Icon />
+      {title}
+    </Link>
+  );
+};
+
+const ActiveButtonLight: React.FC<ActiveButtonInterface> = ({
+  key,
+  url,
+  title,
+  Icon,
+}) => {
+  return (
+    <Link
+      key={key}
+      href={url}
+      className={`w-full p-4 rounded-xl m-1 flex items-center gap-2 bg-gray-100 hover:bg-gray-300`}
+    >
+      <Icon />
+      {title}
+    </Link>
+  );
+};
+
+const LayerButton: React.FC<ActiveButtonInterface> = ({
+  key,
+  url,
+  title,
+  Icon,
+}) => {
+  return (
+    <Link
+      key={key}
+      href={url}
+      className={`px-10 border-gray-100 rounded-xl border-2  m-1 select-none pointer-events-none drag w-full p-4 flex items-center gap-2 "bg-gray-700 `}
+    >
+      <Icon />
+      {title}
+    </Link>
+  );
+};
+
+const FirstLayerMenu: React.FC<RenderMenuInterface> = ({
+  key,
+  page,
+  currentPage,
+  mappedLayers,
+  restrictionsList,
+  lang,
+}) => {
+  if (restrictionsList.includes(String(page.name))) {
+    if (page.name === currentPage) {
+      return (
+        <div key={key}>
+          <DisableButton
+            url={page.url}
+            title={page.title?.[lang]}
+            Icon={getIconByName(page.icon)}
+          />
+          <div className="mb-6 mt-3 px-4">
+            {mappedLayers.secondLayer.map((subPage: any) => {
+              if (restrictionsList.includes(String(subPage.name))) {
+                return (
+                  <ActiveButton
+                    key={subPage.name}
+                    url={subPage.url}
+                    title={subPage.title?.[lang]}
+                    Icon={getIconByName(subPage.icon)}
+                  />
+                );
+              }
+            })}
+          </div>
+        </div>
+      );
+    }
+    if (restrictionsList.includes(String(page.name))) {
+      return (
+        <>
+          <ActiveButton
+            key={page.name}
+            url={page.url}
+            title={page.title?.[lang]}
+            Icon={getIconByName(page.icon)}
+          />
+        </>
+      );
+    }
+  }
+};
+
+const SecondLayerMenu: React.FC<RenderMenuInterface> = ({
+  key,
+  page,
+  currentPage,
+  mappedLayers,
+  restrictionsList,
+  lang,
+}) => {
+  if (restrictionsList.includes(String(mappedLayers.firstLayer.name))) {
+    if (mappedLayers.firstLayer.name === page.name) {
+      return (
+        <div key={key}>
+          <ActiveButton
+            key={page.name}
+            url={page.url}
+            title={page.title?.[lang]}
+            Icon={getIconByName(page.icon)}
+          />
+          <div className="mb-6 mt-3 px-4">
+            {mappedLayers.secondLayer.map((subPage: any) => {
+              console.log("subPage", subPage);
+              if (restrictionsList.includes(String(subPage.name))) {
+                if (subPage.name === currentPage) {
+                  return (
+                    <LayerButton
+                      key={subPage.name}
+                      url={subPage.url}
+                      title={subPage.title?.[lang]}
+                      Icon={getIconByName(subPage.icon)}
+                    />
+                  );
+                } else {
+                  return (
+                    <ActiveButton
+                      key={subPage.name}
+                      url={subPage.url}
+                      title={subPage.title?.[lang]}
+                      Icon={getIconByName(subPage.icon)}
+                    />
+                  );
+                }
+              }
+            })}
+          </div>
+        </div>
+      );
+    }
+    if (restrictionsList.includes(String(page.name))) {
+      return (
+        <div>
+          <ActiveButton
+            key={page.name}
+            url={page.url}
+            title={page.title?.[lang]}
+            Icon={getIconByName(page.icon)}
+          />
+        </div>
+      );
+    }
+  }
+};
+
+export { FirstLayerMenu, SecondLayerMenu };
--- 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,
    };
  }
--- a/src/pages/LoginSelectEmployee/selectFrom.tsx
+++ b/src/pages/LoginSelectEmployee/selectFrom.tsx
@ -12,7 +12,6 @@ const SelectEmployeeFrom: React.FC<InterfaceSelectEmployeeFrom> = ({
  companyList,
 }) => {
  const router = useRouter();
-  console.log("companyList", companyList);
  function onClick(data: any) {
    loginSelectEmployee({ company_uu_id: data?.uu_id })
      .then((responseData: any) => {