@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/nav/Header.tsx

@@ -1,226 +0,0 @@
-import {
-  ActionIcon,
-  Container,
-  Group,
-  Indicator,
-  Tabs,
-  Text,
-  Tooltip
-} from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { IconBell, IconSearch } from '@tabler/icons-react';
-import { useQuery } from '@tanstack/react-query';
-import { type ReactNode, useEffect, useMemo, useState } from 'react';
-import { useMatch, useNavigate } from 'react-router-dom';
-
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import { apiUrl } from '@lib/functions/Api';
-import { t } from '@lingui/core/macro';
-import { api } from '../../App';
-import { getNavTabs } from '../../defaults/links';
-import { navigateToLink } from '../../functions/navigation';
-import * as classes from '../../main.css';
-import { useServerApiState } from '../../states/ApiState';
-import { useLocalState } from '../../states/LocalState';
-import {
-  useGlobalSettingsState,
-  useUserSettingsState
-} from '../../states/SettingsState';
-import { useUserState } from '../../states/UserState';
-import { ScanButton } from '../buttons/ScanButton';
-import { SpotlightButton } from '../buttons/SpotlightButton';
-import { Alerts } from './Alerts';
-import { MainMenu } from './MainMenu';
-import { NavHoverMenu } from './NavHoverMenu';
-import { NavigationDrawer } from './NavigationDrawer';
-import { NotificationDrawer } from './NotificationDrawer';
-import { SearchDrawer } from './SearchDrawer';
-
-export function Header() {
-  const [setNavigationOpen, navigationOpen] = useLocalState((state) => [
-    state.setNavigationOpen,
-    state.navigationOpen
-  ]);
-  const [server] = useServerApiState((state) => [state.server]);
-  const [navDrawerOpened, { open: openNavDrawer, close: closeNavDrawer }] =
-    useDisclosure(navigationOpen);
-  const [
-    searchDrawerOpened,
-    { open: openSearchDrawer, close: closeSearchDrawer }
-  ] = useDisclosure(false);
-
-  const [
-    notificationDrawerOpened,
-    { open: openNotificationDrawer, close: closeNotificationDrawer }
-  ] = useDisclosure(false);
-
-  const { isLoggedIn } = useUserState();
-  const [notificationCount, setNotificationCount] = useState<number>(0);
-  const globalSettings = useGlobalSettingsState();
-
-  const navbar_message = useMemo(() => {
-    return server.customize?.navbar_message;
-  }, [server.customize]);
-
-  // Fetch number of notifications for the current user
-  const notifications = useQuery({
-    queryKey: ['notification-count'],
-    enabled: isLoggedIn(),
-    queryFn: async () => {
-      if (!isLoggedIn()) {
-        return null;
-      }
-
-      try {
-        const params = {
-          params: {
-            read: false,
-            limit: 1
-          }
-        };
-        const response = await api
-          .get(apiUrl(ApiEndpoints.notifications_list), params)
-          .catch(() => {
-            return null;
-          });
-        setNotificationCount(response?.data?.count ?? 0);
-        return response?.data ?? null;
-      } catch (error) {
-        return null;
-      }
-    },
-    refetchInterval: 30000,
-    refetchOnMount: true
-  });
-
-  // Sync Navigation Drawer state with zustand
-  useEffect(() => {
-    if (navigationOpen === navDrawerOpened) return;
-    setNavigationOpen(navDrawerOpened);
-  }, [navDrawerOpened]);
-
-  useEffect(() => {
-    if (navigationOpen === navDrawerOpened) return;
-    if (navigationOpen) openNavDrawer();
-    else closeNavDrawer();
-  }, [navigationOpen]);
-
-  return (
-    <div className={classes.layoutHeader}>
-      <SearchDrawer opened={searchDrawerOpened} onClose={closeSearchDrawer} />
-      <NavigationDrawer opened={navDrawerOpened} close={closeNavDrawer} />
-      <NotificationDrawer
-        opened={notificationDrawerOpened}
-        onClose={() => {
-          notifications.refetch();
-          closeNotificationDrawer();
-        }}
-      />
-      <Container className={classes.layoutHeaderSection} size='100%'>
-        <Group justify='space-between'>
-          <Group>
-            <NavHoverMenu openDrawer={openNavDrawer} />
-            <NavTabs />
-          </Group>
-          {navbar_message && (
-            <Text>
-              {/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */}
-              <span dangerouslySetInnerHTML={{ __html: navbar_message }} />
-            </Text>
-          )}
-          <Group>
-            <Tooltip position='bottom-end' label={t`Search`}>
-              <ActionIcon
-                onClick={openSearchDrawer}
-                variant='transparent'
-                aria-label='open-search'
-              >
-                <IconSearch />
-              </ActionIcon>
-            </Tooltip>
-            <SpotlightButton />
-            {globalSettings.isSet('BARCODE_ENABLE') && <ScanButton />}
-            <Indicator
-              radius='lg'
-              size='18'
-              label={notificationCount}
-              color='red'
-              disabled={notificationCount <= 0}
-              inline
-            >
-              <Tooltip position='bottom-end' label={t`Notifications`}>
-                <ActionIcon
-                  onClick={openNotificationDrawer}
-                  variant='transparent'
-                  aria-label='open-notifications'
-                >
-                  <IconBell />
-                </ActionIcon>
-              </Tooltip>
-            </Indicator>
-            <Alerts />
-            <MainMenu />
-          </Group>
-        </Group>
-      </Container>
-    </div>
-  );
-}
-
-function NavTabs() {
-  const user = useUserState();
-  const navigate = useNavigate();
-  const match = useMatch(':tabName/*');
-  const tabValue = match?.params.tabName;
-  const navTabs = getNavTabs(user);
-  const userSettings = useUserSettingsState();
-
-  const withIcons: boolean = useMemo(
-    () => userSettings.isSet('ICONS_IN_NAVBAR', false),
-    [userSettings]
-  );
-
-  const tabs: ReactNode[] = useMemo(() => {
-    const _tabs: ReactNode[] = [];
-
-    navTabs.forEach((tab) => {
-      if (tab.role && !user.hasViewRole(tab.role)) {
-        return;
-      }
-
-      _tabs.push(
-        <Tabs.Tab
-          value={tab.name}
-          key={tab.name}
-          leftSection={
-            withIcons &&
-            tab.icon && (
-              <ActionIcon variant='transparent'>{tab.icon}</ActionIcon>
-            )
-          }
-          onClick={(event: any) =>
-            navigateToLink(`/${tab.name}`, navigate, event)
-          }
-        >
-          {tab.title}
-        </Tabs.Tab>
-      );
-    });
-
-    return _tabs;
-  }, [navTabs, user, withIcons]);
-
-  return (
-    <Tabs
-      defaultValue='home'
-      classNames={{
-        root: classes.tabs,
-        list: classes.tabsList,
-        tab: classes.tab
-      }}
-      value={tabValue}
-    >
-      <Tabs.List>{tabs.map((tab) => tab)}</Tabs.List>
-    </Tabs>
-  );
-}

