first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,467 @@
|
||||
/*
|
||||
Template Name: Toner - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: shipments list init File
|
||||
*/
|
||||
|
||||
|
||||
var perPage = 10;
|
||||
var editlist = false;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"id",
|
||||
"shipment_no",
|
||||
"customer_name",
|
||||
"supplier",
|
||||
"location",
|
||||
"order_date",
|
||||
"arrival_date",
|
||||
"status",
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2,
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
// Init list
|
||||
var shipmentsList = new List("shipmentsList", options).on("updated", function (list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
document.querySelector(".pagination-prev.disabled") ?
|
||||
document.querySelector(".pagination-prev.disabled").classList.remove("disabled") : "";
|
||||
document.querySelector(".pagination-next.disabled") ?
|
||||
document.querySelector(".pagination-next.disabled").classList.remove("disabled") : "";
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length == perPage) {
|
||||
document.querySelector(".pagination.listjs-pagination").firstElementChild.children[0].click()
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
const xhttp = new XMLHttpRequest();
|
||||
xhttp.onload = function () {
|
||||
var json_records = JSON.parse(this.responseText);
|
||||
Array.from(json_records).forEach(function (element) {
|
||||
shipmentsList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#TBT' + element.id + '</a>',
|
||||
shipment_no: '<a href="javascript:void(0);" class="text-reset">#' + element.shipment_no + '</a>',
|
||||
customer_name: element.customer_name,
|
||||
supplier: element.supplier,
|
||||
location: element.location,
|
||||
order_date: element.order_date,
|
||||
arrival_date: element.arrival_date,
|
||||
status: isStatus(element.status)
|
||||
});
|
||||
shipmentsList.sort('id', { order: "desc" });
|
||||
refreshCallbacks();
|
||||
});
|
||||
shipmentsList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">#TBSC2830</a>`);
|
||||
}
|
||||
xhttp.open("GET", "../build/json/shipments.json");
|
||||
xhttp.send();
|
||||
|
||||
function isStatus(val) {
|
||||
switch (val) {
|
||||
case "Pending":
|
||||
return (
|
||||
'<span class="badge bg-warning-subtle text-warning ">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Delivered":
|
||||
return (
|
||||
'<span class="badge bg-success-subtle text-success ">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Shipping":
|
||||
return (
|
||||
'<span class="badge bg-info-subtle text-info ">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Pickups":
|
||||
return (
|
||||
'<span class="badge bg-secondary-subtle text-secondary ">' + val + "</span>"
|
||||
);
|
||||
case "Returns":
|
||||
return (
|
||||
'<span class="badge bg-primary-subtle text-primary ">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Pending":
|
||||
return (
|
||||
'<span class="badge bg-warning-subtle text-warning ">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Out Of Delivery":
|
||||
return (
|
||||
'<span class="badge bg-danger-subtle text-danger ">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var idField = document.getElementById("orderId"),
|
||||
shipmentNoField = document.getElementById("shipmentNo"),
|
||||
customerNameField = document.getElementById("customerName-field"),
|
||||
supplierNameField = document.getElementById("supplierName-field"),
|
||||
orderDateField = document.getElementById("orderDate-field"),
|
||||
arrivalDateField = document.getElementById("arrivalDate-field"),
|
||||
locationField = document.getElementById("locationSelect"),
|
||||
statusField = document.getElementById("statusSelect"),
|
||||
addBtn = document.getElementById("add-btn")
|
||||
editBtn = document.getElementById("edit-btn"),
|
||||
removeBtns = document.getElementsByClassName("remove-item-btn"),
|
||||
editBtns = document.getElementsByClassName("edit-item-btn");
|
||||
|
||||
|
||||
refreshCallbacks();
|
||||
|
||||
var locationVal = new Choices(locationField,{
|
||||
searchEnabled: false,
|
||||
});
|
||||
var statusVal = new Choices(statusField,{
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
var count = 13;
|
||||
|
||||
document.getElementById("createModal").addEventListener("show.bs.modal", function (e) {
|
||||
if (e.relatedTarget.classList.contains("edit-item-btn")) {
|
||||
document.getElementById("modal-id").style.display = "block";
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Shipping Info";
|
||||
document.getElementById("add-btn").innerHTML = "Update";
|
||||
} else if (e.relatedTarget.classList.contains("add-btn")) {
|
||||
document.getElementById("modal-id").style.display = "none";
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Create Shipping";
|
||||
document.getElementById("add-btn").innerHTML = "Add Shipping";
|
||||
} else {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "List Shipping ";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function refreshCallbacks() {
|
||||
// removeBtns
|
||||
if (removeBtns){
|
||||
Array.from(removeBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[0].innerText;
|
||||
itemId = e.target.closest("tr").children[0].innerText;
|
||||
var itemValues = shipmentsList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
var deleteid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
|
||||
var isElem = deleteid.body.firstElementChild;
|
||||
var isdeleteid = deleteid.body.firstElementChild.innerHTML;
|
||||
|
||||
if (isdeleteid == itemId) {
|
||||
document.getElementById("delete-record").addEventListener("click", function () {
|
||||
shipmentsList.remove("id", isElem.outerHTML);
|
||||
document.getElementById("deleteRecord-close").click();
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Shipping record Deleted successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// editBtns
|
||||
if (editBtns){
|
||||
Array.from(editBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[0].innerText;
|
||||
itemId = e.target.closest("tr").children[0].innerText;
|
||||
var itemValues = shipmentsList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
var isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
|
||||
var ship_no = new DOMParser().parseFromString(x._values.shipment_no, "text/html");
|
||||
|
||||
|
||||
if (selectedid == itemId) {
|
||||
editlist = true;
|
||||
document.getElementById("orderID").value = selectedid;
|
||||
shipmentNoField.value = ship_no.body.firstElementChild.innerHTML;
|
||||
customerNameField.value = x._values.customer_name;
|
||||
supplierNameField.value = x._values.supplier;
|
||||
orderDateField.value = x._values.order_date;
|
||||
arrivalDateField.value = x._values.arrival_date;
|
||||
|
||||
// locationVal
|
||||
if(locationVal) locationVal.destroy();
|
||||
var locationValue = new Choices(locationField,{
|
||||
searchEnabled: false,
|
||||
});
|
||||
locationValue.setChoiceByValue(x._values.location);
|
||||
|
||||
// statusVal
|
||||
if (statusVal) statusVal.destroy();
|
||||
statusVal = new Choices(statusField, {
|
||||
searchEnabled: false
|
||||
});
|
||||
val = new DOMParser().parseFromString(x._values.status, "text/html");
|
||||
var statusSelec = val.body.firstElementChild.innerHTML;
|
||||
statusVal.setChoiceByValue(statusSelec);
|
||||
flatpickr("#orderDate-field", {
|
||||
dateFormat: "d M, Y",
|
||||
defaultDate: x._values.order_date,
|
||||
});
|
||||
|
||||
flatpickr("#arrivalDate-field", {
|
||||
dateFormat: "d M, Y",
|
||||
defaultDate: x._values.arrival_date,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
var forms = document.querySelectorAll('.tablelist-form')
|
||||
Array.prototype.slice.call(forms).forEach(function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
var errorMsg = document.getElementById("alert-error-msg");
|
||||
errorMsg.classList.remove("d-none");
|
||||
|
||||
setTimeout(() => errorMsg.classList.add("d-none"), 2000);
|
||||
|
||||
var text;
|
||||
|
||||
if (customerNameField.value == "") {
|
||||
text = "Please enter a customer name";
|
||||
errorMsg.innerHTML = text;
|
||||
return false;
|
||||
} else if (supplierNameField.value == "") {
|
||||
text = "Please enter a supplier name";
|
||||
errorMsg.innerHTML = text;
|
||||
return false;
|
||||
} else if (orderDateField.value == "") {
|
||||
text = "Please select a order date";
|
||||
errorMsg.innerHTML = text;
|
||||
return false;
|
||||
} else if (arrivalDateField.value == "") {
|
||||
text = "Please select a arrival date";
|
||||
errorMsg.innerHTML = text;
|
||||
return false;
|
||||
} else if (locationField.value == "") {
|
||||
text = "Please select a location";
|
||||
errorMsg.innerHTML = text;
|
||||
return false;
|
||||
} else if (statusField.value == "") {
|
||||
text = "Please select a status";
|
||||
errorMsg.innerHTML = text;
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
customerNameField.value !== "" &&
|
||||
supplierNameField.value !== "" &&
|
||||
orderDateField.value !== "" &&
|
||||
arrivalDateField.value !== "" &&
|
||||
locationField.value !== "" &&
|
||||
statusField.value !== "" && !editlist
|
||||
) {
|
||||
shipmentsList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#TBT' + count + "</a>",
|
||||
shipment_no: '<a href="javascript:void(0);" class="text-reset">#TBSN15414524986</a>',
|
||||
customer_name: customerNameField.value,
|
||||
supplier: supplierNameField.value,
|
||||
location: locationField.value,
|
||||
order_date: orderDateField.value,
|
||||
arrival_date: arrivalDateField.value,
|
||||
status: isStatus(statusField.value),
|
||||
});
|
||||
|
||||
shipmentsList.sort('id', { order: "desc" });
|
||||
document.getElementById("alert-error-msg").classList.add("d-none");
|
||||
document.getElementById("close-createmodal").click();
|
||||
clearFields();
|
||||
refreshCallbacks();
|
||||
count++;
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Shipping record inserted successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
}else if (
|
||||
customerNameField.value !== "" &&
|
||||
supplierNameField.value !== "" &&
|
||||
orderDateField.value !== "" &&
|
||||
arrivalDateField.value !== "" &&
|
||||
locationField.value !== "" &&
|
||||
statusField.value !== "" && editlist
|
||||
){
|
||||
var editValues = shipmentsList.get({
|
||||
id: document.getElementById("orderID").value,
|
||||
});
|
||||
|
||||
Array.from(editValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
x.values({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">' + document.getElementById("orderID").value + "</a>",
|
||||
shipment_no: '<a href="javascript:void(0);" class="text-reset">' + shipmentNoField.value + "</a>",
|
||||
customer_name: customerNameField.value,
|
||||
supplier: supplierNameField.value,
|
||||
location: locationField.value,
|
||||
order_date: orderDateField.value,
|
||||
arrival_date: arrivalDateField.value,
|
||||
status: isStatus(statusField.value),
|
||||
});
|
||||
}
|
||||
});
|
||||
document.getElementById("alert-error-msg").classList.add("d-none");
|
||||
document.getElementById("close-createmodal").click();
|
||||
clearFields();
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Shipping record updated Successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
return true;
|
||||
})
|
||||
});
|
||||
|
||||
function filterData() {
|
||||
var isstatus = document.getElementById("idStatus").value;
|
||||
var pickerVal = document.getElementById("demo-datepicker").value;
|
||||
|
||||
var date1 = pickerVal.split(" to ")[0];
|
||||
var date2 = pickerVal.split(" to ")[1];
|
||||
|
||||
shipmentsList.filter(function (data) {
|
||||
matchData = new DOMParser().parseFromString(
|
||||
data.values().status,
|
||||
"text/html"
|
||||
);
|
||||
var status = matchData.body.firstElementChild.innerHTML;
|
||||
var statusFilter = false;
|
||||
var dateFilter = false;
|
||||
|
||||
if (status == "all" || isstatus == "all") {
|
||||
statusFilter = true;
|
||||
} else {
|
||||
statusFilter = status == isstatus;
|
||||
}
|
||||
|
||||
|
||||
if (
|
||||
new Date(data.values().order_date) >= new Date(date1) &&
|
||||
new Date(data.values().order_date) <= new Date(date2)
|
||||
) {
|
||||
dateFilter = true;
|
||||
} else {
|
||||
dateFilter = false;
|
||||
}
|
||||
|
||||
|
||||
if (statusFilter && dateFilter) {
|
||||
return statusFilter && dateFilter;
|
||||
} else if (statusFilter && pickerVal == "") {
|
||||
return statusFilter;
|
||||
} else if (dateFilter) {
|
||||
return dateFilter;
|
||||
}
|
||||
});
|
||||
shipmentsList.update();
|
||||
}
|
||||
|
||||
function clearFields() {
|
||||
// idField.value = "";
|
||||
shipmentNoField.value = "";
|
||||
customerNameField.value = "";
|
||||
supplierNameField.value = "";
|
||||
|
||||
var orderDField = flatpickr("#orderDate-field");
|
||||
orderDField.clear();
|
||||
|
||||
var arrivalDField = flatpickr("#arrivalDate-field");
|
||||
arrivalDField.clear();
|
||||
|
||||
if (locationVal) locationVal.destroy();
|
||||
locationVal = new Choices(locationField,{
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
if (statusVal) statusVal.destroy();
|
||||
statusVal = new Choices(statusField,{
|
||||
searchEnabled: false,
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("createModal").addEventListener("hidden.bs.modal", function () {
|
||||
clearFields();
|
||||
});
|
||||
|
||||
document.querySelector(".pagination-next").addEventListener("click", function () {
|
||||
document.querySelector(".pagination.listjs-pagination") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click() : "" : "";
|
||||
});
|
||||
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function () {
|
||||
document.querySelector(".pagination.listjs-pagination") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click() : "" : "";
|
||||
});
|
||||
Reference in New Issue
Block a user