datastake-daf 0.6.501 → 0.6.503

package/src/@daf/layouts/AppLayout/components/Sidenav/index.js

@@ -0,0 +1,296 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect, useMemo, useRef } from "react";
+import { formatClassname } from '../../../../../helpers/ClassesHelper.js';
+import DAFSidenav, { useMenu } from "../../../../core/components/Sidenav/index.jsx";
+import SidenavMenu from "../../../../core/components/Sidenav/Menu.jsx";
+
+const open = false;
+const menuMode = 'inline';
+const DEFAULT_WIDTH = 200;
+
+const PageInterface = ({ isCollapsed, onClick, title, children }) => {
+  return (
+    <div className={formatClassname(['mod-name', isCollapsed ? 'is-collapsed' : 'not-collapsed'])}>
+      <div className="icon cursor-pointer" onClick={onClick}>
+        <div className="icon">
+          {children}
+        </div>
+      </div>
+      {isCollapsed ? null : <h1>{title}</h1>}
+    </div>
+  );
+};
+
+export const renderModule = ({
+  isCollapsed,
+  onClick,
+  user,
+  userHelpers = {}
+}) => {
+  const { userIsAdmin, userIsSbgImplementor, userIsSbgPartner } = userHelpers;
+  
+  const isAdmin = userIsAdmin?.(user);
+  const hasStandardInterface = userIsSbgImplementor?.(user);
+  const hasPartnerInterface = userIsSbgPartner?.(user);
+  
+  if (isAdmin) {
+    return (
+      <PageInterface 
+        isCollapsed={isCollapsed}
+        onClick={onClick}
+        title="ADMIN"
+      >
+        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+          <path d="M9.03367 5H2.66667C1.74619 5 1 4.25381 1 3.33333C1 2.41286 1.74619 1.66667 2.66667 1.66667H9.03367M4.96633 12.3333H11.3333C12.2538 12.3333 13 11.5871 13 10.6667C13 9.74619 12.2538 9 11.3333 9H4.96633M1 10.6667C1 11.9553 2.04467 13 3.33333 13C4.622 13 5.66667 11.9553 5.66667 10.6667C5.66667 9.378 4.622 8.33333 3.33333 8.33333C2.04467 8.33333 1 9.378 1 10.6667ZM13 3.33333C13 4.622 11.9553 5.66667 10.6667 5.66667C9.378 5.66667 8.33333 4.622 8.33333 3.33333C8.33333 2.04467 9.378 1 10.6667 1C11.9553 1 13 2.04467 13 3.33333Z" stroke="#B9C0D4" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"></path>
+        </svg>
+      </PageInterface>
+    );
+  }
+
+  if (hasStandardInterface) {
+    return (
+      <PageInterface 
+        isCollapsed={isCollapsed}
+        onClick={onClick}
+        title="Implementer"
+      >
+        <img src="/assets/images/SVG/implementer.svg" alt="implementer" />
+      </PageInterface>
+    );
+  } else if (hasPartnerInterface) {
+    return (
+      <PageInterface 
+        isCollapsed={isCollapsed}
+        onClick={onClick}
+        title="Partner"
+      >
+        <img src="/assets/images/SVG/partner-building.svg" alt="partner" />
+      </PageInterface>
+    );
+  } else if (!hasStandardInterface) {
+    return (
+      <PageInterface 
+        isCollapsed={isCollapsed}
+        onClick={onClick}
+        title="Coordinator"
+      >
+        <img src="/assets/images/SVG/coordinator.svg" alt="coordinator" />
+      </PageInterface>
+    );
+  }
+};
+
+const Sidenav = ({
+  user,
+  module,
+  isCollapsed = false,
+  showMenu = true,
+  sidenavConfig = {},
+  navigate,
+  location,
+  matchPath,
+  t,
+  changeNotificationState,
+  userHelpers = {},
+  isDev = false,
+  appName = 'app',
+}) => {
+  const hoverDiv = useRef();
+  const hoverDivSecond = useRef();
+  const items = useMemo(() => sidenavConfig[module] || [], [sidenavConfig, module]);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [topHover, setTopHover] = useState(-100);
+  const [topHoverSecond, setTopHoverSecond] = useState(-100);
+  const [widthHoverSecond, setWidthHoverSecond] = useState(DEFAULT_WIDTH);
+  const [hoverOpen, setHoverOpen] = useState(false);
+  const [hoverItem, setHoverItem] = useState(null);
+  const [hoverItemSecond, setHoverItemSecond] = useState(null);
+  const { pathname } = location || {};
+
+  const mod = useMemo(() => module, [module, user]);
+
+  const getRedirectLink = (link) => {
+    // Simple redirect link logic - can be customized
+    if (window.location.pathname.includes(`/${appName}`)) {
+      return `/${appName}${link}`;
+    }
+    return link;
+  };
+
+  const checkPath = (i) => {
+    if (!matchPath || !pathname) return false;
+    
+    return (matchPath({
+      path: getRedirectLink(i.path),
+      exact: true,
+    }, pathname) || (i.subPath && i.subPath.filter(s => matchPath({
+      path: getRedirectLink(s),
+      exact: true,
+    }, pathname)).length)) ? true : false;
+  };
+
+  useEffect(() => {
+    setHoverItem(null);
+    setHoverOpen(false);
+    setHoverItemSecond(null);
+    setTopHover(-100);
+    setTopHoverSecond(-100);
+    setWidthHoverSecond(DEFAULT_WIDTH);
+  }, [isCollapsed]);
+
+  function notApprovedModal() { }
+
+  const onMouseMove = (event) => {
+    let insideMain = false;
+
+    if (hoverDiv.current) {
+      const divRect = hoverDiv.current.getBoundingClientRect();
+      const isInside = event.clientX >= divRect.left && event.clientX <= divRect.right &&
+        event.clientY >= divRect.top && event.clientY <= divRect.bottom;
+      insideMain = isInside;
+    }
+
+    if (!insideMain && hoverDivSecond.current) {
+      const divRect = hoverDivSecond.current.getBoundingClientRect();
+      const isInside = event.clientX >= divRect.left && event.clientX <= divRect.right &&
+        event.clientY >= divRect.top && event.clientY <= divRect.bottom;
+      if (!isInside) {
+        setHoverItemSecond(null);
+        document.removeEventListener('mousemove', onMouseMove);
+        setHoverItem(null);
+        setHoverOpen(false);
+        setTopHover(-100);
+        setTopHoverSecond(-100);
+        setWidthHoverSecond(DEFAULT_WIDTH);
+      }
+    }
+  };
+
+  const checkOnClick = ({ event }) => {
+    changeNotificationState({ onYes: event });
+  };
+
+  const { hoverContent, hoverContentSecond } = useMenu({
+    checkOnClick, 
+    hoverItem, 
+    t, 
+    user, 
+    pathname, 
+    setHoverItem, 
+    setHoverItemSecond,
+    setTopHover, 
+    setTopHoverSecond, 
+    setWidthHoverSecond, 
+    onMouseMove, 
+    setHoverOpen,
+    module, 
+    notApprovedModal, 
+    goTo: navigate, 
+    hoverItemSecond, 
+    isDev,
+  });
+
+  const filteredItems = useMemo(() => {
+    const mapItems = (item) => {
+      const isDisabled = typeof item.isDisabled === 'function' ?
+        item.isDisabled(user)
+        : item.isDisabled || false;
+
+      if (item.items) {
+        return {
+          ...item,
+          isDisabled,
+          items: item.items.filter((item) => {
+            const res = typeof item.visible === 'function' ? item.visible(user) : true;
+            return res;
+          }).map(mapItems)
+        };
+      }
+
+      return { ...item, isDisabled };
+    };
+
+    return items
+      .filter(item => {
+        const res = typeof item.visible === 'function' ? item.visible(user) : true;
+        return res;
+      })
+      .map(mapItems);
+  }, [items, user, pathname]);
+
+  useEffect(() => {
+    const selectedItem = filteredItems
+      .filter((d) => !d.isDisabled)
+      .find(i => i.items ? i.items.filter(ii => !ii.isDisabled && checkPath(ii)).length > 0 : checkPath(i));
+
+    if (selectedItem) {
+      if (selectedItem.items) {
+        const subItem = selectedItem.items.find(ii => checkPath(ii));
+        if (subItem) {
+          setSelectedKeys([subItem.path]);
+        }
+      } else {
+        setSelectedKeys([selectedItem.path]);
+      }
+    } else if (pathname) {
+      setSelectedKeys([pathname]);
+    }
+  }, [pathname]);
+
+  const userModule = useMemo(() => module, [user, module]);
+
+  return (
+    <React.Fragment>
+      {renderModule({
+        module: userModule,
+        isCollapsed,
+        onClick: () => checkOnClick({
+          event: () => {
+            navigate?.(getRedirectLink(`/app`));
+          }
+        }),
+        mod,
+        user,
+        userHelpers
+      })}
+      <DAFSidenav
+        module={module}
+        isCollapsed={isCollapsed}
+        hoverDiv={hoverDiv}
+        topHover={topHover}
+        hoverOpen={hoverOpen}
+        hoverContent={hoverContent}
+        hoverDivSecond={hoverDivSecond}
+        topHoverSecond={topHoverSecond}
+        hoverItemSecond={hoverItemSecond}
+        widthHoverSecond={widthHoverSecond}
+        hoverContentSecond={hoverContentSecond}
+        t={t}
+      >
+        {showMenu ? (
+          <SidenavMenu
+            matchPath={matchPath}
+            module={module}
+            menuMode={menuMode}
+            open={open}
+            selectedKeys={selectedKeys}
+            filteredItems={filteredItems}
+            isCollapsed={isCollapsed}
+            setHoverItem={setHoverItem}
+            setTopHover={setTopHover}
+            setHoverOpen={setHoverOpen}
+            onMouseMove={onMouseMove}
+            user={user}
+            goTo={navigate}
+            notApprovedModal={notApprovedModal}
+            isDev={isDev}
+            t={t}
+            checkOnClick={checkOnClick}
+          />
+        ) : null}
+      </DAFSidenav>
+    </React.Fragment>
+  );
+};
+
+export default Sidenav;

