@inventreedb/ui 0.0.1

package/src/tables/part/PartCategoryTemplateTable.tsx

@@ -0,0 +1,157 @@
+import { t } from '@lingui/core/macro';
+import { Group, Text } from '@mantine/core';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+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 { AddItemButton } from '../../components/buttons/AddItemButton';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+
+export default function PartCategoryTemplateTable() {
+  const table = useTable('part-category-parameter-templates');
+  const user = useUserState();
+
+  const formFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      category: {},
+      parameter_template: {},
+      default_value: {}
+    };
+  }, []);
+
+  const [selectedTemplate, setSelectedTemplate] = useState<number>(0);
+
+  const newTemplate = useCreateApiFormModal({
+    url: ApiEndpoints.category_parameter_list,
+    title: t`Add Category Parameter`,
+    fields: useMemo(() => ({ ...formFields }), [formFields]),
+    table: table
+  });
+
+  const editTemplate = useEditApiFormModal({
+    url: ApiEndpoints.category_parameter_list,
+    pk: selectedTemplate,
+    title: t`Edit Category Parameter`,
+    fields: useMemo(() => ({ ...formFields }), [formFields]),
+    table: table
+  });
+
+  const deleteTemplate = useDeleteApiFormModal({
+    url: ApiEndpoints.category_parameter_list,
+    pk: selectedTemplate,
+    title: t`Delete Category Parameter`,
+    table: table
+  });
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    // TODO
+    return [];
+  }, []);
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'category_detail.name',
+        title: t`Category`,
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'category_detail.pathstring'
+      },
+      {
+        accessor: 'parameter_template_detail.name',
+        title: t`Parameter Template`,
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'default_value',
+        sortable: true,
+        switchable: false,
+        render: (record: any) => {
+          if (!record?.default_value) {
+            return '-';
+          }
+
+          let units = '';
+
+          if (record?.parameter_template_detail?.units) {
+            units = `[${record.parameter_template_detail.units}]`;
+          }
+
+          return (
+            <Group justify='space-between' grow>
+              <Text>{record.default_value}</Text>
+              {units && <Text size='xs'>{units}</Text>}
+            </Group>
+          );
+        }
+      }
+    ];
+  }, []);
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.part),
+          onClick: () => {
+            setSelectedTemplate(record.pk);
+            editTemplate.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.part),
+          onClick: () => {
+            setSelectedTemplate(record.pk);
+            deleteTemplate.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add'
+        tooltip={t`Add Category Parameter`}
+        onClick={() => newTemplate.open()}
+        hidden={!user.hasAddRole(UserRoles.part)}
+      />
+    ];
+  }, [user]);
+
+  return (
+    <>
+      {newTemplate.modal}
+      {editTemplate.modal}
+      {deleteTemplate.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.category_parameter_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          rowActions: rowActions,
+          tableFilters: tableFilters,
+          tableActions: tableActions,
+          enableDownload: true
+        }}
+      />
+    </>
+  );
+}

package/src/tables/part/PartParameterTable.tsx

