diff --git a/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx b/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx index f275255..6f073e6 100644 --- a/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx +++ b/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx @@ -112,6 +112,24 @@ const SearchableSelect = ({ }; }, []); + // Set up effect for initial data loading + React.useEffect(() => { + // Get quarter and year from localStorage if available + const currentSubmissionStr = localStorage.getItem('currentSubmission'); + if (currentSubmissionStr) { + try { + const currentSubmission = JSON.parse(currentSubmissionStr); + if (currentSubmission.quarter) setSavedQuarter(currentSubmission.quarter); + if (currentSubmission.year) setSavedYear(currentSubmission.year); + } catch (error) { + console.error('Error parsing current submission:', error); + } + } + if (isOpen && inputRef.current) { + inputRef.current.focus(); + } + }, [isOpen]); + // Focus input when dropdown opens React.useEffect(() => { if (isOpen && inputRef.current) { @@ -388,6 +406,8 @@ const ProductData = ({ const [productOptions, setProductOptions] = React.useState([]); const [isLoadingProducts, setIsLoadingProducts] = React.useState(false); const [productsError, setProductsError] = React.useState(''); + const [showDraftSaved, setShowDraftSaved] = React.useState(false); + // Remove the unused state variables since we'll use the props directly const [unitOptions, setUnitOptions] = React.useState([]); const [isLoadingUnits, setIsLoadingUnits] = React.useState(false); const [unitsError, setUnitsError] = React.useState(null); @@ -396,6 +416,7 @@ const ProductData = ({ const location = useLocation(); // Add this line + // Debug: Log products data when it changes useEffect(() => { }, [products]); @@ -624,7 +645,7 @@ console.log('Existing product match:', { if (submissionId) { // Update existing submission response = await resubmitSurvey(submissionId, payload); - alert('Draft updated successfully') + setShowDraftSaved(true); } else { // Create new submission response = await submitSurvey(payload); @@ -634,7 +655,7 @@ console.log('Existing product match:', { localStorage.setItem('currentSubmission', JSON.stringify(response.submission_data)); } - alert('Draft saved successfully') + setShowDraftSaved(true); } } catch (error) { @@ -930,11 +951,32 @@ useEffect(() => { .filter(p => p.id !== currentProductId && p.product) .map(p => p.product); - // Filter out selected products, but include the current product's selection - return productOptions.filter(option => - !otherSelectedProductIds.includes(option.value) || - option.value === currentProductValue - ); + // Get already submitted product IDs from current submission + let submittedProductIds = []; + try { + const currentSubmissionStr = localStorage.getItem('currentSubmission'); + if (currentSubmissionStr) { + const currentSubmission = JSON.parse(currentSubmissionStr); + if (currentSubmission.products && Array.isArray(currentSubmission.products)) { + submittedProductIds = currentSubmission.products + .filter(p => p.product_id) // Only include products with product_id + .map(p => p.product_id.toString()); // Convert to string for consistent comparison + } + } + } catch (error) { + console.error('Error parsing current submission:', error); + } + + // Filter out selected products and already submitted products, but include the current product's selection + return productOptions.filter(option => { + // Keep the option if: + // 1. It's the currently selected product for this row, OR + // 2. It's not selected in any other row AND not in the submitted products list + return option.value === currentProductValue || + (!otherSelectedProductIds.includes(option.value) && + !submittedProductIds.includes(option.value) && + !submittedProductIds.includes(option.originalData?.product_id?.toString())); + }); }; // Simple validation function @@ -1397,7 +1439,42 @@ useEffect(() => { } }; - const canAddMoreProducts = products.length < MAX_PRODUCTS; + // Check if there are any products available to add + const getAvailableProductsCount = () => { + try { + const currentSubmissionStr = localStorage.getItem('currentSubmission'); + let submittedProductIds = []; + + if (currentSubmissionStr) { + const currentSubmission = JSON.parse(currentSubmissionStr); + if (currentSubmission.products && Array.isArray(currentSubmission.products)) { + submittedProductIds = currentSubmission.products + .filter(p => p.product_id) + .map(p => p.product_id.toString()); + } + } + + // Get all product IDs that are already selected in the current form + const selectedProductIds = products + .filter(p => p.product) + .map(p => p.product.toString()); + + // Count how many products are available to add + const availableProducts = productOptions.filter(option => + !submittedProductIds.includes(option.value) && + !selectedProductIds.includes(option.value) && + !submittedProductIds.includes(option.originalData?.product_id?.toString()) + ); + + return availableProducts.length; + } catch (error) { + console.error('Error checking available products:', error); + return 0; + } + }; + + const availableProductsCount = getAvailableProductsCount(); + const canAddMoreProducts = products.length < MAX_PRODUCTS && availableProductsCount > 0; const isLoading = loading || isLoadingReasons || isLoadingZeroReasons || isLoadingProducts || isLoadingUnits; const hasError = error || reasonsError || zeroReasonsError || productsError || unitsError; @@ -1594,7 +1671,11 @@ useEffect(() => { + Add Product {!canAddMoreProducts && ( - Maximum of {MAX_PRODUCTS} products reached. + + {products.length >= MAX_PRODUCTS + ? `Maximum of ${MAX_PRODUCTS} products reached.` + : 'No more products available to add.'} + )} @@ -2245,6 +2326,84 @@ useEffect(() => { )} )} + {/* Draft Saved Success Popup */} + {showDraftSaved && ( +
+
+
+ {/* Success Icon */} +
+ + + +
+ + {/* Message */} +
+

Draft Saved

+

+ Your IP Quarterly Survey for { + (() => { + // Try to get survey period from localStorage first + const savedSurveyPeriod = localStorage.getItem('currentSurveyPeriod'); + let displayQuarter = quarter; + let displayYear = year; + + if (savedSurveyPeriod) { + try { + const { quarter: savedQuarter, year: savedYear } = JSON.parse(savedSurveyPeriod); + displayQuarter = savedQuarter || quarter; + displayYear = savedYear || year; + } catch (e) { + console.error('Error parsing saved survey period:', e); + } + } + + // For resubmission, use the submission's quarter/year + if (location.state?.fromResubmit && quarter && year) { + return `${quarter}-${year}`; + } + + // For new survey, use the quarter/year from location state if available + if (location.state?.survey) { + const { quarter: surveyQuarter, year: surveyYear } = location.state.survey; + if (surveyQuarter && surveyYear) { + return `${surveyQuarter}-${surveyYear}`; + } + } + + // Fallback to the values from props or local storage + return (displayQuarter || displayYear) ? `${displayQuarter}-${displayYear}` : ''; + })() + } has been saved as a draft. +
+

+
+ + {/* Buttons */} +
+ + +
+
+
+
+ )} ); };