package/src/components/nav/InstanceDetail.tsx

@@ -1,46 +0,0 @@
-import { LoadingOverlay } from '@mantine/core';
-
-import type { ModelType } from '@lib/enums/ModelType';
-import type { UserRoles } from '@lib/enums/Roles';
-import { useUserState } from '../../states/UserState';
-import ClientError from '../errors/ClientError';
-import PermissionDenied from '../errors/PermissionDenied';
-import ServerError from '../errors/ServerError';
-
-export default function InstanceDetail({
-  status,
-  loading,
-  children,
-  requiredRole,
-  requiredPermission
-}: Readonly<{
-  status: number;
-  loading: boolean;
-  children: React.ReactNode;
-  requiredRole?: UserRoles;
-  requiredPermission?: ModelType;
-}>) {
-  const user = useUserState();
-
-  if (loading || !user.isLoggedIn()) {
-    return <LoadingOverlay />;
-  }
-
-  if (status >= 500) {
-    return <ServerError status={status} />;
-  }
-
-  if (status >= 400) {
-    return <ClientError status={status} />;
-  }
-
-  if (requiredRole && !user.hasViewRole(requiredRole)) {
-    return <PermissionDenied />;
-  }
-
-  if (requiredPermission && !user.hasViewPermission(requiredPermission)) {
-    return <PermissionDenied />;
-  }
-
-  return <>{children}</>;
-}

