@inventreedb/ui 0.0.1

package/src/components/forms/fields/RelatedModelField.tsx

@@ -0,0 +1,339 @@
+import { t } from '@lingui/core/macro';
+import {
+  Input,
+  darken,
+  useMantineColorScheme,
+  useMantineTheme
+} from '@mantine/core';
+import { useDebouncedValue, useId } from '@mantine/hooks';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  type FieldValues,
+  type UseControllerReturn,
+  useFormContext
+} from 'react-hook-form';
+import Select from 'react-select';
+
+import type { ApiFormFieldType } from '@lib/types/Forms';
+import { useApi } from '../../../contexts/ApiContext';
+import { vars } from '../../../theme';
+import { RenderInstance } from '../../render/Instance';
+
+/**
+ * Render a 'select' field for searching the database against a particular model type
+ */
+export function RelatedModelField({
+  controller,
+  fieldName,
+  definition,
+  limit = 10
+}: Readonly<{
+  controller: UseControllerReturn<FieldValues, any>;
+  definition: ApiFormFieldType;
+  fieldName: string;
+  limit?: number;
+}>) {
+  const api = useApi();
+  const fieldId = useId();
+  const {
+    field,
+    fieldState: { error }
+  } = controller;
+
+  const form = useFormContext();
+
+  // Keep track of the primary key value for this field
+  const [pk, setPk] = useState<number | null>(null);
+
+  const [offset, setOffset] = useState<number>(0);
+
+  const [initialData, setInitialData] = useState<{}>({});
+  const [data, setData] = useState<any[]>([]);
+  const dataRef = useRef<any[]>([]);
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  // If an initial value is provided, load from the API
+  useEffect(() => {
+    // If the value is unchanged, do nothing
+    if (field.value === pk) return;
+
+    if (
+      field?.value !== null &&
+      field?.value !== undefined &&
+      field?.value !== ''
+    ) {
+      const url = `${definition.api_url}${field.value}/`;
+
+      if (!url) {
+        setPk(null);
+        return;
+      }
+
+      api.get(url).then((response) => {
+        const pk_field = definition.pk_field ?? 'pk';
+        if (response.data?.[pk_field]) {
+          const value = {
+            value: response.data[pk_field],
+            data: response.data
+          };
+
+          // Run custom callback for this field (if provided)
+          if (definition.onValueChange) {
+            definition.onValueChange(response.data[pk_field], response.data);
+          }
+
+          setInitialData(value);
+          dataRef.current = [value];
+          setPk(response.data[pk_field]);
+        }
+      });
+    } else {
+      setPk(null);
+    }
+  }, [definition.api_url, definition.pk_field, field.value]);
+
+  // Search input query
+  const [value, setValue] = useState<string>('');
+  const [searchText] = useDebouncedValue(value, 250);
+
+  const [filters, setFilters] = useState<any>({});
+
+  const resetSearch = useCallback(() => {
+    setOffset(0);
+    setData([]);
+    dataRef.current = [];
+  }, []);
+
+  // reset current data on search value change
+  useEffect(() => {
+    resetSearch();
+  }, [searchText, filters]);
+
+  const selectQuery = useQuery({
+    enabled:
+      isOpen &&
+      !definition.disabled &&
+      !!definition.api_url &&
+      !definition.hidden,
+    queryKey: [`related-field-${fieldName}`, fieldId, offset, searchText],
+    queryFn: async () => {
+      if (!definition.api_url) {
+        return null;
+      }
+
+      let _filters = definition.filters ?? {};
+
+      if (definition.adjustFilters) {
+        _filters =
+          definition.adjustFilters({
+            filters: _filters,
+            data: form.getValues()
+          }) ?? _filters;
+      }
+
+      // If the filters have changed, clear the data
+      if (JSON.stringify(_filters) !== JSON.stringify(filters)) {
+        resetSearch();
+        setFilters(_filters);
+      }
+
+      const params = {
+        ..._filters,
+        search: searchText,
+        offset: offset,
+        limit: limit
+      };
+
+      return api
+        .get(definition.api_url, {
+          params: params
+        })
+        .then((response) => {
+          // current values need to be accessed via a ref, otherwise "data" has old values here
+          // and this results in no overriding the data which means the current value cannot be displayed
+          const values: any[] = [...dataRef.current];
+          const alreadyPresentPks = values.map((x) => x.value);
+
+          const results = response.data?.results ?? response.data ?? [];
+
+          results.forEach((item: any) => {
+            const pk_field = definition.pk_field ?? 'pk';
+            const pk = item[pk_field];
+
+            if (pk && !alreadyPresentPks.includes(pk)) {
+              values.push({
+                value: pk,
+                data: item
+              });
+            }
+          });
+
+          setData(values);
+          dataRef.current = values;
+          return response;
+        })
+        .catch((error) => {
+          setData([]);
+          return error;
+        });
+    }
+  });
+
+  /**
+   * Format an option for display in the select field
+   */
+  const formatOption = useCallback(
+    (option: any) => {
+      const data = option.data ?? option;
+
+      if (definition.modelRenderer) {
+        return <definition.modelRenderer instance={data} />;
+      }
+
+      return (
+        <RenderInstance instance={data} model={definition.model ?? undefined} />
+      );
+    },
+    [definition.model, definition.modelRenderer]
+  );
+
+  // Update form values when the selected value changes
+  const onChange = useCallback(
+    (value: any) => {
+      const _pk = value?.value ?? null;
+      field.onChange(_pk);
+
+      setPk(_pk);
+
+      // Run custom callback for this field (if provided)
+      definition.onValueChange?.(_pk, value?.data ?? {});
+    },
+    [field.onChange, definition]
+  );
+
+  /* Construct a "cut-down" version of the definition,
+   * which does not include any attributes that the lower components do not recognize
+   */
+  const fieldDefinition = useMemo(() => {
+    return {
+      ...definition,
+      onValueChange: undefined,
+      adjustFilters: undefined,
+      exclude: undefined,
+      read_only: undefined
+    };
+  }, [definition]);
+
+  const currentValue = useMemo(() => {
+    if (!pk) {
+      return null;
+    }
+
+    const _data = [...data, initialData];
+    return _data.find((item) => item.value === pk);
+  }, [pk, data]);
+
+  // Field doesn't follow Mantine theming
+  // Define color theme to pass to field based on Mantine theme
+  const theme = useMantineTheme();
+  const { colorScheme } = useMantineColorScheme();
+
+  const colors = useMemo(() => {
+    let colors: any;
+    if (colorScheme === 'dark') {
+      colors = {
+        neutral0: vars.colors.dark[6],
+        neutral5: vars.colors.dark[4],
+        neutral10: vars.colors.dark[4],
+        neutral20: vars.colors.dark[4],
+        neutral30: vars.colors.dark[3],
+        neutral40: vars.colors.dark[2],
+        neutral50: vars.colors.dark[1],
+        neutral60: vars.colors.dark[0],
+        neutral70: vars.colors.dark[0],
+        neutral80: vars.colors.dark[0],
+        neutral90: vars.colors.dark[0],
+        primary: vars.colors.primaryColors[7],
+        primary25: vars.colors.primaryColors[6],
+        primary50: vars.colors.primaryColors[5],
+        primary75: vars.colors.primaryColors[4]
+      };
+    } else {
+      colors = {
+        neutral0: vars.colors.white,
+        neutral5: darken(vars.colors.white, 0.05),
+        neutral10: darken(vars.colors.white, 0.1),
+        neutral20: darken(vars.colors.white, 0.2),
+        neutral30: darken(vars.colors.white, 0.3),
+        neutral40: darken(vars.colors.white, 0.4),
+        neutral50: darken(vars.colors.white, 0.5),
+        neutral60: darken(vars.colors.white, 0.6),
+        neutral70: darken(vars.colors.white, 0.7),
+        neutral80: darken(vars.colors.white, 0.8),
+        neutral90: darken(vars.colors.white, 0.9),
+        primary: vars.colors.primaryColors[7],
+        primary25: vars.colors.primaryColors[4],
+        primary50: vars.colors.primaryColors[5],
+        primary75: vars.colors.primaryColors[6]
+      };
+    }
+    return colors;
+  }, [theme]);
+
+  return (
+    <Input.Wrapper
+      {...fieldDefinition}
+      error={definition.error ?? error?.message}
+      styles={{ description: { paddingBottom: '5px' } }}
+    >
+      <Select
+        id={fieldId}
+        aria-label={`related-field-${field.name}`}
+        value={currentValue}
+        ref={field.ref}
+        options={data}
+        filterOption={null}
+        onInputChange={(value: any) => {
+          setValue(value);
+          resetSearch();
+        }}
+        onChange={onChange}
+        onMenuScrollToBottom={() => setOffset(offset + limit)}
+        onMenuOpen={() => {
+          setIsOpen(true);
+          resetSearch();
+          selectQuery.refetch();
+        }}
+        onMenuClose={() => {
+          setIsOpen(false);
+        }}
+        isLoading={
+          selectQuery.isFetching ||
+          selectQuery.isLoading ||
+          selectQuery.isRefetching
+        }
+        isClearable={!definition.required}
+        isDisabled={definition.disabled}
+        isSearchable={true}
+        placeholder={definition.placeholder || `${t`Search`}...`}
+        loadingMessage={() => `${t`Loading`}...`}
+        menuPortalTarget={document.body}
+        noOptionsMessage={() => t`No results found`}
+        menuPosition='fixed'
+        styles={{ menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) }}
+        formatOptionLabel={(option: any) => formatOption(option)}
+        theme={(theme) => {
+          return {
+            ...theme,
+            colors: {
+              ...theme.colors,
+              ...colors
+            }
+          };
+        }}
+      />
+    </Input.Wrapper>
+  );
+}

