@inventreedb/ui 0.0.1 → 0.0.2

package/src/components/nav/NavigationTree.tsx

@@ -1,210 +0,0 @@
-import {
-  ActionIcon,
-  Anchor,
-  Divider,
-  Drawer,
-  Group,
-  LoadingOverlay,
-  type RenderTreeNodePayload,
-  Space,
-  Stack,
-  Tree,
-  type TreeNodeData,
-  useTree
-} from '@mantine/core';
-import {
-  IconChevronDown,
-  IconChevronRight,
-  IconSitemap
-} from '@tabler/icons-react';
-import { useQuery } from '@tanstack/react-query';
-import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import type { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import type { ModelType } from '@lib/enums/ModelType';
-import { apiUrl } from '@lib/functions/Api';
-import { useApi } from '../../contexts/ApiContext';
-import { navigateToLink } from '../../functions/navigation';
-import { getDetailUrl } from '../../functions/urls';
-import { ApiIcon } from '../items/ApiIcon';
-import { StylishText } from '../items/StylishText';
-
-/*
- * A generic navigation tree component.
- */
-export default function NavigationTree({
-  title,
-  opened,
-  onClose,
-  selectedId,
-  modelType,
-  endpoint
-}: Readonly<{
-  title: string;
-  opened: boolean;
-  onClose: () => void;
-  selectedId?: number | null;
-  modelType: ModelType;
-  endpoint: ApiEndpoints;
-}>) {
-  const api = useApi();
-  const navigate = useNavigate();
-  const treeState = useTree();
-
-  // Data query to fetch the tree data from server
-  const query = useQuery({
-    enabled: opened,
-    queryKey: [modelType, opened],
-    queryFn: async () =>
-      api
-        .get(apiUrl(endpoint), {
-          data: {
-            ordering: 'level'
-          }
-        })
-        .then((response) => response.data ?? [])
-        .catch((error) => {
-          console.error(`Error fetching ${modelType} tree`);
-          return [];
-        })
-  });
-
-  const follow = useCallback(
-    (node: TreeNodeData, event?: any) => {
-      const url = getDetailUrl(modelType, node.value);
-      if (event?.shiftKey || event?.ctrlKey) {
-        navigateToLink(url, navigate, event);
-      } else {
-        onClose();
-        navigate(url);
-      }
-    },
-    [modelType, navigate]
-  );
-
-  // Map returned query to a "tree" structure
-  const data: TreeNodeData[] = useMemo(() => {
-    /*
-     * Reconstruct the navigation tree from the provided data.
-     * It is required (and assumed) that the data is first sorted by level.
-     */
-
-    const nodes: Record<number, any> = {};
-    const tree: TreeNodeData[] = [];
-
-    if (!query?.data?.length) {
-      return [];
-    }
-
-    for (let ii = 0; ii < query.data.length; ii++) {
-      const node = {
-        ...query.data[ii],
-        children: [],
-        label: (
-          <Group gap='xs'>
-            <ApiIcon name={query.data[ii].icon} />
-            {query.data[ii].name}
-          </Group>
-        ),
-        value: query.data[ii].pk.toString(),
-        selected: query.data[ii].pk === selectedId
-      };
-
-      const pk: number = node.pk;
-      const parent: number | null = node.parent;
-
-      if (!parent) {
-        // This is a top level node
-        tree.push(node);
-      } else {
-        // This is *not* a top level node, so the parent *must* already exist
-        nodes[parent]?.children.push(node);
-      }
-
-      // Finally, add this node
-      nodes[pk] = node;
-
-      if (pk === selectedId) {
-        // Expand all parents
-        let parent = nodes[node.parent];
-        while (parent) {
-          parent.expanded = true;
-          parent = nodes[parent.parent];
-        }
-      }
-    }
-
-    return tree;
-  }, [selectedId, query.data]);
-
-  const renderNode = useCallback(
-    (payload: RenderTreeNodePayload) => {
-      return (
-        <Group
-          justify='left'
-          key={payload.node.value}
-          wrap='nowrap'
-          onClick={() => {
-            if (payload.hasChildren) {
-              treeState.toggleExpanded(payload.node.value);
-            }
-          }}
-        >
-          <Space w={5 * payload.level} />
-          <ActionIcon
-            size='sm'
-            variant='transparent'
-            aria-label={`nav-tree-toggle-${payload.node.value}}`}
-          >
-            {payload.hasChildren ? (
-              payload.expanded ? (
-                <IconChevronDown />
-              ) : (
-                <IconChevronRight />
-              )
-            ) : null}
-          </ActionIcon>
-          <Anchor
-            onClick={(event: any) => follow(payload.node, event)}
-            aria-label={`nav-tree-item-${payload.node.value}`}
-            c='var(--mantine-color-text)'
-          >
-            {payload.node.label}
-          </Anchor>
-        </Group>
-      );
-    },
-    [treeState]
-  );
-
-  return (
-    <Drawer
-      opened={opened}
-      size='md'
-      position='left'
-      onClose={onClose}
-      withCloseButton={true}
-      styles={{
-        header: {
-          width: '100%'
-        },
-        title: {
-          width: '100%'
-        }
-      }}
-      title={
-        <Group justify='left' p='ms' gap='md' wrap='nowrap'>
-          <IconSitemap />
-          <StylishText size='lg'>{title}</StylishText>
-        </Group>
-      }
-    >
-      <Stack gap='xs'>
-        <Divider />
-        <LoadingOverlay visible={query.isFetching || query.isLoading} />
-        <Tree data={data} tree={treeState} renderNode={renderNode} />
-      </Stack>
-    </Drawer>
-  );
-}

package/src/components/nav/NotificationDrawer.tsx

@@ -1,231 +0,0 @@
-import { t } from '@lingui/core/macro';
-import {
-  ActionIcon,
-  Alert,
-  Anchor,
-  Center,
-  Divider,
-  Drawer,
-  Group,
-  Loader,
-  Paper,
-  Stack,
-  Text,
-  Tooltip
-} from '@mantine/core';
-import { IconArrowRight, IconBellCheck } from '@tabler/icons-react';
-import { useQuery } from '@tanstack/react-query';
-import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import type { ModelType } from '@lib/enums/ModelType';
-import { apiUrl } from '@lib/functions/Api';
-import { api } from '../../App';
-import { navigateToLink } from '../../functions/navigation';
-import { getDetailUrl } from '../../functions/urls';
-import { getBaseUrl } from '../../main';
-import { useUserState } from '../../states/UserState';
-import { Boundary } from '../Boundary';
-import { StylishText } from '../items/StylishText';
-import { ModelInformationDict } from '../render/ModelType';
-
-/**
- * Render a single notification entry in the drawer
- */
-function NotificationEntry({
-  notification,
-  onRead
-}: Readonly<{
-  notification: any;
-  onRead: () => void;
-}>) {
-  const navigate = useNavigate();
-
-  let link = notification.target?.link;
-
-  const model_type = notification.target?.model_type;
-  const model_id = notification.target?.model_id;
-
-  // If a valid model type is provided, that overrides the specified link
-  if (model_type as ModelType) {
-    const model_info = ModelInformationDict[model_type as ModelType];
-    if (model_info?.url_detail && model_id) {
-      link = getDetailUrl(model_type as ModelType, model_id);
-    } else if (model_info?.url_overview) {
-      link = model_info.url_overview;
-    }
-  }
-
-  return (
-    <Paper p='xs' shadow='xs'>
-      <Group justify='space-between' wrap='nowrap'>
-        <Tooltip
-          label={notification.message}
-          position='bottom-end'
-          hidden={!notification.message}
-        >
-          <Stack gap={2}>
-            <Anchor
-              href={link ? `/${getBaseUrl()}${link}` : '#'}
-              underline='hover'
-              target='_blank'
-              onClick={(event: any) => {
-                if (link) {
-                  // Mark the notification as read
-                  onRead();
-                }
-
-                if (link.startsWith('/')) {
-                  navigateToLink(link, navigate, event);
-                }
-              }}
-            >
-              <Text size='sm'>{notification.name}</Text>
-            </Anchor>
-            <Text size='xs'>{notification.age_human}</Text>
-          </Stack>
-        </Tooltip>
-        <Tooltip label={t`Mark as read`} position='bottom-end'>
-          <ActionIcon variant='transparent' onClick={onRead}>
-            <IconBellCheck />
-          </ActionIcon>
-        </Tooltip>
-      </Group>
-    </Paper>
-  );
-}
-
-/**
- * Construct a notification drawer.
- */
-export function NotificationDrawer({
-  opened,
-  onClose
-}: Readonly<{
-  opened: boolean;
-  onClose: () => void;
-}>) {
-  const { isLoggedIn } = useUserState();
-
-  const navigate = useNavigate();
-
-  const notificationQuery = useQuery({
-    enabled: opened && isLoggedIn(),
-    queryKey: ['notifications', opened],
-    queryFn: async () =>
-      api
-        .get(apiUrl(ApiEndpoints.notifications_list), {
-          params: {
-            read: false,
-            limit: 10,
-            ordering: '-creation'
-          }
-        })
-        .then((response) => response.data)
-        .catch((error) => {
-          return error;
-        }),
-    refetchOnMount: false
-  });
-
-  const hasNotifications: boolean = useMemo(() => {
-    return (notificationQuery.data?.results?.length ?? 0) > 0;
-  }, [notificationQuery.data]);
-
-  const markAllAsRead = useCallback(() => {
-    api
-      .get(apiUrl(ApiEndpoints.notifications_readall), {
-        params: {
-          read: false
-        }
-      })
-      .catch((_error) => {})
-      .then((_response) => {
-        notificationQuery.refetch();
-      });
-  }, []);
-
-  const markAsRead = useCallback((notification: any) => {
-    api
-      .patch(apiUrl(ApiEndpoints.notifications_list, notification.pk), {
-        read: true
-      })
-      .then(() => {
-        notificationQuery.refetch();
-      })
-      .catch(() => {
-        notificationQuery.refetch();
-      });
-  }, []);
-
-  return (
-    <Drawer
-      opened={opened}
-      size='md'
-      position='right'
-      onClose={onClose}
-      withCloseButton={false}
-      styles={{
-        header: {
-          width: '100%'
-        },
-        title: {
-          width: '100%'
-        }
-      }}
-      title={
-        <Group justify='space-between' wrap='nowrap'>
-          <StylishText size='lg'>{t`Notifications`}</StylishText>
-          <Group justify='end' wrap='nowrap'>
-            <Tooltip label={t`Mark all as read`}>
-              <ActionIcon
-                variant='transparent'
-                onClick={() => {
-                  markAllAsRead();
-                }}
-              >
-                <IconBellCheck />
-              </ActionIcon>
-            </Tooltip>
-            <Tooltip label={t`View all notifications`}>
-              <ActionIcon
-                onClick={(event: any) => {
-                  onClose();
-                  navigateToLink('/notifications/unread', navigate, event);
-                }}
-                variant='transparent'
-              >
-                <IconArrowRight />
-              </ActionIcon>
-            </Tooltip>
-          </Group>
-        </Group>
-      }
-    >
-      <Boundary label='NotificationDrawer'>
-        <Stack gap='xs'>
-          <Divider />
-          {!hasNotifications && (
-            <Alert color='green'>
-              <Text size='sm'>{t`You have no unread notifications.`}</Text>
-            </Alert>
-          )}
-          {hasNotifications &&
-            notificationQuery.data?.results?.map((notification: any) => (
-              <NotificationEntry
-                key={`notification-${notification.pk}`}
-                notification={notification}
-                onRead={() => markAsRead(notification)}
-              />
-            ))}
-          {notificationQuery.isFetching && (
-            <Center>
-              <Loader size='sm' />
-            </Center>
-          )}
-        </Stack>
-      </Boundary>
-    </Drawer>
-  );
-}

package/src/components/nav/PageDetail.tsx

@@ -1,171 +0,0 @@
-import { Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import { useHotkeys } from '@mantine/hooks';
-
-import { Fragment, type ReactNode, useMemo } from 'react';
-import { shortenString } from '../../functions/tables';
-import { useUserSettingsState } from '../../states/SettingsState';
-import { ApiImage } from '../images/ApiImage';
-import { StylishText } from '../items/StylishText';
-import { type Breadcrumb, BreadcrumbList } from './BreadcrumbList';
-import PageTitle from './PageTitle';
-
-interface PageDetailInterface {
-  title?: string;
-  icon?: ReactNode;
-  subtitle?: string;
-  imageUrl?: string;
-  detail?: ReactNode;
-  badges?: ReactNode[];
-  breadcrumbs?: Breadcrumb[];
-  lastCrumb?: Breadcrumb[];
-  breadcrumbAction?: () => void;
-  actions?: ReactNode[];
-  editAction?: () => void;
-  editEnabled?: boolean;
-}
-
-/**
- * Construct a "standard" page detail for common display between pages.
- *
- * @param breadcrumbs - The breadcrumbs to display (optional)
- * @param
- */
-export function PageDetail({
-  title,
-  icon,
-  subtitle,
-  detail,
-  badges,
-  imageUrl,
-  breadcrumbs,
-  lastCrumb: last_crumb,
-  breadcrumbAction,
-  actions,
-  editAction,
-  editEnabled
-}: Readonly<PageDetailInterface>) {
-  const userSettings = useUserSettingsState();
-  useHotkeys([
-    [
-      'mod+E',
-      () => {
-        if (editEnabled ?? true) {
-          editAction?.();
-        }
-      }
-    ]
-  ]);
-
-  const pageTitleString = useMemo(
-    () =>
-      shortenString({
-        str: title,
-        len: 50
-      }),
-    [title]
-  );
-
-  const description = useMemo(
-    () =>
-      shortenString({
-        str: subtitle,
-        len: 75
-      }),
-    [subtitle]
-  );
-
-  const maxCols = useMemo(() => {
-    let cols = 1;
-
-    if (!!detail) {
-      cols++;
-    }
-
-    if (!!badges) {
-      cols++;
-    }
-
-    return cols;
-  }, [detail, badges]);
-
-  // breadcrumb caching
-  const computedBreadcrumbs = useMemo(() => {
-    if (userSettings.isSet('ENABLE_LAST_BREADCRUMB', false)) {
-      return [...(breadcrumbs ?? []), ...(last_crumb ?? [])];
-    } else {
-      return breadcrumbs;
-    }
-  }, [breadcrumbs, last_crumb, userSettings]);
-
-  return (
-    <>
-      <PageTitle title={pageTitleString} />
-      <Stack gap='xs'>
-        {computedBreadcrumbs && computedBreadcrumbs.length > 0 && (
-          <BreadcrumbList
-            navCallback={breadcrumbAction}
-            breadcrumbs={computedBreadcrumbs}
-          />
-        )}
-        <Paper p='xs' radius='xs' shadow='xs'>
-          <Group
-            justify='space-between'
-            gap='xs'
-            wrap='nowrap'
-            align='flex-start'
-          >
-            <SimpleGrid
-              cols={{
-                base: 1,
-                md: Math.min(2, maxCols),
-                lg: Math.min(3, maxCols)
-              }}
-            >
-              <Group justify='left' wrap='nowrap'>
-                {imageUrl && (
-                  <ApiImage
-                    src={imageUrl}
-                    radius='sm'
-                    miw={42}
-                    mah={42}
-                    maw={42}
-                    visibleFrom='sm'
-                  />
-                )}
-                <Stack gap='xs'>
-                  {title && <StylishText size='lg'>{title}</StylishText>}
-                  {subtitle && (
-                    <Group gap='xs'>
-                      {icon}
-                      <Text size='sm'>{description}</Text>
-                    </Group>
-                  )}
-                </Stack>
-              </Group>
-              {detail && <div>{detail}</div>}
-              {badges && (
-                <Group
-                  justify='center'
-                  gap='xs'
-                  align='flex-start'
-                  wrap='nowrap'
-                >
-                  {badges?.map((badge, idx) => (
-                    <Fragment key={idx}>{badge}</Fragment>
-                  ))}
-                </Group>
-              )}
-            </SimpleGrid>
-            {actions && (
-              <Group gap={5} justify='right' wrap='nowrap' align='flex-start'>
-                {actions.map((action, idx) => (
-                  <Fragment key={idx}>{action}</Fragment>
-                ))}
-              </Group>
-            )}
-          </Group>
-        </Paper>
-      </Stack>
-    </>
-  );
-}

package/src/components/nav/PageTitle.tsx

@@ -1,53 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import { useGlobalSettingsState } from '../../states/SettingsState';
-
-/**
- * Component to set the page title
- */
-export default function PageTitle({
-  title,
-  subtitle
-}: Readonly<{
-  title?: string;
-  subtitle?: string;
-}>) {
-  const globalSettings = useGlobalSettingsState();
-
-  const pageTitle = useMemo(() => {
-    const instanceName = globalSettings.getSetting(
-      'INVENTREE_INSTANCE',
-      'InvenTree'
-    );
-    const useInstanceName = globalSettings.isSet(
-      'INVENTREE_INSTANCE_TITLE',
-      false
-    );
-
-    let data = '';
-
-    if (title) {
-      data += title;
-    }
-
-    if (subtitle) {
-      data += ` - ${subtitle}`;
-    }
-
-    if (useInstanceName) {
-      data = `${instanceName} | ${data}`;
-    }
-
-    if (!data) {
-      // Backup: No title provided
-      data = instanceName;
-    }
-
-    return data;
-  }, [title, subtitle, globalSettings]);
-
-  useEffect(() => {
-    document.title = pageTitle;
-  }, [pageTitle]);
-
-  return <title>{pageTitle}</title>;
-}