@inventreedb/ui 0.0.1

package/src/components/render/Generic.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
+
+export function RenderProjectCode({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
+  return (
+    instance && (
+      <RenderInlineModel
+        primary={instance.code}
+        secondary={instance.description}
+      />
+    )
+  );
+}
+
+export function RenderContentType({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
+  return instance && <RenderInlineModel primary={instance.app_labeled_name} />;
+}
+
+export function RenderError({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
+  return instance && <RenderInlineModel primary={instance.name} />;
+}
+
+export function RenderImportSession({
+  instance
+}: {
+  instance: any;
+}): ReactNode {
+  return instance && <RenderInlineModel primary={instance.data_file} />;
+}
+
+export function RenderSelectionList({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
+  return (
+    instance && (
+      <RenderInlineModel
+        primary={instance.name}
+        secondary={instance.description}
+      />
+    )
+  );
+}

package/src/components/render/Instance.tsx

@@ -0,0 +1,240 @@
+import { t } from '@lingui/core/macro';
+import { Alert, Anchor, Group, Skeleton, Space, Text } from '@mantine/core';
+import { useQuery } from '@tanstack/react-query';
+import { type ReactNode, useCallback } from 'react';
+
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import { useApi } from '../../contexts/ApiContext';
+import { navigateToLink } from '../../functions/navigation';
+import { shortenString } from '../../functions/tables';
+import { Thumbnail } from '../images/Thumbnail';
+import { RenderBuildItem, RenderBuildLine, RenderBuildOrder } from './Build';
+import {
+  RenderAddress,
+  RenderCompany,
+  RenderContact,
+  RenderManufacturerPart,
+  RenderSupplierPart
+} from './Company';
+import {
+  RenderContentType,
+  RenderError,
+  RenderImportSession,
+  RenderProjectCode,
+  RenderSelectionList
+} from './Generic';
+import { ModelInformationDict } from './ModelType';
+import {
+  RenderPurchaseOrder,
+  RenderReturnOrder,
+  RenderReturnOrderLineItem,
+  RenderSalesOrder,
+  RenderSalesOrderShipment
+} from './Order';
+import {
+  RenderPart,
+  RenderPartCategory,
+  RenderPartParameterTemplate,
+  RenderPartTestTemplate
+} from './Part';
+import { RenderPlugin } from './Plugin';
+import { RenderLabelTemplate, RenderReportTemplate } from './Report';
+import {
+  RenderStockItem,
+  RenderStockLocation,
+  RenderStockLocationType
+} from './Stock';
+import { RenderGroup, RenderOwner, RenderUser } from './User';
+
+type EnumDictionary<T extends string | symbol | number, U> = {
+  [K in T]: U;
+};
+
+export interface InstanceRenderInterface {
+  instance: any;
+  link?: boolean;
+  navigate?: any;
+  showSecondary?: boolean;
+}
+
+/**
+ * Lookup table for rendering a model instance
+ */
+const RendererLookup: EnumDictionary<
+  ModelType,
+  (props: Readonly<InstanceRenderInterface>) => ReactNode
+> = {
+  [ModelType.address]: RenderAddress,
+  [ModelType.build]: RenderBuildOrder,
+  [ModelType.buildline]: RenderBuildLine,
+  [ModelType.builditem]: RenderBuildItem,
+  [ModelType.company]: RenderCompany,
+  [ModelType.contact]: RenderContact,
+  [ModelType.manufacturerpart]: RenderManufacturerPart,
+  [ModelType.owner]: RenderOwner,
+  [ModelType.part]: RenderPart,
+  [ModelType.partcategory]: RenderPartCategory,
+  [ModelType.partparametertemplate]: RenderPartParameterTemplate,
+  [ModelType.parttesttemplate]: RenderPartTestTemplate,
+  [ModelType.projectcode]: RenderProjectCode,
+  [ModelType.purchaseorder]: RenderPurchaseOrder,
+  [ModelType.purchaseorderlineitem]: RenderPurchaseOrder,
+  [ModelType.returnorder]: RenderReturnOrder,
+  [ModelType.returnorderlineitem]: RenderReturnOrderLineItem,
+  [ModelType.salesorder]: RenderSalesOrder,
+  [ModelType.salesordershipment]: RenderSalesOrderShipment,
+  [ModelType.stocklocation]: RenderStockLocation,
+  [ModelType.stocklocationtype]: RenderStockLocationType,
+  [ModelType.stockitem]: RenderStockItem,
+  [ModelType.stockhistory]: RenderStockItem,
+  [ModelType.supplierpart]: RenderSupplierPart,
+  [ModelType.user]: RenderUser,
+  [ModelType.group]: RenderGroup,
+  [ModelType.importsession]: RenderImportSession,
+  [ModelType.reporttemplate]: RenderReportTemplate,
+  [ModelType.labeltemplate]: RenderLabelTemplate,
+  [ModelType.pluginconfig]: RenderPlugin,
+  [ModelType.contenttype]: RenderContentType,
+  [ModelType.selectionlist]: RenderSelectionList,
+  [ModelType.error]: RenderError
+};
+
+export type RenderInstanceProps = {
+  model: ModelType | undefined;
+} & InstanceRenderInterface;
+
+/**
+ * Render an instance of a database model, depending on the provided data
+ */
+export function RenderInstance(props: RenderInstanceProps): ReactNode {
+  if (props.model === undefined) {
+    return <UnknownRenderer model={props.model} />;
+  }
+
+  const model_name = props.model.toString().toLowerCase() as ModelType;
+
+  const RenderComponent = RendererLookup[model_name];
+
+  if (!RenderComponent) {
+    return <UnknownRenderer model={props.model} />;
+  }
+
+  return <RenderComponent {...props} />;
+}
+
+export function RenderRemoteInstance({
+  model,
+  pk
+}: Readonly<{
+  model: ModelType;
+  pk: number;
+}>): ReactNode {
+  const api = useApi();
+
+  const { data, isLoading, isFetching } = useQuery({
+    queryKey: ['model', model, pk],
+    queryFn: async () => {
+      const url = apiUrl(ModelInformationDict[model].api_endpoint, pk);
+
+      return api
+        .get(url)
+        .then((response) => response.data)
+        .catch(() => null);
+    }
+  });
+
+  if (isLoading || isFetching) {
+    return <Skeleton />;
+  }
+
+  if (!data) {
+    return (
+      <Text>
+        {model}: {pk}
+      </Text>
+    );
+  }
+
+  return <RenderInstance model={model} instance={data} />;
+}
+
+/**
+ * Helper function for rendering an inline model in a consistent style
+ */
+export function RenderInlineModel({
+  primary,
+  secondary,
+  prefix,
+  suffix,
+  image,
+  labels,
+  url,
+  navigate,
+  showSecondary = true,
+  tooltip
+}: Readonly<{
+  primary: string;
+  secondary?: string;
+  showSecondary?: boolean;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  image?: string;
+  labels?: string[];
+  url?: string;
+  navigate?: any;
+  tooltip?: string;
+}>): ReactNode {
+  // TODO: Handle labels
+
+  const onClick = useCallback(
+    (event: any) => {
+      if (url && navigate) {
+        navigateToLink(url, navigate, event);
+      }
+    },
+    [url, navigate]
+  );
+
+  const primaryText = shortenString({
+    str: primary,
+    len: 50
+  });
+
+  const secondaryText = shortenString({
+    str: secondary,
+    len: 75
+  });
+
+  return (
+    <Group gap='xs' justify='space-between' wrap='nowrap' title={tooltip}>
+      <Group gap='xs' justify='left' wrap='nowrap'>
+        {prefix}
+        {image && <Thumbnail src={image} size={18} />}
+        {url ? (
+          <Anchor href='' onClick={(event: any) => onClick(event)}>
+            <Text size='sm'>{primaryText}</Text>
+          </Anchor>
+        ) : (
+          <Text size='sm'>{primaryText}</Text>
+        )}
+        {showSecondary && secondary && <Text size='xs'>{secondaryText}</Text>}
+      </Group>
+      {suffix && (
+        <>
+          <Space />
+          <div style={{ fontSize: 'xs', lineHeight: 'xs' }}>{suffix}</div>
+        </>
+      )}
+    </Group>
+  );
+}
+
+export function UnknownRenderer({
+  model
+}: Readonly<{
+  model: ModelType | undefined;
+}>): ReactNode {
+  const model_name = model ? model.toString() : 'undefined';
+  return <Alert color='red' title={t`Unknown model: ${model_name}`} />;
+}

package/src/components/render/InstanceFromUrl.tsx

@@ -0,0 +1,33 @@
+import { Loader } from '@mantine/core';
+import { useMemo, useState } from 'react';
+
+import type { ModelType } from '@lib/enums/ModelType';
+import { api } from '../../App';
+import { RenderInstance } from './Instance';
+
+/**
+ * Render a model instance from a URL
+ * @param model Model type
+ * @param url URL to fetch instance from
+ * @returns JSX Element
+ */
+export function InstanceFromUrl({
+  model,
+  url
+}: Readonly<{
+  model: ModelType;
+  url: string;
+}>) {
+  const [data, setData] = useState<any>(null);
+  useMemo(
+    () =>
+      api.get(url).then((res) => {
+        setData(res.data);
+      }),
+    [model, url]
+  );
+
+  if (!data) return <Loader />;
+
+  return <RenderInstance instance={data} model={model} />;
+}

package/src/components/render/ModelType.tsx

@@ -0,0 +1,293 @@
+import { t } from '@lingui/core/macro';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import type { ModelType } from '@lib/enums/ModelType';
+import type { InvenTreeIconType } from '../../functions/icons';
+
+export interface ModelInformationInterface {
+  label: string;
+  label_multiple: string;
+  url_overview?: string;
+  url_detail?: string;
+  api_endpoint: ApiEndpoints;
+  admin_url?: string;
+  icon: InvenTreeIconType;
+}
+
+export interface TranslatableModelInformationInterface
+  extends Omit<ModelInformationInterface, 'label' | 'label_multiple'> {
+  label: () => string;
+  label_multiple: () => string;
+}
+
+export type ModelDict = {
+  [key in keyof typeof ModelType]: TranslatableModelInformationInterface;
+};
+
+export const ModelInformationDict: ModelDict = {
+  part: {
+    label: () => t`Part`,
+    label_multiple: () => t`Parts`,
+    url_overview: '/part/category/index/parts',
+    url_detail: '/part/:pk/',
+    api_endpoint: ApiEndpoints.part_list,
+    admin_url: '/part/part/',
+    icon: 'part'
+  },
+  partparametertemplate: {
+    label: () => t`Part Parameter Template`,
+    label_multiple: () => t`Part Parameter Templates`,
+    url_detail: '/partparametertemplate/:pk/',
+    api_endpoint: ApiEndpoints.part_parameter_template_list,
+    icon: 'test_templates'
+  },
+  parttesttemplate: {
+    label: () => t`Part Test Template`,
+    label_multiple: () => t`Part Test Templates`,
+    url_detail: '/parttesttemplate/:pk/',
+    api_endpoint: ApiEndpoints.part_test_template_list,
+    icon: 'test'
+  },
+  supplierpart: {
+    label: () => t`Supplier Part`,
+    label_multiple: () => t`Supplier Parts`,
+    url_overview: '/purchasing/index/supplier-parts',
+    url_detail: '/purchasing/supplier-part/:pk/',
+    api_endpoint: ApiEndpoints.supplier_part_list,
+    admin_url: '/company/supplierpart/',
+    icon: 'supplier_part'
+  },
+  manufacturerpart: {
+    label: () => t`Manufacturer Part`,
+    label_multiple: () => t`Manufacturer Parts`,
+    url_overview: '/purchasing/index/manufacturer-parts',
+    url_detail: '/purchasing/manufacturer-part/:pk/',
+    api_endpoint: ApiEndpoints.manufacturer_part_list,
+    admin_url: '/company/manufacturerpart/',
+    icon: 'manufacturers'
+  },
+  partcategory: {
+    label: () => t`Part Category`,
+    label_multiple: () => t`Part Categories`,
+    url_overview: '/part/category/parts/subcategories',
+    url_detail: '/part/category/:pk/',
+    api_endpoint: ApiEndpoints.category_list,
+    admin_url: '/part/partcategory/',
+    icon: 'category'
+  },
+  stockitem: {
+    label: () => t`Stock Item`,
+    label_multiple: () => t`Stock Items`,
+    url_overview: '/stock/location/index/stock-items',
+    url_detail: '/stock/item/:pk/',
+    api_endpoint: ApiEndpoints.stock_item_list,
+    admin_url: '/stock/stockitem/',
+    icon: 'stock'
+  },
+  stocklocation: {
+    label: () => t`Stock Location`,
+    label_multiple: () => t`Stock Locations`,
+    url_overview: '/stock/location',
+    url_detail: '/stock/location/:pk/',
+    api_endpoint: ApiEndpoints.stock_location_list,
+    admin_url: '/stock/stocklocation/',
+    icon: 'location'
+  },
+  stocklocationtype: {
+    label: () => t`Stock Location Type`,
+    label_multiple: () => t`Stock Location Types`,
+    api_endpoint: ApiEndpoints.stock_location_type_list,
+    icon: 'location'
+  },
+  stockhistory: {
+    label: () => t`Stock History`,
+    label_multiple: () => t`Stock Histories`,
+    api_endpoint: ApiEndpoints.stock_tracking_list,
+    icon: 'history'
+  },
+  build: {
+    label: () => t`Build`,
+    label_multiple: () => t`Builds`,
+    url_overview: '/manufacturing/index/buildorders/',
+    url_detail: '/manufacturing/build-order/:pk/',
+    api_endpoint: ApiEndpoints.build_order_list,
+    admin_url: '/build/build/',
+    icon: 'build_order'
+  },
+  buildline: {
+    label: () => t`Build Line`,
+    label_multiple: () => t`Build Lines`,
+    url_overview: '/build/line',
+    url_detail: '/build/line/:pk/',
+    api_endpoint: ApiEndpoints.build_line_list,
+    icon: 'build_order'
+  },
+  builditem: {
+    label: () => t`Build Item`,
+    label_multiple: () => t`Build Items`,
+    api_endpoint: ApiEndpoints.build_item_list,
+    icon: 'build_order'
+  },
+  company: {
+    label: () => t`Company`,
+    label_multiple: () => t`Companies`,
+    url_detail: '/company/:pk/',
+    api_endpoint: ApiEndpoints.company_list,
+    admin_url: '/company/company/',
+    icon: 'building'
+  },
+  projectcode: {
+    label: () => t`Project Code`,
+    label_multiple: () => t`Project Codes`,
+    url_detail: '/project-code/:pk/',
+    api_endpoint: ApiEndpoints.project_code_list,
+    icon: 'list_details'
+  },
+  purchaseorder: {
+    label: () => t`Purchase Order`,
+    label_multiple: () => t`Purchase Orders`,
+    url_overview: '/purchasing/index/purchaseorders',
+    url_detail: '/purchasing/purchase-order/:pk/',
+    api_endpoint: ApiEndpoints.purchase_order_list,
+    admin_url: '/order/purchaseorder/',
+    icon: 'purchase_orders'
+  },
+  purchaseorderlineitem: {
+    label: () => t`Purchase Order Line`,
+    label_multiple: () => t`Purchase Order Lines`,
+    api_endpoint: ApiEndpoints.purchase_order_line_list,
+    icon: 'purchase_orders'
+  },
+  salesorder: {
+    label: () => t`Sales Order`,
+    label_multiple: () => t`Sales Orders`,
+    url_overview: '/sales/index/salesorders',
+    url_detail: '/sales/sales-order/:pk/',
+    api_endpoint: ApiEndpoints.sales_order_list,
+    admin_url: '/order/salesorder/',
+    icon: 'sales_orders'
+  },
+  salesordershipment: {
+    label: () => t`Sales Order Shipment`,
+    label_multiple: () => t`Sales Order Shipments`,
+    url_detail: '/sales/shipment/:pk/',
+    api_endpoint: ApiEndpoints.sales_order_shipment_list,
+    icon: 'sales_orders'
+  },
+  returnorder: {
+    label: () => t`Return Order`,
+    label_multiple: () => t`Return Orders`,
+    url_overview: '/sales/index/returnorders',
+    url_detail: '/sales/return-order/:pk/',
+    api_endpoint: ApiEndpoints.return_order_list,
+    admin_url: '/order/returnorder/',
+    icon: 'return_orders'
+  },
+  returnorderlineitem: {
+    label: () => t`Return Order Line Item`,
+    label_multiple: () => t`Return Order Line Items`,
+    api_endpoint: ApiEndpoints.return_order_line_list,
+    icon: 'return_orders'
+  },
+  address: {
+    label: () => t`Address`,
+    label_multiple: () => t`Addresses`,
+    url_detail: '/address/:pk/',
+    api_endpoint: ApiEndpoints.address_list,
+    icon: 'address'
+  },
+  contact: {
+    label: () => t`Contact`,
+    label_multiple: () => t`Contacts`,
+    url_detail: '/contact/:pk/',
+    api_endpoint: ApiEndpoints.contact_list,
+    icon: 'group'
+  },
+  owner: {
+    label: () => t`Owner`,
+    label_multiple: () => t`Owners`,
+    url_detail: '/owner/:pk/',
+    api_endpoint: ApiEndpoints.owner_list,
+    icon: 'group'
+  },
+  user: {
+    label: () => t`User`,
+    label_multiple: () => t`Users`,
+    url_detail: '/core/user/:pk/',
+    api_endpoint: ApiEndpoints.user_list,
+    icon: 'user'
+  },
+  group: {
+    label: () => t`Group`,
+    label_multiple: () => t`Groups`,
+    url_detail: '/core/group/:pk/',
+    api_endpoint: ApiEndpoints.group_list,
+    admin_url: '/auth/group/',
+    icon: 'group'
+  },
+  importsession: {
+    label: () => t`Import Session`,
+    label_multiple: () => t`Import Sessions`,
+    url_overview: '/settings/admin/import',
+    url_detail: '/import/:pk/',
+    api_endpoint: ApiEndpoints.import_session_list,
+    icon: 'import'
+  },
+  labeltemplate: {
+    label: () => t`Label Template`,
+    label_multiple: () => t`Label Templates`,
+    url_overview: '/settings/admin/labels',
+    url_detail: '/settings/admin/labels/:pk/',
+    api_endpoint: ApiEndpoints.label_list,
+    icon: 'labels'
+  },
+  reporttemplate: {
+    label: () => t`Report Template`,
+    label_multiple: () => t`Report Templates`,
+    url_overview: '/settings/admin/reports',
+    url_detail: '/settings/admin/reports/:pk/',
+    api_endpoint: ApiEndpoints.report_list,
+    icon: 'reports'
+  },
+  pluginconfig: {
+    label: () => t`Plugin Configuration`,
+    label_multiple: () => t`Plugin Configurations`,
+    url_overview: '/settings/admin/plugin',
+    url_detail: '/settings/admin/plugin/:pk/',
+    api_endpoint: ApiEndpoints.plugin_list,
+    icon: 'plugin'
+  },
+  contenttype: {
+    label: () => t`Content Type`,
+    label_multiple: () => t`Content Types`,
+    api_endpoint: ApiEndpoints.content_type_list,
+    icon: 'list_details'
+  },
+  selectionlist: {
+    label: () => t`Selection List`,
+    label_multiple: () => t`Selection Lists`,
+    api_endpoint: ApiEndpoints.selectionlist_list,
+    icon: 'list_details'
+  },
+  error: {
+    label: () => t`Error`,
+    label_multiple: () => t`Errors`,
+    api_endpoint: ApiEndpoints.error_report_list,
+    url_overview: '/settings/admin/errors',
+    url_detail: '/settings/admin/errors/:pk/',
+    icon: 'exclamation'
+  }
+};
+
+/*
+ * Extract model definition given the provided type - returns translatable strings for labels as string, not functions
+ * @param type - ModelType to extract information from
+ * @returns ModelInformationInterface
+ */
+export function getModelInfo(type: ModelType): ModelInformationInterface {
+  return {
+    ...ModelInformationDict[type],
+    label: ModelInformationDict[type].label(),
+    label_multiple: ModelInformationDict[type].label_multiple()
+  };
+}