package/src/components/forms/fields/TableField.tsx

@@ -0,0 +1,275 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { Alert, Container, Group, Stack, Table, Text } from '@mantine/core';
+import { IconExclamationCircle } from '@tabler/icons-react';
+import { type ReactNode, useCallback, useEffect, useMemo } from 'react';
+import type { FieldValues, UseControllerReturn } from 'react-hook-form';
+
+import type { ApiFormFieldType } from '@lib/types/Forms';
+import { identifierString } from '../../../functions/conversion';
+import { InvenTreeIcon } from '../../../functions/icons';
+import { AddItemButton } from '../../buttons/AddItemButton';
+import { StandaloneField } from '../StandaloneField';
+
+export interface TableFieldRowProps {
+  item: any;
+  idx: number;
+  rowErrors: any;
+  control: UseControllerReturn<FieldValues, any>;
+  changeFn: (idx: number, key: string, value: any) => void;
+  removeFn: (idx: number) => void;
+}
+
+function TableFieldRow({
+  item,
+  idx,
+  errors,
+  definition,
+  control,
+  changeFn,
+  removeFn
+}: Readonly<{
+  item: any;
+  idx: number;
+  errors: any;
+  definition: ApiFormFieldType;
+  control: UseControllerReturn<FieldValues, any>;
+  changeFn: (idx: number, key: string, value: any) => void;
+  removeFn: (idx: number) => void;
+}>) {
+  // Table fields require render function
+  if (!definition.modelRenderer) {
+    return (
+      <Table.Tr key='table-row-no-renderer'>
+        <Table.Td colSpan={definition.headers?.length}>
+          <Alert color='red' title={t`Error`} icon={<IconExclamationCircle />}>
+            {t`modelRenderer entry required for tables`}
+          </Alert>
+        </Table.Td>
+      </Table.Tr>
+    );
+  }
+
+  return definition.modelRenderer({
+    item: item,
+    idx: idx,
+    rowErrors: errors,
+    control: control,
+    changeFn: changeFn,
+    removeFn: removeFn
+  });
+}
+
+export function TableFieldErrorWrapper({
+  props,
+  errorKey,
+  children
+}: Readonly<{
+  props: TableFieldRowProps;
+  errorKey: string;
+  children: ReactNode;
+}>) {
+  const msg = props?.rowErrors?.[errorKey];
+
+  return (
+    <Stack gap='xs'>
+      {children}
+      {msg && (
+        <Text size='xs' c='red'>
+          {msg.message}
+        </Text>
+      )}
+    </Stack>
+  );
+}
+
+export function TableField({
+  definition,
+  fieldName,
+  control
+}: Readonly<{
+  definition: ApiFormFieldType;
+  fieldName: string;
+  control: UseControllerReturn<FieldValues, any>;
+}>) {
+  const {
+    field,
+    fieldState: { error }
+  } = control;
+  const { value } = field;
+
+  const onRowFieldChange = (idx: number, key: string, value: any) => {
+    const val = field.value;
+    val[idx][key] = value;
+
+    field.onChange(val);
+  };
+
+  const removeRow = (idx: number) => {
+    const val = field.value;
+    val.splice(idx, 1);
+    field.onChange(val);
+  };
+
+  const fieldDefinition = useMemo(() => {
+    return {
+      ...definition,
+      modelRenderer: undefined,
+      onValueChange: undefined,
+      adjustFilters: undefined,
+      read_only: undefined,
+      addRow: undefined
+    };
+  }, [definition]);
+
+  // Extract errors associated with the current row
+  const rowErrors: any = useCallback(
+    (idx: number) => {
+      if (Array.isArray(error)) {
+        return error[idx];
+      }
+    },
+    [error]
+  );
+
+  return (
+    <Table
+      highlightOnHover
+      striped
+      aria-label={`table-field-${field.name}`}
+      style={{ width: '100%' }}
+    >
+      <Table.Thead>
+        <Table.Tr>
+          {definition.headers?.map((header, index) => {
+            return (
+              <Table.Th
+                key={`table-header-${identifierString(header.title)}-${index}`}
+                style={header.style}
+              >
+                {header.title}
+              </Table.Th>
+            );
+          })}
+        </Table.Tr>
+      </Table.Thead>
+
+      <Table.Tbody>
+        {value.length > 0 ? (
+          value.map((item: any, idx: number) => {
+            return (
+              <TableFieldRow
+                key={`table-row-${idx}`}
+                item={item}
+                idx={idx}
+                errors={rowErrors(idx)}
+                control={control}
+                definition={definition}
+                changeFn={onRowFieldChange}
+                removeFn={removeRow}
+              />
+            );
+          })
+        ) : (
+          <Table.Tr key='table-row-no-entries'>
+            <Table.Td
+              style={{ textAlign: 'center' }}
+              colSpan={definition.headers?.length}
+            >
+              <span
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  gap: '5px'
+                }}
+              >
+                <InvenTreeIcon icon='info' />
+                <Trans>No entries available</Trans>
+              </span>
+            </Table.Td>
+          </Table.Tr>
+        )}
+      </Table.Tbody>
+      {definition.addRow && (
+        <Table.Tfoot>
+          <Table.Tr>
+            <Table.Td colSpan={definition.headers?.length}>
+              <AddItemButton
+                tooltip={t`Add new row`}
+                onClick={() => {
+                  if (definition.addRow === undefined) return;
+                  const ret = definition.addRow();
+                  if (ret) {
+                    const val = field.value;
+                    val.push(ret);
+                    field.onChange(val);
+                  }
+                }}
+              />
+            </Table.Td>
+          </Table.Tr>
+        </Table.Tfoot>
+      )}
+    </Table>
+  );
+}
+
+/*
+ * Display an "extra" row below the main table row, for additional information.
+ * - Each "row" can display an extra row of information below the main row
+ */
+export function TableFieldExtraRow({
+  visible,
+  fieldName,
+  fieldDefinition,
+  defaultValue,
+  emptyValue,
+  error,
+  onValueChange
+}: {
+  visible: boolean;
+  fieldName?: string;
+  fieldDefinition: ApiFormFieldType;
+  defaultValue?: any;
+  error?: string;
+  emptyValue?: any;
+  onValueChange: (value: any) => void;
+}) {
+  // Callback whenever the visibility of the sub-field changes
+  useEffect(() => {
+    if (!visible) {
+      // If the sub-field is hidden, reset the value to the "empty" value
+      onValueChange(emptyValue);
+    }
+  }, [visible]);
+
+  const field: ApiFormFieldType = useMemo(() => {
+    return {
+      ...fieldDefinition,
+      default: defaultValue,
+      onValueChange: (value: any) => {
+        onValueChange(value);
+      }
+    };
+  }, [fieldDefinition]);
+
+  return (
+    visible && (
+      <Table.Tr>
+        <Table.Td colSpan={10}>
+          <Group grow preventGrowOverflow={false} justify='flex-apart' p='xs'>
+            <Container flex={0} p='xs'>
+              <InvenTreeIcon icon='downright' />
+            </Container>
+            <StandaloneField
+              fieldName={fieldName ?? 'field'}
+              fieldDefinition={field}
+              defaultValue={defaultValue}
+              error={fieldDefinition.error ?? error}
+            />
+          </Group>
+        </Table.Td>
+      </Table.Tr>
+    )
+  );
+}

