@inventreedb/ui 0.0.1

package/src/tables/part/ParametricPartTable.tsx

@@ -0,0 +1,297 @@
+import { t } from '@lingui/core/macro';
+import { Group } from '@mantine/core';
+import { useHover } from '@mantine/hooks';
+import { useQuery } from '@tanstack/react-query';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import type { ApiFormFieldSet } from '@lib/types/Forms';
+import { YesNoButton } from '../../components/buttons/YesNoButton';
+import { useApi } from '../../contexts/ApiContext';
+import { formatDecimal } from '../../defaults/formatters';
+import { usePartParameterFields } from '../../forms/PartForms';
+import { cancelEvent } from '../../functions/events';
+import { navigateToLink } from '../../functions/navigation';
+import { getDetailUrl } from '../../functions/urls';
+import {
+  useCreateApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { DescriptionColumn, PartColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { TableHoverCard } from '../TableHoverCard';
+
+// Render an individual parameter cell
+function ParameterCell({
+  record,
+  template,
+  canEdit
+}: Readonly<{
+  record: any;
+  template: any;
+  canEdit: boolean;
+}>) {
+  const { hovered, ref } = useHover();
+
+  // Find matching template parameter
+  const parameter = useMemo(() => {
+    return record.parameters?.find((p: any) => p.template == template.pk);
+  }, [record.parameters, template]);
+
+  const extra: any[] = [];
+
+  // Format the value for display
+  const value: ReactNode = useMemo(() => {
+    let v: any = parameter?.data;
+
+    // Handle boolean values
+    if (template?.checkbox && v != undefined) {
+      v = <YesNoButton value={parameter.data} />;
+    }
+
+    return v;
+  }, [parameter, template]);
+
+  if (
+    template.units &&
+    parameter &&
+    parameter.data_numeric &&
+    parameter.data_numeric != parameter.data
+  ) {
+    const numeric = formatDecimal(parameter.data_numeric, { digits: 15 });
+    extra.push(`${numeric} [${template.units}]`);
+  }
+
+  if (hovered && canEdit) {
+    extra.push(t`Click to edit`);
+  }
+
+  return (
+    <div>
+      <Group grow ref={ref} justify='space-between'>
+        <Group grow>
+          <TableHoverCard
+            value={value ?? '-'}
+            extra={extra}
+            icon={hovered && canEdit ? 'edit' : 'info'}
+            title={template.name}
+          />
+        </Group>
+      </Group>
+    </div>
+  );
+}
+
+export default function ParametricPartTable({
+  categoryId
+}: Readonly<{
+  categoryId?: any;
+}>) {
+  const api = useApi();
+  const table = useTable('parametric-parts');
+  const user = useUserState();
+  const navigate = useNavigate();
+
+  const categoryParameters = useQuery({
+    queryKey: ['category-parameters', categoryId],
+    queryFn: async () => {
+      return api
+        .get(apiUrl(ApiEndpoints.part_parameter_template_list), {
+          params: {
+            category: categoryId
+          }
+        })
+        .then((response) => response.data)
+        .catch((_error) => []);
+    },
+    refetchOnMount: true
+  });
+
+  const [selectedPart, setSelectedPart] = useState<number>(0);
+  const [selectedTemplate, setSelectedTemplate] = useState<number>(0);
+  const [selectedParameter, setSelectedParameter] = useState<number>(0);
+
+  const partParameterFields: ApiFormFieldSet = usePartParameterFields({
+    editTemplate: false
+  });
+
+  const addParameter = useCreateApiFormModal({
+    url: ApiEndpoints.part_parameter_list,
+    title: t`Add Part Parameter`,
+    fields: useMemo(() => ({ ...partParameterFields }), [partParameterFields]),
+    focus: 'data',
+    onFormSuccess: (parameter: any) => {
+      updateParameterRecord(selectedPart, parameter);
+    },
+    initialData: {
+      part: selectedPart,
+      template: selectedTemplate
+    }
+  });
+
+  const editParameter = useEditApiFormModal({
+    url: ApiEndpoints.part_parameter_list,
+    title: t`Edit Part Parameter`,
+    pk: selectedParameter,
+    fields: useMemo(() => ({ ...partParameterFields }), [partParameterFields]),
+    focus: 'data',
+    onFormSuccess: (parameter: any) => {
+      updateParameterRecord(selectedPart, parameter);
+    }
+  });
+
+  // Update a single parameter record in the table
+  const updateParameterRecord = useCallback(
+    (part: number, parameter: any) => {
+      const records = table.records;
+      const partIndex = records.findIndex((record: any) => record.pk == part);
+
+      if (partIndex < 0) {
+        // No matching part: reload the entire table
+        table.refreshTable();
+        return;
+      }
+
+      const parameterIndex = records[partIndex].parameters.findIndex(
+        (p: any) => p.pk == parameter.pk
+      );
+
+      if (parameterIndex < 0) {
+        // No matching parameter - append new parameter
+        records[partIndex].parameters.push(parameter);
+      } else {
+        records[partIndex].parameters[parameterIndex] = parameter;
+      }
+
+      table.updateRecord(records[partIndex]);
+    },
+    [table.updateRecord]
+  );
+
+  const parameterColumns: TableColumn[] = useMemo(() => {
+    const data = categoryParameters.data ?? [];
+
+    return data.map((template: any) => {
+      let title = template.name;
+
+      if (template.units) {
+        title += ` [${template.units}]`;
+      }
+
+      return {
+        accessor: `parameter_${template.pk}`,
+        title: title,
+        sortable: true,
+        extra: {
+          template: template.pk
+        },
+        render: (record: any) => (
+          <ParameterCell
+            record={record}
+            template={template}
+            canEdit={user.hasChangeRole(UserRoles.part)}
+          />
+        )
+      };
+    });
+  }, [user, categoryParameters.data]);
+
+  const onParameterClick = useCallback((template: number, part: any) => {
+    setSelectedTemplate(template);
+    setSelectedPart(part.pk);
+    const parameter = part.parameters?.find((p: any) => p.template == template);
+
+    if (parameter) {
+      setSelectedParameter(parameter.pk);
+      editParameter.open();
+    } else {
+      addParameter.open();
+    }
+  }, []);
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'active',
+        label: t`Active`,
+        description: t`Show active parts`
+      },
+      {
+        name: 'locked',
+        label: t`Locked`,
+        description: t`Show locked parts`
+      },
+      {
+        name: 'assembly',
+        label: t`Assembly`,
+        description: t`Show assembly parts`
+      }
+    ];
+  }, []);
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    const partColumns: TableColumn[] = [
+      {
+        accessor: 'name',
+        sortable: true,
+        switchable: false,
+        noWrap: true,
+        render: (record: any) => PartColumn({ part: record })
+      },
+      DescriptionColumn({}),
+      {
+        accessor: 'IPN',
+        sortable: true
+      },
+      {
+        accessor: 'total_in_stock',
+        sortable: true
+      }
+    ];
+
+    return [...partColumns, ...parameterColumns];
+  }, [parameterColumns]);
+
+  return (
+    <>
+      {addParameter.modal}
+      {editParameter.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.part_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          enableDownload: true,
+          tableFilters: tableFilters,
+          params: {
+            category: categoryId,
+            cascade: true,
+            category_detail: true,
+            parameters: true
+          },
+          onCellClick: ({ event, record, index, column, columnIndex }) => {
+            cancelEvent(event);
+
+            // Is this a "parameter" cell?
+            if (column?.accessor?.toString()?.startsWith('parameter_')) {
+              const col = column as any;
+              onParameterClick(col.extra.template, record);
+            } else if (record?.pk) {
+              // Navigate through to the part detail page
+              const url = getDetailUrl(ModelType.part, record.pk);
+              navigateToLink(url, navigate, event);
+            }
+          }
+        }}
+      />
+    </>
+  );
+}

