@inventreedb/ui 0.0.1

package/src/components/nav/NavigationTree.tsx

@@ -0,0 +1,210 @@
+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

@@ -0,0 +1,231 @@
+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

@@ -0,0 +1,171 @@
+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

@@ -0,0 +1,53 @@
+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>;
+}