package/src/components/forms/fields/TextField.tsx

@@ -0,0 +1,81 @@
+import { TextInput } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import { IconX } from '@tabler/icons-react';
+import { useCallback, useEffect, useId, useState } from 'react';
+import type { FieldValues, UseControllerReturn } from 'react-hook-form';
+
+/*
+ * Custom implementation of the mantine <TextInput> component,
+ * used for rendering text input fields in forms.
+ * Uses a debounced value to prevent excessive re-renders.
+ */
+export default function TextField({
+  controller,
+  fieldName,
+  definition,
+  onChange,
+  onKeyDown
+}: Readonly<{
+  controller: UseControllerReturn<FieldValues, any>;
+  definition: any;
+  fieldName: string;
+  onChange: (value: any) => void;
+  onKeyDown: (value: any) => void;
+}>) {
+  const fieldId = useId();
+  const {
+    field,
+    fieldState: { error }
+  } = controller;
+
+  const { value } = field;
+
+  const [rawText, setRawText] = useState<string>(value || '');
+
+  const [debouncedText] = useDebouncedValue(rawText, 100);
+
+  useEffect(() => {
+    setRawText(value || '');
+  }, [value]);
+
+  const onTextChange = useCallback((value: any) => {
+    setRawText(value);
+  }, []);
+
+  useEffect(() => {
+    if (debouncedText !== value) {
+      onChange(debouncedText);
+    }
+  }, [debouncedText]);
+
+  return (
+    <TextInput
+      {...definition}
+      ref={field.ref}
+      id={fieldId}
+      aria-label={`text-field-${field.name}`}
+      type={definition.field_type}
+      value={rawText || ''}
+      error={definition.error ?? error?.message}
+      radius='sm'
+      onChange={(event) => onTextChange(event.currentTarget.value)}
+      onBlur={(event) => {
+        if (event.currentTarget.value != value) {
+          onChange(event.currentTarget.value);
+        }
+      }}
+      onKeyDown={(event) => {
+        if (event.code === 'Enter') {
+          // Bypass debounce on enter key
+          onChange(event.currentTarget.value);
+        }
+        onKeyDown(event.code);
+      }}
+      rightSection={
+        value && !definition.required ? (
+          <IconX size='1rem' color='red' onClick={() => onTextChange('')} />
+        ) : null
+      }
+    />
+  );
+}