@inventreedb/ui 0.0.1

package/src/tables/purchasing/ManufacturerPartTable.tsx

@@ -0,0 +1,158 @@
+import { t } from '@lingui/core/macro';
+import { type ReactNode, 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 { AddItemButton } from '../../components/buttons/AddItemButton';
+import { Thumbnail } from '../../components/images/Thumbnail';
+import { useManufacturerPartFields } from '../../forms/CompanyForms';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { DescriptionColumn, LinkColumn, PartColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+
+/*
+ * Construct a table listing manufacturer parts
+ */
+export function ManufacturerPartTable({
+  params
+}: Readonly<{ params: any }>): ReactNode {
+  const table = useTable('manufacturerparts');
+
+  const user = useUserState();
+
+  // Construct table columns for this table
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'part',
+        switchable: 'part' in params,
+        sortable: true,
+        render: (record: any) => PartColumn({ part: record?.part_detail })
+      },
+      {
+        accessor: 'manufacturer',
+        sortable: true,
+        render: (record: any) => {
+          const manufacturer = record?.manufacturer_detail ?? {};
+
+          return (
+            <Thumbnail
+              src={manufacturer?.thumbnail ?? manufacturer.image}
+              text={manufacturer.name}
+            />
+          );
+        }
+      },
+      {
+        accessor: 'MPN',
+        title: t`Manufacturer Part Number`,
+        sortable: true
+      },
+      DescriptionColumn({}),
+      LinkColumn({})
+    ];
+  }, [params]);
+
+  const manufacturerPartFields = useManufacturerPartFields();
+
+  const [selectedPart, setSelectedPart] = useState<number | undefined>(
+    undefined
+  );
+
+  const createManufacturerPart = useCreateApiFormModal({
+    url: ApiEndpoints.manufacturer_part_list,
+    title: t`Add Manufacturer Part`,
+    fields: manufacturerPartFields,
+    table: table,
+    initialData: {
+      manufacturer: params?.manufacturer,
+      part: params?.part
+    }
+  });
+
+  const editManufacturerPart = useEditApiFormModal({
+    url: ApiEndpoints.manufacturer_part_list,
+    pk: selectedPart,
+    title: t`Edit Manufacturer Part`,
+    fields: manufacturerPartFields,
+    table: table
+  });
+
+  const deleteManufacturerPart = useDeleteApiFormModal({
+    url: ApiEndpoints.manufacturer_part_list,
+    pk: selectedPart,
+    title: t`Delete Manufacturer Part`,
+    table: table
+  });
+
+  const tableActions = useMemo(() => {
+    const can_add =
+      user.hasAddRole(UserRoles.purchase_order) &&
+      user.hasAddRole(UserRoles.part);
+
+    return [
+      <AddItemButton
+        key='add-manufacturer-part'
+        tooltip={t`Add Manufacturer Part`}
+        onClick={() => createManufacturerPart.open()}
+        hidden={!can_add}
+      />
+    ];
+  }, [user]);
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.purchase_order),
+          onClick: () => {
+            setSelectedPart(record.pk);
+            editManufacturerPart.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.purchase_order),
+          onClick: () => {
+            setSelectedPart(record.pk);
+            deleteManufacturerPart.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  return (
+    <>
+      {createManufacturerPart.modal}
+      {editManufacturerPart.modal}
+      {deleteManufacturerPart.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.manufacturer_part_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          params: {
+            ...params,
+            part_detail: true,
+            manufacturer_detail: true
+          },
+          enableDownload: true,
+          rowActions: rowActions,
+          tableActions: tableActions,
+          modelType: ModelType.manufacturerpart
+        }}
+      />
+    </>
+  );
+}

package/src/tables/purchasing/PurchaseOrderLineItemTable.tsx

