@inventreedb/ui 0.0.1

package/src/components/nav/SearchDrawer.tsx

@@ -0,0 +1,598 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  Accordion,
+  ActionIcon,
+  Alert,
+  Anchor,
+  Center,
+  Checkbox,
+  Drawer,
+  Group,
+  Loader,
+  Menu,
+  Space,
+  Stack,
+  Text,
+  TextInput,
+  Tooltip
+} from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import {
+  IconAlertCircle,
+  IconBackspace,
+  IconExclamationCircle,
+  IconRefresh,
+  IconSearch,
+  IconSettings,
+  IconTableExport,
+  IconX
+} from '@tabler/icons-react';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { type NavigateFunction, useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import { showNotification } from '@mantine/notifications';
+import { api } from '../../App';
+import { cancelEvent } from '../../functions/events';
+import { navigateToLink } from '../../functions/navigation';
+import { useUserSettingsState } from '../../states/SettingsState';
+import { useUserState } from '../../states/UserState';
+import { Boundary } from '../Boundary';
+import { RenderInstance } from '../render/Instance';
+import { ModelInformationDict, getModelInfo } from '../render/ModelType';
+
+// Define type for handling individual search queries
+type SearchQuery = {
+  model: ModelType;
+  searchKey?: string;
+  title?: string;
+  overviewUrl?: string;
+  enabled: boolean;
+  parameters: any;
+  results?: any;
+};
+
+/*
+ * Render the results for a single search query
+ */
+function QueryResultGroup({
+  searchText,
+  query,
+  navigate,
+  onClose,
+  onRemove,
+  onResultClick
+}: Readonly<{
+  searchText: string;
+  query: SearchQuery;
+  navigate: NavigateFunction;
+  onClose: () => void;
+  onRemove: (query: ModelType) => void;
+  onResultClick: (query: ModelType, pk: number, event: any) => void;
+}>) {
+  const modelInfo = useMemo(() => getModelInfo(query.model), [query.model]);
+
+  const overviewUrl: string | undefined = useMemo(() => {
+    // Query has a custom overview URL
+    if (query.overviewUrl) {
+      return query.overviewUrl;
+    }
+
+    return modelInfo.url_overview;
+  }, [query, modelInfo]);
+
+  // Callback function to view all results for a given query
+  const viewResults = useCallback(
+    (event: any) => {
+      cancelEvent(event);
+
+      if (overviewUrl) {
+        const url = `${overviewUrl}?search=${searchText}`;
+
+        // Close drawer if opening in the same tab
+        if (!(event?.ctrlKey || event?.shiftKey)) {
+          onClose();
+        }
+
+        navigateToLink(url, navigate, event);
+      } else {
+        showNotification({
+          title: t`No Overview Available`,
+          message: t`No overview available for this model type`,
+          color: 'red',
+          icon: <IconExclamationCircle />
+        });
+      }
+    },
+    [overviewUrl, searchText]
+  );
+
+  if (query.results.count == 0) {
+    return null;
+  }
+
+  return (
+    <Accordion.Item key={query.model} value={query.model}>
+      <Accordion.Control component='div'>
+        <Group justify='space-between'>
+          <Group justify='left' gap={5} wrap='nowrap'>
+            <Tooltip label={t`View all results`} position='top-start'>
+              <ActionIcon
+                size='sm'
+                variant='transparent'
+                radius='xs'
+                aria-label={`view-all-results-${query.searchKey ?? query.model}`}
+                disabled={!overviewUrl}
+                onClick={viewResults}
+              >
+                <IconTableExport />
+              </ActionIcon>
+            </Tooltip>
+            <Text size='lg'>{query.title ?? modelInfo.label_multiple}</Text>
+            <Text size='sm' style={{ fontStyle: 'italic' }}>
+              {' '}
+              - {query.results.count} <Trans>results</Trans>
+            </Text>
+          </Group>
+          <Group justify='right' wrap='nowrap'>
+            <Tooltip label={t`Remove search group`} position='top-end'>
+              <ActionIcon
+                size='sm'
+                color='red'
+                variant='transparent'
+                radius='xs'
+                aria-label={`remove-search-group-${query.model}`}
+                onClick={() => onRemove(query.model)}
+              >
+                <IconX />
+              </ActionIcon>
+            </Tooltip>
+            <Space />
+          </Group>
+        </Group>
+      </Accordion.Control>
+      <Accordion.Panel>
+        <Stack aria-label={`search-group-results-${query.model}`}>
+          {query.results.results.map((result: any) => (
+            <Anchor
+              underline='never'
+              onClick={(event: any) =>
+                onResultClick(query.model, result.pk, event)
+              }
+              key={`result-${query.model}-${result.pk}`}
+            >
+              <RenderInstance instance={result} model={query.model} />
+            </Anchor>
+          ))}
+        </Stack>
+      </Accordion.Panel>
+    </Accordion.Item>
+  );
+}
+
+/**
+ * Construct a drawer which provides quick-search functionality
+ * @param
+ */
+export function SearchDrawer({
+  opened,
+  onClose
+}: Readonly<{
+  opened: boolean;
+  onClose: () => void;
+}>) {
+  const [value, setValue] = useState<string>('');
+  const [searchText] = useDebouncedValue(value, 500);
+
+  const user = useUserState();
+  const userSettings = useUserSettingsState();
+
+  const [searchRegex, setSearchRegex] = useState<boolean>(false);
+  const [searchWhole, setSearchWhole] = useState<boolean>(false);
+  const [searchNotes, setSearchNotes] = useState<boolean>(false);
+
+  useEffect(() => {
+    setSearchRegex(userSettings.isSet('SEARCH_REGEX', false));
+    setSearchWhole(userSettings.isSet('SEARCH_WHOLE', false));
+    setSearchNotes(userSettings.isSet('SEARCH_NOTES', false));
+  }, [
+    userSettings.isSet('SEARCH_REGEX', false),
+    userSettings.isSet('SEARCH_WHOLE', false),
+    userSettings.isSet('SEARCH_NOTES', false)
+  ]);
+
+  // Build out search queries based on user permissions and preferences
+  const searchQueryList: SearchQuery[] = useMemo(() => {
+    return [
+      {
+        model: ModelType.part,
+        parameters: {
+          active: userSettings.isSet('SEARCH_HIDE_INACTIVE_PARTS')
+            ? true
+            : undefined
+        },
+        enabled:
+          user.hasViewRole(UserRoles.part) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_PARTS')
+      },
+      {
+        model: ModelType.supplierpart,
+        parameters: {
+          part_detail: true,
+          supplier_detail: true,
+          manufacturer_detail: true
+        },
+        enabled:
+          user.hasViewRole(UserRoles.part) &&
+          user.hasViewRole(UserRoles.purchase_order) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_SUPPLIER_PARTS')
+      },
+      {
+        model: ModelType.manufacturerpart,
+        parameters: {
+          part_detail: true,
+          supplier_detail: true,
+          manufacturer_detail: true
+        },
+        enabled:
+          user.hasViewRole(UserRoles.part) &&
+          user.hasViewRole(UserRoles.purchase_order) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_MANUFACTURER_PARTS')
+      },
+      {
+        model: ModelType.partcategory,
+        parameters: {},
+        enabled:
+          user.hasViewRole(UserRoles.part_category) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_CATEGORIES')
+      },
+      {
+        model: ModelType.stockitem,
+        parameters: {
+          part_detail: true,
+          location_detail: true,
+          in_stock: userSettings.isSet('SEARCH_PREVIEW_HIDE_UNAVAILABLE_STOCK')
+            ? true
+            : undefined
+        },
+        enabled:
+          user.hasViewRole(UserRoles.stock) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_STOCK')
+      },
+      {
+        model: ModelType.stocklocation,
+        parameters: {},
+        enabled:
+          user.hasViewRole(UserRoles.stock_location) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_LOCATIONS')
+      },
+      {
+        model: ModelType.build,
+        parameters: {
+          part_detail: true
+        },
+        enabled:
+          user.hasViewRole(UserRoles.build) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_BUILD_ORDERS')
+      },
+      {
+        model: ModelType.company,
+        overviewUrl: '/purchasing/index/suppliers',
+        searchKey: 'supplier',
+        title: t`Suppliers`,
+        parameters: {},
+        enabled:
+          user.hasViewRole(UserRoles.purchase_order) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_COMPANIES')
+      },
+      {
+        model: ModelType.company,
+        overviewUrl: '/purchasing/index/manufacturers',
+        searchKey: 'manufacturer',
+        title: t`Manufacturers`,
+        parameters: {},
+        enabled:
+          user.hasViewRole(UserRoles.purchase_order) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_COMPANIES')
+      },
+      {
+        model: ModelType.company,
+        overviewUrl: '/sales/index/customers',
+        searchKey: 'customer',
+        title: t`Customers`,
+        parameters: {},
+        enabled:
+          user.hasViewRole(UserRoles.sales_order) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_COMPANIES')
+      },
+      {
+        model: ModelType.purchaseorder,
+        parameters: {
+          supplier_detail: true,
+          outstanding: userSettings.isSet(
+            'SEARCH_PREVIEW_EXCLUDE_INACTIVE_PURCHASE_ORDERS'
+          )
+            ? true
+            : undefined
+        },
+        enabled:
+          user.hasViewRole(UserRoles.purchase_order) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_PURCHASE_ORDERS')
+      },
+      {
+        model: ModelType.salesorder,
+        parameters: {
+          customer_detail: true,
+          outstanding: userSettings.isSet(
+            'SEARCH_PREVIEW_EXCLUDE_INACTIVE_SALES_ORDERS'
+          )
+            ? true
+            : undefined
+        },
+        enabled:
+          user.hasViewRole(UserRoles.sales_order) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_SALES_ORDERS')
+      },
+      {
+        model: ModelType.salesordershipment,
+        parameters: {},
+        enabled:
+          user.hasViewRole(UserRoles.sales_order) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_SALES_ORDER_SHIPMENTS')
+      },
+      {
+        model: ModelType.returnorder,
+        parameters: {
+          customer_detail: true,
+          outstanding: userSettings.isSet(
+            'SEARCH_PREVIEW_EXCLUDE_INACTIVE_RETURN_ORDERS'
+          )
+            ? true
+            : undefined
+        },
+        enabled:
+          user.hasViewRole(UserRoles.return_order) &&
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_RETURN_ORDERS')
+      }
+    ];
+  }, [user, userSettings]);
+
+  // Construct a list of search queries based on user permissions
+  const searchQueries: SearchQuery[] = useMemo(() => {
+    return searchQueryList.filter((q) => q.enabled);
+  }, [searchQueryList]);
+
+  // Re-fetch data whenever the search term is updated
+  useEffect(() => {
+    searchQuery.refetch();
+  }, [searchText]);
+
+  // Function for performing the actual search query
+  const performSearch = async () => {
+    // Return empty result set if no search text
+    if (!searchText) {
+      return [];
+    }
+
+    const params: any = {
+      offset: 0,
+      limit: userSettings.getSetting('SEARCH_PREVIEW_RESULTS', '10'),
+      search: searchText,
+      search_regex: searchRegex,
+      search_whole: searchWhole,
+      search_notes: searchNotes
+    };
+
+    // Add in custom query parameters
+    searchQueries.forEach((query) => {
+      const key = query.searchKey || query.model;
+      params[key] = query.parameters;
+    });
+
+    return api
+      .post(apiUrl(ApiEndpoints.api_search), params)
+      .then((response) => response.data)
+      .catch((error) => {
+        console.error(error);
+        return [];
+      });
+  };
+
+  // Search query manager
+  const searchQuery = useQuery({
+    queryKey: ['search', searchText, searchRegex, searchWhole, searchNotes],
+    queryFn: performSearch
+  });
+
+  // A list of queries which return valid results
+  const [queryResults, setQueryResults] = useState<SearchQuery[]>([]);
+
+  // Update query results whenever the search results change
+  useEffect(() => {
+    if (searchQuery.data) {
+      let queries = searchQueries.filter(
+        (query) => (query.searchKey ?? query.model) in searchQuery.data
+      );
+
+      for (const key in searchQuery.data) {
+        const query = queries.find((q) => (q.searchKey ?? q.model) == key);
+        if (query) {
+          query.results = searchQuery.data[key];
+        }
+      }
+
+      // Filter for results with non-zero count
+      queries = queries.filter((query) => query.results.count > 0);
+
+      setQueryResults(queries);
+    } else {
+      setQueryResults([]);
+    }
+  }, [searchQuery.data]);
+
+  // Callback to remove a set of results from the list
+  function removeResults(query: ModelType) {
+    setQueryResults(queryResults.filter((q) => q.model != query));
+  }
+
+  // Callback when the drawer is closed
+  function closeDrawer() {
+    setValue('');
+    onClose();
+  }
+
+  const navigate = useNavigate();
+
+  // Callback when one of the search results is clicked
+  function onResultClick(query: ModelType, pk: number, event: any) {
+    const targetModel = ModelInformationDict[query];
+    if (targetModel.url_detail == undefined) {
+      return;
+    }
+
+    if (event?.ctrlKey || event?.shiftKey) {
+      // Keep the drawer open in this condition
+    } else {
+      closeDrawer();
+    }
+
+    const url = targetModel.url_detail.replace(':pk', pk.toString());
+    navigateToLink(url, navigate, event);
+  }
+
+  return (
+    <Drawer
+      opened={opened}
+      size='xl'
+      onClose={closeDrawer}
+      position='right'
+      withCloseButton={false}
+      styles={{ header: { width: '100%' }, title: { width: '100%' } }}
+      title={
+        <Group justify='space-between' gap={1} wrap='nowrap'>
+          <TextInput
+            aria-label='global-search-input'
+            placeholder={t`Enter search text`}
+            value={value}
+            onChange={(event) => setValue(event.currentTarget.value)}
+            leftSection={<IconSearch size='0.8rem' />}
+            rightSection={
+              value && (
+                <IconBackspace color='red' onClick={() => setValue('')} />
+              )
+            }
+            styles={{ root: { width: '100%' } }}
+          />
+          <Tooltip label={t`Refresh search results`} position='bottom-end'>
+            <ActionIcon
+              size='lg'
+              variant='transparent'
+              onClick={() => searchQuery.refetch()}
+            >
+              <IconRefresh />
+            </ActionIcon>
+          </Tooltip>
+          <Menu position='bottom-end'>
+            <Menu.Target>
+              <Tooltip label={t`Search Options`} position='bottom-end'>
+                <ActionIcon size='lg' variant='transparent'>
+                  <IconSettings />
+                </ActionIcon>
+              </Tooltip>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Label>{t`Search Options`}</Menu.Label>
+              <Menu.Item>
+                <Checkbox
+                  label={t`Whole word search`}
+                  checked={searchWhole}
+                  onChange={(event) =>
+                    setSearchWhole(event.currentTarget.checked)
+                  }
+                />
+              </Menu.Item>
+              <Menu.Item>
+                <Checkbox
+                  label={t`Regex search`}
+                  checked={searchRegex}
+                  onChange={(event) =>
+                    setSearchRegex(event.currentTarget.checked)
+                  }
+                />
+              </Menu.Item>
+              <Menu.Item>
+                <Checkbox
+                  label={t`Notes search`}
+                  checked={searchNotes}
+                  onChange={(event) =>
+                    setSearchNotes(event.currentTarget.checked)
+                  }
+                />
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+        </Group>
+      }
+    >
+      <Boundary label='SearchDrawer'>
+        {searchQuery.isFetching && (
+          <Center>
+            <Loader />
+          </Center>
+        )}
+        {!searchQuery.isFetching && !searchQuery.isError && (
+          <Stack gap='md'>
+            <Accordion
+              multiple
+              defaultValue={searchQueries.map((q) => q.model)}
+            >
+              {queryResults.map((query, idx) => (
+                <QueryResultGroup
+                  key={idx}
+                  searchText={searchText}
+                  query={query}
+                  navigate={navigate}
+                  onClose={closeDrawer}
+                  onRemove={(query) => removeResults(query)}
+                  onResultClick={(query, pk, event) =>
+                    onResultClick(query, pk, event)
+                  }
+                />
+              ))}
+            </Accordion>
+          </Stack>
+        )}
+        {searchQuery.isError && (
+          <Alert
+            color='red'
+            radius='sm'
+            variant='light'
+            title={t`Error`}
+            icon={<IconAlertCircle size='1rem' />}
+          >
+            <Trans>An error occurred during search query</Trans>
+          </Alert>
+        )}
+        {searchText &&
+          !searchQuery.isFetching &&
+          !searchQuery.isError &&
+          queryResults.length == 0 && (
+            <Alert
+              color='blue'
+              radius='sm'
+              variant='light'
+              title={t`No Results`}
+              icon={<IconSearch size='1rem' />}
+            >
+              <Trans>No results available for search query</Trans>
+            </Alert>
+          )}
+      </Boundary>
+    </Drawer>
+  );
+}

package/src/components/nav/SettingsHeader.tsx

@@ -0,0 +1,50 @@
+import { t } from '@lingui/core/macro';
+import { Group, SegmentedControl, Stack, Text } from '@mantine/core';
+import type { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useUserState } from '../../states/UserState';
+import { StylishText } from '../items/StylishText';
+
+interface SettingsHeaderInterface {
+  label: string;
+  title: string;
+  shorthand?: string;
+  subtitle?: string | ReactNode;
+}
+
+/**
+ * Construct a settings page header with interlinks to one other settings page
+ */
+export function SettingsHeader({
+  label,
+  title,
+  shorthand,
+  subtitle
+}: Readonly<SettingsHeaderInterface>) {
+  const user = useUserState();
+  const navigate = useNavigate();
+
+  return (
+    <Group justify='space-between'>
+      <Stack gap='0' ml={'sm'}>
+        <Group>
+          <StylishText size='xl'>{title}</StylishText>
+          {shorthand && <Text c='dimmed'>({shorthand})</Text>}
+        </Group>
+        <Group>{subtitle ? <Text c='dimmed'>{subtitle}</Text> : null}</Group>
+      </Stack>
+      {user.isStaff() && (
+        <SegmentedControl
+          data={[
+            { value: 'user', label: t`User Settings` },
+            { value: 'system', label: t`System Settings` },
+            { value: 'admin', label: t`Admin Center` }
+          ]}
+          onChange={(value) => navigate(`/settings/${value}`)}
+          value={label}
+        />
+      )}
+    </Group>
+  );
+}

package/src/components/panels/AttachmentPanel.tsx

@@ -0,0 +1,27 @@
+import { t } from '@lingui/core/macro';
+import { Skeleton } from '@mantine/core';
+import { IconPaperclip } from '@tabler/icons-react';
+
+import type { ModelType } from '@lib/enums/ModelType';
+import { AttachmentTable } from '../../tables/general/AttachmentTable';
+import type { PanelType } from './Panel';
+
+export default function AttachmentPanel({
+  model_type,
+  model_id
+}: {
+  model_type: ModelType;
+  model_id: number | undefined;
+}): PanelType {
+  return {
+    name: 'attachments',
+    label: t`Attachments`,
+    icon: <IconPaperclip />,
+    content:
+      model_type && model_id ? (
+        <AttachmentTable model_type={model_type} model_id={model_id} />
+      ) : (
+        <Skeleton />
+      )
+  };
+}

package/src/components/panels/NotesPanel.tsx

@@ -0,0 +1,36 @@
+import { t } from '@lingui/core/macro';
+import { Skeleton } from '@mantine/core';
+import { IconNotes } from '@tabler/icons-react';
+
+import type { ModelType } from '@lib/enums/ModelType';
+import { useUserState } from '../../states/UserState';
+import NotesEditor from '../editors/NotesEditor';
+import type { PanelType } from './Panel';
+
+export default function NotesPanel({
+  model_type,
+  model_id,
+  editable
+}: {
+  model_type: ModelType;
+  model_id: number | undefined;
+  editable?: boolean;
+}): PanelType {
+  const user = useUserState.getState();
+
+  return {
+    name: 'notes',
+    label: t`Notes`,
+    icon: <IconNotes />,
+    content:
+      model_type && model_id ? (
+        <NotesEditor
+          modelType={model_type}
+          modelId={model_id}
+          editable={editable ?? user.hasChangePermission(model_type)}
+        />
+      ) : (
+        <Skeleton />
+      )
+  };
+}