@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/render/StatusRenderer.tsx

@@ -1,178 +0,0 @@
-import { Badge, Center, type MantineSize } from '@mantine/core';
-
-import type { ModelType } from '@lib/enums/ModelType';
-import { statusColorMap } from '../../defaults/backendMappings';
-import { resolveItem } from '../../functions/conversion';
-import { useGlobalStatusState } from '../../states/StatusState';
-
-export interface StatusCodeInterface {
-  key: number;
-  label: string;
-  name: string;
-  color: string;
-}
-
-export interface StatusCodeListInterface {
-  status_class: string;
-  values: {
-    [key: string]: StatusCodeInterface;
-  };
-}
-
-interface RenderStatusLabelOptionsInterface {
-  size?: MantineSize;
-  hidden?: boolean;
-}
-
-/*
- * Generic function to render a status label
- */
-function renderStatusLabel(
-  key: string | number,
-  codes: StatusCodeListInterface,
-  options: RenderStatusLabelOptionsInterface = {}
-) {
-  let text = null;
-  let color = null;
-
-  // Find the entry which matches the provided key
-  for (const name in codes.values) {
-    const entry: StatusCodeInterface = codes.values[name];
-
-    if (entry?.key == key) {
-      text = entry.label;
-      color = entry.color;
-      break;
-    }
-  }
-
-  if (!text) {
-    console.error(
-      `ERR: renderStatusLabel could not find match for code ${key}`
-    );
-  }
-
-  // Fallbacks
-  if (color == null) color = 'default';
-  color = statusColorMap[color] || statusColorMap['default'];
-  const size = options.size || 'xs';
-
-  if (!text) {
-    text = key;
-  }
-
-  return (
-    <Badge color={color} variant='filled' size={size}>
-      {text}
-    </Badge>
-  );
-}
-
-export function getStatusCodes(
-  type: ModelType | string
-): StatusCodeListInterface | null {
-  const statusCodeList = useGlobalStatusState.getState().status;
-
-  if (statusCodeList === undefined) {
-    console.log('StatusRenderer: statusCodeList is undefined');
-    return null;
-  }
-
-  const statusCodes = statusCodeList[type];
-
-  if (statusCodes === undefined) {
-    console.log('StatusRenderer: statusCodes is undefined');
-    return null;
-  }
-
-  return statusCodes;
-}
-
-/**
- * Return a list of status codes select options for a given model type
- * returns an array of objects with keys "value" and "display_name"
- *
- */
-export function getStatusCodeOptions(type: ModelType | string): any[] {
-  const statusCodes = getStatusCodes(type);
-
-  if (!statusCodes) {
-    return [];
-  }
-
-  return Object.values(statusCodes?.values ?? []).map((entry) => {
-    return {
-      value: entry.key,
-      display_name: entry.label
-    };
-  });
-}
-
-/*
- * Return the name of a status code, based on the key
- */
-export function getStatusCodeName(
-  type: ModelType | string,
-  key: string | number
-) {
-  const statusCodes = getStatusCodes(type);
-
-  if (!statusCodes) {
-    return null;
-  }
-
-  for (const name in statusCodes) {
-    const entry: StatusCodeInterface = statusCodes.values[name];
-
-    if (entry.key == key) {
-      return entry.name;
-    }
-  }
-
-  return null;
-}
-
-/*
- * Render the status for a object.
- * Uses the values specified in "status_codes.py"
- */
-export const StatusRenderer = ({
-  status,
-  type,
-  options
-}: {
-  status: string | number;
-  type: ModelType | string;
-  options?: RenderStatusLabelOptionsInterface;
-}) => {
-  const statusCodes = getStatusCodes(type);
-
-  if (options?.hidden) {
-    return null;
-  }
-
-  if (statusCodes === undefined || statusCodes === null) {
-    console.warn('StatusRenderer: statusCodes is undefined');
-    return null;
-  }
-
-  return renderStatusLabel(status, statusCodes, options);
-};
-
-/*
- * Render the status badge in a table
- */
-export function TableStatusRenderer(
-  type: ModelType,
-  accessor?: string
-): ((record: any) => any) | undefined {
-  return (record: any) => {
-    const status = resolveItem(record, accessor ?? 'status');
-
-    return (
-      status && (
-        <Center>{StatusRenderer({ status: status, type: type })}</Center>
-      )
-    );
-  };
-}

package/src/components/render/Stock.tsx

