Aayush Optimize Field Dependency & Selection Flow

src/components/BMDashboard/Tools/EquipmentUpdateForm.jsx

@@ -33,17 +33,21 @@
   const toolList = useMemo(
     () =>
       tools
-        .filter(tool => tool.itemType && tool.itemType.name)
+        .filter(
+          tool => tool.project._id === formData.project && tool.itemType && tool.itemType.name,
+        )
         .map(tool => ({ id: tool.itemType._id, name: tool.itemType.name })),
-    [tools],
+    [tools, formData.project],
   );
 
   const equipmentList = useMemo(
     () =>
       equipments
-        .filter(equip => equip.itemType && equip.itemType.name)
+        .filter(
+          equip => equip.project._id === formData.project && equip.itemType && equip.itemType.name,
+        )
         .map(equip => ({ id: equip.itemType._id, name: equip.itemType.name })),
-    [equipments],
+    [equipments, formData.project],
   );
   const uniqueToolList = useMemo(
     () => [...new Map(toolList.map(item => [item.id, item])).values()],
@@ -73,7 +77,7 @@
     setFormData(prev => ({
       ...prev,
       [name]: value,
-      ...(name === 'toolOrEquipment' ? { name: '', number: '' } : {}), // Reset name and number on change
+      ...(name === 'project' || name === 'toolOrEquipment' ? { name: '', number: '' } : {}), // Reset name and number on change
     }));
   };
 
@@ -158,21 +162,39 @@
             onChange={handleChange}
             disabled={!formData.toolOrEquipment}
           >
-            <option value="">Select Name</option>
             {formData.toolOrEquipment === 'Tool' &&
-              uniqueToolList.map(item => (
-                <option key={item.id} value={item.name}>
-                  {item.name}
-                </option>
+              (uniqueToolList.length > 0 ? (
+                <>
+                  <option value="">Select Name</option>
+                  {uniqueToolList.map(item => (
+                    <option key={item.id} value={item.name}>
+                      {item.name}
+                    </option>
+                  ))}
+                </>
+              ) : (
+                <option value="">No names available</option>
               ))}
             {formData.toolOrEquipment === 'Equipment' &&
-              uniqueEquipmentList.map(item => (
-                <option key={item.id} value={item.name}>
-                  {item.name}
-                </option>
+              (uniqueEquipmentList.length > 0 ? (
+                <>
+                  <option value="">Select Name</option>
+                  {uniqueEquipmentList.map(item => (
+                    <option key={item.id} value={item.name}>
+                      {item.name}
+                    </option>
+                  ))}
+                </>
+              ) : (
+                <option value="">No names available</option>
               ))}
           </Input>
-          {!formData.name && <div className={styles.toolFormError}>Please select a name</div>}
+          {!formData.name &&
+            (!formData.toolOrEquipment || !formData.project ? (
+              <div className="toolFormError">Please select Project and Tool/Equipment first</div>
+            ) : (
+              <div className="toolFormError">Please select a name</div>
+            ))}
         </FormGroup>
 
         <FormGroup>

yarn.lock

@@ -12553,4 +12553,4 @@ yocto-queue@^0.1.0:
 yoctocolors-cjs@^2.1.2:
   version "2.1.3"
   resolved "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.3.tgz"
-  integrity sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==
+  integrity sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==