Spaces:
Running
Running
class QuotationDataManager { | |
constructor() { | |
this.keys = { | |
company: "companyDetails", | |
bank: "bankDetails", | |
customer: "customerDetails", | |
}; | |
} | |
// Save company details to localStorage | |
saveCompanyDetails(formData) { | |
const companyData = { | |
name: formData["company-name"] || "", | |
address: formData["company-address"] || "", | |
phone: formData["company-phone"] || "", | |
email: formData["company-email"] || "", | |
gstin: formData["company-gstin"] || "", | |
}; | |
try { | |
localStorage.setItem( | |
this.keys.company, | |
JSON.stringify(companyData), | |
); | |
} catch (error) { | |
console.error("Error saving company details:", error); | |
} | |
} | |
// Save bank details to localStorage | |
saveBankDetails(formData) { | |
const bankData = { | |
name: formData["bank-name"] || "", | |
account: formData["bank-account"] || "", | |
ifsc: formData["bank-ifsc"] || "", | |
branch: formData["bank-branch"] || "", | |
}; | |
try { | |
localStorage.setItem(this.keys.bank, JSON.stringify(bankData)); | |
} catch (error) { | |
console.error("Error saving bank details:", error); | |
} | |
} | |
// Save customer details to sessionStorage (temporary) | |
saveCustomerDetails(formData) { | |
const customerData = { | |
name: formData["customer-name"] || "", | |
address: formData["customer-address"] || "", | |
phone: formData["customer-phone"] || "", | |
email: formData["customer-email"] || "", | |
gstin: formData["customer-gstin"] || "", | |
}; | |
try { | |
sessionStorage.setItem( | |
this.keys.customer, | |
JSON.stringify(customerData), | |
); | |
} catch (error) { | |
console.error("Error saving customer details:", error); | |
} | |
} | |
// Load company details from localStorage | |
loadCompanyDetails() { | |
try { | |
const data = localStorage.getItem(this.keys.company); | |
return data ? JSON.parse(data) : null; | |
} catch (error) { | |
console.error("Error loading company details:", error); | |
return null; | |
} | |
} | |
// Load bank details from localStorage | |
loadBankDetails() { | |
try { | |
const data = localStorage.getItem(this.keys.bank); | |
return data ? JSON.parse(data) : null; | |
} catch (error) { | |
console.error("Error loading bank details:", error); | |
return null; | |
} | |
} | |
// Load customer details from sessionStorage | |
loadCustomerDetails() { | |
try { | |
const data = sessionStorage.getItem(this.keys.customer); | |
return data ? JSON.parse(data) : null; | |
} catch (error) { | |
console.error("Error loading customer details:", error); | |
return null; | |
} | |
} | |
// Clear all stored data | |
clearAllData() { | |
try { | |
localStorage.removeItem(this.keys.company); | |
localStorage.removeItem(this.keys.bank); | |
sessionStorage.removeItem(this.keys.customer); | |
} catch (error) { | |
console.error("Error clearing data:", error); | |
} | |
} | |
// Clear only customer data | |
clearCustomerData() { | |
try { | |
sessionStorage.removeItem(this.keys.customer); | |
} catch (error) { | |
console.error("Error clearing customer data:", error); | |
} | |
} | |
// Load all saved form data into the form | |
loadFormData() { | |
// Load company details | |
const companyData = this.loadCompanyDetails(); | |
if (companyData) { | |
document.getElementById("company-name").value = | |
companyData.name || ""; | |
document.getElementById("company-address").value = | |
companyData.address || ""; | |
document.getElementById("company-phone").value = | |
companyData.phone || ""; | |
document.getElementById("company-email").value = | |
companyData.email || ""; | |
document.getElementById("company-gstin").value = | |
companyData.gstin || ""; | |
} | |
// Load bank details | |
const bankData = this.loadBankDetails(); | |
if (bankData) { | |
document.getElementById("bank-name").value = bankData.name || ""; | |
document.getElementById("bank-account").value = | |
bankData.account || ""; | |
document.getElementById("bank-ifsc").value = bankData.ifsc || ""; | |
document.getElementById("bank-branch").value = | |
bankData.branch || ""; | |
} | |
// Load customer details | |
const customerData = this.loadCustomerDetails(); | |
if (customerData) { | |
document.getElementById("customer-name").value = | |
customerData.name || ""; | |
document.getElementById("customer-address").value = | |
customerData.address || ""; | |
document.getElementById("customer-phone").value = | |
customerData.phone || ""; | |
document.getElementById("customer-email").value = | |
customerData.email || ""; | |
document.getElementById("customer-gstin").value = | |
customerData.gstin || ""; | |
} | |
} | |
// Get form data as object | |
getFormData() { | |
const formData = new FormData( | |
document.getElementById("quotation-form"), | |
); | |
const data = {}; | |
for (let [key, value] of formData.entries()) { | |
data[key] = value; | |
} | |
return data; | |
} | |
// Setup auto-save functionality | |
setupAutoSave() { | |
// Company fields auto-save | |
const companyFields = [ | |
"company-name", | |
"company-address", | |
"company-phone", | |
"company-email", | |
"company-gstin", | |
]; | |
companyFields.forEach((fieldId) => { | |
const field = document.getElementById(fieldId); | |
if (field) { | |
field.addEventListener("blur", () => { | |
const formData = this.getFormData(); | |
this.saveCompanyDetails(formData); | |
}); | |
} | |
}); | |
// Bank fields auto-save | |
const bankFields = [ | |
"bank-name", | |
"bank-account", | |
"bank-ifsc", | |
"bank-branch", | |
]; | |
bankFields.forEach((fieldId) => { | |
const field = document.getElementById(fieldId); | |
if (field) { | |
field.addEventListener("blur", () => { | |
const formData = this.getFormData(); | |
this.saveBankDetails(formData); | |
}); | |
} | |
}); | |
// Customer fields auto-save (to sessionStorage) | |
const customerFields = [ | |
"customer-name", | |
"customer-address", | |
"customer-phone", | |
"customer-email", | |
"customer-gstin", | |
]; | |
customerFields.forEach((fieldId) => { | |
const field = document.getElementById(fieldId); | |
if (field) { | |
field.addEventListener("blur", () => { | |
const formData = this.getFormData(); | |
this.saveCustomerDetails(formData); | |
}); | |
} | |
}); | |
} | |
// Check if localStorage is available | |
isLocalStorageAvailable() { | |
try { | |
const test = "__localStorage_test__"; | |
localStorage.setItem(test, test); | |
localStorage.removeItem(test); | |
return true; | |
} catch (_error) { | |
return false; | |
} | |
} | |
// Show status modal | |
showModal(message, type = "info") { | |
const modal = document.getElementById("status-modal"); | |
const modalMessage = document.getElementById("modal-message"); | |
modalMessage.innerHTML = `<p class="text-${type === "error" ? "red" : "green"}-600">${message}</p>`; | |
modal.classList.remove("hidden"); | |
modal.classList.add("flex"); | |
} | |
// Hide status modal | |
hideModal() { | |
const modal = document.getElementById("status-modal"); | |
modal.classList.add("hidden"); | |
modal.classList.remove("flex"); | |
} | |
// Setup event handlers for data management buttons | |
setupDataManagementHandlers() { | |
// Save data button | |
const saveButton = document.getElementById("save-data"); | |
if (saveButton) { | |
saveButton.addEventListener("click", () => { | |
try { | |
const formData = this.getFormData(); | |
this.saveCompanyDetails(formData); | |
this.saveBankDetails(formData); | |
this.saveCustomerDetails(formData); | |
this.showModal("β Data saved successfully!", "success"); | |
} catch (error) { | |
console.error("Error saving data:", error); | |
this.showModal( | |
"β Error saving data. Please try again.", | |
"error", | |
); | |
} | |
}); | |
} | |
// Clear data button | |
const clearButton = document.getElementById("clear-data"); | |
if (clearButton) { | |
clearButton.addEventListener("click", () => { | |
if ( | |
confirm( | |
"Are you sure you want to clear all saved data? This cannot be undone.", | |
) | |
) { | |
try { | |
this.clearAllData(); | |
// Clear form fields | |
document.getElementById("quotation-form").reset(); | |
this.showModal( | |
"ποΈ All saved data cleared successfully!", | |
"success", | |
); | |
} catch (error) { | |
console.error("Error clearing data:", error); | |
this.showModal( | |
"β Error clearing data. Please try again.", | |
"error", | |
); | |
} | |
} | |
}); | |
} | |
// Modal close button | |
const modalCloseButton = document.getElementById("modal-close"); | |
if (modalCloseButton) { | |
modalCloseButton.addEventListener("click", () => { | |
this.hideModal(); | |
}); | |
} | |
// Close modal when clicking outside | |
const modal = document.getElementById("status-modal"); | |
if (modal) { | |
modal.addEventListener("click", (e) => { | |
if (e.target === modal) { | |
this.hideModal(); | |
} | |
}); | |
} | |
} | |
// Initialize data manager | |
init() { | |
if (!this.isLocalStorageAvailable()) { | |
console.warn( | |
"localStorage is not available. Data will not be saved.", | |
); | |
return; | |
} | |
// Load existing data when page loads | |
document.addEventListener("DOMContentLoaded", () => { | |
this.loadFormData(); | |
this.setupAutoSave(); | |
this.setupDataManagementHandlers(); | |
}); | |
// Clear customer data when page unloads (optional) | |
window.addEventListener("beforeunload", () => { | |
this.clearCustomerData(); | |
}); | |
} | |
} | |
// Initialize the data manager | |
const dataManager = new QuotationDataManager(); | |
dataManager.init(); | |