207 lines
10 KiB
PHP
207 lines
10 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('header')
|
|
<div class="bg-header text-white p-4 rounded-lg shadow-md flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-2xl font-medium">Manajemen User</h1>
|
|
<span class="text-sm">Good morning, <span class="font-bold">{{ Auth::user()->name }}</span></span>
|
|
</div>
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit" class="flex items-center py-2 px-4 bg-red-600 hover:bg-red-700 rounded transition text-sm">
|
|
<i class="bi bi-box-arrow-right mr-2"></i> Logout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="mt-6 bg-white p-6 rounded-lg shadow">
|
|
<!-- Search & Add -->
|
|
<div class="flex justify-between items-center mb-4">
|
|
<form method="GET" action="{{ route('admin.manajemen-user.index') }}" class="flex items-center space-x-2">
|
|
<div class="relative">
|
|
<input id="searchInput" name="search" value="{{ $search ?? '' }}" placeholder="Search Users…"
|
|
class="pl-8 pr-4 py-2 border rounded-lg bg-gray-100 w-56">
|
|
<i class="bi bi-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
</div>
|
|
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg">Cari</button>
|
|
</form>
|
|
<button id="btnTambah" class="bg-teal-500 text-white px-4 py-2 rounded-lg flex items-center">
|
|
<i class="bi bi-plus-lg mr-2"></i> Tambah User
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Users Table -->
|
|
<table class="min-w-full bg-white rounded-lg shadow">
|
|
<thead class="bg-gray-200 text-gray-700">
|
|
<tr>
|
|
<th class="py-2 px-4">NIM</th>
|
|
<th class="py-2 px-4">Username</th>
|
|
<th class="py-2 px-4">Name</th>
|
|
<th class="py-2 px-4">Email</th>
|
|
<th class="py-2 px-4">Role</th>
|
|
<th class="py-2 px-4">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($users as $user)
|
|
<tr class="text-center border-t">
|
|
<td class="py-2 px-4">{{ $user->nim }}</td>
|
|
<td class="py-2 px-4">{{ $user->username }}</td>
|
|
<td class="py-2 px-4">{{ $user->name }}</td>
|
|
<td class="py-2 px-4">{{ $user->email }}</td>
|
|
<td class="py-2 px-4">{{ ucfirst($user->role) }}</td>
|
|
<td class="py-2 px-4 space-x-2">
|
|
<button data-id="{{ $user->id }}"
|
|
class="editBtn bg-yellow-400 text-white px-3 py-1 rounded">
|
|
Edit
|
|
</button>
|
|
<form action="{{ route('admin.manajemen-user.destroy', $user->id) }}" method="POST"
|
|
class="inline">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button onclick="return confirm('Yakin hapus user?')"
|
|
class="bg-red-500 text-white px-3 py-1 rounded">
|
|
Hapus
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Modal Form -->
|
|
<div id="modalForm" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6">
|
|
<h2 id="modalTitle" class="text-xl font-semibold mb-4">Tambah User</h2>
|
|
<form id="formUser" method="POST" class="space-y-4">
|
|
@csrf
|
|
<input type="hidden" name="_method" id="methodInput" value="POST">
|
|
|
|
<div>
|
|
<label class="block text-sm">NIM</label>
|
|
<input type="text" name="nim" id="nimField"
|
|
class="mt-1 block w-full border rounded px-3 py-2" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm">Username</label>
|
|
<input type="text" name="username" id="usernameField"
|
|
class="mt-1 block w-full border rounded px-3 py-2" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm">Name</label>
|
|
<input type="text" name="name" id="nameField"
|
|
class="mt-1 block w-full border rounded px-3 py-2" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm">Email</label>
|
|
<input type="email" name="email" id="emailField"
|
|
class="mt-1 block w-full border rounded px-3 py-2" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm">No HP</label>
|
|
<input type="text" name="no_hp" id="hpField"
|
|
class="mt-1 block w-full border rounded px-3 py-2">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm">Role</label>
|
|
<select name="role" id="roleField" class="mt-1 block w-full border rounded px-3 py-2">
|
|
<option value="user">User</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
<div id="passwordGroup">
|
|
<label class="block text-sm">Password</label>
|
|
<input type="password" name="password" id="passwordField"
|
|
class="mt-1 block w-full border rounded px-3 py-2">
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3 pt-4">
|
|
<button type="button" id="btnBatal" class="px-4 py-2 rounded-lg">Batal</button>
|
|
<button type="submit" class="bg-blue text-white px-4 py-2 rounded-lg flex items-center">
|
|
<i id="modalIcon" class="bi bi-check-lg mr-1"></i>
|
|
<span id="modalButtonText">Simpan</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const modal = document.getElementById('modalForm');
|
|
const form = document.getElementById('formUser');
|
|
const methodIn = document.getElementById('methodInput');
|
|
const icon = document.getElementById('modalIcon');
|
|
const txt = document.getElementById('modalButtonText');
|
|
const title = document.getElementById('modalTitle');
|
|
const baseStoreUrl = "{{ route('admin.manajemen-user.store') }}";
|
|
const baseApiUrl = "{{ url('admin/manajemen-user') }}";
|
|
const passwordGroup = document.getElementById('passwordGroup');
|
|
const passwordField = document.getElementById('passwordField');
|
|
|
|
// Tambah
|
|
document.getElementById('btnTambah').addEventListener('click', () => {
|
|
form.reset();
|
|
title.textContent = 'Tambah User';
|
|
txt.textContent = 'Simpan';
|
|
icon.className = 'bi bi-check-lg mr-1';
|
|
form.action = baseStoreUrl;
|
|
methodIn.value = 'POST';
|
|
passwordGroup.style.display = 'block';
|
|
passwordField.required = true;
|
|
passwordField.value = '';
|
|
modal.classList.remove('hidden');
|
|
});
|
|
|
|
// Batal
|
|
document.getElementById('btnBatal').addEventListener('click', () => modal.classList.add('hidden'));
|
|
|
|
// Edit
|
|
function openEditUser(id) {
|
|
fetch(`${baseApiUrl}/${id}/get`, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(res => res.json())
|
|
.then(user => {
|
|
form.reset();
|
|
title.textContent = 'Edit User';
|
|
txt.textContent = 'Update';
|
|
icon.className = 'bi bi-pencil-square mr-1';
|
|
form.action = `${baseApiUrl}/${id}`;
|
|
methodIn.value = 'PUT';
|
|
document.getElementById('nimField').value = user.nim;
|
|
document.getElementById('usernameField').value = user.username;
|
|
document.getElementById('nameField').value = user.name;
|
|
document.getElementById('emailField').value = user.email;
|
|
document.getElementById('hpField').value = user.no_hp || '';
|
|
document.getElementById('roleField').value = user.role;
|
|
passwordGroup.style.display = 'none';
|
|
passwordField.required = false;
|
|
modal.classList.remove('hidden');
|
|
})
|
|
.catch(() => alert('Gagal mengambil data user.'));
|
|
}
|
|
|
|
document.querySelectorAll('.editBtn').forEach(btn => btn.addEventListener('click', () => openEditUser(
|
|
btn.dataset.id)));
|
|
|
|
// Live search filter
|
|
const searchInput = document.getElementById('searchInput');
|
|
const rows = document.querySelectorAll('table tbody tr');
|
|
searchInput.addEventListener('input', () => {
|
|
const term = searchInput.value.toLowerCase().trim();
|
|
rows.forEach(row => row.style.display = row.innerText.toLowerCase().includes(term) ? '' :
|
|
'none');
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|