Multiple machineries on single shop UI

chpy04 · chpy04 · commit 46444236a7e9 · 2026-02-06T15:15:44.000-05:00
diff --git a/src/frontend/src/pages/AdminToolsPage/ScheduleConfig/AdminToolsScheduleConfig.tsx b/src/frontend/src/pages/AdminToolsPage/ScheduleConfig/AdminToolsScheduleConfig.tsx
@@ -115,7 +115,7 @@ const AdminToolsScheduleConfig: React.FC = () => {
 
   const [openCreate, setOpenCreate] = useState(false);
   const [openCreateMachinery, setOpenCreateMachinery] = useState(false);
-  const [editMachinery, setEditMachinery] = useState<{ machineryId: string; shopId: string } | null>(null);
+  const [editMachineryId, setEditMachineryId] = useState<string | null>(null);
   const [openEdit, setOpenEdit] = useState(false);
   const [editingShop, setEditingShop] = useState<Shop | null>(null);
   const [shopToDelete, setShopToDelete] = useState<Shop | undefined>(undefined);
@@ -416,15 +416,7 @@ const AdminToolsScheduleConfig: React.FC = () => {
                               <Box display="flex" gap={1} justifyContent="center">
                                 <Tooltip title="Edit" arrow>
                                   <span>
-                                    <IconButton
-                                      size="small"
-                                      onClick={() =>
-                                        setEditMachinery({
-                                          machineryId: machine.machineryId,
-                                          shopId: shopMachinery.shop.shopId
-                                        })
-                                      }
-                                    >
+                                    <IconButton size="small" onClick={() => setEditMachineryId(machine.machineryId)}>
                                       <EditIcon fontSize="small" />
                                     </IconButton>
                                   </span>
@@ -500,24 +492,13 @@ const AdminToolsScheduleConfig: React.FC = () => {
       <CreateMachineryModal open={openCreateMachinery} onClose={() => setOpenCreateMachinery(false)} />
 
       {/* Edit Machine Modal */}
-      {editMachinery &&
+      {editMachineryId &&
         machines &&
         (() => {
-          const selectedMachine = machines.find((m) => m.machineryId === editMachinery.machineryId);
+          const selectedMachine = machines.find((m) => m.machineryId === editMachineryId);
           if (!selectedMachine) return null;
 
-          const selectedShopMachinery = selectedMachine.shops?.find(
-            (sm: { shop: { shopId: string } }) => sm.shop.shopId === editMachinery.shopId
-          );
-
-          if (!selectedShopMachinery) return null;
-
-          const machineryForEdit: typeof selectedMachine = {
-            ...selectedMachine,
-            shops: [selectedShopMachinery]
-          };
-
-          return <EditMachineryModal open={true} onClose={() => setEditMachinery(null)} machinery={machineryForEdit} />;
+          return <EditMachineryModal open={true} onClose={() => setEditMachineryId(null)} machinery={selectedMachine} />;
         })()}
 
       {/* Edit Shop Modal */}
diff --git a/src/frontend/src/pages/AdminToolsPage/ScheduleConfig/Machinery/CreateMachineryModal.tsx b/src/frontend/src/pages/AdminToolsPage/ScheduleConfig/Machinery/CreateMachineryModal.tsx
@@ -1,32 +1,30 @@
-import ErrorPage from '../../../ErrorPage';
-import LoadingIndicator from '../../../../components/LoadingIndicator';
 import { useCreateMachinery, MACHINERY_KEY } from '../../../../hooks/calendar.hooks';
 import { postAddMachineryToShop } from '../../../../apis/calendar.api';
 import { useQueryClient } from 'react-query';
-import MachineryFormModal from './MachineryFormModal';
+import MachineryFormModal, { MachineryFormValues } from './MachineryFormModal';
 
 interface CreateMachineryModalProps {
   open: boolean;
   onClose: () => void;
 }
 
 const CreateMachineryModal = ({ open, onClose }: CreateMachineryModalProps) => {
-  const { isLoading, isError, error, mutateAsync: createMachinery } = useCreateMachinery();
+  const { mutateAsync: createMachinery } = useCreateMachinery();
   const queryClient = useQueryClient();
 
-  if (isError) return <ErrorPage message={error?.message} />;
-  if (isLoading) return <LoadingIndicator />;
-
-  const onSubmit = async (data: { shopId: string; machineName: string; quantity: number }) => {
-    const { machineName, shopId, quantity } = data;
+  const onSubmit = async (data: MachineryFormValues) => {
+    const { machineName, shopEntries } = data;
     // First create the machinery
     const createdMachinery = await createMachinery({ machineName });
-    // Then add it to the shop
-    const result = await postAddMachineryToShop({
-      machineryId: createdMachinery.machineryId,
-      shopId,
-      quantity
-    });
+    // Then add it to each shop
+    let result = createdMachinery;
+    for (const entry of shopEntries) {
+      result = await postAddMachineryToShop({
+        machineryId: createdMachinery.machineryId,
+        shopId: entry.shopId,
+        quantity: entry.quantity
+      });
+    }
     // Invalidate and refetch to ensure UI updates immediately
     await queryClient.invalidateQueries(MACHINERY_KEY);
     await queryClient.refetchQueries(MACHINERY_KEY);
diff --git a/src/frontend/src/pages/AdminToolsPage/ScheduleConfig/Machinery/EditMachineryModal.tsx b/src/frontend/src/pages/AdminToolsPage/ScheduleConfig/Machinery/EditMachineryModal.tsx
@@ -1,11 +1,8 @@
-import ErrorPage from '../../../ErrorPage';
-import LoadingIndicator from '../../../../components/LoadingIndicator';
-import { useEditMachinery, useAddMachineryToShop, MACHINERY_KEY } from '../../../../hooks/calendar.hooks';
+import { useEditMachinery, MACHINERY_KEY } from '../../../../hooks/calendar.hooks';
 import { postAddMachineryToShop } from '../../../../apis/calendar.api';
 import { useQueryClient } from 'react-query';
 import { Machinery } from 'shared';
-import MachineryFormModal from './MachineryFormModal';
-import { MachineryFormValues } from './MachineryFormModal';
+import MachineryFormModal, { MachineryFormValues } from './MachineryFormModal';
 
 interface EditMachineryModalProps {
   open: boolean;
@@ -14,38 +11,21 @@ interface EditMachineryModalProps {
 }
 
 const EditMachineryModal = ({ open, onClose, machinery }: EditMachineryModalProps) => {
-  const shopMachinery = machinery.shops?.[0];
-  const originalShopId = shopMachinery?.shop?.shopId || '';
   const queryClient = useQueryClient();
+  const { mutateAsync: editMachinery } = useEditMachinery(machinery.machineryId);
 
-  const {
-    isLoading: isEditing,
-    isError: isEditError,
-    error: editError,
-    mutateAsync: editMachinery
-  } = useEditMachinery(machinery.machineryId);
-  const {
-    isLoading: isAdding,
-    isError: isAddError,
-    error: addError,
-    mutateAsync: addMachineryToShop
-  } = useAddMachineryToShop(machinery.machineryId);
-
-  const isLoading = isEditing || isAdding;
-  const isError = isEditError || isAddError;
-  const error = editError || addError;
+  const originalShops = machinery.shops || [];
 
   const machineryData: MachineryFormValues = {
-    shopId: originalShopId,
     machineName: machinery.name,
-    quantity: shopMachinery?.quantity || 1
+    shopEntries:
+      originalShops.length > 0
+        ? originalShops.map((sm) => ({ shopId: sm.shop.shopId, quantity: sm.quantity }))
+        : [{ shopId: '', quantity: 1 }]
   };
 
-  if (isError) return <ErrorPage message={error?.message} />;
-  if (isLoading) return <LoadingIndicator />;
-
-  const onSubmit = async (data: { shopId: string; machineName: string; quantity: number }) => {
-    const { machineName, shopId, quantity } = data;
+  const onSubmit = async (data: MachineryFormValues) => {
+    const { machineName, shopEntries } = data;
     let currentMachineryId = machinery.machineryId;
 
     // Check if name changed - this may merge with another machinery
@@ -54,25 +34,47 @@ const EditMachineryModal = ({ open, onClose, machinery }: EditMachineryModalProp
       currentMachineryId = updatedMachinery.machineryId;
     }
 
-    // Update shop/quantity relationship using the current machinery ID
-    if (currentMachineryId !== machinery.machineryId) {
-      // Use the API directly since the machinery ID changed after merge
-      const result = await postAddMachineryToShop({
-        machineryId: currentMachineryId,
-        shopId,
-        quantity,
-        originalShopId: originalShopId || undefined
-      });
-      queryClient.invalidateQueries(MACHINERY_KEY);
-      return result;
+    const originalShopIds = new Set(originalShops.map((sm) => sm.shop.shopId));
+    const newShopIds = new Set(shopEntries.map((e) => e.shopId));
+
+    // Remove shops that were removed from the form
+    for (const sm of originalShops) {
+      if (!newShopIds.has(sm.shop.shopId)) {
+        await postAddMachineryToShop({
+          machineryId: currentMachineryId,
+          shopId: sm.shop.shopId,
+          quantity: 0
+        });
+      }
+    }
+
+    // Add or update shop entries
+    for (const entry of shopEntries) {
+      if (!entry.shopId) continue;
+      const original = originalShops.find((sm) => sm.shop.shopId === entry.shopId);
+      if (original) {
+        // Existing shop - update if quantity changed
+        if (original.quantity !== entry.quantity) {
+          await postAddMachineryToShop({
+            machineryId: currentMachineryId,
+            shopId: entry.shopId,
+            quantity: entry.quantity,
+            originalShopId: entry.shopId
+          });
+        }
+      } else {
+        // New shop association
+        await postAddMachineryToShop({
+          machineryId: currentMachineryId,
+          shopId: entry.shopId,
+          quantity: entry.quantity
+        });
+      }
     }
 
-    // Same machinery ID, use the hook as normal
-    return await addMachineryToShop({
-      shopId,
-      quantity,
-      originalShopId: originalShopId || undefined
-    });
+    await queryClient.invalidateQueries(MACHINERY_KEY);
+    await queryClient.refetchQueries(MACHINERY_KEY);
+    return machinery;
   };
 
   return <MachineryFormModal open={open} onClose={onClose} onSubmit={onSubmit} initialValues={machineryData} />;
diff --git a/src/frontend/src/pages/AdminToolsPage/ScheduleConfig/Machinery/MachineryFormModal.tsx b/src/frontend/src/pages/AdminToolsPage/ScheduleConfig/Machinery/MachineryFormModal.tsx
