mukeshs/operify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flowchart Updated

Browse Source
This commit is contained in:
mukesh13
2025-08-11 16:08:29 +05:30
parent 2ced46ab8f
commit d2b2bc52d8
40 changed files with 1130 additions and 1357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
app/components/SampleForm/SampleFormContainer.jsx
View File

@ -8,70 +8,29 @@ 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: '',
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 [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(() => {
// Check for Excel data in sessionStorage
const excelData = sessionStorage.getItem('excelData');
const uploadedFileName = sessionStorage.getItem('uploadedFileName');
@ -79,11 +38,8 @@ const SampleFormContainer = () => {
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);
@ -93,14 +49,10 @@ const SampleFormContainer = () => {
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');
@ -114,7 +66,6 @@ const SampleFormContainer = () => {
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');
@ -124,7 +75,6 @@ const SampleFormContainer = () => {
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');
@ -140,7 +90,6 @@ const SampleFormContainer = () => {
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');
@ -149,21 +98,20 @@ const SampleFormContainer = () => {
setFormData(newFormData);
// Handle Sample Details
const sampleDetailsData = jsonData.filter(row =>
row['Serial Number'] || row['Sample Name'] ||
row['Storage Temp'] || row['Preservative Reagent'] ||
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')
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);
}
@ -179,37 +127,28 @@ const SampleFormContainer = () => {
const handleSubmit = async (e) => {
e.preventDefault();
setIsSubmitting(true);
setMessage(''); // Clear previous messages
setMessage('');
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
setShowSuccessModal(true); // show modal instead of green alert
setFormData({
Principal_Investigator: '', Email: '', Company_Institution: '', Contact_Number: '',
Address: '', City: '', State: '', Pin: '', Secondary_Contact: '', Secondary_Email: '',
@ -223,7 +162,6 @@ const SampleFormContainer = () => {
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: ''
@ -231,7 +169,6 @@ const SampleFormContainer = () => {
} 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.');
@ -244,41 +181,22 @@ const SampleFormContainer = () => {
<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 && (
{/* Only show red alert for errors */}
{message && message.includes('Error') && (
<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'}`}>
<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}
/>
<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"
@ -290,8 +208,50 @@ const SampleFormContainer = () => {
</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;
export default SampleFormContainer;