Spaces:
Sleeping
Sleeping
| 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(); | |