invoice-generator / data-manager.js
anuragshas's picture
fix: remove storage info button
a4c293a
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();