@buerokratt-ria/menu 0.1.16 → 0.2.1

package/src/menu/hooks/useFilteredMenuItems.tsx

@@ -1,33 +1,39 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { MenuItem } from "../types/menuItem";
-import useMenuItems from "./useMenuItems";
-
-const useFilteredMenuItems = () => {
-  const items = useMenuItems();
-  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
-
-  useQuery({
-    queryKey: ['accounts/user-role', 'prod'],
-    onSuccess: (res: any) => {
-      const filteredItems = items.filter((item) => {
-        const role = res.response;
-        if (role.includes('ROLE_ADMINISTRATOR'))
-          return item.id;
-        if (role.includes('ROLE_SERVICE_MANAGER'))
-          return item.id != "settings" && item.id != "training";
-        if (role.includes('ROLE_CUSTOMER_SUPPORT_AGENT'))
-          return item.id != "settings" && item.id != "analytics";
-        if (role.includes('ROLE_CHATBOT_TRAINER'))
-          return item.id != "settings" && item.id != "conversations";
-        if (role.includes('ROLE_ANALYST'))
-          return item.id == "analytics" || item.id == "monitoring"; 
-      });
-      setMenuItems(filteredItems ?? []);
-    },
-  });
-
-  return menuItems;
-}
-
-export default useFilteredMenuItems;
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { MenuItem } from "../types/menuItem";
+import useMenuItems from "./useMenuItems";
+import { CountConf } from "../types/countConf";
+
+const useFilteredMenuItems = (countConf?: CountConf) => {
+  const items = useMenuItems(countConf);
+  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
+
+  const { data } = useQuery<{ response: [] }>({
+    queryKey: ['accounts/user-role', 'prod'],
+  });
+
+  useEffect(() => {
+    const filteredItems = items.filter((item) => {
+      if (!data) {
+        return;
+      }
+      const role: any[] = data.response;
+      if (role.includes('ROLE_ADMINISTRATOR'))
+        return item.id;
+      if (role.includes('ROLE_SERVICE_MANAGER'))
+        return item.id != "settings" && item.id != "training";
+      if (role.includes('ROLE_CUSTOMER_SUPPORT_AGENT'))
+        return item.id != "settings" && item.id != "analytics";
+      if (role.includes('ROLE_CHATBOT_TRAINER'))
+        return item.id != "settings" && item.id != "conversations";
+      if (role.includes('ROLE_ANALYST'))
+        return item.id == "analytics" || item.id == "monitoring";
+    });
+
+    setMenuItems(filteredItems ?? []);
+  }, [items, data]);
+
+  return menuItems;
+}
+
+export default useFilteredMenuItems;

package/src/menu/hooks/useMenuItems.tsx

