[PUI] Adds NewPart form (#6598)

src/frontend/src/forms/PartForms.tsx

@@ -1,19 +1,19 @@
 import { t } from '@lingui/macro';
 import { IconPackages } from '@tabler/icons-react';
+import { useMemo } from 'react';
 
 import { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
 
 /**
  * Construct a set of fields for creating / editing a Part instance
  */
-export function partFields({
+export function usePartFields({
-  editing = false,
+  create = false
-  category_id
 }: {
-  editing?: boolean;
+  create?: boolean;
-  category_id?: number;
 }): ApiFormFieldSet {
-  let fields: ApiFormFieldSet = {
+  return useMemo(() => {
+    const fields: ApiFormFieldSet = {
       category: {
         filters: {
           structural: false
@@ -49,14 +49,8 @@ export function partFields({
       active: {}
     };
 
-  if (category_id != null) {
-    // TODO: Set the value of the category field
-  }
-
     // Additional fields for creation
-  if (!editing) {
+    if (create) {
-    // TODO: Hide 'active' field
-
       fields.copy_category_parameters = {};
 
       fields.initial_stock = {
@@ -94,6 +88,7 @@ export function partFields({
     // TODO: handle part duplications
 
     return fields;
+  }, [create]);
 }
 
 /**

src/frontend/src/pages/Index/Playground.tsx

@@ -10,7 +10,7 @@ import { StylishText } from '../../components/items/StylishText';
 import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
-import { partCategoryFields, partFields } from '../../forms/PartForms';
+import { partCategoryFields, usePartFields } from '../../forms/PartForms';
 import { useCreateStockItem } from '../../forms/StockForms';
 import {
   useCreateApiFormModal,
@@ -28,10 +28,13 @@ function ApiFormsPlayground() {
     fields: fields
   });
 
+  const createPartFields = usePartFields({ create: true });
+  const editPartFields = usePartFields({ create: false });
+
   const newPart = useCreateApiFormModal({
     url: ApiEndpoints.part_list,
     title: 'Create Part',
-    fields: partFields({}),
+    fields: createPartFields,
     initialData: {
       description: 'A part created via the API'
     }
@@ -41,7 +44,7 @@ function ApiFormsPlayground() {
     url: ApiEndpoints.part_list,
     pk: 1,
     title: 'Edit Part',
-    fields: partFields({ editing: true })
+    fields: editPartFields
   });
 
   const newAttachment = useCreateApiFormModal({
@@ -62,7 +65,7 @@ function ApiFormsPlayground() {
   const [name, setName] = useState('Hello');
 
   const partFieldsState: any = useMemo<any>(() => {
-    const fields = partFields({});
+    const fields = editPartFields;
     fields.name = {
       ...fields.name,
       value: name,

src/frontend/src/pages/part/PartDetail.tsx

@@ -46,7 +46,7 @@ import { formatPriceRange } from '../../defaults/formatters';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { UserRoles } from '../../enums/Roles';
-import { partFields } from '../../forms/PartForms';
+import { usePartFields } from '../../forms/PartForms';
 import { useEditApiFormModal } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
 import { apiUrl } from '../../states/ApiState';
@@ -630,11 +630,13 @@ export default function PartDetail() {
     );
   }, [part, id]);
 
+  const partFields = usePartFields({ create: false });
+
   const editPart = useEditApiFormModal({
     url: ApiEndpoints.part_list,
     pk: part.pk,
     title: t`Edit Part`,
-    fields: partFields({ editing: true }),
+    fields: partFields,
     onFormSuccess: refreshInstance
   });
 

src/frontend/src/tables/part/PartTable.tsx

@@ -3,14 +3,19 @@ import { Group, Text } from '@mantine/core';
 import { ReactNode, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { Thumbnail } from '../../components/images/Thumbnail';
 import { formatPriceRange } from '../../defaults/formatters';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
+import { UserRoles } from '../../enums/Roles';
+import { usePartFields } from '../../forms/PartForms';
 import { shortenString } from '../../functions/tables';
 import { getDetailUrl } from '../../functions/urls';
+import { useCreateApiFormModal } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
+import { useUserState } from '../../states/UserState';
 import { TableColumn } from '../Column';
 import { DescriptionColumn, LinkColumn } from '../ColumnRenderers';
 import { TableFilter } from '../Filter';
@@ -261,10 +266,36 @@ export function PartListTable({ props }: { props: InvenTreeTableProps }) {
   const tableFilters = useMemo(() => partTableFilters(), []);
 
   const table = useTable('part-list');
-
   const navigate = useNavigate();
+  const user = useUserState();
+
+  const newPart = useCreateApiFormModal({
+    url: ApiEndpoints.part_list,
+    title: t`Add Part`,
+    fields: usePartFields({ create: true }),
+    initialData: {
+      ...(props.params ?? {})
+    },
+    onFormSuccess: (data: any) => {
+      if (data.pk) {
+        navigate(getDetailUrl(ModelType.part, data.pk));
+      }
+    }
+  });
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        hidden={!user.hasAddRole(UserRoles.part)}
+        tooltip={t`Add Part`}
+        onClick={() => newPart.open()}
+      />
+    ];
+  }, [user]);
 
   return (
+    <>
+      {newPart.modal}
       <InvenTreeTable
         url={apiUrl(ApiEndpoints.part_list)}
         tableState={table}
@@ -273,6 +304,7 @@ export function PartListTable({ props }: { props: InvenTreeTableProps }) {
           ...props,
           enableDownload: true,
           tableFilters: tableFilters,
+          tableActions: tableActions,
           params: {
             ...props.params,
             category_detail: true
@@ -281,5 +313,6 @@ export function PartListTable({ props }: { props: InvenTreeTableProps }) {
             navigate(getDetailUrl(ModelType.part, record.pk))
         }}
       />
+    </>
   );
 }