package/src/components/nav/Layout.tsx

@@ -1,85 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Container, Flex, Space } from '@mantine/core';
-import { Spotlight, createSpotlight } from '@mantine/spotlight';
-import { IconSearch } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
-import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
-
-import { getActions } from '../../defaults/actions';
-import * as classes from '../../main.css';
-import { useUserState } from '../../states/UserState';
-import { Boundary } from '../Boundary';
-import { Footer } from './Footer';
-import { Header } from './Header';
-
-export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
-  const location = useLocation();
-  const { isLoggedIn } = useUserState();
-
-  if (!isLoggedIn()) {
-    return (
-      <Navigate
-        to='/logged-in'
-        state={{
-          redirectUrl: location.pathname,
-          queryParams: location.search,
-          anchor: location.hash
-        }}
-      />
-    );
-  }
-
-  return children;
-};
-
-export const [firstStore, firstSpotlight] = createSpotlight();
-
-export default function LayoutComponent() {
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const defaultActions = getActions(navigate);
-  const [actions, setActions] = useState(defaultActions);
-  const [customActions, setCustomActions] = useState<boolean>(false);
-
-  function actionsAreChanging(change: []) {
-    if (change.length > defaultActions.length) setCustomActions(true);
-    setActions(change);
-  }
-  // firstStore.subscribe(actionsAreChanging);
-
-  // clear additional actions on location change
-  useEffect(() => {
-    if (customActions) {
-      setActions(defaultActions);
-      setCustomActions(false);
-    }
-  }, [location]);
-
-  return (
-    <ProtectedRoute>
-      <Flex direction='column' mih='100vh'>
-        <Header />
-        <Container className={classes.layoutContent} size='100%'>
-          <Boundary label={'layout'}>
-            <Outlet />
-          </Boundary>
-          {/* </ErrorBoundary> */}
-        </Container>
-        <Space h='xl' />
-        <Footer />
-        <Spotlight
-          actions={actions}
-          store={firstStore}
-          highlightQuery
-          searchProps={{
-            leftSection: <IconSearch size='1.2rem' />,
-            placeholder: t`Search...`
-          }}
-          shortcut={['mod + K', '/']}
-          nothingFound={t`Nothing found...`}
-        />
-      </Flex>
-    </ProtectedRoute>
-  );
-}

package/src/components/nav/MainMenu.tsx

@@ -1,101 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import {
-  Group,
-  Menu,
-  Skeleton,
-  Text,
-  UnstyledButton,
-  useMantineColorScheme
-} from '@mantine/core';
-import {
-  IconChevronDown,
-  IconLogout,
-  IconMoonStars,
-  IconSettings,
-  IconSun,
-  IconUserBolt,
-  IconUserCog
-} from '@tabler/icons-react';
-import { Link, useNavigate } from 'react-router-dom';
-
-import { doLogout } from '../../functions/auth';
-import * as classes from '../../main.css';
-import { useUserState } from '../../states/UserState';
-import { vars } from '../../theme';
-
-export function MainMenu() {
-  const navigate = useNavigate();
-  const [user, username] = useUserState((state) => [
-    state.user,
-    state.username
-  ]);
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-
-  return (
-    <Menu width={260} position='bottom-end'>
-      <Menu.Target>
-        <UnstyledButton className={classes.layoutHeaderUser}>
-          <Group gap={7}>
-            {username() ? (
-              <Text fw={500} size='sm' style={{ lineHeight: 1 }} mr={3}>
-                {username()}
-              </Text>
-            ) : (
-              <Skeleton height={20} width={40} radius={vars.radiusDefault} />
-            )}
-            <IconChevronDown />
-          </Group>
-        </UnstyledButton>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <Menu.Label>
-          <Trans>Settings</Trans>
-        </Menu.Label>
-        <Menu.Item
-          leftSection={<IconUserCog />}
-          component={Link}
-          to='/settings/user'
-        >
-          <Trans>Account Settings</Trans>
-        </Menu.Item>
-        {user?.is_staff && (
-          <Menu.Item
-            leftSection={<IconSettings />}
-            component={Link}
-            to='/settings/system'
-          >
-            <Trans>System Settings</Trans>
-          </Menu.Item>
-        )}
-        <Menu.Item
-          onClick={toggleColorScheme}
-          leftSection={colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />}
-          c={
-            colorScheme === 'dark' ? vars.colors.yellow[4] : vars.colors.blue[6]
-          }
-        >
-          <Trans>Change Color Mode</Trans>
-        </Menu.Item>
-        {user?.is_staff && <Menu.Divider />}
-        {user?.is_staff && (
-          <Menu.Item
-            leftSection={<IconUserBolt />}
-            component={Link}
-            to='/settings/admin'
-          >
-            <Trans>Admin Center</Trans>
-          </Menu.Item>
-        )}
-        <Menu.Divider />
-        <Menu.Item
-          leftSection={<IconLogout />}
-          onClick={() => {
-            doLogout(navigate);
-          }}
-        >
-          <Trans>Logout</Trans>
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
-  );
-}