@@ -1,84 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Text } 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 StockLocation instance
- */
-export function RenderStockLocation(
-  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.stocklocation, instance.pk)
-          : undefined
-      }
-    />
-  );
-}
-
-/**
- * Inline rendering of a single StockLocationType instance
- */
-export function RenderStockLocationType({
-  instance
-}: Readonly<InstanceRenderInterface>): ReactNode {
-  return (
-    <RenderInlineModel
-      primary={instance.name}
-      prefix={instance.icon && <ApiIcon name={instance.icon} />}
-      secondary={`${instance.description} (${instance.location_count})`}
-    />
-  );
-}
-
-export function RenderStockItem(
-  props: Readonly<InstanceRenderInterface>
-): ReactNode {
-  const { instance } = props;
-  let quantity_string = '';
-
-  if (instance?.serial !== null && instance?.serial !== undefined) {
-    quantity_string += `${t`Serial Number`}: ${instance.serial}`;
-  } else if (instance?.quantity) {
-    quantity_string = `${t`Quantity`}: ${instance.quantity}`;
-  }
-
-  let batch_string = '';
-
-  if (!!instance.batch) {
-    batch_string = `${t`Batch`}: ${instance.batch}`;
-  }
-
-  return (
-    <RenderInlineModel
-      {...props}
-      primary={instance.part_detail?.full_name}
-      secondary={batch_string}
-      suffix={<Text size='xs'>{quantity_string}</Text>}
-      image={instance.part_detail?.thumbnail || instance.part_detail?.image}
-      url={
-        props.link ? getDetailUrl(ModelType.stockitem, instance.pk) : undefined
-      }
-    />
-  );
-}

package/src/components/render/User.tsx

@@ -1,42 +0,0 @@
-import { IconUser, IconUsersGroup } from '@tabler/icons-react';
-import type { ReactNode } from 'react';
-
-import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
-
-export function RenderOwner({
-  instance
-}: Readonly<InstanceRenderInterface>): ReactNode {
-  return (
-    instance && (
-      <RenderInlineModel
-        primary={instance.name}
-        suffix={
-          instance.label == 'group' ? (
-            <IconUsersGroup size={16} />
-          ) : (
-            <IconUser size={16} />
-          )
-        }
-      />
-    )
-  );
-}
-
-export function RenderUser({
-  instance
-}: Readonly<InstanceRenderInterface>): ReactNode {
-  return (
-    instance && (
-      <RenderInlineModel
-        primary={instance.username}
-        secondary={`${instance.first_name} ${instance.last_name}`}
-      />
-    )
-  );
-}
-
-export function RenderGroup({
-  instance
-}: Readonly<InstanceRenderInterface>): ReactNode {
-  return instance && <RenderInlineModel primary={instance.name} />;
-}

package/src/components/settings/FactCollection.tsx

@@ -1,31 +0,0 @@
-import { SimpleGrid } from '@mantine/core';
-
-import { FactItem } from './FactItem';
-
-export function FactCollection({
-  items,
-  minItems = 3
-}: Readonly<{
-  items: { title: string; value: any }[];
-  minItems?: number;
-}>) {
-  return (
-    <SimpleGrid
-      cols={{
-        base: 1,
-        sm: Math.min(2, minItems),
-        md: Math.min(3, minItems),
-        lg: minItems
-      }}
-      spacing='xs'
-    >
-      {items.map((item, index) => (
-        <FactItem
-          key={`${index}-${item.value}`}
-          title={item.title}
-          value={item.value}
-        />
-      ))}
-    </SimpleGrid>
-  );
-}

package/src/components/settings/FactItem.tsx

@@ -1,17 +0,0 @@
-import { Paper, Stack, Text } from '@mantine/core';
-
-import { StylishText } from '../items/StylishText';
-
-export function FactItem({
-  title,
-  value
-}: Readonly<{ title: string; value: number }>) {
-  return (
-    <Paper p='md' shadow='xs'>
-      <Stack gap='xs'>
-        <StylishText size='md'>{title}</StylishText>
-        <Text>{value}</Text>
-      </Stack>
-    </Paper>
-  );
-}

package/src/components/settings/SettingItem.tsx