package/src/tables/part/PartBuildAllocationsTable.tsx

@@ -0,0 +1,128 @@
+import { t } from '@lingui/core/macro';
+import { Group, Text } from '@mantine/core';
+import type { DataTableRowExpansionProps } from 'mantine-datatable';
+import { useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import { ProgressBar } from '../../components/items/ProgressBar';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import {
+  DescriptionColumn,
+  ProjectCodeColumn,
+  StatusColumn
+} from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { RowViewAction } from '../RowActions';
+import RowExpansionIcon from '../RowExpansionIcon';
+import { BuildLineSubTable } from '../build/BuildLineTable';
+
+/**
+ * A "simplified" BuildOrderLineItem table showing all outstanding build order allocations for a given part.
+ */
+export default function PartBuildAllocationsTable({
+  partId
+}: Readonly<{
+  partId: number;
+}>) {
+  const user = useUserState();
+  const navigate = useNavigate();
+  const table = useTable('part-build-allocations');
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'build',
+        title: t`Build Order`,
+        sortable: true,
+        render: (record: any) => (
+          <Group wrap='nowrap' gap='xs'>
+            <RowExpansionIcon
+              enabled={record.allocated > 0}
+              expanded={table.isRowExpanded(record.pk)}
+            />
+            <Text>{record.build_detail?.reference}</Text>
+          </Group>
+        )
+      },
+      DescriptionColumn({
+        accessor: 'build_detail.title'
+      }),
+      ProjectCodeColumn({
+        accessor: 'build_detail.project_code_detail'
+      }),
+      StatusColumn({
+        accessor: 'build_detail.status',
+        model: ModelType.build,
+        title: t`Order Status`
+      }),
+      {
+        accessor: 'allocated',
+        sortable: true,
+        title: t`Required Stock`,
+        render: (record: any) => (
+          <ProgressBar
+            progressLabel
+            value={record.allocated}
+            maximum={record.quantity}
+          />
+        )
+      }
+    ];
+  }, [table.isRowExpanded]);
+
+  const rowActions = useCallback(
+    (record: any) => {
+      return [
+        RowViewAction({
+          title: t`View Build Order`,
+          modelType: ModelType.build,
+          modelId: record.build,
+          hidden: !user.hasViewRole(UserRoles.build),
+          navigate: navigate
+        })
+      ];
+    },
+    [user]
+  );
+
+  // Control row expansion
+  const rowExpansion: DataTableRowExpansionProps<any> = useMemo(() => {
+    return {
+      allowMultiple: true,
+      expandable: ({ record }: { record: any }) => {
+        // Only items with allocated stock can be expanded
+        return table.isRowExpanded(record.pk) || record.allocated > 0;
+      },
+      content: ({ record }: { record: any }) => {
+        return <BuildLineSubTable lineItem={record} />;
+      }
+    };
+  }, [table.isRowExpanded]);
+
+  return (
+    <InvenTreeTable
+      url={apiUrl(ApiEndpoints.build_line_list)}
+      tableState={table}
+      columns={tableColumns}
+      props={{
+        minHeight: 200,
+        params: {
+          part: partId,
+          consumable: false,
+          build_detail: true,
+          order_outstanding: true
+        },
+        enableColumnSwitching: false,
+        enableSearch: false,
+        rowActions: rowActions,
+        rowExpansion: rowExpansion
+      }}
+    />
+  );
+}