@@ -0,0 +1,226 @@
+import { t } from '@lingui/core/macro';
+import { Alert, Stack, Text } from '@mantine/core';
+import { IconLock } from '@tabler/icons-react';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { ApiFormFieldSet } from '@lib/types/Forms';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { YesNoButton } from '../../components/buttons/YesNoButton';
+import { formatDecimal } from '../../defaults/formatters';
+import { usePartParameterFields } from '../../forms/PartForms';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  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 { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { TableHoverCard } from '../TableHoverCard';
+
+/**
+ * Construct a table listing parameters for a given part
+ */
+export function PartParameterTable({
+  partId,
+  partLocked
+}: Readonly<{
+  partId: any;
+  partLocked?: boolean;
+}>) {
+  const table = useTable('part-parameters');
+
+  const user = useUserState();
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'part',
+        sortable: true,
+        render: (record: any) => PartColumn({ part: record?.part_detail })
+      },
+      {
+        accessor: 'part_detail.IPN',
+        sortable: false,
+        switchable: true
+      },
+      {
+        accessor: 'template_detail.name',
+        switchable: false,
+        sortable: true,
+        ordering: 'name',
+        render: (record) => {
+          const variant = String(partId) != String(record.part);
+
+          return (
+            <Text style={{ fontStyle: variant ? 'italic' : 'inherit' }}>
+              {record.template_detail?.name}
+            </Text>
+          );
+        }
+      },
+      DescriptionColumn({
+        accessor: 'template_detail.description'
+      }),
+      {
+        accessor: 'data',
+        switchable: false,
+        sortable: true,
+        render: (record) => {
+          const template = record.template_detail;
+
+          if (template?.checkbox) {
+            return <YesNoButton value={record.data} />;
+          }
+
+          const extra: any[] = [];
+
+          if (
+            template.units &&
+            record.data_numeric &&
+            record.data_numeric != record.data
+          ) {
+            const numeric = formatDecimal(record.data_numeric, { digits: 15 });
+            extra.push(`${numeric} [${template.units}]`);
+          }
+
+          return (
+            <TableHoverCard
+              value={record.data}
+              extra={extra}
+              title={t`Internal Units`}
+            />
+          );
+        }
+      },
+      {
+        accessor: 'template_detail.units',
+        ordering: 'units',
+        sortable: true
+      }
+    ];
+  }, [partId]);
+
+  const partParameterFields: ApiFormFieldSet = usePartParameterFields({});
+
+  const newParameter = useCreateApiFormModal({
+    url: ApiEndpoints.part_parameter_list,
+    title: t`New Part Parameter`,
+    fields: useMemo(() => ({ ...partParameterFields }), [partParameterFields]),
+    focus: 'template',
+    initialData: {
+      part: partId
+    },
+    table: table
+  });
+
+  const [selectedParameter, setSelectedParameter] = useState<
+    number | undefined
+  >(undefined);
+
+  const editParameter = useEditApiFormModal({
+    url: ApiEndpoints.part_parameter_list,
+    pk: selectedParameter,
+    title: t`Edit Part Parameter`,
+    focus: 'data',
+    fields: useMemo(() => ({ ...partParameterFields }), [partParameterFields]),
+    table: table
+  });
+
+  const deleteParameter = useDeleteApiFormModal({
+    url: ApiEndpoints.part_parameter_list,
+    pk: selectedParameter,
+    title: t`Delete Part Parameter`,
+    table: table
+  });
+
+  // Callback for row actions
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      // Actions not allowed for "variant" rows
+      if (String(partId) != String(record.part)) {
+        return [];
+      }
+
+      return [
+        RowEditAction({
+          tooltip: t`Edit Part Parameter`,
+          hidden: partLocked || !user.hasChangeRole(UserRoles.part),
+          onClick: () => {
+            setSelectedParameter(record.pk);
+            editParameter.open();
+          }
+        }),
+        RowDeleteAction({
+          tooltip: t`Delete Part Parameter`,
+          hidden: partLocked || !user.hasDeleteRole(UserRoles.part),
+          onClick: () => {
+            setSelectedParameter(record.pk);
+            deleteParameter.open();
+          }
+        })
+      ];
+    },
+    [partId, partLocked, user]
+  );
+
+  // Custom table actions
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add-parameter'
+        hidden={partLocked || !user.hasAddRole(UserRoles.part)}
+        tooltip={t`Add parameter`}
+        onClick={() => newParameter.open()}
+      />
+    ];
+  }, [partLocked, user]);
+
+  return (
+    <>
+      {newParameter.modal}
+      {editParameter.modal}
+      {deleteParameter.modal}
+      <Stack gap='xs'>
+        {partLocked && (
+          <Alert
+            title={t`Part is Locked`}
+            color='orange'
+            icon={<IconLock />}
+            p='xs'
+          >
+            <Text>{t`Part parameters cannot be edited, as the part is locked`}</Text>
+          </Alert>
+        )}
+        <InvenTreeTable
+          url={apiUrl(ApiEndpoints.part_parameter_list)}
+          tableState={table}
+          columns={tableColumns}
+          props={{
+            rowActions: rowActions,
+            enableDownload: true,
+            tableActions: tableActions,
+            tableFilters: [
+              {
+                name: 'include_variants',
+                label: t`Include Variants`,
+                type: 'boolean'
+              }
+            ],
+            params: {
+              part: partId,
+              template_detail: true,
+              part_detail: true
+            }
+          }}
+        />
+      </Stack>
+    </>
+  );
+}