package/src/components/nav/NavHoverMenu.tsx

@@ -1,15 +0,0 @@
-import { UnstyledButton } from '@mantine/core';
-
-import { InvenTreeLogo } from '../items/InvenTreeLogo';
-
-export function NavHoverMenu({
-  openDrawer
-}: Readonly<{
-  openDrawer: () => void;
-}>) {
-  return (
-    <UnstyledButton onClick={() => openDrawer()} aria-label='navigation-menu'>
-      <InvenTreeLogo />
-    </UnstyledButton>
-  );
-}

package/src/components/nav/NavigationDrawer.tsx

@@ -1,230 +0,0 @@
-import { t } from '@lingui/core/macro';
-import {
-  Container,
-  Drawer,
-  Flex,
-  Group,
-  ScrollArea,
-  Space
-} from '@mantine/core';
-import { useViewportSize } from '@mantine/hooks';
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import { ModelType } from '@lib/enums/ModelType';
-import { UserRoles } from '@lib/enums/Roles';
-import { AboutLinks, DocumentationLinks } from '../../defaults/links';
-import useInstanceName from '../../hooks/UseInstanceName';
-import * as classes from '../../main.css';
-import { useGlobalSettingsState } from '../../states/SettingsState';
-import { useUserState } from '../../states/UserState';
-import { InvenTreeLogo } from '../items/InvenTreeLogo';
-import { type MenuLinkItem, MenuLinks } from '../items/MenuLinks';
-import { StylishText } from '../items/StylishText';
-
-// TODO @matmair #1: implement plugin loading and menu item generation see #5269
-const plugins: MenuLinkItem[] = [];
-
-export function NavigationDrawer({
-  opened,
-  close
-}: Readonly<{
-  opened: boolean;
-  close: () => void;
-}>) {
-  return (
-    <Drawer
-      opened={opened}
-      onClose={close}
-      size='lg'
-      withCloseButton={false}
-      classNames={{
-        body: classes.navigationDrawer
-      }}
-    >
-      <DrawerContent closeFunc={close} />
-    </Drawer>
-  );
-}
-
-function DrawerContent({ closeFunc }: Readonly<{ closeFunc?: () => void }>) {
-  const user = useUserState();
-
-  const globalSettings = useGlobalSettingsState();
-
-  const [scrollHeight, setScrollHeight] = useState(0);
-  const ref = useRef(null);
-  const { height } = useViewportSize();
-
-  const title = useInstanceName();
-
-  // update scroll height when viewport size changes
-  useEffect(() => {
-    if (ref.current == null) return;
-    setScrollHeight(height - ref.current['clientHeight'] - 65);
-  });
-
-  // Construct menu items
-  const menuItemsNavigate: MenuLinkItem[] = useMemo(() => {
-    return [
-      {
-        id: 'home',
-        title: t`Dashboard`,
-        link: '/',
-        icon: 'dashboard'
-      },
-      {
-        id: 'parts',
-        title: t`Parts`,
-        hidden: !user.hasViewPermission(ModelType.part),
-        link: '/part',
-        icon: 'part'
-      },
-      {
-        id: 'stock',
-        title: t`Stock`,
-        link: '/stock',
-        hidden: !user.hasViewPermission(ModelType.stockitem),
-        icon: 'stock'
-      },
-      {
-        id: 'build',
-        title: t`Manufacturing`,
-        link: '/manufacturing/',
-        hidden: !user.hasViewRole(UserRoles.build),
-        icon: 'build'
-      },
-      {
-        id: 'purchasing',
-        title: t`Purchasing`,
-        link: '/purchasing/',
-        hidden: !user.hasViewRole(UserRoles.purchase_order),
-        icon: 'purchase_orders'
-      },
-      {
-        id: 'sales',
-        title: t`Sales`,
-        link: '/sales/',
-        hidden: !user.hasViewRole(UserRoles.sales_order),
-        icon: 'sales_orders'
-      },
-      {
-        id: 'users',
-        title: t`Users`,
-        link: '/core/index/users',
-        icon: 'user'
-      },
-      {
-        id: 'groups',
-        title: t`Groups`,
-        link: '/core/index/groups',
-        icon: 'group'
-      }
-    ];
-  }, [user]);
-
-  const menuItemsAction: MenuLinkItem[] = useMemo(() => {
-    return [
-      {
-        id: 'barcode',
-        title: t`Scan Barcode`,
-        link: '/scan',
-        icon: 'barcode',
-        hidden: !globalSettings.isSet('BARCODE_ENABLE')
-      }
-    ];
-  }, [user, globalSettings]);
-
-  const menuItemsSettings: MenuLinkItem[] = useMemo(() => {
-    return [
-      {
-        id: 'notifications',
-        title: t`Notifications`,
-        link: '/notifications',
-        icon: 'notification'
-      },
-      {
-        id: 'user-settings',
-        title: t`User Settings`,
-        link: '/settings/user',
-        icon: 'user'
-      },
-      {
-        id: 'system-settings',
-        title: t`System Settings`,
-        link: '/settings/system',
-        icon: 'system',
-        hidden: !user.isStaff()
-      },
-      {
-        id: 'admin-center',
-        title: t`Admin Center`,
-        link: '/settings/admin',
-        icon: 'admin',
-        hidden: !user.isStaff()
-      }
-    ];
-  }, [user]);
-
-  const menuItemsDocumentation: MenuLinkItem[] = useMemo(
-    () => DocumentationLinks(),
-    []
-  );
-
-  const menuItemsAbout: MenuLinkItem[] = useMemo(
-    () => AboutLinks(globalSettings, user),
-    []
-  );
-
-  return (
-    <Flex direction='column' mih='100vh' p={16}>
-      <Group wrap='nowrap'>
-        <InvenTreeLogo />
-        <StylishText size='xl'>{title}</StylishText>
-      </Group>
-      <Space h='xs' />
-      <Container className={classes.layoutContent} p={0}>
-        <ScrollArea h={scrollHeight} type='always' offsetScrollbars>
-          <MenuLinks
-            title={t`Navigation`}
-            links={menuItemsNavigate}
-            beforeClick={closeFunc}
-          />
-          <MenuLinks
-            title={t`Settings`}
-            links={menuItemsSettings}
-            beforeClick={closeFunc}
-          />
-          <MenuLinks
-            title={t`Actions`}
-            links={menuItemsAction}
-            beforeClick={closeFunc}
-          />
-          <Space h='md' />
-          {plugins.length > 0 ? (
-            <MenuLinks
-              title={t`Plugins`}
-              links={plugins}
-              beforeClick={closeFunc}
-            />
-          ) : (
-            <></>
-          )}
-        </ScrollArea>
-      </Container>
-      <div ref={ref}>
-        <Space h='md' />
-        <MenuLinks
-          title={t`Documentation`}
-          links={menuItemsDocumentation}
-          beforeClick={closeFunc}
-        />
-        <Space h='md' />
-        <MenuLinks
-          title={t`About`}
-          links={menuItemsAbout}
-          beforeClick={closeFunc}
-        />
-      </div>
-    </Flex>
-  );
-}