package/src/@daf/layouts/AppLayout/components/UserDropdown/UserIcon.js

@@ -0,0 +1,96 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { DownOutlined, BankOutlined } from "@ant-design/icons";
+import styled from "styled-components";
+import { MOBILE_WIDTH } from "../../../../../constants/Style.js";
+
+const Style = styled.div`
+  display: flex;
+  cursor: pointer;
+
+  .desktop {
+    display: flex;
+  }
+
+  .mobile {
+    display: none;
+  }
+
+  .icon-c {
+    width: 40px;
+    height: 40px;
+    background: #FFFFFF;
+    border-radius: 100%;
+    background-position: center !important;
+    background-size: cover !important;
+
+    .anticon {
+      line-height: 0px !important;
+      padding-left: 0px !important;
+      font-size: 18px;
+      svg {
+        color: #D2D6DB;
+      }
+    }
+
+    svg {
+      margin: auto;
+    }
+
+    svg {
+      color: black;
+    }
+  }
+
+  .cont {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  @media (${MOBILE_WIDTH}) {
+    .desktop {
+      display: none;
+    }
+
+    .mobile {
+      display: flex;
+      cursor: pointer;
+
+      .anticon-menu {
+        padding-left: 0px !important;
+      }
+    }
+  }
+`;
+
+export default function UserIcon({ companyLogo }) {
+  if (companyLogo) {
+    return (
+      <Style>
+        <div className="flex">
+          <div className="cont">
+            <div className="icon-c cont" style={{ background: `url('${companyLogo}')` }} />
+          </div>
+          <div className="cont">
+            <DownOutlined />
+          </div>
+        </div>
+      </Style>
+    );
+  }
+  return (
+    <Style>
+      <div className="flex">
+        <div className="cont">
+          <div className="icon-c cont">
+            <BankOutlined />
+          </div>
+        </div>
+        <div className="cont">
+          <DownOutlined />
+        </div>
+      </div>
+    </Style>
+  );
+}

