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 = `
${message}
`; 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();