package/src/tables/part/PartCategoryTable.tsx

@@ -0,0 +1,208 @@
+import { t } from '@lingui/core/macro';
+import { Group, Tooltip } from '@mantine/core';
+import { IconBell } from '@tabler/icons-react';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { YesNoButton } from '../../components/buttons/YesNoButton';
+import { ActionDropdown } from '../../components/items/ActionDropdown';
+import { ApiIcon } from '../../components/items/ApiIcon';
+import { partCategoryFields } from '../../forms/PartForms';
+import { InvenTreeIcon } from '../../functions/icons';
+import {
+  useBulkEditApiFormModal,
+  useCreateApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { DescriptionColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowEditAction } from '../RowActions';
+
+/**
+ * PartCategoryTable - Displays a table of part categories
+ */
+export function PartCategoryTable({ parentId }: Readonly<{ parentId?: any }>) {
+  const table = useTable('partcategory');
+  const user = useUserState();
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'name',
+        sortable: true,
+        switchable: false,
+        render: (record: any) => (
+          <Group gap='xs' wrap='nowrap' justify='space-between'>
+            <Group gap='xs' wrap='nowrap'>
+              {record.icon && <ApiIcon name={record.icon} />}
+              {record.name}
+            </Group>
+            <Group gap='xs' justify='flex-end' wrap='nowrap'>
+              {record.starred && (
+                <Tooltip
+                  label={t`You are subscribed to notifications for this category`}
+                >
+                  <IconBell color='green' size={16} />
+                </Tooltip>
+              )}
+            </Group>
+          </Group>
+        )
+      },
+      DescriptionColumn({}),
+      {
+        accessor: 'pathstring',
+        sortable: false
+      },
+      {
+        accessor: 'structural',
+        sortable: true,
+        render: (record: any) => {
+          return <YesNoButton value={record.structural} />;
+        }
+      },
+      {
+        accessor: 'part_count',
+        sortable: true
+      }
+    ];
+  }, []);
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'cascade',
+        label: t`Include Subcategories`,
+        description: t`Include subcategories in results`
+      },
+      {
+        name: 'structural',
+        label: t`Structural`,
+        description: t`Show structural categories`
+      },
+      {
+        name: 'starred',
+        label: t`Subscribed`,
+        description: t`Show categories to which the user is subscribed`
+      }
+    ];
+  }, []);
+
+  const newCategoryFields = partCategoryFields({ create: true });
+
+  const newCategory = useCreateApiFormModal({
+    url: ApiEndpoints.category_list,
+    title: t`New Part Category`,
+    fields: newCategoryFields,
+    focus: 'name',
+    initialData: {
+      parent: parentId
+    },
+    follow: true,
+    modelType: ModelType.partcategory,
+    table: table
+  });
+
+  const [selectedCategory, setSelectedCategory] = useState<number>(-1);
+
+  const editCategoryFields = partCategoryFields({ create: false });
+
+  const editCategory = useEditApiFormModal({
+    url: ApiEndpoints.category_list,
+    pk: selectedCategory,
+    title: t`Edit Part Category`,
+    fields: editCategoryFields,
+    onFormSuccess: (record: any) => table.updateRecord(record)
+  });
+
+  const setParent = useBulkEditApiFormModal({
+    url: ApiEndpoints.category_list,
+    items: table.selectedIds,
+    title: t`Set Parent Category`,
+    fields: {
+      parent: {}
+    },
+    onFormSuccess: table.refreshTable
+  });
+
+  const tableActions = useMemo(() => {
+    const can_add = user.hasAddRole(UserRoles.part_category);
+    const can_edit = user.hasChangeRole(UserRoles.part_category);
+
+    return [
+      <ActionDropdown
+        tooltip={t`Category Actions`}
+        icon={<InvenTreeIcon icon='category' />}
+        disabled={!table.hasSelectedRecords}
+        actions={[
+          {
+            name: t`Set Parent`,
+            icon: <InvenTreeIcon icon='category' />,
+            tooltip: t`Set parent category for the selected items`,
+            hidden: !can_edit,
+            disabled: !table.hasSelectedRecords,
+            onClick: () => {
+              setParent.open();
+            }
+          }
+        ]}
+      />,
+      <AddItemButton
+        key='add-part-category'
+        tooltip={t`Add Part Category`}
+        onClick={() => newCategory.open()}
+        hidden={!can_add}
+      />
+    ];
+  }, [user, table.hasSelectedRecords]);
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      const can_edit = user.hasChangeRole(UserRoles.part_category);
+
+      return [
+        RowEditAction({
+          hidden: !can_edit,
+          onClick: () => {
+            setSelectedCategory(record.pk);
+            editCategory.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  return (
+    <>
+      {newCategory.modal}
+      {editCategory.modal}
+      {setParent.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.category_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          enableDownload: true,
+          enableSelection: true,
+          params: {
+            parent: parentId,
+            top_level: parentId === undefined ? true : undefined
+          },
+          tableFilters: tableFilters,
+          tableActions: tableActions,
+          rowActions: rowActions,
+          modelType: ModelType.partcategory
+        }}
+      />
+    </>
+  );
+}