Feature: crud reklame
This commit is contained in:
76
resources/js/data/advertisements/data-advertisements.js
Normal file
76
resources/js/data/advertisements/data-advertisements.js
Normal file
@@ -0,0 +1,76 @@
|
||||
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.js";
|
||||
import GeneralTable from "../../table-generator.js";
|
||||
|
||||
const dataAdvertisementsColumns = [
|
||||
"No",
|
||||
"Nama Wajib Pajak",
|
||||
"NPWPD",
|
||||
"Jenis Reklame",
|
||||
"Isi Reklame",
|
||||
"Alamat Wajib Pajak",
|
||||
"Lokasi Reklame",
|
||||
"Desa",
|
||||
"Kecamatan",
|
||||
"Panjang",
|
||||
"Lebar",
|
||||
"Sudut Pandang",
|
||||
"Muka",
|
||||
"Luas",
|
||||
"Sudut",
|
||||
"Kontak",
|
||||
{
|
||||
name: "Actions",
|
||||
widht: "120px",
|
||||
formatter: function(cell, row) {
|
||||
const id = row.cells[16].data;
|
||||
const model = "data/advertisements";
|
||||
return gridjs.html(`
|
||||
<div class="d-flex justify-items-end gap-10">
|
||||
<button class="btn btn-yellow me-2 btn-edit"
|
||||
data-id="${id}"
|
||||
data-model="${model}">Update</button>
|
||||
<button class="btn btn-red btn-delete"
|
||||
data-id="${id}">Delete</button>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const table = new GeneralTable(
|
||||
"reklame-data-table",
|
||||
`${GlobalConfig.apiHost}/api/advertisements`,
|
||||
`${GlobalConfig.apiHost}`,
|
||||
dataAdvertisementsColumns
|
||||
);
|
||||
|
||||
table.processData = function (data) {
|
||||
return data.data.map((item) => {
|
||||
return [
|
||||
item.no,
|
||||
item.business_name,
|
||||
item.npwpd,
|
||||
item.advertisement_type,
|
||||
item.advertisement_content,
|
||||
item.business_address,
|
||||
item.advertisement_location,
|
||||
item.village_name,
|
||||
item.district_name,
|
||||
item.length,
|
||||
item.width,
|
||||
item.viewing_angle,
|
||||
item.face,
|
||||
item.area,
|
||||
item.angle,
|
||||
item.contact,
|
||||
item.id,
|
||||
];
|
||||
});
|
||||
};
|
||||
|
||||
table.init();
|
||||
});
|
||||
93
resources/js/form-create-update.js
Normal file
93
resources/js/form-create-update.js
Normal file
@@ -0,0 +1,93 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const saveButton = document.querySelector(".modal-footer .btn-primary");
|
||||
const modalButton = document.querySelector(".btn-modal");
|
||||
const form = document.querySelector("form#create-update-form");
|
||||
|
||||
if (!saveButton || !form) return;
|
||||
|
||||
saveButton.addEventListener("click", function () {
|
||||
// Disable tombol dan tampilkan spinner
|
||||
modalButton.disabled = true;
|
||||
modalButton.innerHTML = `
|
||||
<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
`;
|
||||
const isEdit = saveButton.classList.contains("btn-edit");
|
||||
const formData = new FormData(form)
|
||||
const toast = document.getElementById('toastEditUpdate');
|
||||
const toastBody = toast.querySelector('.toast-body');
|
||||
const toastHeader = toast.querySelector('.toast-header small');
|
||||
|
||||
const data = {};
|
||||
|
||||
// Mengonversi FormData ke dalam JSON
|
||||
formData.forEach((value, key) => {
|
||||
data[key] = value;
|
||||
});
|
||||
|
||||
// Log semua data dalam FormData
|
||||
for (let pair of formData.entries()) {
|
||||
console.log(pair[0] + ": " + pair[1]);
|
||||
}
|
||||
const url = form.getAttribute("action");
|
||||
console.log("Ini adalah url dari form action", url);
|
||||
|
||||
const method = isEdit ? "PUT" : "POST";
|
||||
|
||||
fetch(url, {
|
||||
method: method,
|
||||
body: JSON.stringify(data),
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log("Response data:", data);
|
||||
if (!data.errors) {
|
||||
// Set success message for the toast
|
||||
toastBody.textContent = isEdit ? "Data updated successfully!" : "Data created successfully!";
|
||||
toastHeader.textContent = "Just now";
|
||||
toast.classList.add('show'); // Show the toast
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show'); // Hide the toast after 3 seconds
|
||||
}, 3000);
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 3000);
|
||||
} else {
|
||||
// Set error message for the toast
|
||||
toastBody.textContent = "Error: " + (responseData.message || "Something went wrong");
|
||||
toastHeader.textContent = "Error occurred";
|
||||
toast.classList.add('show'); // Show the toast
|
||||
|
||||
// Enable button and reset its text on error
|
||||
modalButton.disabled = false;
|
||||
modalButton.innerHTML = isEdit ? "Update" : "Create";
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show'); // Hide the toast after 3 seconds
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error:", error);
|
||||
// Set error message for the toast
|
||||
toastBody.textContent = "An error occurred while processing your request.";
|
||||
toastHeader.textContent = "Error occurred";
|
||||
toast.classList.add('show'); // Show the toast
|
||||
|
||||
// Enable button and reset its text on error
|
||||
modalButton.disabled = false;
|
||||
modalButton.innerHTML = isEdit ? "Update" : "Create";
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show'); // Hide the toast after 3 seconds
|
||||
}, 3000);
|
||||
});
|
||||
});
|
||||
});
|
||||
124
resources/js/table-generator.js
Normal file
124
resources/js/table-generator.js
Normal file
@@ -0,0 +1,124 @@
|
||||
import { Grid } from "gridjs/dist/gridjs.umd.js";
|
||||
import "gridjs/dist/gridjs.umd.js";
|
||||
|
||||
class GeneralTable {
|
||||
constructor(tableId, apiUrl, baseUrl, columns, options = {}) {
|
||||
this.tableId = tableId;
|
||||
this.apiUrl = apiUrl;
|
||||
this.baseUrl = baseUrl; // Tambahkan base URL
|
||||
this.columns = columns;
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
init() {
|
||||
const table = new Grid({
|
||||
columns: this.columns,
|
||||
search: this.options.search || {
|
||||
server: {
|
||||
url: (prev, keyword) => `${prev}?search=${keyword}`,
|
||||
},
|
||||
},
|
||||
pagination: this.options.pagination || {
|
||||
limit: 15,
|
||||
server: {
|
||||
url: (prev, page) =>
|
||||
`${prev}${prev.includes("?") ? "&" : "?"}page=${page + 1}`,
|
||||
},
|
||||
},
|
||||
sort: this.options.sort || true,
|
||||
server: {
|
||||
url: this.apiUrl,
|
||||
headers: this.options.headers || {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
then: (data) => this.processData(data),
|
||||
total: (data) => data.meta.total,
|
||||
},
|
||||
});
|
||||
|
||||
table.render(document.getElementById(this.tableId));
|
||||
this.handleActions();
|
||||
}
|
||||
|
||||
// Memproses data dari API
|
||||
processData(data) {
|
||||
return data.data.map((item) => {
|
||||
return this.columns.map((column) => {
|
||||
return item[column] || '';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
handleActions() {
|
||||
document.addEventListener("click", (event) => {
|
||||
if (event.target && event.target.classList.contains('btn-edit')) {
|
||||
this.handleEdit(event);
|
||||
}
|
||||
if (event.target && event.target.classList.contains('btn-delete')) {
|
||||
this.handleDelete(event);
|
||||
}
|
||||
if (event.target && event.target.classList.contains('btn-create')) {
|
||||
this.handleCreate(event);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fungsi untuk menangani create
|
||||
handleCreate(event) {
|
||||
// Menggunakan model dan ID untuk membangun URL dinamis
|
||||
const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
|
||||
window.location.href = `${this.baseUrl}/${model}/create`;
|
||||
}
|
||||
|
||||
// Fungsi untuk menangani edit
|
||||
handleEdit(event) {
|
||||
const id = event.target.getAttribute('data-id');
|
||||
const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
|
||||
console.log('Editing record with ID:', id);
|
||||
// Menggunakan model dan ID untuk membangun URL dinamis
|
||||
window.location.href = `${this.baseUrl}/${model}/${id}/edit`;
|
||||
}
|
||||
|
||||
// Fungsi untuk menangani delete
|
||||
handleDelete(event) {
|
||||
const id = event.target.getAttribute('data-id');
|
||||
console.log(id);
|
||||
if (confirm("Are you sure you want to delete this item?")) {
|
||||
this.deleteRecord(id);
|
||||
}
|
||||
}
|
||||
|
||||
async deleteRecord(id) {
|
||||
try {
|
||||
console.log(id);
|
||||
const response = await fetch(`${this.apiUrl}/${id}`, { // Menambahkan model dalam URL
|
||||
method: 'DELETE',
|
||||
headers: this.options.headers || {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
// headers: {
|
||||
// 'Authorization': `Bearer ${document.querySelector('meta[name="api-token"]').getAttribute("content")}`,
|
||||
// 'Content-Type': 'application/json',
|
||||
// },
|
||||
});
|
||||
if (response.status === 204) { // Jika status code 204, berarti berhasil
|
||||
alert('Data deleted successfully!');
|
||||
location.reload();
|
||||
} else {
|
||||
const data = await response.json(); // Jika ada data di response body
|
||||
alert('Failed to delete data: ' + (data.message || 'Unknown error.'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting data:', error);
|
||||
alert('Error deleting data.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default GeneralTable;
|
||||
Reference in New Issue
Block a user