partial update crud customer data
This commit is contained in:
arifal
65
resources/js/customers/create.js
Normal file
65
resources/js/customers/create.js
Normal file
@@ -0,0 +1,65 @@
|
||||
class CreateCustomer {
|
||||
constructor() {
|
||||
this.initCreateCustomer();
|
||||
}
|
||||
|
||||
initCreateCustomer() {
|
||||
const toastNotification = document.getElementById("toastNotification");
|
||||
const toast = new bootstrap.Toast(toastNotification);
|
||||
document
|
||||
.getElementById("btnCreateCustomer")
|
||||
.addEventListener("click", async function () {
|
||||
let submitButton = this;
|
||||
let spinner = document.getElementById("spinner");
|
||||
let form = document.getElementById("formCreateCustomer");
|
||||
|
||||
if (!form) {
|
||||
console.error("Form element not found!");
|
||||
return;
|
||||
}
|
||||
// Get form data
|
||||
let formData = new FormData(form);
|
||||
|
||||
// Disable button and show spinner
|
||||
submitButton.disabled = true;
|
||||
spinner.classList.remove("d-none");
|
||||
|
||||
try {
|
||||
let response = await fetch(form.action, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
let result = await response.json();
|
||||
document.getElementById("toast-message").innerText =
|
||||
result.message;
|
||||
toast.show();
|
||||
setTimeout(() => {
|
||||
window.location.href = "/data/customers";
|
||||
}, 2000);
|
||||
} else {
|
||||
let error = await response.json();
|
||||
document.getElementById("toast-message").innerText =
|
||||
error.message;
|
||||
toast.show();
|
||||
console.error("Error:", error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Request failed:", error);
|
||||
document.getElementById("toast-message").innerText =
|
||||
error.message;
|
||||
toast.show();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new CreateCustomer();
|
||||
});
|
||||
65
resources/js/customers/edit.js
Normal file
65
resources/js/customers/edit.js
Normal file
@@ -0,0 +1,65 @@
|
||||
class UpdateCustomer {
|
||||
constructor() {
|
||||
this.initUpdateSpatial();
|
||||
}
|
||||
|
||||
initUpdateSpatial() {
|
||||
const toastNotification = document.getElementById("toastNotification");
|
||||
const toast = new bootstrap.Toast(toastNotification);
|
||||
document
|
||||
.getElementById("btnUpdateCustomer")
|
||||
.addEventListener("click", async function () {
|
||||
let submitButton = this;
|
||||
let spinner = document.getElementById("spinner");
|
||||
let form = document.getElementById("formUpdateCustomer");
|
||||
|
||||
if (!form) {
|
||||
console.error("Form element not found!");
|
||||
return;
|
||||
}
|
||||
// Get form data
|
||||
let formData = new FormData(form);
|
||||
|
||||
// Disable button and show spinner
|
||||
submitButton.disabled = true;
|
||||
spinner.classList.remove("d-none");
|
||||
|
||||
try {
|
||||
let response = await fetch(form.action, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
let result = await response.json();
|
||||
document.getElementById("toast-message").innerText =
|
||||
result.message;
|
||||
toast.show();
|
||||
setTimeout(() => {
|
||||
window.location.href = "/data/customers";
|
||||
}, 2000);
|
||||
} else {
|
||||
let error = await response.json();
|
||||
document.getElementById("toast-message").innerText =
|
||||
error.message;
|
||||
toast.show();
|
||||
console.error("Error:", error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Request failed:", error);
|
||||
document.getElementById("toast-message").innerText =
|
||||
error.message;
|
||||
toast.show();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new UpdateCustomer();
|
||||
});
|
||||
151
resources/js/customers/index.js
Normal file
151
resources/js/customers/index.js
Normal file
@@ -0,0 +1,151 @@
|
||||
import { Grid } from "gridjs/dist/gridjs.umd.js";
|
||||
import gridjs from "gridjs/dist/gridjs.umd.js";
|
||||
import "gridjs/dist/gridjs.umd.js";
|
||||
import GlobalConfig from "../global-config";
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
class Customers {
|
||||
constructor() {
|
||||
this.toastMessage = document.getElementById("toast-message");
|
||||
this.toastElement = document.getElementById("toastNotification");
|
||||
this.toast = new bootstrap.Toast(this.toastElement);
|
||||
this.table = null;
|
||||
|
||||
// Initialize functions
|
||||
this.initTableSpatialPlannings();
|
||||
this.initEvents();
|
||||
}
|
||||
initEvents() {
|
||||
document.body.addEventListener("click", async (event) => {
|
||||
const deleteButton = event.target.closest(".btn-delete-customers");
|
||||
if (deleteButton) {
|
||||
event.preventDefault();
|
||||
await this.handleDelete(deleteButton);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initTableSpatialPlannings() {
|
||||
let tableContainer = document.getElementById("table-customers");
|
||||
// Create a new Grid.js instance only if it doesn't exist
|
||||
this.table = new Grid({
|
||||
columns: [
|
||||
"ID",
|
||||
"Nomor Pelanggan",
|
||||
"Nama",
|
||||
"Kota Pelayanan",
|
||||
"Alamat",
|
||||
"Latitude",
|
||||
"Longitude",
|
||||
{
|
||||
name: "Action",
|
||||
formatter: (cell) =>
|
||||
gridjs.html(`
|
||||
<div class="d-flex justify-content-center gap-2">
|
||||
<a href="/data/customers/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
|
||||
<i class='bx bx-edit'></i>
|
||||
</a>
|
||||
<button data-id="${cell}" class="btn btn-sm btn-red btn-delete-customers d-inline-flex align-items-center justify-content-center">
|
||||
<i class='bx bxs-trash' ></i>
|
||||
</button>
|
||||
</div>
|
||||
`),
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 15,
|
||||
server: {
|
||||
url: (prev, page) =>
|
||||
`${prev}${prev.includes("?") ? "&" : "?"}page=${
|
||||
page + 1
|
||||
}`,
|
||||
},
|
||||
},
|
||||
sort: true,
|
||||
search: {
|
||||
server: {
|
||||
url: (prev, keyword) => `${prev}?search=${keyword}`,
|
||||
},
|
||||
},
|
||||
server: {
|
||||
url: `${GlobalConfig.apiHost}/api/customers`,
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
then: (data) =>
|
||||
data.data.map((item) => [
|
||||
item.id,
|
||||
item.nomor_pelanggan,
|
||||
item.nama,
|
||||
item.kota_pelayanan,
|
||||
item.alamat,
|
||||
item.latitude,
|
||||
item.longitude,
|
||||
item.id,
|
||||
]),
|
||||
total: (data) => data.meta.total,
|
||||
},
|
||||
}).render(tableContainer);
|
||||
}
|
||||
|
||||
async handleDelete(deleteButton) {
|
||||
const id = deleteButton.getAttribute("data-id");
|
||||
|
||||
const result = await Swal.fire({
|
||||
title: "Are you sure?",
|
||||
text: "You won't be able to revert this!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#3085d6",
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
});
|
||||
|
||||
if (result.isConfirmed) {
|
||||
try {
|
||||
let response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/customers/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
let result = await response.json();
|
||||
this.toastMessage.innerText =
|
||||
result.message || "Deleted successfully!";
|
||||
this.toast.show();
|
||||
|
||||
// Refresh Grid.js table
|
||||
if (typeof this.table !== "undefined") {
|
||||
this.table.updateConfig({}).forceRender();
|
||||
}
|
||||
} else {
|
||||
let error = await response.json();
|
||||
console.error("Delete failed:", error);
|
||||
this.toastMessage.innerText =
|
||||
error.message || "Delete failed!";
|
||||
this.toast.show();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error deleting item:", error);
|
||||
this.toastMessage.innerText = "An error occurred!";
|
||||
this.toast.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new Customers();
|
||||
});
|
||||
78
resources/js/customers/upload.js
Normal file
78
resources/js/customers/upload.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import { Dropzone } from "dropzone";
|
||||
Dropzone.autoDiscover = false;
|
||||
|
||||
class UploadCustomers {
|
||||
constructor() {
|
||||
this.spatialDropzone = null;
|
||||
this.formElement = document.getElementById("formUploadCustomers");
|
||||
this.uploadButton = document.getElementById("submit-upload");
|
||||
this.spinner = document.getElementById("spinner");
|
||||
if (!this.formElement) {
|
||||
console.error("Element formUploadCustomers tidak ditemukan!");
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
this.initDropzone();
|
||||
this.setupUploadButton();
|
||||
}
|
||||
|
||||
initDropzone() {
|
||||
const toastNotification = document.getElementById("toastNotification");
|
||||
const toast = new bootstrap.Toast(toastNotification);
|
||||
var previewTemplate,
|
||||
dropzonePreviewNode = document.querySelector(
|
||||
"#dropzone-preview-list"
|
||||
);
|
||||
(dropzonePreviewNode.id = ""),
|
||||
dropzonePreviewNode &&
|
||||
((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
|
||||
(this.spatialDropzone = new Dropzone(".dropzone", {
|
||||
url: this.formElement.action,
|
||||
method: "post",
|
||||
acceptedFiles: ".xls,.xlsx",
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
autoProcessQueue: false,
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
},
|
||||
init: function () {
|
||||
this.on("success", function (file, response) {
|
||||
document.getElementById("toast-message").innerText =
|
||||
response.message;
|
||||
toast.show();
|
||||
setTimeout(() => {
|
||||
window.location.href = "/data/customers";
|
||||
}, 2000);
|
||||
});
|
||||
this.on("error", function (file, errorMessage) {
|
||||
document.getElementById("toast-message").innerText =
|
||||
errorMessage.message;
|
||||
toast.show();
|
||||
this.uploadButton.disabled = false;
|
||||
this.spinner.classList.add("d-none");
|
||||
});
|
||||
},
|
||||
})));
|
||||
}
|
||||
|
||||
setupUploadButton() {
|
||||
this.uploadButton.addEventListener("click", (e) => {
|
||||
if (this.spatialDropzone.files.length > 0) {
|
||||
this.spatialDropzone.processQueue();
|
||||
this.uploadButton.disabled = true;
|
||||
this.spinner.classList.remove("d-none");
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new UploadCustomers().init();
|
||||
});
|
||||
Reference in New Issue
Block a user