@inventreedb/ui 0.0.1 → 0.0.3

package/src/tables/part/ParametricPartTable.tsx

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

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

@@ -1,208 +0,0 @@
-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
-        }}
-      />
-    </>
-  );
-}