added popup for draft
This commit is contained in:
Malini
parent
604f816289
commit
2178df5098
@ -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(() => {
|
||||
<span>+ Add Product</span>
|
||||
</button>
|
||||
{!canAddMoreProducts && (
|
||||
<span className="text-xs text-gray-600">Maximum of {MAX_PRODUCTS} products reached.</span>
|
||||
<span className="text-xs text-gray-600">
|
||||
{products.length >= MAX_PRODUCTS
|
||||
? `Maximum of ${MAX_PRODUCTS} products reached.`
|
||||
: 'No more products available to add.'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -2245,6 +2326,84 @@ useEffect(() => {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* Draft Saved Success Popup */}
|
||||
{showDraftSaved && (
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/40 p-4">
|
||||
<div className="bg-white w-full max-w-md rounded-lg shadow-2xl border border-gray-200">
|
||||
<div className="p-6 text-center flex flex-col gap-6">
|
||||
{/* Success Icon */}
|
||||
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
|
||||
<svg className="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-xl font-semibold text-gray-900">Draft Saved</h3>
|
||||
<p className="text-gray-600">
|
||||
Your IP Quarterly Survey for <span className="font-semibold">{
|
||||
(() => {
|
||||
// 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}` : '';
|
||||
})()
|
||||
}</span> has been saved as a draft.
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 w-full">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 px-4 py-2.5 border border-[#92722A] text-[#92722A] font-medium rounded-md hover:bg-[#F5F0E1] transition-colors"
|
||||
onClick={() => setShowDraftSaved(false)}
|
||||
>
|
||||
Resume
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 px-4 py-2.5 bg-[#92722A] text-white font-medium rounded-md hover:bg-[#7b5c1f] transition-colors"
|
||||
onClick={() => {
|
||||
// Navigate to My Surveys page
|
||||
window.location.href = '/overview';
|
||||
}}
|
||||
>
|
||||
Go to My Surveys
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user