@inventreedb/ui 0.0.1

package/src/functions/forms.tsx

@@ -0,0 +1,173 @@
+import type { AxiosResponse } from 'axios';
+
+import type { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import type { PathParams } from '@lib/types/Core';
+import type { ApiFormFieldSet, ApiFormFieldType } from '@lib/types/Forms';
+import { invalidResponse, permissionDenied } from './notifications';
+
+/**
+ * Construct an API url from the provided ApiFormProps object
+ */
+export function constructFormUrl(
+  url: ApiEndpoints | string,
+  pk?: string | number,
+  pathParams?: PathParams,
+  queryParams?: URLSearchParams
+): string {
+  let formUrl = apiUrl(url, pk, pathParams);
+
+  if (queryParams) {
+    formUrl += `?${queryParams.toString()}`;
+  }
+
+  return formUrl;
+}
+
+/**
+ * Extract the available fields (for a given method) from the response object
+ *
+ * @returns - A list of field definitions, or null if there was an error
+ */
+export function extractAvailableFields(
+  response: AxiosResponse,
+  method?: string,
+  hideErrors?: boolean
+): Record<string, ApiFormFieldType> | null {
+  // OPTIONS request *must* return 200 status
+  if (response.status !== 200) {
+    invalidResponse(response.status);
+    return null;
+  }
+
+  const actions: any = response.data?.actions ?? null;
+
+  if (!method || !actions) {
+    return null;
+  }
+
+  method = method.toUpperCase();
+
+  // PATCH method is supported, but metadata is provided via PUT
+  if (method === 'PATCH') {
+    method = 'PUT';
+  }
+
+  if (!(method in actions)) {
+    // Missing method - this means user does not have appropriate permission
+    if (!hideErrors) {
+      permissionDenied();
+    }
+    return null;
+  }
+
+  const processField = (field: any, fieldName: string) => {
+    const resField: ApiFormFieldType = {
+      ...field,
+      name: fieldName,
+      field_type: field.type,
+      description: field.help_text,
+      value: field.value ?? field.default,
+      disabled: field.read_only ?? false
+    };
+
+    // Remove the 'read_only' field - plays havoc with react components
+    delete resField.read_only;
+
+    if (resField.field_type === 'nested object' && resField.children) {
+      resField.children = processFields(resField.children, fieldName);
+    }
+
+    if (resField.field_type === 'dependent field' && resField.child) {
+      resField.child = processField(resField.child, fieldName);
+
+      // copy over the label from the dependent field to the child field
+      if (!resField.child.label) {
+        resField.child.label = resField.label;
+      }
+    }
+
+    return resField;
+  };
+
+  const processFields = (fields: any, _path?: string) => {
+    const _fields: ApiFormFieldSet = {};
+
+    for (const [fieldName, field] of Object.entries(fields) as any) {
+      const path = _path ? `${_path}.${fieldName}` : fieldName;
+      _fields[fieldName] = processField(field, path);
+    }
+
+    return _fields;
+  };
+
+  return processFields(actions[method]);
+}
+
+export type NestedDict = { [key: string]: string | number | NestedDict };
+export function mapFields(
+  fields: ApiFormFieldSet,
+  fieldFunction: (path: string, value: ApiFormFieldType, key: string) => any,
+  _path?: string
+): NestedDict {
+  const res: NestedDict = {};
+
+  for (const [k, v] of Object.entries(fields)) {
+    const path = _path ? `${_path}.${k}` : k;
+    let value: any;
+
+    if (v.field_type === 'nested object' && v.children) {
+      value = mapFields(v.children, fieldFunction, path);
+    } else {
+      value = fieldFunction(path, v, k);
+    }
+
+    if (value !== undefined) res[k] = value;
+  }
+
+  return res;
+}
+
+/*
+ * Build a complete field definition based on the provided data
+ */
+export function constructField({
+  field,
+  definition
+}: {
+  field: ApiFormFieldType;
+  definition?: ApiFormFieldType;
+}) {
+  const def = {
+    ...definition,
+    ...field
+  };
+
+  switch (def.field_type) {
+    case 'nested object':
+      def.children = {};
+      for (const k of Object.keys(field.children ?? {})) {
+        def.children[k] = constructField({
+          field: field.children?.[k] ?? {},
+          definition: definition?.children?.[k] ?? {}
+        });
+      }
+      break;
+    case 'dependent field':
+      if (!definition?.child) break;
+
+      def.child = constructField({
+        // use the raw definition here as field, since a dependent field cannot be influenced by the frontend
+        field: definition.child ?? {}
+      });
+      break;
+    default:
+      break;
+  }
+
+  // Clear out the 'read_only' attribute
+  def.disabled = def.disabled ?? def.read_only ?? false;
+  delete def['read_only'];
+
+  return def;
+}

package/src/functions/icons.tsx

@@ -0,0 +1,294 @@
+import {
+  type Icon,
+  Icon123,
+  IconArrowBigDownLineFilled,
+  IconArrowMerge,
+  IconBell,
+  IconBinaryTree2,
+  IconBookmarks,
+  IconBox,
+  IconBrandTelegram,
+  IconBuilding,
+  IconBuildingFactory2,
+  IconBuildingStore,
+  IconBusinessplan,
+  IconCalendar,
+  IconCalendarCheck,
+  IconCalendarDot,
+  IconCalendarStats,
+  IconCalendarTime,
+  IconCalendarX,
+  IconCheck,
+  IconCircleCheck,
+  IconCircleMinus,
+  IconCirclePlus,
+  IconCircleX,
+  IconClipboardCheck,
+  IconClipboardList,
+  IconClipboardText,
+  IconCopy,
+  IconCornerDownLeft,
+  IconCornerDownRight,
+  IconCornerUpRightDouble,
+  IconCurrencyDollar,
+  IconDots,
+  IconEdit,
+  IconExclamationCircle,
+  IconExternalLink,
+  IconFileArrowLeft,
+  IconFileDownload,
+  IconFileUpload,
+  IconFlag,
+  IconFlagShare,
+  IconGitBranch,
+  IconGridDots,
+  IconHandStop,
+  IconHash,
+  IconHierarchy,
+  IconHistory,
+  IconInfoCircle,
+  IconLayersLinked,
+  IconLayoutDashboard,
+  IconLicense,
+  IconLink,
+  IconList,
+  IconListDetails,
+  IconListTree,
+  IconLock,
+  IconMail,
+  IconMap2,
+  IconMapPin,
+  IconMapPinHeart,
+  IconMinusVertical,
+  IconNotes,
+  IconNumbers,
+  IconPackage,
+  IconPackageImport,
+  IconPackages,
+  IconPaperclip,
+  IconPhone,
+  IconPhoto,
+  IconPlug,
+  IconPoint,
+  IconPrinter,
+  IconProgressCheck,
+  type IconProps,
+  IconQrcode,
+  IconQuestionMark,
+  IconRefresh,
+  IconRulerMeasure,
+  IconSettings,
+  IconShoppingCart,
+  IconShoppingCartHeart,
+  IconShoppingCartPlus,
+  IconSitemap,
+  IconSquareXFilled,
+  IconStack2,
+  IconStatusChange,
+  IconTag,
+  IconTestPipe,
+  IconTool,
+  IconTools,
+  IconTransfer,
+  IconTransitionRight,
+  IconTrash,
+  IconTruck,
+  IconTruckDelivery,
+  IconTruckReturn,
+  IconUnlink,
+  IconUser,
+  IconUserBolt,
+  IconUserStar,
+  IconUsersGroup,
+  IconVersions,
+  IconWorld,
+  IconWorldCode,
+  IconX
+} from '@tabler/icons-react';
+import type React from 'react';
+
+const icons = {
+  name: IconPoint,
+  description: IconInfoCircle,
+  variant_of: IconHierarchy,
+  revision_of: IconStatusChange,
+  unallocated_stock: IconPackage,
+  total_in_stock: IconPackages,
+  minimum_stock: IconFlag,
+  allocated_to_build_orders: IconTool,
+  allocated_to_sales_orders: IconTruck,
+  can_build: IconTools,
+  ordering: IconShoppingCart,
+  building: IconTool,
+  category: IconBinaryTree2,
+  IPN: Icon123,
+  revision: IconGitBranch,
+  units: IconRulerMeasure,
+  keywords: IconTag,
+  status: IconInfoCircle,
+  status_custom_key: IconInfoCircle,
+  edit: IconEdit,
+  info: IconInfoCircle,
+  exclamation: IconExclamationCircle,
+  details: IconInfoCircle,
+  parameters: IconList,
+  list: IconList,
+  list_details: IconListDetails,
+  stock: IconPackages,
+  variants: IconVersions,
+  allocations: IconBookmarks,
+  bom: IconListTree,
+  build: IconTools,
+  build_order: IconTools,
+  builds: IconTools,
+  used_in: IconStack2,
+  manufacturers: IconBuildingFactory2,
+  suppliers: IconBuilding,
+  customers: IconBuildingStore,
+  purchase_orders: IconShoppingCart,
+  sales_orders: IconTruckDelivery,
+  return_orders: IconTruckReturn,
+  shipment: IconTruckDelivery,
+  scheduling: IconCalendarStats,
+  test_templates: IconTestPipe,
+  test: IconTestPipe,
+  related_parts: IconLayersLinked,
+  attachments: IconPaperclip,
+  note: IconNotes,
+  notes: IconNotes,
+  photo: IconPhoto,
+  upload: IconFileUpload,
+  download: IconFileDownload,
+  reject: IconX,
+  refresh: IconRefresh,
+  select_image: IconGridDots,
+  delete: IconTrash,
+  packaging: IconPackage,
+  packages: IconPackages,
+  install: IconTransitionRight,
+  plus: IconCirclePlus,
+  minus: IconCircleMinus,
+  cancel: IconCircleX,
+  hold: IconHandStop,
+  issue: IconBrandTelegram,
+  complete: IconCircleCheck,
+  deliver: IconTruckDelivery,
+  address: IconMap2,
+  import: IconFileArrowLeft,
+  bell: IconBell,
+  notification: IconBell,
+  admin: IconUserBolt,
+  system: IconSettings,
+  license: IconLicense,
+
+  // Part Icons
+  active: IconCheck,
+  template: IconCopy,
+  assembly: IconTool,
+  component: IconGridDots,
+  trackable: IconCornerUpRightDouble,
+  purchaseable: IconShoppingCart,
+  saleable: IconCurrencyDollar,
+  virtual: IconWorldCode,
+  inactive: IconX,
+  part: IconBox,
+  supplier_part: IconPackageImport,
+  lock: IconLock,
+  locked: IconLock,
+
+  calendar: IconCalendar,
+  calendar_target: IconCalendarDot,
+  calendar_cross: IconCalendarX,
+  calendar_check: IconCalendarCheck,
+  external: IconExternalLink,
+  creation_date: IconCalendarTime,
+  target_date: IconCalendarDot,
+  date: IconCalendar,
+  shipment_date: IconCalendarCheck,
+  complete_date: IconCalendarCheck,
+  location: IconMapPin,
+  default_location: IconMapPinHeart,
+  category_default_location: IconMapPinHeart,
+  parent_default_location: IconMapPinHeart,
+  default_supplier: IconShoppingCartHeart,
+  link: IconLink,
+  responsible: IconUserStar,
+  pricing: IconCurrencyDollar,
+  total_price: IconCurrencyDollar,
+  currency: IconCurrencyDollar,
+  stocktake: IconClipboardList,
+  user: IconUser,
+  group: IconUsersGroup,
+  check: IconCheck,
+  copy: IconCopy,
+  square_x: IconSquareXFilled,
+  arrow_down: IconArrowBigDownLineFilled,
+  transfer: IconTransfer,
+  actions: IconDots,
+  labels: IconTag,
+  reports: IconPrinter,
+  buy: IconShoppingCartPlus,
+  add: IconCirclePlus,
+  remove: IconCircleMinus,
+  merge: IconArrowMerge,
+  customer: IconUser,
+  quantity: IconNumbers,
+  progress: IconProgressCheck,
+  total_cost: IconBusinessplan,
+  reference: IconHash,
+  serial: IconHash,
+  website: IconWorld,
+  email: IconMail,
+  phone: IconPhone,
+  sitemap: IconSitemap,
+  downleft: IconCornerDownLeft,
+  downright: IconCornerDownRight,
+  barcode: IconQrcode,
+  barLine: IconMinusVertical,
+  batch: IconClipboardText,
+  batch_code: IconClipboardText,
+  tick_off: IconClipboardCheck,
+  destination: IconFlag,
+  repeat_destination: IconFlagShare,
+  unlink: IconUnlink,
+  success: IconCircleCheck,
+  plugin: IconPlug,
+  history: IconHistory,
+  dashboard: IconLayoutDashboard
+};
+
+export type InvenTreeIconType = keyof typeof icons;
+export type TablerIconType = React.ForwardRefExoticComponent<
+  Omit<IconProps, 'ref'> & React.RefAttributes<Icon>
+>;
+
+/**
+ * Returns a Tabler Icon for the model field name supplied
+ * @param field string defining field name
+ */
+export function GetIcon(field: string): TablerIconType {
+  return icons[field as InvenTreeIconType];
+}
+
+// Aliasing the new type name to make it distinct
+type TablerIconProps = IconProps;
+
+type InvenTreeIconProps = {
+  icon: InvenTreeIconType;
+  iconProps?: TablerIconProps;
+};
+
+export function InvenTreeIcon(props: Readonly<InvenTreeIconProps>) {
+  let Icon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+
+  if (props.icon in icons) {
+    Icon = GetIcon(props.icon);
+  } else {
+    console.warn(
+      `Icon name '${props.icon}' is not registered with the Icon manager`
+    );
+    Icon = IconQuestionMark;
+  }
+
+  return <Icon {...props.iconProps} />;
+}

package/src/functions/loading.tsx

@@ -0,0 +1,29 @@
+import { Center, Loader, MantineProvider, Stack } from '@mantine/core';
+import { Suspense } from 'react';
+
+import { colorSchema } from '../contexts/colorSchema';
+import { theme } from '../theme';
+
+function LoadingFallback() {
+  return (
+    <MantineProvider theme={theme} colorSchemeManager={colorSchema}>
+      <Stack>
+        <Center>
+          <Loader />
+        </Center>
+      </Stack>
+    </MantineProvider>
+  );
+}
+
+export const Loadable =
+  (Component: any) => (props: JSX.IntrinsicAttributes) => (
+    <Suspense fallback={<LoadingFallback />}>
+      <Component {...props} />
+    </Suspense>
+  );
+
+export function LoadingItem({ item }: Readonly<{ item: any }>): JSX.Element {
+  const Itm = Loadable(item);
+  return <Itm />;
+}

package/src/functions/navigation.tsx

@@ -0,0 +1,20 @@
+import { getBaseUrl } from '../main';
+import { cancelEvent } from './events';
+
+/*
+ * Navigate to a provided link.
+ * - If the link is to be opened externally, open it in a new tab.
+ * - Otherwise, navigate using the provided navigate function.
+ */
+export const navigateToLink = (link: string, navigate: any, event: any) => {
+  cancelEvent(event);
+
+  if (event?.ctrlKey || event?.shiftKey) {
+    // Open the link in a new tab
+    const url = `/${getBaseUrl()}${link}`;
+    window.open(url, '_blank');
+  } else {
+    // Navigate internally
+    navigate(link);
+  }
+};

package/src/functions/notifications.tsx

@@ -0,0 +1,101 @@
+import { t } from '@lingui/core/macro';
+import { notifications } from '@mantine/notifications';
+import { IconCircleCheck, IconExclamationCircle } from '@tabler/icons-react';
+import { extractErrorMessage } from './api';
+
+/**
+ * Show a notification that the feature is not yet implemented
+ */
+export function notYetImplemented() {
+  notifications.hide('not-implemented');
+
+  notifications.show({
+    title: t`Not implemented`,
+    message: t`This feature is not yet implemented`,
+    color: 'red',
+    id: 'not-implemented'
+  });
+}
+
+/**
+ * Show a notification that the user does not have permission to perform the action
+ */
+export function permissionDenied() {
+  notifications.show({
+    title: t`Permission Denied`,
+    message: t`You do not have permission to perform this action`,
+    color: 'red'
+  });
+}
+
+/**
+ * Display a notification on an invalid return code
+ */
+export function invalidResponse(returnCode: number) {
+  // TODO: Specific return code messages
+  notifications.show({
+    title: t`Invalid Return Code`,
+    message: t`Server returned status ${returnCode}`,
+    color: 'red'
+  });
+}
+
+/**
+ * Display a notification on timeout
+ */
+export function showTimeoutNotification() {
+  notifications.show({
+    title: t`Timeout`,
+    message: t`The request timed out`,
+    color: 'red'
+  });
+}
+
+/*
+ * Display a login / logout notification message.
+ * Any existing login notification(s) will be hidden.
+ */
+export function showLoginNotification({
+  title,
+  message,
+  success = true
+}: {
+  title: string;
+  message: string;
+  success?: boolean;
+}) {
+  notifications.hide('login');
+
+  notifications.show({
+    title: title,
+    message: message,
+    color: success ? 'green' : 'red',
+    icon: success ? <IconCircleCheck /> : <IconExclamationCircle />,
+    id: 'login',
+    autoClose: 2500
+  });
+}
+
+export function showApiErrorMessage({
+  error,
+  title,
+  message,
+  field
+}: {
+  error: any;
+  title: string;
+  message?: string;
+  field?: string;
+}) {
+  const errorMessage = extractErrorMessage({
+    error: error,
+    field: field,
+    defaultMessage: message
+  });
+
+  notifications.show({
+    title: title,
+    message: errorMessage,
+    color: 'red'
+  });
+}

package/src/functions/tables.tsx

@@ -0,0 +1,26 @@
+/**
+ * Reduce an input string to a given length, adding an ellipsis if necessary
+ * @param str - String to shorten
+ * @param len - Length to shorten to
+ */
+export function shortenString({
+  str,
+  len = 100
+}: {
+  str: string | undefined;
+  len?: number;
+}) {
+  // Ensure that the string is a string
+  str = str ?? '';
+  str = str.toString();
+
+  // If the string is already short enough, return it
+  if (str.length <= len) {
+    return str;
+  }
+
+  // Otherwise, shorten it
+  const N = Math.floor(len / 2 - 1);
+
+  return `${str.slice(0, N)} ... ${str.slice(-N)}`;
+}

package/src/functions/uid.tsx

@@ -0,0 +1,15 @@
+// dec2hex :: Integer -> String
+// i.e. 0-255 -> '00'-'ff'
+function dec2hex(dec: number) {
+  return dec.toString(16).padStart(2, '0');
+}
+
+/**
+ * Generate a unique ID string with the specified number of values
+ */
+export function generateUniqueId(length = 8): string {
+  const arr = new Uint8Array(length / 2);
+  window.crypto.getRandomValues(arr);
+
+  return Array.from(arr, dec2hex).join('');
+}

package/src/functions/urls.tsx

@@ -0,0 +1,58 @@
+import type { ModelType } from '@lib/enums/ModelType';
+import { ModelInformationDict } from '../components/render/ModelType';
+import { getBaseUrl } from '../main';
+import { useLocalState } from '../states/LocalState';
+
+/**
+ * Returns the detail view URL for a given model type
+ */
+export function getDetailUrl(
+  model: ModelType,
+  pk: number | string,
+  absolute?: boolean
+): string {
+  const modelInfo = ModelInformationDict[model];
+
+  if (pk === undefined || pk === null) {
+    return '';
+  }
+
+  if (!!pk && modelInfo && modelInfo.url_detail) {
+    const url = modelInfo.url_detail.replace(':pk', pk.toString());
+    const base = getBaseUrl();
+
+    if (absolute && base) {
+      return `/${base}${url}`;
+    } else {
+      return url;
+    }
+  }
+
+  console.error(`No detail URL found for model ${model} <${pk}>`);
+  return '';
+}
+
+/**
+ * Returns the edit view URL for a given model type
+ */
+export function generateUrl(url: string | URL, base?: string): string {
+  const { getHost } = useLocalState.getState();
+
+  let newUrl: string | URL = url;
+
+  const host: string = getHost();
+
+  try {
+    if (base) {
+      newUrl = new URL(url, base).toString();
+    } else if (host) {
+      newUrl = new URL(url, host).toString();
+    } else {
+      newUrl = url.toString();
+    }
+  } catch (e: any) {
+    console.error(`ERR: generateURL failed. url='${url}', base='${base}'`);
+  }
+
+  return newUrl.toString();
+}