647 lines
24 KiB
PHP
647 lines
24 KiB
PHP
@props([
|
|
'pageTitle' => '',
|
|
'data' => [],
|
|
'columns' => [],
|
|
'actions' => [],
|
|
'showAddButton' => false,
|
|
'addButtonUrl' => '#',
|
|
'showCheckboxes' => false,
|
|
'showBatchDelete' => false
|
|
])
|
|
|
|
<div class="card-header border-0 bg-transparent">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0 fw-bold text-dark">{{ $pageTitle }}</h5>
|
|
@if ($showAddButton)
|
|
<a href="{{ $addButtonUrl }}" class="btn btn-primary btn-sm px-3">
|
|
<i class="fa-solid fa-plus me-1"></i> Add {{ $pageTitle }}
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Search and Filters -->
|
|
<div class="row mb-3 align-items-center">
|
|
<div class="col-12 col-md-6 mb-2 mb-md-0">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text bg-light border-end-0">
|
|
<i class="fa-solid fa-magnifying-glass text-muted"></i>
|
|
</span>
|
|
<input type="text" class="form-control border-start-0" placeholder="Search..." id="searchInput">
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 d-flex justify-content-end">
|
|
<button class="btn btn-outline-secondary btn-sm" id="clearFilters">
|
|
<i class="fa-solid fa-filter-circle-xmark me-1"></i> Clear Filters
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="table-container">
|
|
<table class="table table-hover align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
@if ($showCheckboxes)
|
|
<th class="text-center" style="width: 40px;">
|
|
<input type="checkbox" id="selectAll">
|
|
</th>
|
|
@endif
|
|
@foreach ($columns as $index => $column)
|
|
<th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index + 1 }}">
|
|
{{ $column['name'] }}
|
|
@if ($column['sortable'])
|
|
<i class="fa-solid fa-sort"></i>
|
|
@endif
|
|
</th>
|
|
@endforeach
|
|
@if (!empty($actions))
|
|
<th class="text-center" style="width: 120px;">Action</th>
|
|
@endif
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Batch Delete and Pagination -->
|
|
<div class="d-flex justify-content-between align-items-center mt-4">
|
|
@if ($showBatchDelete)
|
|
<div>
|
|
<button class="btn btn-danger btn-sm" id="deleteSelected" disabled>
|
|
<i class="fa-solid fa-trash-can me-1"></i> Delete Selected
|
|
</button>
|
|
</div>
|
|
@endif
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination pagination-sm" id="pagination"></ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.card,
|
|
.table,
|
|
.btn,
|
|
.form-control,
|
|
.input-group-text {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
}
|
|
.card-header h5 {
|
|
font-weight: 500;
|
|
}
|
|
.table thead th {
|
|
font-weight: 500;
|
|
font-size: 0.8rem;
|
|
}
|
|
.form-label {
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
}
|
|
.card {
|
|
border-radius: 10px;
|
|
}
|
|
.card-header {
|
|
background-color: transparent;
|
|
}
|
|
.btn-primary {
|
|
background-color: #E74610;
|
|
border-color: #E74610;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #E74610;
|
|
border-color: #E74610;
|
|
}
|
|
.sortable {
|
|
cursor: pointer;
|
|
}
|
|
.sortable:hover {
|
|
background-color: #f1f3f5;
|
|
}
|
|
.table {
|
|
font-size: 0.85rem;
|
|
width: 100%;
|
|
table-layout: auto;
|
|
}
|
|
.table th,
|
|
.table td {
|
|
padding: 0.5rem;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.table th:first-child,
|
|
.table td:first-child {
|
|
width: 40px;
|
|
text-align: center;
|
|
}
|
|
.table th:last-child,
|
|
.table td:last-child {
|
|
width: 120px;
|
|
text-align: center;
|
|
}
|
|
.table td:nth-child(5),
|
|
.table th:nth-child(5) {
|
|
width: 100px;
|
|
}
|
|
.table td:nth-child(6),
|
|
.table th:nth-child(6) {
|
|
max-width: 200px;
|
|
}
|
|
.table td:nth-child(7),
|
|
.table th:nth-child(7) {
|
|
width: 120px;
|
|
}
|
|
.status-btn {
|
|
font-size: 0.75rem;
|
|
padding: 0.2rem 0.5rem;
|
|
}
|
|
.dropdown-menu-sm {
|
|
min-width: 120px;
|
|
}
|
|
.dropdown-item {
|
|
font-size: 0.85rem;
|
|
}
|
|
.table thead .sortable i {
|
|
font-size: 0.7rem;
|
|
vertical-align: middle;
|
|
}
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
.pagination-sm .page-link {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.85rem;
|
|
border-color: #E74610;
|
|
color: #E74610;
|
|
}
|
|
.pagination-sm .page-item.active .page-link {
|
|
background-color: #E74610;
|
|
border-color: #E74610;
|
|
color: #fff;
|
|
}
|
|
.pagination-sm .page-link:hover {
|
|
background-color: #E74610;
|
|
border-color: #E74610;
|
|
color: #fff;
|
|
}
|
|
.pagination-sm .page-item.disabled .page-link {
|
|
border-color: #dee2e6;
|
|
color: #6c757d;
|
|
}
|
|
.edit-btn {
|
|
border-color: #E74610;
|
|
color: #E74610;
|
|
}
|
|
.edit-btn:hover {
|
|
background-color: #E74610;
|
|
border-color: #E74610;
|
|
color: #fff;
|
|
}
|
|
.table-hover tbody tr:hover {
|
|
cursor: pointer;
|
|
background-color: #f8f9fa;
|
|
}
|
|
@media (max-width: 576px) {
|
|
.table {
|
|
font-size: 0.75rem;
|
|
}
|
|
.table thead th {
|
|
font-size: 0.75rem;
|
|
}
|
|
.table th,
|
|
.table td {
|
|
padding: 0.3rem;
|
|
}
|
|
.btn-sm {
|
|
padding: 0.2rem 0.4rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
.input-group-sm>.form-control {
|
|
font-size: 0.75rem;
|
|
}
|
|
.status-btn {
|
|
font-size: 0.65rem;
|
|
}
|
|
.dropdown-item {
|
|
font-size: 0.75rem;
|
|
}
|
|
.table thead .sortable i {
|
|
font-size: 0.65rem;
|
|
}
|
|
. personally identifiable information like names, addresses, or other sensitive data.
|
|
.pagination-sm .page-link {
|
|
padding: 0.2rem 0.4rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
.table td:nth-child(6) {
|
|
max-width: 150px;
|
|
}
|
|
.form-control,
|
|
.form-select {
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const tableConfig = {
|
|
data: @json($data),
|
|
columns: @json($columns),
|
|
actions: @json($actions),
|
|
showCheckboxes: {{ json_encode($showCheckboxes) }},
|
|
showBatchDelete: {{ json_encode($showBatchDelete) }},
|
|
pageTitle: @json($pageTitle),
|
|
csrfToken: '{{ csrf_token() }}'
|
|
};
|
|
|
|
const rowsPerPage = 5;
|
|
let currentPage = 1;
|
|
let filteredRows = [...tableConfig.data];
|
|
let originalRows = [...tableConfig.data].map(row => ({ ...row }));
|
|
let sortDirection = {};
|
|
|
|
function renderTable() {
|
|
const tableBody = document.getElementById('tableBody');
|
|
if (!tableBody) return;
|
|
tableBody.innerHTML = '';
|
|
|
|
const start = (currentPage - 1) * rowsPerPage;
|
|
const end = start + rowsPerPage;
|
|
const paginatedRows = filteredRows.slice(start, end);
|
|
|
|
paginatedRows.forEach(row => {
|
|
const tr = document.createElement('tr');
|
|
tr.setAttribute('data-id', row.admin_uuid);
|
|
tr.classList.add('clickable-row');
|
|
let rowHtml = '';
|
|
|
|
if (tableConfig.showCheckboxes) {
|
|
rowHtml += `<td class="text-center"><input type="checkbox" class="rowCheckbox"></td>`;
|
|
}
|
|
|
|
tableConfig.columns.forEach(col => {
|
|
let value = row[col.key] || '';
|
|
if (col.key === 'role') {
|
|
value = row[col.key] === '1' ? 'Admin' : 'User';
|
|
} else if (col.key === 'status') {
|
|
const displayStatus = value === 'Active' ? 'Active' : 'Inactive';
|
|
rowHtml += `
|
|
<td>
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-outline-secondary status-btn" type="button" id="statusDropdown${row.admin_uuid}" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span class="status-text">${displayStatus}</span>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm" aria-labelledby="statusDropdown${row.admin_uuid}">
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="active">
|
|
<i class="fa-solid fa-check text-success" style="font-size: 14px;"></i>
|
|
<span>Active</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="inactive">
|
|
<i class="fa-solid fa-xmark text-danger" style="font-size: 14px;"></i>
|
|
<span>Inactive</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</td>`;
|
|
return;
|
|
}
|
|
rowHtml += `<td>${value}</td>`;
|
|
});
|
|
|
|
if (tableConfig.actions.length > 0) {
|
|
rowHtml += `<td class="text-center">`;
|
|
tableConfig.actions.forEach(action => {
|
|
if (action === 'edit') {
|
|
rowHtml += `
|
|
<a href="${'{{ route('user-management.edit', '') }}'}/${row.admin_uuid}" class="btn btn-sm edit-btn me-1" title="Edit">
|
|
<i class="fa-solid fa-pen-to-square"></i>
|
|
</a>`;
|
|
} else if (action === 'view') {
|
|
rowHtml += `
|
|
<a href="${'{{ route('user-management.show', '') }}'}/${row.admin_uuid}" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View">
|
|
<i class="fa-solid fa-eye"></i>
|
|
</a>`;
|
|
} else if (action === 'delete') {
|
|
rowHtml += `
|
|
<button class="btn btn-sm btn-outline-danger delete-btn" title="Delete" data-id="${row.admin_uuid}">
|
|
<i class="fa-solid fa-trash-can"></i>
|
|
</button>`;
|
|
}
|
|
});
|
|
rowHtml += `</td>`;
|
|
}
|
|
|
|
tr.innerHTML = rowHtml;
|
|
tableBody.appendChild(tr);
|
|
});
|
|
|
|
attachEventListeners();
|
|
updateDeleteButtonState();
|
|
updateNoDataMessage();
|
|
}
|
|
|
|
function renderPagination() {
|
|
const pagination = document.getElementById('pagination');
|
|
if (!pagination) return;
|
|
pagination.innerHTML = '';
|
|
|
|
const pageCount = Math.ceil(filteredRows.length / rowsPerPage);
|
|
|
|
const prevLi = document.createElement('li');
|
|
prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
|
|
prevLi.innerHTML = `<a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>`;
|
|
prevLi.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
renderTable();
|
|
renderPagination();
|
|
}
|
|
});
|
|
pagination.appendChild(prevLi);
|
|
|
|
for (let i = 1; i <= pageCount; i++) {
|
|
const li = document.createElement('li');
|
|
li.className = `page-item ${currentPage === i ? 'active' : ''}`;
|
|
li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
|
|
li.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
currentPage = i;
|
|
renderTable();
|
|
renderPagination();
|
|
});
|
|
pagination.appendChild(li);
|
|
}
|
|
|
|
const nextLi = document.createElement('li');
|
|
nextLi.className = `page-item ${currentPage === pageCount ? 'disabled' : ''}`;
|
|
nextLi.innerHTML = `<a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a>`;
|
|
nextLi.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
if (currentPage < pageCount) {
|
|
currentPage++;
|
|
renderTable();
|
|
renderPagination();
|
|
}
|
|
});
|
|
pagination.appendChild(nextLi);
|
|
}
|
|
|
|
function updateNoDataMessage() {
|
|
const noDataMessage = document.getElementById('no-data-message');
|
|
if (noDataMessage) {
|
|
noDataMessage.style.display = filteredRows.length === 0 ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
function attachEventListeners() {
|
|
// Search
|
|
const searchInput = document.getElementById('searchInput');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
filteredRows = tableConfig.data.filter(row => {
|
|
return Object.values(row).some(value =>
|
|
value && value.toString().toLowerCase().includes(searchTerm)
|
|
);
|
|
});
|
|
currentPage = 1;
|
|
renderTable();
|
|
renderPagination();
|
|
});
|
|
}
|
|
|
|
// Sort
|
|
document.querySelectorAll('.sortable').forEach(header => {
|
|
header.addEventListener('click', function() {
|
|
const columnIndex = parseInt(this.getAttribute('data-column')) - (tableConfig.showCheckboxes ? 1 : 0);
|
|
const key = tableConfig.columns[columnIndex].key;
|
|
|
|
sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
|
|
|
|
document.querySelectorAll('.sortable i').forEach(icon => {
|
|
icon.classList.remove('fa-sort-up', 'fa-sort-down');
|
|
icon.classList.add('fa-sort');
|
|
});
|
|
const icon = this.querySelector('i');
|
|
if (icon) {
|
|
icon.classList.remove('fa-sort');
|
|
icon.classList.add(sortDirection[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
|
|
}
|
|
|
|
filteredRows.sort((a, b) => {
|
|
let aValue = (a[key] || '').toString().toLowerCase();
|
|
let bValue = (b[key] || '').toString().toLowerCase();
|
|
if (key === 'role') {
|
|
aValue = a[key] === '1' ? 'Admin' : 'User';
|
|
bValue = b[key] === '1' ? 'Admin' : 'User';
|
|
}
|
|
return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
|
|
});
|
|
|
|
renderTable();
|
|
renderPagination();
|
|
});
|
|
});
|
|
|
|
// Clear Filters
|
|
const clearFilters = document.getElementById('clearFilters');
|
|
if (clearFilters) {
|
|
clearFilters.addEventListener('click', function() {
|
|
if (searchInput) searchInput.value = '';
|
|
document.querySelectorAll('.sortable i').forEach(icon => {
|
|
icon.classList.remove('fa-sort-up', 'fa-sort-down');
|
|
icon.classList.add('fa-sort');
|
|
});
|
|
sortDirection = {};
|
|
filteredRows = [...tableConfig.data];
|
|
currentPage = 1;
|
|
renderTable();
|
|
renderPagination();
|
|
});
|
|
}
|
|
|
|
// Checkboxes
|
|
if (tableConfig.showCheckboxes) {
|
|
const selectAll = document.getElementById('selectAll');
|
|
if (selectAll) {
|
|
selectAll.addEventListener('change', function() {
|
|
const checkboxes = document.querySelectorAll('.rowCheckbox');
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.checked = this.checked;
|
|
});
|
|
updateDeleteButtonState();
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('.rowCheckbox').forEach(checkbox => {
|
|
checkbox.addEventListener('change', updateDeleteButtonState);
|
|
});
|
|
}
|
|
|
|
// Batch Delete
|
|
if (tableConfig.showBatchDelete) {
|
|
const deleteSelected = document.getElementById('deleteSelected');
|
|
if (deleteSelected) {
|
|
deleteSelected.addEventListener('click', function() {
|
|
const checkboxes = document.querySelectorAll('.rowCheckbox:checked');
|
|
const selectedIds = Array.from(checkboxes)
|
|
.map(cb => cb.closest('tr').getAttribute('data-id'));
|
|
|
|
if (selectedIds.length === 0) {
|
|
alert('Please select at least one user to delete.');
|
|
return;
|
|
}
|
|
|
|
if (confirm('Are you sure you want to delete the selected users?')) {
|
|
axios.delete('{{ route('user-management.batchDelete') }}', {
|
|
headers: {
|
|
'X-CSRF-TOKEN': tableConfig.csrfToken
|
|
},
|
|
data: {
|
|
admin_uuid: selectedIds
|
|
}
|
|
}).then(response => {
|
|
filteredRows = filteredRows.filter(row => !selectedIds.includes(row.admin_uuid));
|
|
tableConfig.data = tableConfig.data.filter(row => !selectedIds.includes(row.admin_uuid));
|
|
originalRows = originalRows.filter(row => !selectedIds.includes(row.admin_uuid));
|
|
|
|
const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
|
|
if (currentPage > maxPage && maxPage > 0) {
|
|
currentPage = maxPage;
|
|
}
|
|
|
|
renderTable();
|
|
renderPagination();
|
|
if (selectAll) selectAll.checked = false;
|
|
window.location.reload();
|
|
}).catch(error => {
|
|
console.error('Batch delete error:', error);
|
|
alert(error.response?.data?.message || 'Failed to delete users. You may have included your own account.');
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Status
|
|
document.querySelectorAll('.status-option').forEach(option => {
|
|
option.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const newStatus = this.getAttribute('data-status');
|
|
const row = this.closest('tr');
|
|
const userId = row.getAttribute('data-id');
|
|
const statusText = row.querySelector('.status-text');
|
|
const originalStatus = statusText.textContent;
|
|
|
|
if (statusText) {
|
|
statusText.textContent = newStatus.charAt(0).toUpperCase() + newStatus.slice(1);
|
|
}
|
|
|
|
const rowData = filteredRows.find(r => r.admin_uuid === userId);
|
|
if (rowData) {
|
|
rowData.status = newStatus.charAt(0).toUpperCase() + newStatus.slice(1);
|
|
axios.post(`{{ route('user-management.changeStatus', '') }}/${userId}`, {
|
|
status: newStatus,
|
|
_token: tableConfig.csrfToken
|
|
}).then(response => {
|
|
window.location.reload();
|
|
}).catch(error => {
|
|
console.error('Status update error:', error);
|
|
alert(error.response?.data?.message || 'Failed to update status. You cannot update your own account.');
|
|
statusText.textContent = originalStatus;
|
|
rowData.status = originalStatus;
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Delete
|
|
document.querySelectorAll('.delete-btn').forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
const userId = this.getAttribute('data-id');
|
|
if (confirm('Are you sure you want to delete this user?')) {
|
|
axios.delete(`{{ route('user-management.destroy', '') }}/${userId}`, {
|
|
headers: {
|
|
'X-CSRF-TOKEN': tableConfig.csrfToken
|
|
}
|
|
}).then(response => {
|
|
filteredRows = filteredRows.filter(row => row.admin_uuid !== userId);
|
|
tableConfig.data = tableConfig.data.filter(row => row.admin_uuid !== userId);
|
|
originalRows = originalRows.filter(row => row.admin_uuid !== userId);
|
|
|
|
const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
|
|
if (currentPage > maxPage && maxPage > 0) {
|
|
currentPage = maxPage;
|
|
}
|
|
|
|
renderTable();
|
|
renderPagination();
|
|
window.location.reload();
|
|
}).catch(error => {
|
|
console.error('Delete error:', error);
|
|
alert(error.response?.data?.message || 'Failed to delete user. You cannot delete your own account.');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
//Edit
|
|
document.querySelectorAll('.edit-btn').forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const userId = this.getAttribute('data-id');
|
|
const href = this.getAttribute('href').replace(':id', userId);
|
|
window.location.href = href;
|
|
});
|
|
});
|
|
|
|
// View
|
|
document.querySelectorAll('.view-btn').forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const href = this.getAttribute('href');
|
|
console.log('View redirect:', href); // Debug
|
|
window.location.href = href;
|
|
});
|
|
});
|
|
|
|
// Row click to view
|
|
document.querySelectorAll('.clickable-row').forEach(row => {
|
|
row.addEventListener('click', function(e) {
|
|
if (e.target.closest('.rowCheckbox, .status-btn, .edit-btn, .view-btn, .delete-btn, .dropdown-menu')) {
|
|
return;
|
|
}
|
|
const userId = this.getAttribute('data-id');
|
|
const url = `{{ route('user-management.show', '') }}/${userId}`;
|
|
console.log('Row redirect:', url); // Debug
|
|
window.location.href = url;
|
|
});
|
|
});
|
|
}
|
|
|
|
function updateDeleteButtonState() {
|
|
if (tableConfig.showBatchDelete) {
|
|
const checkboxes = document.querySelectorAll('.rowCheckbox');
|
|
const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
|
|
const deleteButton = document.getElementById('deleteSelected');
|
|
if (deleteButton) {
|
|
deleteButton.disabled = checkedCount < 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
renderTable();
|
|
renderPagination();
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |