@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/render/Generic.tsx

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

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

@@ -1,33 +0,0 @@
-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/Order.tsx

@@ -1,124 +0,0 @@
-import { t } from '@lingui/core/macro';
-import type { ReactNode } from 'react';
-
-import { ModelType } from '@lib/enums/ModelType';
-import { getDetailUrl } from '../../functions/urls';
-import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
-import { StatusRenderer } from './StatusRenderer';
-
-/**
- * Inline rendering of a single PurchaseOrder instance
- */
-export function RenderPurchaseOrder(
-  props: Readonly<InstanceRenderInterface>
-): ReactNode {
-  const { instance } = props;
-  const supplier = instance?.supplier_detail || {};
-
-  return (
-    <RenderInlineModel
-      {...props}
-      primary={instance.reference}
-      secondary={instance.description}
-      suffix={StatusRenderer({
-        status: instance.status_custom_key,
-        type: ModelType.purchaseorder
-      })}
-      image={supplier.thumnbnail || supplier.image}
-      url={
-        props.link
-          ? getDetailUrl(ModelType.purchaseorder, instance.pk)
-          : undefined
-      }
-    />
-  );
-}
-
-/**
- * Inline rendering of a single ReturnOrder instance
- */
-export function RenderReturnOrder(
-  props: Readonly<InstanceRenderInterface>
-): ReactNode {
-  const { instance } = props;
-  const customer = instance?.customer_detail || {};
-
-  return (
-    <RenderInlineModel
-      {...props}
-      primary={instance.reference}
-      secondary={instance.description}
-      suffix={StatusRenderer({
-        status: instance.status_custom_key,
-        type: ModelType.returnorder
-      })}
-      image={customer.thumnbnail || customer.image}
-      url={
-        props.link
-          ? getDetailUrl(ModelType.returnorder, instance.pk)
-          : undefined
-      }
-    />
-  );
-}
-
-export function RenderReturnOrderLineItem(
-  props: Readonly<InstanceRenderInterface>
-): ReactNode {
-  const { instance } = props;
-
-  return (
-    <RenderInlineModel
-      {...props}
-      primary={instance.reference}
-      suffix={StatusRenderer({
-        status: instance.outcome,
-        type: ModelType.returnorderlineitem
-      })}
-    />
-  );
-}
-
-/**
- * Inline rendering of a single SalesOrder instance
- */
-export function RenderSalesOrder(
-  props: Readonly<InstanceRenderInterface>
-): ReactNode {
-  const { instance } = props;
-  const customer = instance?.customer_detail || {};
-
-  return (
-    <RenderInlineModel
-      {...props}
-      primary={instance.reference}
-      secondary={instance.description}
-      suffix={StatusRenderer({
-        status: instance.status_custom_key,
-        type: ModelType.salesorder
-      })}
-      image={customer.thumnbnail || customer.image}
-      url={
-        props.link ? getDetailUrl(ModelType.salesorder, instance.pk) : undefined
-      }
-    />
-  );
-}
-
-/**
- * Inline rendering of a single SalesOrderAllocation instance
- */
-export function RenderSalesOrderShipment({
-  instance
-}: Readonly<{
-  instance: any;
-}>): ReactNode {
-  const order = instance.order_detail || {};
-
-  return (
-    <RenderInlineModel
-      primary={order.reference}
-      secondary={`${t`Shipment`} ${instance.reference}`}
-    />
-  );
-}

package/src/components/render/Part.tsx

@@ -1,109 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Badge } from '@mantine/core';
-import type { ReactNode } from 'react';
-
-import { ModelType } from '@lib/enums/ModelType';
-import { getDetailUrl } from '../../functions/urls';
-import { ApiIcon } from '../items/ApiIcon';
-import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
-
-/**
- * Inline rendering of a single Part instance
- */
-export function RenderPart(
-  props: Readonly<InstanceRenderInterface>
-): ReactNode {
-  const { instance } = props;
-
-  let badgeText = '';
-  let badgeColor = '';
-
-  const stock: number | null = instance.total_in_stock ?? null;
-
-  if (instance.active == false) {
-    badgeColor = 'red';
-    badgeText = t`Inactive`;
-  } else if (stock != null && stock <= 0) {
-    badgeColor = 'orange';
-    badgeText = t`No stock`;
-  } else if (stock != null) {
-    badgeText = `${t`Stock`}: ${stock}`;
-    badgeColor = instance.minimum_stock > stock ? 'yellow' : 'green';
-  }
-
-  const badge = !!badgeText ? (
-    <Badge size='xs' color={badgeColor}>
-      {badgeText}
-    </Badge>
-  ) : null;
-
-  return (
-    <RenderInlineModel
-      {...props}
-      primary={instance.full_name ?? instance.name}
-      secondary={instance.description}
-      suffix={badge}
-      image={instance.thumnbnail || instance.image}
-      url={props.link ? getDetailUrl(ModelType.part, instance.pk) : undefined}
-    />
-  );
-}
-
-/**
- * Inline rendering of a PartCategory instance
- */
-export function RenderPartCategory(
-  props: Readonly<InstanceRenderInterface>
-): ReactNode {
-  const { instance } = props;
-
-  return (
-    <RenderInlineModel
-      {...props}
-      tooltip={instance.pathstring}
-      prefix={
-        <>
-          {instance.level > 0 && `${'- '.repeat(instance.level)}`}
-          {instance.icon && <ApiIcon name={instance.icon} />}
-        </>
-      }
-      primary={instance.pathstring}
-      secondary={instance.description}
-      url={
-        props.link
-          ? getDetailUrl(ModelType.partcategory, instance.pk)
-          : undefined
-      }
-    />
-  );
-}
-
-/**
- * Inline rendering of a PartParameterTemplate instance
- */
-export function RenderPartParameterTemplate({
-  instance
-}: Readonly<{
-  instance: any;
-}>): ReactNode {
-  return (
-    <RenderInlineModel
-      primary={instance.name}
-      secondary={instance.description}
-      suffix={instance.units}
-    />
-  );
-}
-
-export function RenderPartTestTemplate({
-  instance
-}: Readonly<{
-  instance: any;
-}>): ReactNode {
-  return (
-    <RenderInlineModel
-      primary={instance.test_name}
-      secondary={instance.description}
-    />
-  );
-}

package/src/components/render/Plugin.tsx

@@ -1,21 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Badge } from '@mantine/core';
-import type { ReactNode } from 'react';
-
-import { RenderInlineModel } from './Instance';
-
-export function RenderPlugin({
-  instance
-}: Readonly<{
-  instance: Readonly<any>;
-}>): ReactNode {
-  return (
-    <RenderInlineModel
-      primary={instance.name}
-      secondary={instance.meta?.description}
-      suffix={
-        !instance.active && <Badge size='sm' color='red'>{t`Inactive`}</Badge>
-      }
-    />
-  );
-}

package/src/components/render/Report.tsx

@@ -1,29 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { RenderInlineModel } from './Instance';
-
-export function RenderReportTemplate({
-  instance
-}: Readonly<{
-  instance: any;
-}>): ReactNode {
-  return (
-    <RenderInlineModel
-      primary={instance.name}
-      secondary={instance.description}
-    />
-  );
-}
-
-export function RenderLabelTemplate({
-  instance
-}: Readonly<{
-  instance: any;
-}>): ReactNode {
-  return (
-    <RenderInlineModel
-      primary={instance.name}
-      secondary={instance.description}
-    />
-  );
-}