@@ -1,176 +0,0 @@
-import {
-  Button,
-  Group,
-  Paper,
-  Space,
-  Stack,
-  Switch,
-  Text,
-  useMantineColorScheme
-} from '@mantine/core';
-import { IconEdit } from '@tabler/icons-react';
-import { useEffect, useMemo, useState } from 'react';
-
-import { ModelType } from '@lib/enums/ModelType';
-import { apiUrl } from '@lib/functions/Api';
-import type { Setting } from '@lib/types/Settings';
-import { api } from '../../App';
-import { vars } from '../../theme';
-import { Boundary } from '../Boundary';
-import { RenderInstance } from '../render/Instance';
-import { ModelInformationDict } from '../render/ModelType';
-
-/**
- * Render a single setting value
- */
-function SettingValue({
-  setting,
-  onEdit,
-  onToggle
-}: Readonly<{
-  setting: Setting;
-  onEdit: (setting: Setting) => void;
-  onToggle: (setting: Setting, value: boolean) => void;
-}>) {
-  // Determine the text to display for the setting value
-  const valueText: string = useMemo(() => {
-    let value = setting.value;
-
-    // If the setting has a choice, display the choice label
-    if (setting?.choices && setting?.choices?.length > 0) {
-      const choice = setting.choices.find((c) => c.value == setting.value);
-      value = choice?.display_name || setting.value;
-    }
-
-    if (setting?.units) {
-      value = `${value} ${setting.units}`;
-    }
-
-    return value;
-  }, [setting]);
-
-  const [modelInstance, setModelInstance] = useState<any>(null);
-
-  // Does this setting map to an internal database model?
-  const modelType: ModelType | null = useMemo(() => {
-    if (setting.model_name) {
-      const model = setting.model_name.split('.')[1];
-      return ModelType[model as keyof typeof ModelType] || null;
-    }
-    return null;
-  }, [setting]);
-
-  useEffect(() => {
-    setModelInstance(null);
-
-    if (modelType && setting.value) {
-      const endpoint = ModelInformationDict[modelType].api_endpoint;
-
-      api
-        .get(apiUrl(endpoint, setting.value))
-        .then((response) => {
-          if (response.data) {
-            setModelInstance(response.data);
-          } else {
-            setModelInstance(null);
-          }
-        })
-        .catch((error) => {
-          setModelInstance(null);
-        });
-    }
-  }, [setting, modelType]);
-
-  // If a full model instance is available, render it
-  if (modelInstance && modelType && setting.value) {
-    return (
-      <Group justify='right' gap='xs'>
-        <RenderInstance instance={modelInstance} model={modelType} />
-        <Button
-          aria-label={`edit-setting-${setting.key}`}
-          variant='subtle'
-          onClick={() => onEdit(setting)}
-        >
-          <IconEdit />
-        </Button>
-      </Group>
-    );
-  }
-
-  switch (setting?.type || 'string') {
-    case 'boolean':
-      return (
-        <Switch
-          size='sm'
-          radius='lg'
-          aria-label={`toggle-setting-${setting.key}`}
-          checked={setting.value.toLowerCase() == 'true'}
-          onChange={(event) => onToggle(setting, event.currentTarget.checked)}
-          style={{
-            paddingRight: '20px'
-          }}
-        />
-      );
-    default:
-      return valueText ? (
-        <Group gap='xs' justify='right'>
-          <Space />
-          <Button
-            aria-label={`edit-setting-${setting.key}`}
-            variant='subtle'
-            onClick={() => onEdit(setting)}
-          >
-            {valueText}
-          </Button>
-        </Group>
-      ) : (
-        <Button
-          aria-label={`edit-setting-${setting.key}`}
-          variant='subtle'
-          onClick={() => onEdit(setting)}
-        >
-          <IconEdit />
-        </Button>
-      );
-  }
-}
-
-/**
- * Display a single setting item, and allow editing of the value
- */
-export function SettingItem({
-  setting,
-  shaded,
-  onEdit,
-  onToggle
-}: Readonly<{
-  setting: Setting;
-  shaded: boolean;
-  onEdit: (setting: Setting) => void;
-  onToggle: (setting: Setting, value: boolean) => void;
-}>) {
-  const { colorScheme } = useMantineColorScheme();
-
-  const style: Record<string, string> = { paddingLeft: '8px' };
-  if (shaded) {
-    style['backgroundColor'] =
-      colorScheme === 'light' ? vars.colors.gray[1] : vars.colors.gray[9];
-  }
-
-  return (
-    <Paper style={style}>
-      <Group justify='space-between' p='3'>
-        <Stack gap='2' p='4px'>
-          <Text>
-            {setting.name}
-            {setting.required ? ' *' : ''}
-          </Text>
-          <Text size='xs'>{setting.description}</Text>
-        </Stack>
-        <Boundary label={`setting-value-${setting.key}`}>
-          <SettingValue setting={setting} onEdit={onEdit} onToggle={onToggle} />
-        </Boundary>
-      </Group>
-    </Paper>
-  );
-}