package/src/tables/part/PartParameterTemplateTable.tsx

@@ -0,0 +1,168 @@
+import { t } from '@lingui/core/macro';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+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 { AddItemButton } from '../../components/buttons/AddItemButton';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { BooleanColumn, DescriptionColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+
+export default function PartParameterTemplateTable() {
+  const table = useTable('part-parameter-templates');
+
+  const user = useUserState();
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'checkbox',
+        label: t`Checkbox`,
+        description: t`Show checkbox templates`
+      },
+      {
+        name: 'has_choices',
+        label: t`Has choices`,
+        description: t`Show templates with choices`
+      },
+      {
+        name: 'has_units',
+        label: t`Has Units`,
+        description: t`Show templates with units`
+      }
+    ];
+  }, []);
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'name',
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'parts',
+        sortable: true,
+        switchable: true
+      },
+      {
+        accessor: 'units',
+        sortable: true
+      },
+      DescriptionColumn({}),
+      BooleanColumn({
+        accessor: 'checkbox'
+      }),
+      {
+        accessor: 'choices'
+      }
+    ];
+  }, []);
+
+  const partParameterTemplateFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      name: {},
+      description: {},
+      units: {},
+      choices: {},
+      checkbox: {},
+      selectionlist: {}
+    };
+  }, []);
+
+  const newTemplate = useCreateApiFormModal({
+    url: ApiEndpoints.part_parameter_template_list,
+    title: t`Add Parameter Template`,
+    table: table,
+    fields: useMemo(
+      () => ({ ...partParameterTemplateFields }),
+      [partParameterTemplateFields]
+    )
+  });
+
+  const [selectedTemplate, setSelectedTemplate] = useState<number | undefined>(
+    undefined
+  );
+
+  const editTemplate = useEditApiFormModal({
+    url: ApiEndpoints.part_parameter_template_list,
+    pk: selectedTemplate,
+    title: t`Edit Parameter Template`,
+    table: table,
+    fields: useMemo(
+      () => ({ ...partParameterTemplateFields }),
+      [partParameterTemplateFields]
+    )
+  });
+
+  const deleteTemplate = useDeleteApiFormModal({
+    url: ApiEndpoints.part_parameter_template_list,
+    pk: selectedTemplate,
+    title: t`Delete Parameter Template`,
+    table: table
+  });
+
+  // Callback for row actions
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.part),
+          onClick: () => {
+            setSelectedTemplate(record.pk);
+            editTemplate.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.part),
+          onClick: () => {
+            setSelectedTemplate(record.pk);
+            deleteTemplate.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add'
+        tooltip={t`Add Parameter Template`}
+        onClick={() => newTemplate.open()}
+        hidden={!user.hasAddRole(UserRoles.part)}
+      />
+    ];
+  }, [user]);
+
+  return (
+    <>
+      {newTemplate.modal}
+      {editTemplate.modal}
+      {deleteTemplate.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.part_parameter_template_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          rowActions: rowActions,
+          tableFilters: tableFilters,
+          tableActions: tableActions,
+          enableDownload: true
+        }}
+      />
+    </>
+  );
+}

package/src/tables/part/PartPurchaseOrdersTable.tsx

