fix desain
This commit is contained in:
parent
6febfcfe9a
commit
342ad702e3
@ -62,7 +62,9 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
@forelse($templates as $key => $template)
|
@forelse($templates as $key => $template)
|
||||||
<tr>
|
<tr>
|
||||||
<td class="p-2 border border-gray-300 text-center">{{ $key + 1 }}</td>
|
<td class="p-2 border border-gray-300 text-center">
|
||||||
|
{{ ($templates->currentPage() - 1) * $templates->perPage() + $key + 1 }}
|
||||||
|
</td>
|
||||||
<td class="p-2 border border-gray-300 truncate">{{ $template->nama_template }}</td>
|
<td class="p-2 border border-gray-300 truncate">{{ $template->nama_template }}</td>
|
||||||
<td class="p-2 border border-gray-300 truncate">{{ $template->kategori->nama ?? '-' }}</td>
|
<td class="p-2 border border-gray-300 truncate">{{ $template->kategori->nama ?? '-' }}</td>
|
||||||
|
|
||||||
@ -100,9 +102,13 @@
|
|||||||
class="inline" onsubmit="return confirm('Hapus template ini?')">
|
class="inline" onsubmit="return confirm('Hapus template ini?')">
|
||||||
@csrf
|
@csrf
|
||||||
@method('DELETE')
|
@method('DELETE')
|
||||||
<button class="text-red-600 hover:underline flex items-center">
|
<button
|
||||||
|
class="text-red-600 hover:underline flex items-center btn-delete-template"
|
||||||
|
data-action="{{ route('templates.destroy', $template->id) }}"
|
||||||
|
data-name="{{ $template->nama_template }}">
|
||||||
<i class="bi bi-trash mr-1"></i> Hapus
|
<i class="bi bi-trash mr-1"></i> Hapus
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -118,6 +124,30 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal Konfirmasi Hapus Template -->
|
||||||
|
<div id="modalDeleteTemplate" class="fixed inset-0 hidden items-center justify-center z-50">
|
||||||
|
<div class="absolute inset-0 bg-black opacity-50" id="modalDeleteTemplateOverlay"></div>
|
||||||
|
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
|
||||||
|
<form id="deleteTemplateForm" method="POST">
|
||||||
|
@csrf
|
||||||
|
@method('DELETE')
|
||||||
|
<div class="p-4 border-b">
|
||||||
|
<h5 class="text-lg font-medium">Hapus Template</h5>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
Apakah Anda yakin ingin menghapus template <strong id="deleteTemplateName">—</strong>?
|
||||||
|
</div>
|
||||||
|
<div class="p-4 border-t flex justify-end space-x-2">
|
||||||
|
<button type="button" id="closeDeleteTemplateModal"
|
||||||
|
class="bg-gray-300 text-black px-3 py-1 rounded">Batal</button>
|
||||||
|
<button type="submit" class="bg-red-600 text-white px-3 py-1 rounded">Ya, Hapus</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Pagination -->
|
<!-- Pagination -->
|
||||||
@if ($templates->hasPages())
|
@if ($templates->hasPages())
|
||||||
<div class="p-4 flex justify-center">
|
<div class="p-4 flex justify-center">
|
||||||
@ -377,6 +407,31 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
// Modal Delete Template
|
||||||
|
const deleteTemplateModal = document.getElementById('modalDeleteTemplate');
|
||||||
|
const deleteTemplateOverlay = document.getElementById('modalDeleteTemplateOverlay');
|
||||||
|
const closeDeleteTemplateModal = document.getElementById('closeDeleteTemplateModal');
|
||||||
|
const deleteTemplateForm = document.getElementById('deleteTemplateForm');
|
||||||
|
const deleteTemplateName = document.getElementById('deleteTemplateName');
|
||||||
|
|
||||||
|
document.querySelectorAll('.btn-delete-template').forEach(btn => {
|
||||||
|
btn.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault(); // cegah form langsung submit
|
||||||
|
deleteTemplateForm.action = btn.dataset.action;
|
||||||
|
deleteTemplateName.textContent = btn.dataset.name || 'template ini';
|
||||||
|
deleteTemplateModal.classList.remove('hidden');
|
||||||
|
deleteTemplateModal.classList.add('flex');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const closeDeleteModalTemplate = () => {
|
||||||
|
deleteTemplateModal.classList.add('hidden');
|
||||||
|
deleteTemplateModal.classList.remove('flex');
|
||||||
|
};
|
||||||
|
|
||||||
|
closeDeleteTemplateModal.addEventListener('click', closeDeleteModalTemplate);
|
||||||
|
deleteTemplateOverlay.addEventListener('click', closeDeleteModalTemplate);
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user