265 lines
9.3 KiB
PHP
265 lines
9.3 KiB
PHP
@extends('layout.app')
|
|
@section('content')
|
|
<div class="content">
|
|
<div class="animated fadeIn">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<strong class="card-title">Data User</strong>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text mb-4">
|
|
Data pengguna yang terdaftar dalam sistem:
|
|
</p>
|
|
<div class="table-responsive">
|
|
<div class="table-wrapper">
|
|
<table class="table table-striped table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Status</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($users as $index => $item)
|
|
<tr>
|
|
<td>{{ $index + 1 }}</td>
|
|
<td>{{ $item->name }}</td>
|
|
<td>{{ $item->email }}</td>
|
|
<td>{{ $item->status }}</td>
|
|
<td>
|
|
<div class="button-group">
|
|
<button class="btn btn-warning btn-sm" data-toggle="modal"
|
|
data-target="#updateModal" onclick="updateData({{ $item }})">
|
|
Edit
|
|
</button>
|
|
<button class="btn btn-danger btn-sm" data-toggle="modal"
|
|
data-target="#deleteModal" onclick="deleteData({{ $item->id }})">
|
|
Hapus
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Edit -->
|
|
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="updateModalLabel">Edit User</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="formEdit" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="_method" value="PUT">
|
|
<div class="form-group">
|
|
<label for="nama">Nama</label>
|
|
<input type="text" class="form-control" id="nama" name="nama" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" class="form-control" id="email" name="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="status">Status</label>
|
|
<input type="text" class="form-control" id="status" name="status" required>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
|
<button type="button" class="btn btn-primary" onclick="document.getElementById('formEdit').submit();">Simpan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Hapus -->
|
|
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteModalLabel">Hapus User</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Apakah Anda yakin ingin menghapus user ini?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
|
<button type="button" class="btn btn-danger" onclick="deleteDataConfirmed()">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Styling untuk tabel */
|
|
.table-responsive {
|
|
margin: 0;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.table-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.table th {
|
|
background-color: #f8f9fa;
|
|
border-bottom: 2px solid #dee2e6;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Button group styling */
|
|
.button-group {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Card styling */
|
|
.card {
|
|
border: none;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.card-header {
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #dee2e6;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.card-title {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Modal styling */
|
|
.modal-content {
|
|
border: none;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.modal-header {
|
|
background-color: #f8f9fa;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
|
|
/* Responsive styling */
|
|
@media (max-width: 768px) {
|
|
.table {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.table td, .table th {
|
|
padding: 8px;
|
|
}
|
|
|
|
.button-group {
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.btn-sm {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Indikator scroll horizontal */
|
|
.table-wrapper::after {
|
|
content: '⟷ Geser untuk melihat lebih banyak';
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
padding: 5px;
|
|
color: #666;
|
|
background: #f8f9fa;
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function updateData(data) {
|
|
console.log(data);
|
|
const form = document.getElementById('formEdit');
|
|
form.action = "{{ route('users.update', ':id') }}".replace(':id', data.id);
|
|
form.querySelector('#nama').value = data.name;
|
|
form.querySelector('#email').value = data.email;
|
|
form.querySelector('#status').value = data.status;
|
|
}
|
|
|
|
function deleteData(id) {
|
|
// Store the ID for use in deleteDataConfirmed
|
|
window.deleteUserId = id;
|
|
}
|
|
|
|
function deleteDataConfirmed() {
|
|
if (window.deleteUserId) {
|
|
// Buat form untuk delete request
|
|
const form = document.createElement('form');
|
|
form.method = 'POST';
|
|
form.action = "{{ route('users.destroy', ':id') }}".replace(':id', window.deleteUserId);
|
|
|
|
// Tambahkan CSRF token
|
|
const csrfToken = document.createElement('input');
|
|
csrfToken.type = 'hidden';
|
|
csrfToken.name = '_token';
|
|
csrfToken.value = '{{ csrf_token() }}';
|
|
form.appendChild(csrfToken);
|
|
|
|
// Tambahkan method DELETE
|
|
const methodField = document.createElement('input');
|
|
methodField.type = 'hidden';
|
|
methodField.name = '_method';
|
|
methodField.value = 'DELETE';
|
|
form.appendChild(methodField);
|
|
|
|
// Tambahkan form ke document dan submit
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
}
|
|
}
|
|
</script>
|
|
@endsection
|