PUI BOM table updates (#7049)

- Allow new BOM item to be created
- Update modal forms

src/frontend/src/tables/bom/BomTable.tsx

@@ -5,9 +5,10 @@ import {
   IconCircleCheck,
   IconSwitch3
 } from '@tabler/icons-react';
-import { ReactNode, useCallback, useMemo } from 'react';
+import { ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { YesNoButton } from '../../components/buttons/YesNoButton';
 import { Thumbnail } from '../../components/images/Thumbnail';
 import { formatDecimal, formatPriceRange } from '../../defaults/formatters';
@@ -15,7 +16,11 @@ import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { UserRoles } from '../../enums/Roles';
 import { bomItemFields } from '../../forms/BomForms';
-import { openDeleteApiForm, openEditApiForm } from '../../functions/forms';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
@@ -289,6 +294,36 @@ export function BomTable({
     ];
   }, [partId, params]);
 
+  const [selectedBomItem, setSelectedBomItem] = useState<number>(0);
+
+  const newBomItem = useCreateApiFormModal({
+    url: ApiEndpoints.bom_list,
+    title: t`Create BOM Item`,
+    fields: bomItemFields(),
+    initialData: {
+      part: partId
+    },
+    successMessage: t`BOM item created`,
+    onFormSuccess: table.refreshTable
+  });
+
+  const editBomItem = useEditApiFormModal({
+    url: ApiEndpoints.bom_list,
+    pk: selectedBomItem,
+    title: t`Edit BOM Item`,
+    fields: bomItemFields(),
+    successMessage: t`BOM item updated`,
+    onFormSuccess: table.refreshTable
+  });
+
+  const deleteBomItem = useDeleteApiFormModal({
+    url: ApiEndpoints.bom_list,
+    pk: selectedBomItem,
+    title: t`Delete BOM Item`,
+    successMessage: t`BOM item deleted`,
+    onFormSuccess: table.refreshTable
+  });
+
   const rowActions = useCallback(
     (record: any) => {
       // If this BOM item is defined for a *different* parent, then it cannot be edited
@@ -325,14 +360,8 @@ export function BomTable({
         RowEditAction({
           hidden: !user.hasChangeRole(UserRoles.part),
           onClick: () => {
-            openEditApiForm({
+            setSelectedBomItem(record.pk);
-              url: ApiEndpoints.bom_list,
+            editBomItem.open();
-              pk: record.pk,
-              title: t`Edit Bom Item`,
-              fields: bomItemFields(),
-              successMessage: t`Bom item updated`,
-              onFormSuccess: table.refreshTable
-            });
           }
         })
       );
@@ -342,14 +371,8 @@ export function BomTable({
         RowDeleteAction({
           hidden: !user.hasDeleteRole(UserRoles.part),
           onClick: () => {
-            openDeleteApiForm({
+            setSelectedBomItem(record.pk);
-              url: ApiEndpoints.bom_list,
+            deleteBomItem.open();
-              pk: record.pk,
-              title: t`Delete Bom Item`,
-              successMessage: t`Bom item deleted`,
-              onFormSuccess: table.refreshTable,
-              preFormWarning: t`Are you sure you want to remove this BOM item?`
-            });
           }
         })
       );
@@ -359,22 +382,38 @@ export function BomTable({
     [partId, user]
   );
 
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        hidden={!user.hasAddRole(UserRoles.part)}
+        tooltip={t`Add BOM Item`}
+        onClick={() => newBomItem.open()}
+      />
+    ];
+  }, [user]);
+
   return (
-    <InvenTreeTable
+    <>
-      url={apiUrl(ApiEndpoints.bom_list)}
+      {newBomItem.modal}
-      tableState={table}
+      {editBomItem.modal}
-      columns={tableColumns}
+      {deleteBomItem.modal}
-      props={{
+      <InvenTreeTable
-        params: {
+        url={apiUrl(ApiEndpoints.bom_list)}
-          ...params,
+        tableState={table}
-          part: partId,
+        columns={tableColumns}
-          part_detail: true,
+        props={{
-          sub_part_detail: true
+          params: {
-        },
+            ...params,
-        tableFilters: tableFilters,
+            part: partId,
-        modelType: ModelType.part,
+            part_detail: true,
-        rowActions: rowActions
+            sub_part_detail: true
-      }}
+          },
-    />
+          tableActions: tableActions,
+          tableFilters: tableFilters,
+          modelType: ModelType.part,
+          rowActions: rowActions
+        }}
+      />
+    </>
   );
 }