258 lines
11 KiB
JavaScript
258 lines
11 KiB
JavaScript
'use client';
|
|
import React, { useEffect, useState } from 'react';
|
|
import CustomerInfoSection from './CustomerInfoSection';
|
|
import SampleInfoSection from './SampleInfoSection';
|
|
import ServiceInfoSection from './ServiceInfoSection';
|
|
import BioinformaticsSection from './BioinformaticsSection';
|
|
import SampleDetailsSection from './SampleDetailsSection';
|
|
|
|
const SampleFormContainer = () => {
|
|
const [formData, setFormData] = useState({
|
|
Principal_Investigator: '', Email: '', Company_Institution: '', Contact_Number: '',
|
|
Address: '', City: '', State: '', Pin: '', Secondary_Contact: '', Secondary_Email: '',
|
|
Secondary_Company_Institution: '', Secondary_Contact_Number: '', Project_Title: '',
|
|
Number_of_Samples: '', Sample_Type: '', Sample_Type_Other: '', Sample_Source: '',
|
|
Sample_Source_Other: '', Pathogenicity: '', Sample_Remarks: '', Service_Requested: '',
|
|
Service_Requested_Other: '', Type_of_Library: '', Type_of_Library_Other: '',
|
|
Required_Library_Size: '', Required_Library_Size_Other: '', Index_Information: '',
|
|
Kit_Information: '', Sequencing_Platform: '', Sequencing_Platform_Other: '',
|
|
Sequencing_Read_Length: '', Sequencing_Read_Length_Other: '', Total_Data_Requirement: '',
|
|
Service_Remarks: '', Analysis_Requested: '', Analysis_Details: '',
|
|
Reference_Genome_Available: '', Genome_Size: '', Special_Consideration: ''
|
|
});
|
|
|
|
const [sampleDetails, setSampleDetails] = useState([{
|
|
Serial_Number: '', Sample_Name: '', Storage_Temp: '',
|
|
Preservative_Reagent: '', Temp_Information: '', Comments: ''
|
|
}]);
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [message, setMessage] = useState('');
|
|
const [showSuccessModal, setShowSuccessModal] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const excelData = sessionStorage.getItem('excelData');
|
|
const uploadedFileName = sessionStorage.getItem('uploadedFileName');
|
|
|
|
if (excelData) {
|
|
try {
|
|
const jsonData = JSON.parse(excelData);
|
|
autoFillForm(jsonData);
|
|
sessionStorage.removeItem('excelData');
|
|
sessionStorage.removeItem('uploadedFileName');
|
|
setMessage(`Form auto-filled from uploaded file: ${uploadedFileName}`);
|
|
} catch (error) {
|
|
console.error('Error parsing Excel data:', error);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
const autoFillForm = (jsonData) => {
|
|
if (jsonData.length === 0) return;
|
|
const data = jsonData[0];
|
|
const newFormData = { ...formData };
|
|
const getValue = (key) => data[key] ? data[key].toString().trim() : '';
|
|
|
|
newFormData.Principal_Investigator = getValue('Principal Investigator');
|
|
newFormData.Email = getValue('Email');
|
|
newFormData.Company_Institution = getValue('Company/Institution');
|
|
newFormData.Contact_Number = getValue('Contact Number');
|
|
newFormData.Address = getValue('Address');
|
|
newFormData.City = getValue('City');
|
|
newFormData.State = getValue('State');
|
|
newFormData.Pin = getValue('Pin');
|
|
newFormData.Secondary_Contact = getValue('Secondary Contact');
|
|
newFormData.Secondary_Email = getValue('Secondary Email');
|
|
newFormData.Secondary_Company_Institution = getValue('Secondary Company/Institution');
|
|
newFormData.Secondary_Contact_Number = getValue('Secondary Contact Number');
|
|
|
|
newFormData.Project_Title = getValue('Project Title');
|
|
newFormData.Number_of_Samples = getValue('Number of Samples');
|
|
newFormData.Sample_Type = getValue('Sample Type');
|
|
newFormData.Sample_Type_Other = getValue('Sample Type Other');
|
|
newFormData.Sample_Source = getValue('Sample Source');
|
|
newFormData.Sample_Source_Other = getValue('Sample Source Other');
|
|
newFormData.Pathogenicity = getValue('Pathogenicity');
|
|
newFormData.Sample_Remarks = getValue('Sample Remarks');
|
|
|
|
newFormData.Service_Requested = getValue('Service Requested');
|
|
newFormData.Service_Requested_Other = getValue('Service Requested Other');
|
|
newFormData.Type_of_Library = getValue('Type of Library');
|
|
newFormData.Type_of_Library_Other = getValue('Type of Library Other');
|
|
newFormData.Required_Library_Size = getValue('Required Library Size');
|
|
newFormData.Required_Library_Size_Other = getValue('Required Library Size Other');
|
|
newFormData.Index_Information = getValue('Index Information');
|
|
newFormData.Kit_Information = getValue('Kit Information');
|
|
newFormData.Sequencing_Platform = getValue('Sequencing Platform');
|
|
newFormData.Sequencing_Platform_Other = getValue('Sequencing Platform Other');
|
|
newFormData.Sequencing_Read_Length = getValue('Sequencing Read Length');
|
|
newFormData.Sequencing_Read_Length_Other = getValue('Sequencing Read Length Other');
|
|
newFormData.Total_Data_Requirement = getValue('Total Data Requirement');
|
|
newFormData.Service_Remarks = getValue('Service Remarks');
|
|
|
|
newFormData.Analysis_Requested = getValue('Analysis Requested');
|
|
newFormData.Analysis_Details = getValue('Analysis Details');
|
|
newFormData.Reference_Genome_Available = getValue('Reference Genome Available');
|
|
newFormData.Genome_Size = getValue('Genome Size');
|
|
newFormData.Special_Consideration = getValue('Special Consideration');
|
|
|
|
setFormData(newFormData);
|
|
|
|
const sampleDetailsData = jsonData.filter(row =>
|
|
row['Serial Number'] || row['Sample Name'] ||
|
|
row['Storage Temp'] || row['Preservative Reagent'] ||
|
|
row['Temp Information'] || row['Comments']
|
|
);
|
|
|
|
if (sampleDetailsData.length > 0) {
|
|
const newSampleDetails = sampleDetailsData.map(sample => ({
|
|
Serial_Number: sample['Serial Number'] || '',
|
|
Sample_Name: sample['Sample Name'] || '',
|
|
Storage_Temp: sample['Storage Temp'] || '',
|
|
Preservative_Reagent: sample['Preservative Reagent'] || '',
|
|
Temp_Information: sample['Temp Information'] || '',
|
|
Comments: sample['Comments'] || ''
|
|
}));
|
|
setSampleDetails(newSampleDetails);
|
|
}
|
|
};
|
|
|
|
const handleInputChange = (section, field, value) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[field]: value
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
setMessage('');
|
|
try {
|
|
const formDataToSend = new FormData();
|
|
Object.keys(formData).forEach(key => {
|
|
if (formData[key]) {
|
|
formDataToSend.append(key, formData[key]);
|
|
}
|
|
});
|
|
formDataToSend.append('sample_details', JSON.stringify(sampleDetails));
|
|
formDataToSend.append('form_type', 'sample');
|
|
|
|
const response = await fetch('/api/forms', {
|
|
method: 'POST',
|
|
body: formDataToSend,
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
setMessage(result.message);
|
|
setShowSuccessModal(true); // show modal instead of green alert
|
|
|
|
setFormData({
|
|
Principal_Investigator: '', Email: '', Company_Institution: '', Contact_Number: '',
|
|
Address: '', City: '', State: '', Pin: '', Secondary_Contact: '', Secondary_Email: '',
|
|
Secondary_Company_Institution: '', Secondary_Contact_Number: '', Project_Title: '',
|
|
Number_of_Samples: '', Sample_Type: '', Sample_Type_Other: '', Sample_Source: '',
|
|
Sample_Source_Other: '', Pathogenicity: '', Sample_Remarks: '', Service_Requested: '',
|
|
Service_Requested_Other: '', Type_of_Library: '', Type_of_Library_Other: '',
|
|
Required_Library_Size: '', Required_Library_Size_Other: '', Index_Information: '',
|
|
Kit_Information: '', Sequencing_Platform: '', Sequencing_Platform_Other: '',
|
|
Sequencing_Read_Length: '', Sequencing_Read_Length_Other: '', Total_Data_Requirement: '',
|
|
Service_Remarks: '', Analysis_Requested: '', Analysis_Details: '',
|
|
Reference_Genome_Available: '', Genome_Size: '', Special_Consideration: ''
|
|
});
|
|
setSampleDetails([{
|
|
Serial_Number: '', Sample_Name: '', Storage_Temp: '',
|
|
Preservative_Reagent: '', Temp_Information: '', Comments: ''
|
|
}]);
|
|
} else {
|
|
setMessage('Error: ' + (result.error || 'Form submission failed'));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error submitting form:', error);
|
|
setMessage('Error: Network error. Please check your connection and try again.');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-teal-50 min-h-screen py-8">
|
|
<div className="max-w-4xl mx-auto bg-teal-50 shadow-lg border border-gray-300 font-arial text-xs">
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
|
|
{/* Only show red alert for errors */}
|
|
{message && message.includes('Error') && (
|
|
<div className="mx-6 mt-6">
|
|
<div className="p-4 rounded bg-red-100 text-red-800">
|
|
{message}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<CustomerInfoSection formData={formData} onInputChange={handleInputChange} />
|
|
<SampleInfoSection formData={formData} onInputChange={handleInputChange} />
|
|
<ServiceInfoSection formData={formData} onInputChange={handleInputChange} />
|
|
<BioinformaticsSection formData={formData} onInputChange={handleInputChange} />
|
|
<SampleDetailsSection sampleDetails={sampleDetails} setSampleDetails={setSampleDetails} />
|
|
|
|
<div className="text-center py-6">
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="bg-teal-600 hover:bg-teal-700 text-white font-medium py-3 px-6 rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
{isSubmitting ? 'Submitting...' : 'Submit Sample Form'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Success Modal */}
|
|
{/* Success Modal */}
|
|
{showSuccessModal && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full text-center animate-pulse">
|
|
{/* Animated Check Circle */}
|
|
<div className="flex justify-center mb-4">
|
|
<div className="relative">
|
|
{/* Outer ring animation */}
|
|
<div className="w-20 h-20 border-4 border-green-200 rounded-full animate-ping absolute"></div>
|
|
<div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center animate-bounce relative z-10">
|
|
{/* Checkmark */}
|
|
<svg
|
|
className="w-10 h-10 text-white animate-pulse"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="4"
|
|
d="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="text-lg font-semibold text-green-700 mb-4 animate-pulse">Submitted Successfully!</h2>
|
|
<p className="text-gray-700 mb-6">{message}</p>
|
|
<button
|
|
onClick={() => setShowSuccessModal(false)}
|
|
className="bg-teal-600 hover:bg-teal-700 text-white py-2 px-4 rounded transition-all duration-200 transform hover:scale-105"
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SampleFormContainer;
|