297 lines
10 KiB
JavaScript
297 lines
10 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({
|
|
// Customer Information
|
|
Principal_Investigator: '',
|
|
Email: '',
|
|
Company_Institution: '',
|
|
Contact_Number: '',
|
|
Address: '',
|
|
City: '',
|
|
State: '',
|
|
Pin: '',
|
|
Secondary_Contact: '',
|
|
Secondary_Email: '',
|
|
Secondary_Company_Institution: '',
|
|
Secondary_Contact_Number: '',
|
|
|
|
// Sample Information
|
|
Project_Title: '',
|
|
Number_of_Samples: '',
|
|
Sample_Type: '',
|
|
Sample_Type_Other: '',
|
|
Sample_Source: '',
|
|
Sample_Source_Other: '',
|
|
Pathogenicity: '',
|
|
Sample_Remarks: '',
|
|
|
|
// Service Information
|
|
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: '',
|
|
|
|
// Bioinformatics Information
|
|
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('');
|
|
|
|
useEffect(() => {
|
|
// Check for Excel data in sessionStorage
|
|
const excelData = sessionStorage.getItem('excelData');
|
|
const uploadedFileName = sessionStorage.getItem('uploadedFileName');
|
|
|
|
if (excelData) {
|
|
try {
|
|
const jsonData = JSON.parse(excelData);
|
|
autoFillForm(jsonData);
|
|
|
|
// Clear stored data
|
|
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 };
|
|
|
|
// Helper function to safely get value
|
|
const getValue = (key) => data[key] ? data[key].toString().trim() : '';
|
|
|
|
// Customer Information
|
|
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');
|
|
|
|
// Sample Information
|
|
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');
|
|
|
|
// Service Information
|
|
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');
|
|
|
|
// Bioinformatics Information
|
|
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);
|
|
|
|
// Handle Sample Details
|
|
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: getValue('Serial Number'),
|
|
Sample_Name: getValue('Sample Name'),
|
|
Storage_Temp: getValue('Storage Temp'),
|
|
Preservative_Reagent: getValue('Preservative Reagent'),
|
|
Temp_Information: getValue('Temp Information'),
|
|
Comments: getValue('Comments')
|
|
}));
|
|
setSampleDetails(newSampleDetails);
|
|
}
|
|
};
|
|
|
|
const handleInputChange = (section, field, value) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[field]: value
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
setMessage(''); // Clear previous messages
|
|
|
|
try {
|
|
const formDataToSend = new FormData();
|
|
|
|
// Add form data
|
|
Object.keys(formData).forEach(key => {
|
|
if (formData[key]) {
|
|
formDataToSend.append(key, formData[key]);
|
|
}
|
|
});
|
|
|
|
// Add sample details as JSON string
|
|
formDataToSend.append('sample_details', JSON.stringify(sampleDetails));
|
|
formDataToSend.append('form_type', 'sample');
|
|
|
|
console.log('Submitting form data:', formData);
|
|
console.log('Sample details:', sampleDetails);
|
|
|
|
const response = await fetch('/api/forms', {
|
|
method: 'POST',
|
|
body: formDataToSend,
|
|
});
|
|
|
|
const result = await response.json();
|
|
console.log('API Response:', result);
|
|
|
|
if (response.ok) {
|
|
setMessage(result.message);
|
|
|
|
// Reset form after successful submission
|
|
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">
|
|
{/* Show message if exists */}
|
|
{message && (
|
|
<div className="mx-6 mt-6">
|
|
<div className={`p-4 rounded ${message.includes('Error') ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-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}
|
|
/>
|
|
|
|
{/* Submit Button */}
|
|
<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>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SampleFormContainer; |