QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 21:30:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(Sidebar): Refactoring sidebar menu with feature and permissions abilities control.

Browse Source
This commit is contained in:
a.bouhuolia
2022-04-17 05:05:35 +02:00
parent 682b296f7c
commit 944bc29f4d
25 changed files with 1187 additions and 1031 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Dashboard/Dashboard.js
View File

@@ -3,7 +3,7 @@ import { Switch, Route } from 'react-router';
import 'style/pages/Dashboard/Dashboard.scss';
import Sidebar from 'components/Sidebar/Sidebar';
import { Sidebar } from 'containers/Dashboard/Sidebar/Sidebar';
import DashboardContent from 'components/Dashboard/DashboardContent';
import DialogsContainer from 'components/DialogsContainer';
import PreferencesPage from 'components/Preferences/PreferencesPage';

2
src/components/MenuItem.js
View File

@@ -104,7 +104,7 @@ import {
// textClassName?: string;
// }
export default class MenuItem extends AbstractPureComponent2 {
export class MenuItem extends AbstractPureComponent2 {
static get defaultProps() {
return {
disabled: false,

37
src/components/Sidebar/Sidebar.js
View File

@@ -1,37 +0,0 @@
import React from 'react';
import SidebarContainer from 'components/Sidebar/SidebarContainer';
import SidebarHead from 'components/Sidebar/SidebarHead';
import SidebarMenu from 'components/Sidebar/SidebarMenu';
import { useGetSidebarMenu } from './utils';
import 'style/containers/Dashboard/Sidebar.scss';
export default function Sidebar({ dashboardContentRef }) {
const menu = useGetSidebarMenu();
return (
<SidebarContainer>
<SidebarHead />
<div className="sidebar__menu">
<SidebarMenu menu={menu} />
</div>
<SidebarFooterVersion />
</SidebarContainer>
);
}
/**
* Sidebar footer version.
* @returns {React.JSX}
*/
function SidebarFooterVersion() {
const { VERSION } = process.env;
if (!VERSION) {
return null;
}
return <div class="sidebar__version">v{VERSION}</div>;
}

76
src/components/Sidebar/SidebarContainer.js
View File

@@ -1,76 +0,0 @@
import React, { useEffect } from 'react';
import { Scrollbar } from 'react-scrollbars-custom';
import classNames from 'classnames';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withDashboard from 'containers/Dashboard/withDashboard';
import { compose } from 'utils';
import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
function SidebarContainer({
// #ownProps
children,
// #withDashboardActions
toggleSidebarExpend,
// #withDashboard
sidebarExpended,
// #withSubscription
isSubscriptionActive,
}) {
const sidebarScrollerRef = React.useRef();
useEffect(() => {
document.body.classList.toggle('has-mini-sidebar', !sidebarExpended);
if (!sidebarExpended && sidebarScrollerRef.current) {
sidebarScrollerRef.current.scrollTo({
top: 0,
left: 0,
});
}
}, [sidebarExpended]);
const handleSidebarMouseLeave = () => {
if (!sidebarExpended && sidebarScrollerRef.current) {
sidebarScrollerRef.current.scrollTo({ top: 0, left: 0 });
}
};
const scrollerElementRef = (ref) => {
sidebarScrollerRef.current = ref;
};
return (
<div
className={classNames('sidebar', {
'sidebar--mini-sidebar': !sidebarExpended,
'is-subscription-inactive': !isSubscriptionActive,
})}
id="sidebar"
onMouseLeave={handleSidebarMouseLeave}
>
<div className={'sidebar__scroll-wrapper'}>
<Scrollbar
noDefaultStyles={true}
scrollerProps={{ elementRef: scrollerElementRef }}
>
<div className="sidebar__inner">{children}</div>
</Scrollbar>
</div>
</div>
);
}
export default compose(
withDashboardActions,
withDashboard(({ sidebarExpended }) => ({
sidebarExpended,
})),
withSubscriptions(
({ isSubscriptionActive }) => ({ isSubscriptionActive }),
'main',
),
)(SidebarContainer);

66
src/components/Sidebar/SidebarHead.js
View File

@@ -1,66 +0,0 @@
import React from 'react';
import { Button, Popover, Menu, Position } from '@blueprintjs/core';
import Icon from 'components/Icon';
import { compose, firstLettersArgs } from 'utils';
import withCurrentOrganization from '../../containers/Organization/withCurrentOrganization';
import { useAuthenticatedAccount } from '../../hooks/query';
// Popover modifiers.
const POPOVER_MODIFIERS = {
offset: { offset: '28, 8' },
};
/**
* Sideabr head.
*/
function SidebarHead({
// #withCurrentOrganization
organization,
}) {
// Retrieve authenticated user information.
const { data: user } = useAuthenticatedAccount();
return (
<div className="sidebar__head">
<div className="sidebar__head-organization">
<Popover
modifiers={POPOVER_MODIFIERS}
boundary={'window'}
content={
<Menu className={'menu--dashboard-organization'}>
<div class="org-item">
<div class="org-item__logo">
{firstLettersArgs(...(organization.name || '').split(' '))}{' '}
</div>
<div class="org-item__name">{organization.name}</div>
</div>
</Menu>
}
position={Position.BOTTOM}
minimal={true}
>
<Button
className="title"
rightIcon={<Icon icon={'caret-down-16'} size={16} />}
>
{organization.name}
</Button>
</Popover>
<span class="subtitle">{user.full_name}</span>
</div>
<div className="sidebar__head-logo">
<Icon
icon={'mini-bigcapital'}
width={28}
height={28}
className="bigcapital--alt"
/>
</div>
</div>
);
}
export default compose(
withCurrentOrganization(({ organization }) => ({ organization })),
)(SidebarHead);

123
src/components/Sidebar/SidebarMenu.js
View File

@@ -1,123 +0,0 @@
import React from 'react';
import { Menu, MenuDivider } from '@blueprintjs/core';
import { useHistory, useLocation } from 'react-router-dom';
import { Choose } from 'components';
import Icon from 'components/Icon';
import MenuItem from 'components/MenuItem';
import { MenuItemLabel } from 'components';
import classNames from 'classnames';
import SidebarOverlay from 'components/SidebarOverlay';
import { compose } from 'redux';
import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
const DEFAULT_ITEM = {
text: '',
href: '',
};
function matchPath(pathname, path, matchExact) {
return matchExact ? pathname === path : pathname.indexOf(path) !== -1;
}
function SidebarMenuItemSpace({ space }) {
return <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />;
}
function SidebarMenu({ menu, isSubscriptionActive }) {
const history = useHistory();
const location = useLocation();
const [isOpen, setIsOpen] = React.useState(false);
const [currentItem, setCurrentItem] = React.useState(null);
const menuItemsMapper = (list) => {
return list.map((item, index) => {
const hasChildren = Array.isArray(item.children);
const isActive =
(item.children
? item.children.some((c) =>
matchPath(location.pathname, c.href, item.matchExact),
)
: item.href &&
matchPath(location.pathname, item.href, item.matchExact)) ||
currentItem === item;
const handleItemClick = () => {
if (item.href) {
history.push(item.href);
}
if (item.children && item.children.length > 0) {
setIsOpen(true);
setCurrentItem(item);
} else {
setIsOpen(false);
}
};
return (
<Choose>
<Choose.When condition={item.spacer}>
<SidebarMenuItemSpace space={item.spacer} />
</Choose.When>
<Choose.When condition={item.divider}>
<MenuDivider key={index} title={item.title} />
</Choose.When>
<Choose.When condition={item.label}>
<MenuItemLabel key={index} text={item.text} />
</Choose.When>
<Choose.Otherwise>
<MenuItem
key={index}
active={isActive}
icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
text={item.text}
disabled={item.disabled}
dropdownType={item.dropdownType || 'collapse'}
caretIconSize={16}
onClick={handleItemClick}
callapseActive={!!isActive}
itemClassName={classNames({
'is-active': isActive,
'has-icon': !hasChildren && item.icon,
})}
hasSubmenu={hasChildren}
/>
</Choose.Otherwise>
</Choose>
);
});
};
const filterItems = menu.filter(
(item) => isSubscriptionActive || item.enableBilling,
);
const items = menuItemsMapper(filterItems);
const handleSidebarOverlayClose = () => {
setIsOpen(false);
};
return (
<div>
<Menu className="sidebar-menu">{items}</Menu>{' '}
<SidebarOverlay
isOpen={isOpen}
label={currentItem?.text || ''}
items={currentItem?.children || []}
onClose={handleSidebarOverlayClose}
/>
</div>
);
}
export default compose(
withSubscriptions(
({ isSubscriptionActive }) => ({ isSubscriptionActive }),
'main',
),
)(SidebarMenu);

48
src/components/Sidebar/utils.js
View File

@@ -1,48 +0,0 @@
import sidebarMenuList from 'config/sidebarMenu';
import { isArray, isEmpty } from 'lodash';
import { useAbilityContext } from 'hooks/utils';
export function useGetSidebarMenu() {
const ability = useAbilityContext();
return sidebarMenuList
.map((item) => {
const children = isArray(item.children)
? item.children.filter((childItem) => {
return isArray(childItem.permission)
? childItem.permission.some((perm) =>
ability.can(perm.ability, perm.subject),
)
: childItem?.permission?.ability && childItem?.permission?.subject
? ability.can(
childItem.permission.ability,
childItem.permission.subject,
)
: true;
})
: [];
return {
...item,
...(isArray(item.children)
? {
children,
}
: {}),
};
})
.filter((item) => {
return isArray(item.permission)
? item.permission.some((per) =>
ability.can(per.ability, per.subject),
)
: item?.permission?.ability && item?.permission?.subject
? ability.can(item.permission.ability, item.permission.subject)
: true;
})
.filter((item) =>
isEmpty(item.children) && !item.href && !item.label && !item.divider
? false
: true,
);
}

19
src/components/SidebarOverlay/SidebarOverlayContainer.tsx
View File

@@ -1,19 +0,0 @@
import React from 'react';
import { Scrollbar } from 'react-scrollbars-custom';
interface ISidebarOverlayContainerProps {
children: JSX.Element | JSX.Element[],
}
/**
* Sidebar overlay container.
*/
export default function SidebarOverlayContainer({ children }: ISidebarOverlayContainerProps) {
return (
<div className={'sidebar-overlay__scroll-wrapper'}>
<Scrollbar noDefaultStyles={true}>
<div className="sidebar-overlay__inner">{children}</div>
</Scrollbar>
</div>
);
}

146
src/components/SidebarOverlay/index.tsx
View File

@@ -1,146 +0,0 @@
import React from 'react';
import { Overlay } from '@blueprintjs/core';
import { Link } from 'react-router-dom';
import SidebarOverlayContainer from './SidebarOverlayContainer';
interface ISidebarOverlayItem {
text: string;
href: string;
divider?: boolean;
label?: boolean;
}
interface ISidebarOverlayProps {
isOpen: boolean;
items: ISidebarOverlayItem[];
label: string;
onClose: Function;
}
interface ISidebarOverlayItemProps {
text: string;
href: string;
onLinkClick: Function;
}
interface ISidebarOverlayItemDivider {
divider: boolean;
}
/**
* Sidebar overlay item.
*/
function SidebarOverlayItem({
text,
href,
onLinkClick,
}: ISidebarOverlayItemProps) {
const handleLinkClick = () => {
onLinkClick && onLinkClick();
};
return (
<div className="sidebar-overlay__item">
<Link onClick={handleLinkClick} to={href}>
{text}
</Link>
</div>
);
}
interface ISidebarOverlayItemLabel {
text: string;
}
function SidebarOverlayLabel({ text }: ISidebarOverlayItemLabel) {
return <div className="sidebar-overlay__label">{text}</div>;
}
function SidebarOverlayDivider() {
return <div className={'sidebar-overlay__divider'}></div>;
}
/**
* Sidebar overlay component.
*/
export default function SidebarOverlay({
label,
isOpen: controllerdIsOpen,
onClose,
items,
}: ISidebarOverlayProps) {
const [isEverOpened, setEverOpened] = React.useState(false);
const [isOpen, setIsOpen] = React.useState(controllerdIsOpen);
React.useEffect(() => {
if (
typeof controllerdIsOpen !== 'undefined' &&
isOpen !== controllerdIsOpen
) {
setIsOpen(controllerdIsOpen);
}
}, [controllerdIsOpen, setIsOpen, isOpen]);
React.useEffect(() => {
if (isOpen && !isEverOpened) {
setEverOpened(true);
}
}, [isEverOpened, isOpen]);
if (!isEverOpened) {
return '';
}
// Handle overlay close event.
const handleOverlayClose = () => {
setIsOpen(false);
onClose && onClose();
};
// Handle overlay open event.
const handleOverlayOpen = () => {
setIsOpen(true);
};
// Handle sidebar item link click.
const handleItemClick = () => {
setIsOpen(false);
onClose && onClose();
};
return (
<Overlay
isOpen={isOpen}
portalContainer={
(document.querySelector('.Pane.vertical.Pane2') as HTMLElement) ||
document.body
}
onClose={handleOverlayClose}
onOpening={handleOverlayOpen}
transitionDuration={100}
backdropClassName={'sidebar-overlay-backdrop'}
>
<div className="sidebar-overlay sidebar-overlay-transition">
<SidebarOverlayContainer>
<div className="sidebar-overlay__menu">
{label && (
<>
<SidebarOverlayLabel text={label} />
<SidebarOverlayDivider />
</>
)}
{items.map((item) =>
item.divider ? (
<SidebarOverlayDivider />
) : item.label ? (
<SidebarOverlayLabel text={item.text} />
) : (
<SidebarOverlayItem
onLinkClick={handleItemClick}
text={item.text}
href={item.href}
/>
),
)}
</div>
</SidebarOverlayContainer>
</div>
</Overlay>
);
}

1
src/components/index.js
View File

@@ -106,6 +106,7 @@ export * from './Paper';
export * from './Accounts';
export * from './DataTableCells';
export * from './FlexGrid';
export * from './MenuItem';
const Hint = FieldHint;