@@ -0,0 +1,163 @@
+import { t } from '@lingui/core/macro';
+import { Text } from '@mantine/core';
+import { useMemo } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import { ProgressBar } from '../../components/items/ProgressBar';
+import { formatCurrency } from '../../defaults/formatters';
+import { useTable } from '../../hooks/UseTable';
+import type { TableColumn } from '../Column';
+import { DateColumn, ReferenceColumn, StatusColumn } from '../ColumnRenderers';
+import { StatusFilterOptions } from '../Filter';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { TableHoverCard } from '../TableHoverCard';
+
+export default function PartPurchaseOrdersTable({
+  partId
+}: Readonly<{
+  partId: number;
+}>) {
+  const table = useTable('partpurchaseorders');
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      ReferenceColumn({
+        accessor: 'order_detail.reference',
+        ordering: 'order',
+        sortable: true,
+        switchable: false,
+        title: t`Purchase Order`
+      }),
+      StatusColumn({
+        accessor: 'order_detail.status',
+        sortable: true,
+        ordering: 'status',
+        title: t`Status`,
+        model: ModelType.purchaseorder
+      }),
+      {
+        accessor: 'order_detail.supplier_name',
+        title: t`Supplier`,
+        sortable: false,
+        switchable: true
+      },
+      {
+        accessor: 'supplier_part_detail.SKU',
+        ordering: 'sku',
+        title: t`Supplier Part`,
+        sortable: true
+      },
+      {
+        accessor: 'supplier_part_detail.manufacturer_part_detail.MPN',
+        ordering: 'mpn',
+        title: t`Manufacturer Part`,
+        sortable: true
+      },
+      {
+        accessor: 'quantity',
+        sortable: true,
+        switchable: false,
+        render: (record: any) => {
+          const supplier_part = record?.supplier_part_detail ?? {};
+          const part = record?.part_detail ?? supplier_part?.part_detail ?? {};
+          const extra = [];
+
+          if (supplier_part.pack_quantity_native != 1) {
+            const total = record.quantity * supplier_part.pack_quantity_native;
+
+            extra.push(
+              <Text key='pack-quantity'>
+                {t`Pack Quantity`}: {supplier_part.pack_quantity}
+              </Text>
+            );
+
+            extra.push(
+              <Text key='total-quantity'>
+                {t`Total Quantity`}: {total} {part?.units}
+              </Text>
+            );
+          }
+
+          return (
+            <TableHoverCard
+              value={
+                <ProgressBar
+                  value={record.received}
+                  maximum={record.quantity}
+                  progressLabel
+                />
+              }
+              extra={extra}
+              title={t`Quantity`}
+            />
+          );
+        }
+      },
+      DateColumn({
+        accessor: 'target_date',
+        title: t`Target Date`
+      }),
+      DateColumn({
+        accessor: 'order_detail.complete_date',
+        ordering: 'complete_date',
+        title: t`Completion Date`
+      }),
+      {
+        accessor: 'purchase_price',
+        render: (record: any) =>
+          formatCurrency(record.purchase_price, {
+            currency: record.purchase_price_currency
+          })
+      }
+    ];
+  }, []);
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'pending',
+        label: t`Pending`,
+        description: t`Show pending orders`
+      },
+      {
+        name: 'received',
+        label: t`Received`,
+        description: t`Show received items`
+      },
+      {
+        name: 'order_status',
+        label: t`Order Status`,
+        description: t`Filter by order status`,
+        choiceFunction: StatusFilterOptions(ModelType.purchaseorder)
+      },
+      {
+        name: 'include_variants',
+        type: 'boolean',
+        label: t`Include Variants`,
+        description: t`Include orders for part variants`
+      }
+    ];
+  }, []);
+
+  return (
+    <InvenTreeTable
+      url={apiUrl(ApiEndpoints.purchase_order_line_list)}
+      tableState={table}
+      columns={tableColumns}
+      props={{
+        params: {
+          base_part: partId,
+          part_detail: true,
+          order_detail: true,
+          supplier_detail: true
+        },
+        modelField: 'order',
+        modelType: ModelType.purchaseorder,
+        tableFilters: tableFilters
+      }}
+    />
+  );
+}