@@ -1,63 +1,77 @@
-import { useMemo, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import menuStructure from '../data/menu-structure.json';
-import { MenuItem } from "../types/menuItem";
-
-const useMenuItems = () => {
-  const externalMenuItems = import.meta.env.REACT_APP_MENU_JSON;
-  const cachedMenu = getMenuCache();
-  const [mainMenuItems, setMainMenuItems] = useState<MenuItem[] | null>(cachedMenu ?? []);
-
-  useQuery({
-    enabled: !externalMenuItems && !cachedMenu,
-    queryKey: [import.meta.env.REACT_APP_MENU_URL + import.meta.env.REACT_APP_MENU_PATH],
-    onSuccess: (res: any) => {
-      try {
-        setMainMenuItems(res);
-        setCache(res);
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    onError: () => {
-      setMainMenuItems(cachedMenu);
-    },
-  });
-
-  const items = useMemo(() => {
-    let externals;
-    
-    try {
-      if(externalMenuItems) {
-        externals = JSON.parse(externalMenuItems);
-        if(!Array.isArray(externals)) {
-          console.warn('REACT_APP_MENU_JSON was ignored becuase it wasn\'t an array');
-        }
-      }
-    } catch (e) {
-      console.warn(e);
-    }
-
-    return externals ?? mainMenuItems ?? menuStructure ?? [];
-  }, [externalMenuItems, mainMenuItems, menuStructure]);
-  
-  return items;
-}
-
-function getMenuCache(): any {
-  const cached = getCache();
-  if(Array.isArray(cached) && cached.length > 0)
-    return cached;
-  return null;
-}
-
-function getCache(): any {
-  const cache = localStorage.getItem('mainmenu-cache') ?? '[]';
-  return JSON.parse(cache);
-}
-
-function setCache(res: any) {
-  localStorage.setItem('mainmenu-cache', JSON.stringify(res));
-}
-
-export default useMenuItems;
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import menuStructure from '../data/menu-structure.json';
+import { MenuItem } from "../types/menuItem";
+import { CountConf } from "../types/countConf";
+
+const useMenuItems = (count?: CountConf) => {
+  const externalMenuItems = import.meta.env.REACT_APP_MENU_JSON;
+  const cachedMenu = getMenuCache();
+  const [mainMenuItems, setMainMenuItems] = useState<MenuItem[] | null>(cachedMenu ?? []);
+
+  useQuery({
+    enabled: !externalMenuItems && !cachedMenu,
+    queryKey: [import.meta.env.REACT_APP_MENU_URL + import.meta.env.REACT_APP_MENU_PATH],
+    onSuccess: (res: any) => {
+      try {
+        setMainMenuItems(res);
+        setCache(res);
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    onError: () => {
+      setMainMenuItems(cachedMenu);
+    },
+  });
+
+  const items = useMemo(() => {
+    let externals;
+
+    try {
+      if (externalMenuItems) {
+        externals = JSON.parse(externalMenuItems);
+        if (!Array.isArray(externals)) {
+          console.warn('REACT_APP_MENU_JSON was ignored becuase it wasn\'t an array');
+        }
+      }
+    } catch (e) {
+      console.warn(e);
+    }
+
+    const addCountToPathFields = (item: MenuItem) => {
+      if (count && item.path in count) {
+        item.count = count[item.path]
+      }
+
+      if (item.children) {
+        item.children.forEach(child => addCountToPathFields(child));
+      }
+    }
+
+    const finalMenu = externals ?? mainMenuItems ?? menuStructure ?? [];
+    finalMenu.forEach((item: MenuItem) => addCountToPathFields(item))
+
+    return finalMenu;
+  }, [externalMenuItems, mainMenuItems, menuStructure, count]);
+
+  return items;
+}
+
+function getMenuCache(): any {
+  const cached = getCache();
+  if (Array.isArray(cached) && cached.length > 0)
+    return cached;
+  return null;
+}
+
+function getCache(): any {
+  const cache = localStorage.getItem('mainmenu-cache') ?? '[]';
+  return JSON.parse(cache);
+}
+
+function setCache(res: any) {
+  localStorage.setItem('mainmenu-cache', JSON.stringify(res));
+}
+
+export default useMenuItems;

package/src/menu/index.tsx

@@ -1,48 +1,53 @@
-import React, { FC, MouseEvent, useState, useMemo } from 'react';
-import clsx from 'clsx';
-import { MdClose } from 'react-icons/md';
-import Icon from './components/icons/icon/icon';
-import { useTranslation } from "react-i18next";
-import MenuTree from './components/menuTree';
-import useFilteredMenuItems from './hooks/useFilteredMenuItems';
-import './main-navigation.scss';
-
-const MainNavigation: FC = () => {
-  const { t } = useTranslation();
-  const menuItems = useFilteredMenuItems();
-  const serviceId = useMemo(() => import.meta.env.REACT_APP_SERVICE_ID.split(','), []);
-
-  const [navCollapsed, setNavCollapsed] = useState(false);
-
-  const handleNavToggle = (event: MouseEvent) => {
-    setNavCollapsed(false);
-    const isExpanded = event.currentTarget.getAttribute('aria-expanded') === 'true';
-    event.currentTarget.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
-  };
-
-  const handleCloseButtonClick = () => {
-    const doesMenuHasExpandedItem =  !!document.querySelector('button[aria-expanded="true"]');
-    if(doesMenuHasExpandedItem)
-      setNavCollapsed(!navCollapsed);
-  }
-
-  if (!menuItems) return null;
-
-  return (
-    <nav className={clsx('nav', { 'collapsed': navCollapsed })}>
-      <button className='nav__menu-toggle close-button-item' onClick={handleCloseButtonClick}>
-        <Icon icon={<MdClose />} />
-        <span className='menu-item-title'>{t(navCollapsed ? 'mainMenu.openMenu' : 'mainMenu.closeMenu' )}</span>
-      </button>
-      <ul className='nav__menu'>
-        <MenuTree
-          menuItems={menuItems}
-          serviceId={serviceId}
-          handleNavToggle={handleNavToggle}
-        />
-      </ul>
-    </nav>
-  );
-};
-
-export default MainNavigation;
+import React, { FC, MouseEvent, useState, useMemo } from 'react';
+import clsx from 'clsx';
+import { MdClose } from 'react-icons/md';
+import Icon from './components/icons/icon/icon';
+import { useTranslation } from "react-i18next";
+import MenuTree from './components/menuTree';
+import useFilteredMenuItems from './hooks/useFilteredMenuItems';
+import './main-navigation.scss';
+import { CountConf } from "./types/countConf";
+
+interface MainNavigationProps {
+  countConf?: CountConf
+}
+
+const MainNavigation: FC<MainNavigationProps> = ({countConf}) => {
+  const { t } = useTranslation();
+  const menuItems = useFilteredMenuItems(countConf);
+  const serviceId = useMemo(() => import.meta.env.REACT_APP_SERVICE_ID.split(','), []);
+
+  const [navCollapsed, setNavCollapsed] = useState(false);
+
+  const handleNavToggle = (event: MouseEvent) => {
+    setNavCollapsed(false);
+    const isExpanded = event.currentTarget.getAttribute('aria-expanded') === 'true';
+    event.currentTarget.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
+  };
+
+  const handleCloseButtonClick = () => {
+    const doesMenuHasExpandedItem =  !!document.querySelector('button[aria-expanded="true"]');
+    if(doesMenuHasExpandedItem)
+      setNavCollapsed(!navCollapsed);
+  }
+
+  if (!menuItems) return null;
+
+  return (
+    <nav className={clsx('nav', { 'collapsed': navCollapsed })}>
+      <button className='nav__menu-toggle close-button-item' onClick={handleCloseButtonClick}>
+        <Icon icon={<MdClose />} />
+        <span className='menu-item-title'>{t(navCollapsed ? 'mainMenu.openMenu' : 'mainMenu.closeMenu' )}</span>
+      </button>
+      <ul className='nav__menu'>
+        <MenuTree
+          menuItems={menuItems}
+          serviceId={serviceId}
+          handleNavToggle={handleNavToggle}
+        />
+      </ul>
+    </nav>
+  );
+};
+
+export default MainNavigation;

package/src/menu/main-navigation.scss

@@ -1,129 +1,129 @@
-@import '@buerokratt-ria/styles/styles/tools/spacing';
-@import '@buerokratt-ria/styles/styles/tools/color';
-@import '@buerokratt-ria/styles/styles/settings/variables/typography';
-
-.nav {
-  $self: &;
-  width: 208px;
-  background-color: get-color(sapphire-blue-10);
-  overflow: auto;
-  scrollbar-width: none;
-  transition: width .1s ease-out;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  li, a, .nav__toggle, .nav__menu-toggle {
-    font-size: 14px;
-    line-height: 1.5;
-  }
-
-  &__menu-toggle {
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      background-color: get-color(sapphire-blue-8);
-    }
-
-    &:active {
-      background-color: get-color(sapphire-blue-7);
-    }
-  }
-
-  a, .nav__toggle {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: get-spacing(paldiski);
-    color: get-color(black-coral-0);
-    padding: 14px 8px 14px 32px;
-    box-shadow: inset 0 -1px 0 get-color(sapphire-blue-14);
-
-    span:not(.icon) {
-      flex: 1;
-      display: block;
-    }
-
-    &:hover {
-      background-color: get-color(sapphire-blue-8);
-    }
-
-    &:active {
-      background-color: get-color(sapphire-blue-7);
-    }
-
-    &.active {
-      font-weight: 700;
-    }
-  }
-
-  &__toggle {
-    &[aria-expanded=true] {
-      font-weight: 700;
-
-      .icon {
-        transform: rotate(180deg);
-      }
-
-      + ul {
-        display: block;
-      }
-    }
-
-    &.nav__toggle--icon {
-      padding-left: 8px;
-
-      .icon:first-child {
-        transform: none;
-      }
-    }
-  }
-
-  &__toggle-icon {
-    margin-left: auto;
-  }
-
-  &__menu-toggle {
-    display: flex;
-    align-items: center;
-    gap: get-spacing(paldiski);
-    width: 100%;
-    color: get-color(white);
-    padding: 14px 8px;
-    box-shadow: inset 0 -1px 0 get-color(sapphire-blue-14);
-  }
-
-  &__submenu {
-    display: none;
-
-    a, .nav__toggle {
-      background-color: get-color(sapphire-blue-14);
-      box-shadow: inset 0 -1px 0 get-color(sapphire-blue-17);
-    }
-
-    #{$self} {
-      &__submenu {
-        a {
-          background-color: get-color(sapphire-blue-17);
-          box-shadow: inset 0 -1px 0 get-color(black);
-          padding: 14px 48px 14px 40px;
-        }
-      }
-    }
-  }
-}
-
-.collapsed {
-  .nav__submenu {
-    visibility: hidden;
-    height: 0;
-  }
-
-  button[aria-expanded=true] {
-    .icon {
-      transform: rotate(0deg);
-    }
-  }
-}
+@import '@buerokratt-ria/styles/styles/tools/spacing';
+@import '@buerokratt-ria/styles/styles/tools/color';
+@import '@buerokratt-ria/styles/styles/settings/variables/typography';
+
+.nav {
+  $self: &;
+  width: 208px;
+  background-color: get-color(sapphire-blue-10);
+  overflow: auto;
+  scrollbar-width: none;
+  transition: width .1s ease-out;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  li, a, .nav__toggle, .nav__menu-toggle {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  &__menu-toggle {
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      background-color: get-color(sapphire-blue-8);
+    }
+
+    &:active {
+      background-color: get-color(sapphire-blue-7);
+    }
+  }
+
+  a, .nav__toggle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: get-spacing(paldiski);
+    color: get-color(black-coral-0);
+    padding: 14px 8px 14px 32px;
+    box-shadow: inset 0 -1px 0 get-color(sapphire-blue-14);
+
+    span:not(.icon) {
+      flex: 1;
+      display: block;
+    }
+
+    &:hover {
+      background-color: get-color(sapphire-blue-8);
+    }
+
+    &:active {
+      background-color: get-color(sapphire-blue-7);
+    }
+
+    &.active {
+      font-weight: 700;
+    }
+  }
+
+  &__toggle {
+    &[aria-expanded=true] {
+      font-weight: 700;
+
+      .icon {
+        transform: rotate(180deg);
+      }
+
+      + ul {
+        display: block;
+      }
+    }
+
+    &.nav__toggle--icon {
+      padding-left: 8px;
+
+      .icon:first-child {
+        transform: none;
+      }
+    }
+  }
+
+  &__toggle-icon {
+    margin-left: auto;
+  }
+
+  &__menu-toggle {
+    display: flex;
+    align-items: center;
+    gap: get-spacing(paldiski);
+    width: 100%;
+    color: get-color(white);
+    padding: 14px 8px;
+    box-shadow: inset 0 -1px 0 get-color(sapphire-blue-14);
+  }
+
+  &__submenu {
+    display: none;
+
+    a, .nav__toggle {
+      background-color: get-color(sapphire-blue-14);
+      box-shadow: inset 0 -1px 0 get-color(sapphire-blue-17);
+    }
+
+    #{$self} {
+      &__submenu {
+        a {
+          background-color: get-color(sapphire-blue-17);
+          box-shadow: inset 0 -1px 0 get-color(black);
+          padding: 14px 48px 14px 40px;
+        }
+      }
+    }
+  }
+}
+
+.collapsed {
+  .nav__submenu {
+    visibility: hidden;
+    height: 0;
+  }
+
+  button[aria-expanded=true] {
+    .icon {
+      transform: rotate(0deg);
+    }
+  }
+}

package/src/menu/types/countConf.ts

@@ -0,0 +1,3 @@
+export interface CountConf {
+   [key: string]: number
+}

package/src/menu/types/menuItem.ts

@@ -1,13 +1,14 @@
-
-export  interface TranslatedLabel {
-  [lang: string] : string;
-}
-
-export interface MenuItem {
-  id?: string;
-  label: TranslatedLabel;
-  path?: string;
-  target?: '_blank' | '_self';
-  children?: MenuItem[];
-  hidden?: boolean;
-}
+
+export  interface TranslatedLabel {
+  [lang: string] : string;
+}
+
+export interface MenuItem {
+  id?: string;
+  label: TranslatedLabel;
+  path?: string;
+  target?: '_blank' | '_self';
+  children?: MenuItem[];
+  hidden?: boolean;
+  count?: number
+}

package/tsconfig.base.json

@@ -1,21 +1,21 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "rootDir": ".",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "esModuleInterop": true,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "importHelpers": true,
-    "target": "es2015",
-    "module": "esnext",
-    "lib": ["es2017", "dom", "dom.Iterable"],
-    "skipLibCheck": true,
-    "skipDefaultLibCheck": true,
-    "baseUrl": ".",
-  },
-  "exclude": ["node_modules", "tmp"]
-}
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "rootDir": ".",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "esnext",
+    "lib": ["es2017", "dom", "dom.Iterable"],
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "baseUrl": ".",
+  },
+  "exclude": ["node_modules", "tmp"]
+}