Check / uncheck shipments from table (#10907)

src/frontend/src/forms/SalesOrderForms.tsx

@@ -1,8 +1,10 @@
 import { t } from '@lingui/core/macro';
-import { Table } from '@mantine/core';
+import { Alert, Table, Text } from '@mantine/core';
 import {
   IconAddressBook,
   IconCalendar,
+  IconCircleCheck,
+  IconCircleX,
   IconCoins,
   IconUser,
   IconUsers
@@ -23,8 +25,9 @@ import type {
   ApiFormFieldType
 } from '@lib/types/Forms';
 import type { TableFieldRowProps } from '../components/forms/fields/TableField';
-import { useCreateApiFormModal } from '../hooks/UseForm';
+import { useCreateApiFormModal, useEditApiFormModal } from '../hooks/UseForm';
 import { useGlobalSettingsState } from '../states/SettingsStates';
+import { useUserState } from '../states/UserState';
 import { RenderPartColumn } from '../tables/ColumnRenderers';
 
 export function useSalesOrderFields({
@@ -190,6 +193,64 @@ export function useSalesOrderLineItemFields({
   }, [salePrice, partCurrency, orderId, create]);
 }
 
+export function useCheckShipmentForm({
+  shipmentId,
+  onSuccess
+}: {
+  shipmentId: number;
+  onSuccess: (response: any) => void;
+}) {
+  const user = useUserState();
+
+  return useEditApiFormModal({
+    url: ApiEndpoints.sales_order_shipment_list,
+    pk: shipmentId,
+    title: t`Check Shipment`,
+    preFormContent: (
+      <Alert color='green' icon={<IconCircleCheck />} title={t`Check Shipment`}>
+        <Text>{t`Marking the shipment as checked indicates that you have verified that all items included in this shipment are correct`}</Text>
+      </Alert>
+    ),
+    fetchInitialData: false,
+    fields: {
+      checked_by: {
+        hidden: true,
+        value: user.getUser()?.pk
+      }
+    },
+    successMessage: t`Shipment marked as checked`,
+    onFormSuccess: onSuccess
+  });
+}
+
+export function useUncheckShipmentForm({
+  shipmentId,
+  onSuccess
+}: {
+  shipmentId: number;
+  onSuccess: (response: any) => void;
+}) {
+  return useEditApiFormModal({
+    url: ApiEndpoints.sales_order_shipment_list,
+    pk: shipmentId,
+    title: t`Uncheck Shipment`,
+    preFormContent: (
+      <Alert color='red' icon={<IconCircleX />} title={t`Uncheck Shipment`}>
+        <Text>{t`Marking the shipment as unchecked indicates that the shipment requires further verification`}</Text>
+      </Alert>
+    ),
+    fetchInitialData: false,
+    fields: {
+      checked_by: {
+        hidden: true,
+        value: null
+      }
+    },
+    successMessage: t`Shipment marked as unchecked`,
+    onFormSuccess: onSuccess
+  });
+}
+
 function SalesOrderAllocateLineRow({
   props,
   record,

src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { Alert, Grid, Skeleton, Stack, Text } from '@mantine/core';
+import { Grid, Skeleton, Stack, Text } from '@mantine/core';
 import {
   IconBookmark,
   IconCircleCheck,
@@ -39,8 +39,10 @@ import { RenderAddress } from '../../components/render/Company';
 import { RenderUser } from '../../components/render/User';
 import { formatDate } from '../../defaults/formatters';
 import {
+  useCheckShipmentForm,
   useSalesOrderShipmentCompleteFields,
-  useSalesOrderShipmentFields
+  useSalesOrderShipmentFields,
+  useUncheckShipmentForm
 } from '../../forms/SalesOrderForms';
 import {
   useCreateApiFormModal,
@@ -320,44 +322,14 @@ export default function SalesOrderShipmentDetail() {
     onFormSuccess: refreshShipment
   });
 
-  const checkShipment = useEditApiFormModal({
+  const checkShipment = useCheckShipmentForm({
-    url: ApiEndpoints.sales_order_shipment_list,
+    shipmentId: shipment.pk,
-    pk: shipment.pk,
+    onSuccess: refreshShipment
-    title: t`Check Shipment`,
-    preFormContent: (
-      <Alert color='green' icon={<IconCircleCheck />} title={t`Check Shipment`}>
-        <Text>{t`Marking the shipment as checked indicates that you have verified that all items included in this shipment are correct`}</Text>
-      </Alert>
-    ),
-    fetchInitialData: false,
-    fields: {
-      checked_by: {
-        hidden: true,
-        value: userId
-      }
-    },
-    successMessage: t`Shipment marked as checked`,
-    onFormSuccess: refreshShipment
   });
 
-  const uncheckShipment = useEditApiFormModal({
+  const uncheckShipment = useUncheckShipmentForm({
-    url: ApiEndpoints.sales_order_shipment_list,
+    shipmentId: shipment.pk,
-    pk: shipment.pk,
+    onSuccess: refreshShipment
-    title: t`Uncheck Shipment`,
-    preFormContent: (
-      <Alert color='red' icon={<IconCircleX />} title={t`Uncheck Shipment`}>
-        <Text>{t`Marking the shipment as unchecked indicates that the shipment requires further verification`}</Text>
-      </Alert>
-    ),
-    fetchInitialData: false,
-    fields: {
-      checked_by: {
-        hidden: true,
-        value: null
-      }
-    },
-    successMessage: t`Shipment marked as unchecked`,
-    onFormSuccess: refreshShipment
   });
 
   const shipmentBadges = useMemo(() => {

src/frontend/src/tables/sales/SalesOrderShipmentTable.tsx

@@ -1,5 +1,9 @@
 import { t } from '@lingui/core/macro';
-import { IconTruckDelivery } from '@tabler/icons-react';
+import {
+  IconCircleCheck,
+  IconCircleX,
+  IconTruckDelivery
+} from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -19,8 +23,10 @@ import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
 import dayjs from 'dayjs';
 import {
+  useCheckShipmentForm,
   useSalesOrderShipmentCompleteFields,
-  useSalesOrderShipmentFields
+  useSalesOrderShipmentFields,
+  useUncheckShipmentForm
 } from '../../forms/SalesOrderForms';
 import {
   useCreateApiFormModal,
@@ -91,6 +97,20 @@ export default function SalesOrderShipmentTable({
     table: table
   });
 
+  const checkShipment = useCheckShipmentForm({
+    shipmentId: selectedShipment.pk,
+    onSuccess: () => {
+      table.refreshTable();
+    }
+  });
+
+  const uncheckShipment = useUncheckShipmentForm({
+    shipmentId: selectedShipment.pk,
+    onSuccess: () => {
+      table.refreshTable();
+    }
+  });
+
   const completeShipment = useCreateApiFormModal({
     url: ApiEndpoints.sales_order_shipment_complete,
     pk: selectedShipment.pk,
@@ -188,6 +208,30 @@ export default function SalesOrderShipmentTable({
       const shipped: boolean = !!record.shipment_date;
 
       return [
+        {
+          hidden:
+            !!record.checked_by || !user.hasChangeRole(UserRoles.sales_order),
+          title: t`Check Shipment`,
+          color: 'blue',
+          icon: <IconCircleCheck />,
+          onClick: () => {
+            setSelectedShipment(record);
+            checkShipment.open();
+          }
+        },
+        {
+          hidden:
+            shipped ||
+            !record.checked_by ||
+            !user.hasChangeRole(UserRoles.sales_order),
+          title: t`Uncheck Shipment`,
+          color: 'red',
+          icon: <IconCircleX />,
+          onClick: () => {
+            setSelectedShipment(record);
+            uncheckShipment.open();
+          }
+        },
         {
           hidden: shipped || !user.hasChangeRole(UserRoles.sales_order),
           title: t`Complete Shipment`,
@@ -271,7 +315,9 @@ export default function SalesOrderShipmentTable({
     <>
       {newShipment.modal}
       {editShipment.modal}
+      {checkShipment.modal}
       {deleteShipment.modal}
+      {uncheckShipment.modal}
       {completeShipment.modal}
       <InvenTreeTable
         url={apiUrl(ApiEndpoints.sales_order_shipment_list)}