localstorage-getitem-setitem
unknown
javascript
2 months ago
30 kB
3
Indexable
<script type="module">
import { toast } from '/node_modules/wc-toast/src/index.js';
import '/node_modules/wc-toast/src/toast.js';
document.addEventListener("DOMContentLoaded", function () {
checkExpiryAndRemove();
const appointmentID = document.getElementById("appointmentID");
const allergiesTextarea = document.getElementById("Allergies");
const doctorAssessmentTextarea = document.getElementById("Prop_DoctorAssessment");
const addNotesTextarea = document.getElementById("Prop_Notes");
const addDiagnosis = document.getElementById("Prop_Diagnosis");
const addMedicalLeaveStartDate = document.getElementById("Prop_MedicalLeaveStartDate");
const addMedicalLeaveEndDate = document.getElementById("Prop_MedicalLeaveEndDate");
const addConsultationFees = document.getElementById("ConsultationFees");
const addPaymentDiscount = document.getElementById("PaymentDiscount");
const saveProductButton = document.getElementById("save-product-btn");
const formAddProduct = document.getElementById("productForm");
const formMedicalRecord = document.getElementById("form");
const savedAppointmentID = localStorage.getItem("appointmentID");
const savedAllergies = localStorage.getItem("allergies");
const savedDoctorAssessment = localStorage.getItem("doctorAssessment");
const savedAddNotes = localStorage.getItem("addNotes");
const savedDiagnosis = localStorage.getItem("addDiagnosis");
const savedMedicalLeaveStartDate = localStorage.getItem("addMedicalLeaveStartDate");
const savedMedicalLeaveEndDate = localStorage.getItem("addMedicalLeaveEndDate");
const savedConsultationFees = localStorage.getItem("addConsultationFees");
const savedPaymentDiscount = localStorage.getItem("addPaymentDiscount");
if (savedAppointmentID && appointmentID) {
appointmentID.value = savedAppointmentID;
}
if (savedAllergies && allergiesTextarea) {
allergiesTextarea.value = savedAllergies;
}
if (savedDoctorAssessment && doctorAssessmentTextarea) {
doctorAssessmentTextarea.value = savedDoctorAssessment;
}
if (savedAddNotes && addNotesTextarea) {
addNotesTextarea.value = savedAddNotes;
}
if (savedDiagnosis && addDiagnosis) {
addDiagnosis.value = savedDiagnosis;
}
if (savedMedicalLeaveStartDate && addMedicalLeaveStartDate) {
addMedicalLeaveStartDate.value = savedMedicalLeaveStartDate;
}
if (savedMedicalLeaveEndDate && addMedicalLeaveEndDate) {
addMedicalLeaveEndDate.value = savedMedicalLeaveEndDate;
}
if (savedConsultationFees && addConsultationFees) {
addConsultationFees.value = savedConsultationFees;
}
if (savedPaymentDiscount && addPaymentDiscount) {
addPaymentDiscount.value = savedPaymentDiscount;
}
const savedProducts = JSON.parse(localStorage.getItem("productItems")) || [];
if (savedProducts.length > 0) {
const tableBody = document.querySelector("tbody#tbodyProductItem");
function populateRows(products) {
if (products.length > 0) {
products.forEach((product) => {
let existingRow = document.getElementById(product.id);
if (existingRow) {
existingRow.querySelectorAll("[name]").forEach(input => {
const key = input.getAttribute("name");
if (product[key] !== undefined) {
input.value = product[key];
}
if (key === "ProductCode" && product[key] !== undefined) {
const dropdown = existingRow.querySelector(".productClassList");
if (dropdown) {
dropdown.tomselect.setValue(product[key]);
}
}
});
}
else
{
const newIndex = tableBody.querySelectorAll('tr.dynamic-productitems-add').length + 1;
const newRow = document.createElement('tr');
newRow.classList.add('dynamic-productitems-add');
newRow.id = product.id;
newRow.innerHTML = `
<td class="p-2">${newIndex} <input type="hidden" name="MedicalRecordPrescriptionsID[]" value="" /></td>
<td class="p-2 w-[20%]">
@Html.EPosSearchableComboBoxFor("ProductCode", new {
Label = "",
Value = Model.Parameters["ProductCode"].ToString(),
ReferenceValue = "SELECT ProductID, (ProductName + ' (RM ' + CAST(SellingPrice AS varchar(50)) + ')') AS Description, Unit, Frequency, Instructions FROM Products WHERE OutletID = '" + Env.OutletID.ToString() + "' ORDER BY ProductName ASC;",
CssClassControl = "productSelect",
sClassSearchableComboBoxFor = "productClassList",
onchange = "updateProductPrice(this); updateDetails(this)",
AutoSubmitAndClearButton = false,
ScriptExist = true,
Placeholder = "Choose a medicine",
ClassSearchableComboBoxForWidth = "w-full"
})
</td>
<td class="hidden p-2 text-right">
<input type="number" name="ProductCurrentPrice" value="${product.ProductCurrentPrice || 0}"
class="text-right bg-gray-200 pointer-events-none border border-gray-300 text-gray-900 text-sm rounded-lg block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white w-full focus:outline-none focus:border-gray-300"
placeholder="0" step="0.01" readonly onchange="calculateTotal(this)" />
</td>
<td class="p-2 text-right">
<input type="number" name="ProductAdjustedPrice" value="${product.ProductAdjustedPrice || 0}"
class="text-right bg-transparent border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
placeholder="0" step="0.01" onchange="calculateTotal(this)" />
</td>
<td class="p-2 w-[5%] text-right">
<input type="number" name="ProductQuantity" value="${product.ProductQuantity || 0}"
class="text-right bg-transparent border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
placeholder="0" step="1" onchange="calculateTotal(this)" required />
</td>
<td class="p-2 text-right border-r-2 border-black">
<input type="text" name="TotalPrice" value="${product.TotalPrice || 0}"
class="text-right bg-gray-200 pointer-events-none border border-gray-300 text-gray-900 text-sm rounded-lg block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white w-full" readonly />
</td>
<td class="p-2 text-right">
<input type="number" name="Frequency" value="${product.Frequency || 0}"
class="text-right bg-transparent border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
placeholder="0" step="1" />
</td>
<td class="p-2">
@Html.EPosTextBoxFor("Indications", new {
Label = "",
Value = "${product.Indications || ''}",
CssClassLabel = "",
CssClassControl = ""
})
</td>
<td class="p-2">
@Html.EPosTextBoxFor("Instructions", new {
Label = "",
Value = "${product.Instructions || ''}",
CssClassLabel = "",
CssClassControl = ""
})
</td>
<td class="pl-6 pr-2 py-2">
<div class="flex flex-row min-w-max space-x-2">
<button type="button" onclick="toggleDetails('${product.id}')"
class="w-10 sm:min-w-max h-10 sm:h-auto items-center justify-center sm:justify-start sm:px-4 sm:py-2 border border-gray-200 text-[#111827] hover:text-[#69c07a] hover:border-[#69c07a] font-medium rounded-lg text-sm text-center inline-flex items-center group">
<img src="/Images/Table/clinex-detail-button-icon.png"
alt="detail"
class="bg-contain w-2.5 h-2.5 sm:group-hover:hidden sm:block hidden" />
<img src="/Images/Table/clinex-detail-button-hover-icon.png"
alt="detail Hover"
class="bg-contain w-2.5 h-2.5 sm:hidden group-hover:block" />
</button>
<button type="button" class="delete-button w-10 sm:min-w-max h-10 sm:h-auto items-center justify-center sm:justify-start sm:px-4 sm:py-2 border border-[#DC2626] sm:border-gray-200 text-gray-900 hover:text-[#DC2626] hover:border-[#DC2626] font-medium rounded-lg text-sm text-center inline-flex items-center group">
<img src="/Images/Table/clinex-delete-button-icon.png"
alt="Delete"
class="w-2.5 h-3 sm:group-hover:hidden sm:block hidden pointer-events-none" />
<img src="/Images/Table/clinex-delete-button-hover-icon.png"
alt="Delete Hover"
class="w-2.5 h-3 sm:hidden group-hover:block pointer-events-none" />
</button>
</div>
</td>
`;
tableBody.appendChild(newRow);
}
});
updateRowIndexes();
setDropdownValues();
}
}
function updateRowIndexes() {
const rows = tableBody.querySelectorAll("tr");
rows.forEach((row, index) => {
const firstCell = row.querySelector("td:first-child");
if (firstCell) {
firstCell.innerHTML = `${index + 1} <input type="hidden" name="MedicalRecordPrescriptionsID[]" value="" />`;
}
});
}
function setDropdownValues() {
const rows = document.querySelectorAll("tr.dynamic-productitems-add");
const storedData = JSON.parse(localStorage.getItem('productItems')) || [];
if (storedData.length > 0) {
rows.forEach((row, rowIndex) => {
const dropdown = row.querySelector(".productClassList");
if (dropdown) {
if (!dropdown.tomselect) {
new TomSelect(dropdown, {
create: false,
maxOptions: Infinity,
sortField: {
field: "text",
direction: "asc"
},
placeholder: "Choose a product"
});
}
if (storedData[rowIndex]) {
const productCode = storedData[rowIndex].ProductCode;
dropdown.tomselect.setValue(productCode);
}
}
});
}
}
populateRows(savedProducts);
}
const savedServices = JSON.parse(localStorage.getItem("serviceItems")) || [];
if (savedServices.length > 0) {
const tableBody = document.querySelector("tbody#tbodyServiceItems");
function populateRows(services) {
if (services.length > 0) {
services.forEach((service) => {
let existingRow = document.getElementById(service.id);
if (existingRow) {
existingRow.querySelectorAll("[name]").forEach(input => {
const key = input.getAttribute("name");
if (service[key] !== undefined) {
input.value = service[key];
}
if (key === "MedicalServiceID" && service[key] !== undefined) {
const dropdown = existingRow.querySelector(".servicesClassList");
if (dropdown) {
dropdown.tomselect.setValue(service[key]);
}
}
});
}
else
{
const newIndex = tableBody.querySelectorAll('tr.dynamic-serviceitems-add').length + 1;
const newRow = document.createElement("tr");
newRow.className = "dynamic-serviceitems-add";
newRow.id = service.id;
newRow.innerHTML = `
<td class="p-2">
${newIndex} <input type="hidden" name="MedicalRecordServiceID" value="" />
</td>
<td class="p-2 w-[35%]">
@Html.EPosSearchableComboBoxFor("MedicalServiceID", new {
Label = "",
Value = Model.Parameters["MedicalServiceID"].ToString(),
Placeholder = "Choose a service name",
ReferenceValue = "SELECT MedicalServiceID, (ServiceName + ' (RM' + CAST(Price AS varchar(50)) + ')') AS Description FROM MedicalServices WHERE OutletID = '" + Env.OutletID.ToString() + "' ORDER BY ServiceName ASC;",
CssClassControl = "productSelect custom-select-focus-for-select",
onchange = "updatePrice(this)",
sClassSearchableComboBoxFor = "servicesClassList",
AutoSubmitAndClearButton = false,
ScriptExist = true,
ClassSearchableComboBoxForWidth = "w-full"
})
</td>
<td class="p-2 w-[15%]">
<input type="number" name="CurrentPrice" value="${service.CurrentPrice || 0}"
class="text-right bg-gray-200 pointer-events-none border border-gray-300 text-gray-900 text-sm rounded-lg block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white w-full focus:outline-none focus:border-gray-300"
placeholder="0" step="0.01" readonly />
</td>
<td class="p-2 w-[15%]">
<input type="number" name="AdjustedPrice" value="${service.AdjustedPrice || 0}"
class="text-right bg-transparent border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
placeholder="0" step="0.01" pattern="^\\d+(\\.\\d{1,2})?$"
title="Please enter a valid number (e.g., 0.50)" />
</td>
<td class="p-2 w-[40%]">
@Html.EPosTextBoxFor("Comments", new {
Label = "",
Value = "${service.Comments || ''}",
CssClassLabel = "",
CssClassControl = ""
})
</td>
<td class="p-2">
<button type="button"
class="delete-button w-10 sm:min-w-max h-10 sm:h-auto items-center justify-center sm:justify-start sm:px-2 sm:py-1 border border-[#DC2626] sm:border-gray-200 text-gray-900 hover:text-[#DC2626] hover:border-[#DC2626] font-medium rounded-lg text-sm text-center inline-flex items-center group">
<img src="/Images/Table/clinex-delete-button-icon.png"
alt="Delete"
class="w-2.5 h-3 mr-4 sm:group-hover:hidden sm:block hidden pointer-events-none" />
<img src="/Images/Table/clinex-delete-button-hover-icon.png"
alt="Delete Hover"
class="w-2.5 h-3 mr-0 sm:mr-4 sm:hidden group-hover:block pointer-events-none" />
<span class="font-medium hidden sm:inline-block pointer-events-none">
Delete
</span>
</button>
</td>
`;
tableBody.appendChild(newRow);
}
});
setDropdownValues();
}
}
function setDropdownValues() {
const rows = document.querySelectorAll("tr.dynamic-serviceitems-add");
const storedData = JSON.parse(localStorage.getItem('serviceItems')) || [];
if (storedData.length > 0) {
rows.forEach((row, rowIndex) => {
const dropdown = row.querySelector(".servicesClassList");
if (dropdown) {
if (!dropdown.tomselect) {
new TomSelect(dropdown, {
create: false,
maxOptions: Infinity,
sortField: {
field: "text",
direction: "asc"
},
placeholder: "Choose a service name"
});
}
if (storedData[rowIndex]) {
const MedicalServiceID = storedData[rowIndex].MedicalServiceID;
dropdown.tomselect.setValue(MedicalServiceID);
}
}
});
}
}
populateRows(savedServices);
}
if (formAddProduct) {
formAddProduct.onsubmit = function (event) {
event.preventDefault();
const formData = new FormData(this);
const submitButton = this.querySelector('button[type="submit"]');
const spinner = document.createElement('div');
spinner.classList.add('spinner');
submitButton.disabled = true;
submitButton.textContent = "Submitting...";
submitButton.appendChild(spinner);
fetch('@Url.Action("ModalFunctionForm", "ClinexDoctor")', {
method: 'POST',
body: formData,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
setTimeout(() => {
spinner.remove();
submitButton.disabled = false;
submitButton.textContent = "Submit";
toast("Product saved!", {
icon: {
type: 'custom',
content: `<img src="/Images/Notification/clinex-success-icon.png" alt="Success Icon" style="margin-top: 3px; margin-right: 4px; width: 25px; height: 25px;">`
},
theme: {
type: 'custom',
style: {
background: '#120703',
color: 'white'
}
}
});
}, 3000);
setTimeout(() => {
location.reload();
}, 3400);
// Save form values to localStorage only when the form is successfully submitted
if (appointmentID) {
const appointmentIDValue = appointmentID.value.trim();
localStorage.setItem("appointmentID", appointmentIDValue);
}
if (allergiesTextarea) {
const allergiesValue = allergiesTextarea.value.trim();
localStorage.setItem("allergies", allergiesValue);
}
if (doctorAssessmentTextarea) {
const doctorAssessmentValue = doctorAssessmentTextarea.value.trim();
localStorage.setItem("doctorAssessment", doctorAssessmentValue);
}
if (addNotesTextarea) {
const addNotesValue = addNotesTextarea.value.trim();
localStorage.setItem("addNotes", addNotesValue);
}
if (addDiagnosis) {
const addDiagnosisValue = addDiagnosis.value.trim();
localStorage.setItem("addDiagnosis", addDiagnosisValue);
}
if (addMedicalLeaveStartDate) {
const addMedicalLeaveStartDateValue = addMedicalLeaveStartDate.value.trim();
localStorage.setItem("addMedicalLeaveStartDate", addMedicalLeaveStartDateValue);
}
if (addMedicalLeaveEndDate) {
const addMedicalLeaveEndDateValue = addMedicalLeaveEndDate.value.trim();
localStorage.setItem("addMedicalLeaveEndDate", addMedicalLeaveEndDateValue);
}
if (addConsultationFees) {
const addConsultationFeesValue = addConsultationFees.value.trim();
localStorage.setItem("addConsultationFees", addConsultationFeesValue);
}
if (addPaymentDiscount) {
const addPaymentDiscountValue = addPaymentDiscount.value.trim();
localStorage.setItem("addPaymentDiscount", addPaymentDiscountValue);
}
const rowProducts = document.querySelectorAll("tr.dynamic-productitems-add").length > 0
? document.querySelectorAll("tr.dynamic-productitems-add")
: document.querySelectorAll("tr.dynamic-productitems");
if (rowProducts.length === 0) {
console.warn("No rows found to save!");
return;
}
const products = [];
rowProducts.forEach((rowProduct) => {
const product = {};
const rowId = rowProduct.getAttribute("id");
if (rowId) {
product.id = rowId;
}
rowProduct.querySelectorAll("[name]").forEach((input) => {
const key = input.getAttribute("name");
const value = input.value || "";
product[key] = value;
});
products.push(product);
});
localStorage.setItem("productItems", JSON.stringify(products));
const rowServiceItems = document.querySelectorAll("tr.dynamic-serviceitems-add").length > 0
? document.querySelectorAll("tr.dynamic-serviceitems-add")
: document.querySelectorAll("tr.dynamic-serviceitems");
if (rowServiceItems.length === 0) {
console.warn("No rows found to save!");
return;
}
const services = [];
rowServiceItems.forEach((rowService) => {
const service = {};
const rowId = rowService.getAttribute("id");
if (rowId) {
service.id = rowId;
}
rowService.querySelectorAll("[name]").forEach((input) => {
const key = input.getAttribute("name");
const value = input.value || "";
service[key] = value;
});
services.push(service);
});
localStorage.setItem("serviceItems", JSON.stringify(services));
const timestamp = new Date().getTime();
const expiryTime = 60 * 60 * 1000; // 1 hour in milliseconds
localStorage.setItem("appointmentID_timestamp", timestamp);
// Example of setting the expiry time for the new key
localStorage.setItem("appointmentID_expiry", expiryTime);
clearErrors();
} else {
spinner.remove();
submitButton.disabled = false;
submitButton.textContent = "Submit";
const errors = parseErrors(data.message);
showErrors(errors);
console.log(errors);
}
})
.catch(error => {
console.error('Error:', error);
spinner.remove();
submitButton.disabled = false;
submitButton.textContent = "Save";
const errorDiv = document.getElementById('modal-error');
errorDiv.textContent = "Failed to submit the form. Please try again later.";
errorDiv.classList.remove('hidden');
});
};Editor is loading...
Leave a Comment