124 lines
4.4 KiB
JavaScript
124 lines
4.4 KiB
JavaScript
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; |