@@ -0,0 +1,424 @@
+import { t } from '@lingui/core/macro';
+import { Text } from '@mantine/core';
+import { IconFileArrowLeft, IconSquareArrowRight } 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 { ActionButton } from '../../components/buttons/ActionButton';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import ImporterDrawer from '../../components/importer/ImporterDrawer';
+import { ProgressBar } from '../../components/items/ProgressBar';
+import { RenderStockLocation } from '../../components/render/Stock';
+import { dataImporterSessionFields } from '../../forms/ImporterForms';
+import {
+  usePurchaseOrderLineItemFields,
+  useReceiveLineItems
+} from '../../forms/PurchaseOrderForms';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import useStatusCodes from '../../hooks/UseStatusCodes';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import {
+  CurrencyColumn,
+  LinkColumn,
+  NoteColumn,
+  PartColumn,
+  ReferenceColumn,
+  TargetDateColumn
+} from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import {
+  type RowAction,
+  RowDeleteAction,
+  RowDuplicateAction,
+  RowEditAction
+} from '../RowActions';
+import { TableHoverCard } from '../TableHoverCard';
+
+/*
+ * Display a table of purchase order line items, for a specific order
+ */
+export function PurchaseOrderLineItemTable({
+  order,
+  orderId,
+  currency,
+  supplierId,
+  params
+}: Readonly<{
+  order: any;
+  orderId: number;
+  currency: string;
+  supplierId?: number;
+  params?: any;
+}>) {
+  const table = useTable('purchase-order-line-item');
+
+  const user = useUserState();
+
+  // Data import
+  const [importOpened, setImportOpened] = useState<boolean>(false);
+  const [selectedSession, setSelectedSession] = useState<number | undefined>(
+    undefined
+  );
+
+  const importSessionFields = useMemo(() => {
+    const fields = dataImporterSessionFields();
+
+    fields.model_type.hidden = true;
+    fields.model_type.value = ModelType.purchaseorderlineitem;
+
+    // Specify override values for import
+    fields.field_overrides.value = {
+      order: orderId
+    };
+
+    // Specify default values based on the order data
+    fields.field_defaults.value = {
+      purchase_price_currency:
+        order?.order_currency || order?.supplier_detail?.currency || undefined
+    };
+
+    fields.field_filters.value = {
+      part: {
+        supplier: supplierId,
+        active: true
+      }
+    };
+
+    return fields;
+  }, [order, orderId, supplierId]);
+
+  const importLineItems = useCreateApiFormModal({
+    url: ApiEndpoints.import_session_list,
+    title: t`Import Line Items`,
+    fields: importSessionFields,
+    onFormSuccess: (response: any) => {
+      setSelectedSession(response.pk);
+      setImportOpened(true);
+    }
+  });
+
+  const [singleRecord, setSingleRecord] = useState(null);
+
+  const receiveLineItems = useReceiveLineItems({
+    items: singleRecord ? [singleRecord] : table.selectedRecords,
+    orderPk: orderId,
+    destinationPk: order.destination,
+    formProps: {
+      // Timeout is a small hack to prevent function being called before re-render
+      onClose: () => {
+        table.refreshTable();
+        setTimeout(() => setSingleRecord(null), 500);
+      }
+    }
+  });
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'part',
+        title: t`Part`,
+        sortable: true,
+        ordering: 'part_name',
+        switchable: false,
+        render: (record: any) => PartColumn({ part: record.part_detail })
+      },
+      {
+        accessor: 'part_detail.IPN',
+        sortable: true,
+        ordering: 'IPN'
+      },
+      {
+        accessor: 'part_detail.description',
+        sortable: false
+      },
+      ReferenceColumn({}),
+      {
+        accessor: 'quantity',
+        title: t`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 != undefined &&
+            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={record.quantity}
+              extra={extra}
+              title={t`Quantity`}
+            />
+          );
+        }
+      },
+      {
+        accessor: 'received',
+        title: t`Received`,
+        sortable: false,
+
+        render: (record: any) => (
+          <ProgressBar
+            progressLabel={true}
+            value={record.received}
+            maximum={record.quantity}
+          />
+        )
+      },
+      {
+        accessor: 'supplier_part_detail.packaging',
+        sortable: false,
+        title: t`Packaging`
+      },
+      {
+        accessor: 'supplier_part_detail.pack_quantity',
+        sortable: false,
+        title: t`Pack Quantity`
+      },
+      {
+        accessor: 'sku',
+        title: t`Supplier Code`,
+        switchable: false,
+        sortable: true,
+        ordering: 'SKU'
+      },
+      LinkColumn({
+        accessor: 'supplier_part_detail.link',
+        title: t`Supplier Link`,
+        sortable: false
+      }),
+      {
+        accessor: 'mpn',
+        ordering: 'MPN',
+        title: t`Manufacturer Code`,
+        sortable: true
+      },
+      CurrencyColumn({
+        accessor: 'purchase_price',
+        title: t`Unit Price`
+      }),
+      CurrencyColumn({
+        accessor: 'total_price',
+        currency_accessor: 'purchase_price_currency',
+        title: t`Total Price`
+      }),
+      TargetDateColumn({}),
+      {
+        accessor: 'destination',
+        title: t`Destination`,
+        sortable: false,
+        render: (record: any) =>
+          record.destination
+            ? RenderStockLocation({ instance: record.destination_detail })
+            : '-'
+      },
+      NoteColumn({}),
+      LinkColumn({})
+    ];
+  }, [orderId, user]);
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'received',
+        label: t`Received`,
+        description: t`Show line items which have been received`
+      }
+    ];
+  }, []);
+
+  const addPurchaseOrderFields = usePurchaseOrderLineItemFields({
+    create: true,
+    orderId: orderId,
+    supplierId: supplierId
+  });
+
+  const [initialData, setInitialData] = useState<any>({});
+
+  const newLine = useCreateApiFormModal({
+    url: ApiEndpoints.purchase_order_line_list,
+    title: t`Add Line Item`,
+    fields: addPurchaseOrderFields,
+    initialData: {
+      ...initialData,
+      purchase_price_currency: currency
+    },
+    table: table
+  });
+
+  const [selectedLine, setSelectedLine] = useState<number>(0);
+
+  const editPurchaseOrderFields = usePurchaseOrderLineItemFields({
+    create: false,
+    orderId: orderId,
+    supplierId: supplierId
+  });
+
+  const editLine = useEditApiFormModal({
+    url: ApiEndpoints.purchase_order_line_list,
+    pk: selectedLine,
+    title: t`Edit Line Item`,
+    fields: editPurchaseOrderFields,
+    table: table
+  });
+
+  const deleteLine = useDeleteApiFormModal({
+    url: ApiEndpoints.purchase_order_line_list,
+    pk: selectedLine,
+    title: t`Delete Line Item`,
+    table: table
+  });
+
+  const poStatus = useStatusCodes({ modelType: ModelType.purchaseorder });
+
+  const orderOpen: boolean = useMemo(() => {
+    return (
+      order.status == poStatus.PENDING ||
+      order.status == poStatus.PLACED ||
+      order.status == poStatus.ON_HOLD
+    );
+  }, [order, poStatus]);
+
+  const orderPlaced: boolean = useMemo(() => {
+    return order.status == poStatus.PLACED;
+  }, [order, poStatus]);
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      const received = (record?.received ?? 0) >= (record?.quantity ?? 0);
+
+      return [
+        {
+          hidden: received || !orderOpen,
+          title: t`Receive line item`,
+          icon: <IconSquareArrowRight />,
+          color: 'green',
+          onClick: () => {
+            setSingleRecord(record);
+            receiveLineItems.open();
+          }
+        },
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.purchase_order),
+          onClick: () => {
+            setSelectedLine(record.pk);
+            editLine.open();
+          }
+        }),
+        RowDuplicateAction({
+          hidden: !orderOpen || !user.hasAddRole(UserRoles.purchase_order),
+          onClick: () => {
+            setInitialData({ ...record });
+            newLine.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.purchase_order),
+          onClick: () => {
+            setSelectedLine(record.pk);
+            deleteLine.open();
+          }
+        })
+      ];
+    },
+    [orderId, user, orderOpen]
+  );
+
+  // Custom table actions
+  const tableActions = useMemo(() => {
+    return [
+      <ActionButton
+        key='import-line-items'
+        hidden={!orderOpen || !user.hasAddRole(UserRoles.purchase_order)}
+        tooltip={t`Import Line Items`}
+        icon={<IconFileArrowLeft />}
+        onClick={() => importLineItems.open()}
+      />,
+      <AddItemButton
+        key='add-line-item'
+        tooltip={t`Add Line Item`}
+        onClick={() => {
+          setInitialData({
+            order: orderId
+          });
+          newLine.open();
+        }}
+        hidden={!orderOpen || !user?.hasAddRole(UserRoles.purchase_order)}
+      />,
+      <ActionButton
+        key='receive-items'
+        text={t`Receive items`}
+        icon={<IconSquareArrowRight />}
+        onClick={() => receiveLineItems.open()}
+        disabled={table.selectedRecords.length === 0}
+        hidden={!orderPlaced || !user.hasChangeRole(UserRoles.purchase_order)}
+      />
+    ];
+  }, [orderId, user, table, orderOpen, orderPlaced]);
+
+  return (
+    <>
+      {importLineItems.modal}
+      {receiveLineItems.modal}
+      {newLine.modal}
+      {editLine.modal}
+      {deleteLine.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.purchase_order_line_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          enableSelection: true,
+          enableDownload: true,
+          params: {
+            ...params,
+            order: orderId,
+            part_detail: true
+          },
+          rowActions: rowActions,
+          tableActions: tableActions,
+          tableFilters: tableFilters,
+          modelType: ModelType.supplierpart,
+          modelField: 'part'
+        }}
+      />
+      <ImporterDrawer
+        sessionId={selectedSession ?? -1}
+        opened={selectedSession != undefined && importOpened}
+        onClose={() => {
+          setSelectedSession(undefined);
+          setImportOpened(false);
+          table.refreshTable();
+        }}
+      />
+    </>
+  );
+}