applications

frontend/src/pages/Applications/Applications.js

@@ -15,24 +15,77 @@ const Applications = () => {
   const [showPlanForm, setShowPlanForm] = useState(false);
   const [applications, setApplications] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [properties, setProperties] = useState([]);
+  const [products, setProducts] = useState([]);
+  const [equipment, setEquipment] = useState([]);
+  const [nozzles, setNozzles] = useState([]);
+  const [selectedPropertyDetails, setSelectedPropertyDetails] = useState(null);
 
   useEffect(() => {
     fetchApplications();
+    fetchPlanningData();
   }, []);
 
   const fetchApplications = async () => {
     try {
-      setLoading(true);
       const response = await applicationsAPI.getPlans();
       setApplications(response.data.data.plans || []);
     } catch (error) {
       console.error('Failed to fetch applications:', error);
       toast.error('Failed to load applications');
+    }
+  };
+
+  const fetchPlanningData = async () => {
+    try {
+      setLoading(true);
+      const [propertiesResponse, productsResponse, equipmentResponse, nozzlesResponse] = await Promise.all([
+        propertiesAPI.getAll(),
+        productsAPI.getAll(),
+        equipmentAPI.getAll(),
+        nozzlesAPI.getAll()
+      ]);
+      
+      setProperties(propertiesResponse.data.data.properties || []);
+      // Combine shared and user products with unique IDs
+      const sharedProducts = (productsResponse.data.data.sharedProducts || []).map(product => ({
+        ...product,
+        uniqueId: `shared_${product.id}`,
+        isShared: true
+      }));
+      
+      const userProducts = (productsResponse.data.data.userProducts || []).map(product => ({
+        ...product,
+        uniqueId: `user_${product.id}`,
+        isShared: false
+      }));
+      
+      const allProducts = [...sharedProducts, ...userProducts];
+      setProducts(allProducts);
+      setEquipment(equipmentResponse.data.data.equipment || []);
+      setNozzles(nozzlesResponse.data.data?.nozzles || nozzlesResponse.data || []);
+    } catch (error) {
+      console.error('Failed to fetch planning data:', error);
+      toast.error('Failed to load planning data');
     } finally {
       setLoading(false);
     }
   };
 
+  const fetchPropertyDetails = async (propertyId) => {
+    try {
+      const response = await propertiesAPI.getById(parseInt(propertyId));
+      const property = response.data.data.property;
+      setSelectedPropertyDetails(property);
+      return property;
+    } catch (error) {
+      console.error('Failed to fetch property details:', error);
+      toast.error('Failed to load property details');
+      setSelectedPropertyDetails(null);
+      return null;
+    }
+  };
+
   if (loading) {
     return (
       <div className="p-6">
@@ -130,6 +183,12 @@ const Applications = () => {
       {showPlanForm && (
         <ApplicationPlanModal
           onClose={() => setShowPlanForm(false)}
+          properties={properties}
+          products={products}
+          equipment={equipment}
+          nozzles={nozzles}
+          selectedPropertyDetails={selectedPropertyDetails}
+          onPropertySelect={fetchPropertyDetails}
           onSubmit={async (planData) => {
             try {
               // Create a plan for each selected area
@@ -195,13 +254,16 @@ const Applications = () => {
 };
 
 // Application Planning Modal Component
-const ApplicationPlanModal = ({ onClose, onSubmit }) => {
-  const [properties, setProperties] = useState([]);
-  const [products, setProducts] = useState([]);
-  const [equipment, setEquipment] = useState([]);
-  const [nozzles, setNozzles] = useState([]);
-  const [selectedPropertyDetails, setSelectedPropertyDetails] = useState(null);
-  const [loading, setLoading] = useState(true);
+const ApplicationPlanModal = ({ 
+  onClose, 
+  onSubmit, 
+  properties, 
+  products, 
+  equipment, 
+  nozzles, 
+  selectedPropertyDetails,
+  onPropertySelect 
+}) => {
   const [loadingProperty, setLoadingProperty] = useState(false);
   
   const [planData, setPlanData] = useState({
@@ -215,79 +277,12 @@ const ApplicationPlanModal = ({ onClose, onSubmit }) => {
     notes: ''
   });
 
-  useEffect(() => {
-    fetchPlanningData();
-  }, []);
-
-  const fetchPlanningData = async () => {
-    try {
-      setLoading(true);
-      const [propertiesResponse, productsResponse, equipmentResponse, nozzlesResponse] = await Promise.all([
-        propertiesAPI.getAll(),
-        productsAPI.getAll(),
-        equipmentAPI.getAll(),
-        nozzlesAPI.getAll()
-      ]);
-      
-      console.log('Properties response:', propertiesResponse.data);
-      console.log('Products response:', productsResponse.data);
-      console.log('Equipment response:', equipmentResponse.data);
-      console.log('Nozzles response:', nozzlesResponse.data);
-      
-      setProperties(propertiesResponse.data.data.properties || []);
-      // Combine shared and user products with unique IDs
-      const sharedProducts = (productsResponse.data.data.sharedProducts || []).map(product => ({
-        ...product,
-        uniqueId: `shared_${product.id}`,
-        isShared: true
-      }));
-      
-      const userProducts = (productsResponse.data.data.userProducts || []).map(product => ({
-        ...product,
-        uniqueId: `user_${product.id}`,
-        isShared: false
-      }));
-      
-      const allProducts = [...sharedProducts, ...userProducts];
-      setProducts(allProducts);
-      setEquipment(equipmentResponse.data.data.equipment || []);
-      setNozzles(nozzlesResponse.data.data?.nozzles || nozzlesResponse.data || []);
-    } catch (error) {
-      console.error('Failed to fetch planning data:', error);
-      toast.error('Failed to load planning data');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const fetchPropertyDetails = async (propertyId) => {
-    try {
-      setLoadingProperty(true);
-      const response = await propertiesAPI.getById(parseInt(propertyId));
-      console.log('Property details response:', response.data);
-      const property = response.data.data.property;
-      console.log('Property sections with polygon data:', property.sections?.map(s => ({
-        id: s.id,
-        name: s.name,
-        hasPolygonData: !!s.polygonData,
-        polygonDataType: typeof s.polygonData,
-        coordinates: s.polygonData?.coordinates?.[0]?.length || 0
-      })));
-      setSelectedPropertyDetails(property);
-    } catch (error) {
-      console.error('Failed to fetch property details:', error);
-      toast.error('Failed to load property details');
-      setSelectedPropertyDetails(null);
-    } finally {
-      setLoadingProperty(false);
-    }
-  };
-
-  const handlePropertyChange = (propertyId) => {
+  const handlePropertyChange = async (propertyId) => {
     setPlanData({ ...planData, propertyId, selectedAreas: [] });
-    setSelectedPropertyDetails(null);
     if (propertyId) {
-      fetchPropertyDetails(propertyId);
+      setLoadingProperty(true);
+      await onPropertySelect(propertyId);
+      setLoadingProperty(false);
     }
   };
   
@@ -336,9 +331,6 @@ const ApplicationPlanModal = ({ onClose, onSubmit }) => {
       <div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
         <h3 className="text-lg font-semibold mb-4">Plan Application</h3>
         
-        {loading ? (
-          <LoadingSpinner />
-        ) : (
         <form onSubmit={handleSubmit} className="space-y-6">
             {/* Property Selection */}
             <div>
@@ -571,7 +563,6 @@ const ApplicationPlanModal = ({ onClose, onSubmit }) => {
               </button>
             </div>
           </form>
-        )}
       </div>
     </div>
   );