115 lines
4.7 KiB
JavaScript
115 lines
4.7 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const officeModal = new bootstrap.Modal(document.getElementById('office-modal'));
|
|
const officeForm = document.getElementById('office-form');
|
|
const officeTable = document.getElementById('offices-table').getElementsByTagName('tbody')[0];
|
|
const modalLabel = document.getElementById('office-modal-label');
|
|
|
|
// Function to fetch and display offices
|
|
function loadOffices() {
|
|
fetch('api/get_offices.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
officeTable.innerHTML = '';
|
|
if(data.success) {
|
|
data.offices.forEach(office => {
|
|
const row = officeTable.insertRow();
|
|
row.innerHTML = `
|
|
<td>${office.nama_kantor}</td>
|
|
<td>${office.alamat}</td>
|
|
<td>${office.tipe_kantor}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-secondary edit-btn" data-id="${office.id}"><i data-feather="edit-2" class="feather-sm"></i></button>
|
|
<button class="btn btn-sm btn-outline-danger delete-btn" data-id="${office.id}"><i data-feather="trash-2" class="feather-sm"></i></button>
|
|
</td>
|
|
`;
|
|
});
|
|
feather.replace();
|
|
}
|
|
})
|
|
.catch(error => console.error('Error loading offices:', error));
|
|
}
|
|
|
|
// Show modal for adding a new office
|
|
document.getElementById('btn-add-office').addEventListener('click', function () {
|
|
officeForm.reset();
|
|
document.getElementById('office-id').value = '';
|
|
modalLabel.textContent = 'Tambah Kantor Baru';
|
|
officeModal.show();
|
|
});
|
|
|
|
// Handle form submission for both add and edit
|
|
officeForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(officeForm);
|
|
const officeId = formData.get('id');
|
|
const url = officeId ? 'api/update_office.php' : 'api/add_office.php';
|
|
|
|
fetch(url, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
officeModal.hide();
|
|
loadOffices(); // Refresh the table
|
|
} else {
|
|
alert('Error: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => console.error('Form submission error:', error));
|
|
});
|
|
|
|
// Handle edit and delete button clicks
|
|
officeTable.addEventListener('click', function (e) {
|
|
const target = e.target.closest('button');
|
|
if (!target) return;
|
|
|
|
const id = target.dataset.id;
|
|
|
|
// Edit button
|
|
if (target.classList.contains('edit-btn')) {
|
|
// Fetch full details to edit
|
|
fetch(`api/get_offices.php?id=${id}`) // We can reuse get_offices and filter by id server-side
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.offices.length > 0) {
|
|
const office = data.offices[0];
|
|
document.getElementById('office-id').value = office.id;
|
|
document.getElementById('nama_kantor').value = office.nama_kantor;
|
|
document.getElementById('alamat').value = office.alamat;
|
|
document.getElementById('tipe_kantor').value = office.tipe_kantor;
|
|
|
|
modalLabel.textContent = 'Edit Kantor';
|
|
officeModal.show();
|
|
} else {
|
|
alert('Error: Could not fetch office details.');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Delete button
|
|
if (target.classList.contains('delete-btn')) {
|
|
if (confirm('Apakah Anda yakin ingin menghapus kantor ini? Ini mungkin akan mempengaruhi pengguna dan aset yang terkait.')) {
|
|
fetch('api/delete_office.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `id=${id}`
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
loadOffices(); // Refresh the table
|
|
} else {
|
|
alert('Error: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => console.error('Delete error:', error));
|
|
}
|
|
}
|
|
});
|
|
|
|
// Initial load of offices
|
|
loadOffices();
|
|
});
|