package/src/@daf/layouts/AppLayout/components/UserDropdown/index.js

@@ -0,0 +1,112 @@
+/* eslint-disable react/prop-types */
+import { Dropdown } from 'antd';
+import UserIcon from './UserIcon';
+import React, { useMemo } from 'react';
+import { formatClassname } from '../../../../../helpers/ClassesHelper.js';
+import { useResizeContext } from '../../../../core/context/Resize/index.js';
+import { MOBILE_W } from '../../../../../constants/Style.js';
+import MobileDrawer from '../MobileDrawer/index.js';
+
+export const UserDropdownMenu = ({
+  user,
+  toggleSettingsDrawer = () => { },
+  settingsDrawerOpened,
+  navigate,
+  changeNotificationState,
+  t = (s) => s,
+  isAppNavigation,
+  logOut,
+  module,
+  checkPermission = () => false,
+  appName = 'app',
+  userHelpers = {},
+}) => {
+  const { windowWidth } = useResizeContext();
+  const { userIsAdmin } = userHelpers;
+  const isAdmin = useMemo(() => userIsAdmin?.(user), [user, userIsAdmin]);
+  const isMobile = useMemo(() => windowWidth <= MOBILE_W, [windowWidth]);
+  const canViewUsers = checkPermission({ 
+    permission: 'users.canView', 
+    permissions: user?.role?.permissions 
+  });
+  const canViewSettings = checkPermission({ 
+    permission: 'settings.canView', 
+    permissions: user?.role?.permissions 
+  });
+
+  const companyLogo = useMemo(() => {
+    const _arr = Array.isArray(user?.company?.logo) ? user?.company?.logo : (
+      user?.company?.logo?.fileList && Array.isArray(user?.company?.logo?.fileList) ?
+        user?.company?.logo?.fileList.map(v => v.response ? v.response : v) : []);
+    return Array.isArray(_arr) && _arr[0] ? _arr[0].url : null;
+  }, [user]);
+
+  const isDemoEnv = process.env.REACT_APP_ENV === 'demo';
+
+  return isMobile ? (
+    <div className="d-flex flex-column justify-content-center" onClick={toggleSettingsDrawer}>
+      <UserIcon companyLogo={companyLogo} />
+      <MobileDrawer
+        mod={module}
+        isUserDropdown
+        toggle={toggleSettingsDrawer}
+        drawerOpened={settingsDrawerOpened}
+        user={user}
+        navigate={navigate}
+        t={t}
+        checkPermission={checkPermission}
+        logOut={logOut}
+        changeNotificationState={changeNotificationState}
+        appName={appName}
+      />
+    </div>
+  ) : (
+    <Dropdown
+      trigger="click"
+      placement="bottomLeft"
+      rootClassName={formatClassname(['user-dropdown-layout', appName])}
+      menu={{
+        items: [
+          {
+            label: (
+              <>
+                <div className="drop-header">
+                  <h4>{user?.company?.name || ''}</h4>
+                  <p>{user?.firstName || ''} {user?.lastName || ''}</p>
+                </div>
+                <div className='list'>
+                  {user.company && !isDemoEnv && canViewUsers && !isAdmin ?
+                    <div className='list-item' onClick={() => {
+                      changeNotificationState({ onYes: () => navigate?.(`/app/users`) });
+                    }}>
+                      {t('Users')}
+                    </div>
+                    : null}
+
+                  {canViewSettings && !isAppNavigation && !isAdmin ? (
+                    <div className='list-item' onClick={() => {
+                      changeNotificationState({ onYes: () => navigate?.(`/app/view/settings`) });
+                    }}>
+                      {t('Settings')}
+                    </div>
+                  ) : null}
+
+                  <div className='list-item' onClick={() => {
+                    changeNotificationState({ onYes: () => logOut() });
+                  }}>
+                    {t('Log out')}
+                  </div>
+                </div>
+              </>
+            ),
+            key: 'userMenu'
+          }
+        ]
+      }}
+    >
+      <div className="d-flex flex-column justify-content-center">
+        <UserIcon companyLogo={companyLogo} />
+      </div>
+    </Dropdown>
+  );
+};