317 lines
10 KiB
PHP
317 lines
10 KiB
PHP
@extends('layouts.app')
|
|
@section('title', 'Politeknik Negeri Jember')
|
|
@section('topbar', 'Data User')
|
|
@section('css')
|
|
<!-- Custom styles for this page -->
|
|
<link href="{{ asset('vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-color: rgb(0, 122, 153);
|
|
--primary-light: rgba(0, 122, 153, 0.1);
|
|
--primary-dark: rgb(0, 92, 115);
|
|
}
|
|
|
|
.card {
|
|
border: none;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
padding: 1.25rem 1.5rem;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.table-container {
|
|
padding: 0 1.5rem 1.5rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0 8px;
|
|
}
|
|
|
|
.table thead th {
|
|
background-color: var(--primary-light);
|
|
color: var(--primary-dark);
|
|
font-weight: 600;
|
|
border: none;
|
|
padding: 12px 15px;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.table tbody tr {
|
|
background-color: white;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
|
|
transition: all 0.3s ease;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0, 122, 153, 0.1);
|
|
}
|
|
|
|
.table td {
|
|
border: none;
|
|
padding: 15px;
|
|
vertical-align: middle;
|
|
border-top: 1px solid rgba(0, 122, 153, 0.05);
|
|
border-bottom: 1px solid rgba(0, 122, 153, 0.05);
|
|
}
|
|
|
|
.table td:first-child {
|
|
border-left: 1px solid rgba(0, 122, 153, 0.05);
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
|
|
.table td:last-child {
|
|
border-right: 1px solid rgba(0, 122, 153, 0.05);
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.badge {
|
|
padding: 6px 12px;
|
|
font-weight: 500;
|
|
font-size: 0.75rem;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.badge-info {
|
|
background-color: rgba(23, 162, 184, 0.2);
|
|
color: rgb(23, 162, 184);
|
|
}
|
|
|
|
.badge-danger {
|
|
background-color: rgba(220, 53, 69, 0.2);
|
|
color: rgb(220, 53, 69);
|
|
}
|
|
|
|
.badge-success {
|
|
background-color: rgba(40, 167, 69, 0.2);
|
|
color: rgb(40, 167, 69);
|
|
}
|
|
|
|
.badge-secondary {
|
|
background-color: rgba(108, 117, 125, 0.2);
|
|
color: rgb(108, 117, 125);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--primary-dark);
|
|
border-color: var(--primary-dark);
|
|
}
|
|
|
|
.btn-circle {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.action-buttons {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.add-user-btn {
|
|
border-radius: 50px;
|
|
padding: 8px 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dataTables_wrapper .dataTables_paginate .paginate_button {
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
|
|
background: var(--primary-color) !important;
|
|
color: white !important;
|
|
border: none;
|
|
}
|
|
</style>
|
|
@stop
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h6 class="m-0 font-weight-bold text-white">
|
|
<i class="fas fa-users mr-2"></i>User
|
|
</h6>
|
|
<!-- <a href="#" class="btn btn-primary add-user-btn shadow-sm">
|
|
<i class="fas fa-user-plus mr-2"></i>Tambah Pengguna
|
|
</a> -->
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table class="table table-hover" id="DataTable" width="100%" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th width="5%">#</th>
|
|
<th>Nama User</th>
|
|
<th>Email</th>
|
|
<th>Role</th>
|
|
<th width="8%" class="text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($users as $index => $row)
|
|
<tr>
|
|
<td>{{ $index + 1 }}</td>
|
|
<td class="font-weight-bold">{{ $row->name }}</td>
|
|
<td>{{ $row->email }}</td>
|
|
<!-- <td>{{ $row->alamat ?? '-' }}</td>
|
|
<td>{{ $row->telepon ?? '-' }}</td>
|
|
<td>{{ $row->keterangan ?? '-' }}</td> -->
|
|
<td>
|
|
@if($row->role == 'mahasiswa')
|
|
@if($row->mahasiswa)
|
|
<span class="badge badge-info">
|
|
<i class="fas fa-user-graduate"></i>
|
|
{{ $row->mahasiswa->nim }} - {{ $row->mahasiswa->program_studi }}
|
|
</span>
|
|
@else
|
|
<span class="badge badge-warning">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
Data Tidak Lengkap
|
|
</span>
|
|
@endif
|
|
@elseif($row->role == 'admin')
|
|
<span class="badge badge-danger">
|
|
<i class="fas fa-user-shield mr-1"></i> Admin
|
|
</span>
|
|
@elseif($row->role == 'karyawan')
|
|
<span class="badge badge-success">
|
|
<i class="fas fa-chalkboard-teacher mr-1"></i> Karyawan
|
|
</span>
|
|
@else
|
|
<span class="badge badge-secondary">
|
|
<i class="fas fa-user mr-1"></i> {{ $row->role }}
|
|
</span>
|
|
@endif
|
|
</td>
|
|
<td class="text-center action-buttons">
|
|
<!-- @if($row->role == 'mahasiswa' && !$row->mahasiswa)
|
|
<a href="{{ route('user.edit', $row->id) }}"
|
|
class="btn btn-circle btn-warning mr-2"
|
|
title="Lengkapi Data Mahasiswa">
|
|
<i class="fas fa-pencil-alt"></i>
|
|
</a>
|
|
@endif -->
|
|
|
|
<button type="button"
|
|
class="btn btn-circle btn-danger hapus"
|
|
data-id="{{ $row->id }}"
|
|
title="Hapus Pengguna">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
|
|
<form id="deleteForm-{{ $row->id }}"
|
|
action="{{ route('user.destroy', $row->id) }}"
|
|
method="POST"
|
|
style="display: none;">
|
|
@csrf
|
|
@method('DELETE')
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@stop
|
|
|
|
@section('js')
|
|
<!-- Page level plugins -->
|
|
<script src="{{ asset('vendor/datatables/jquery.dataTables.min.js') }}"></script>
|
|
<script src="{{ asset('vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>
|
|
<script src="{{ asset('js/sweetalert.js')}}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Inisialisasi DataTable
|
|
$('#DataTable').DataTable({
|
|
"language": {
|
|
"url": "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Indonesian.json",
|
|
"search": "Cari:",
|
|
"lengthMenu": "Tampilkan _MENU_ data per halaman",
|
|
"info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
|
"paginate": {
|
|
"first": "Pertama",
|
|
"last": "Terakhir",
|
|
"next": "Selanjutnya",
|
|
"previous": "Sebelumnya"
|
|
}
|
|
},
|
|
"dom": '<"top"<"d-flex justify-content-between align-items-center"f<"ms-3"l>>>rt<"bottom"ip><"clear">',
|
|
"pageLength": 10,
|
|
"columnDefs": [
|
|
{ "orderable": false, "targets": [4] }
|
|
]
|
|
});
|
|
|
|
// Toggle Form Mahasiswa
|
|
const roleSelect = document.getElementById('roleSelect');
|
|
const mahasiswaFields = document.getElementById('mahasiswaFields');
|
|
|
|
function toggleMahasiswaFields() {
|
|
if (roleSelect && mahasiswaFields) {
|
|
if (roleSelect.value === 'mahasiswa') {
|
|
mahasiswaFields.style.display = 'block';
|
|
mahasiswaFields.querySelectorAll('input').forEach(input => input.required = true);
|
|
} else {
|
|
mahasiswaFields.style.display = 'none';
|
|
mahasiswaFields.querySelectorAll('input').forEach(input => input.required = false);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (roleSelect) {
|
|
toggleMahasiswaFields();
|
|
roleSelect.addEventListener('change', toggleMahasiswaFields);
|
|
}
|
|
|
|
// Konfirmasi Delete dengan SweetAlert
|
|
$(document).on('click', '.hapus', function(e) {
|
|
e.preventDefault();
|
|
const userId = $(this).data('id');
|
|
const form = $(`#deleteForm-${userId}`);
|
|
|
|
Swal.fire({
|
|
title: 'Konfirmasi Hapus',
|
|
text: "Data yang dihapus tidak dapat dikembalikan!",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#007a99',
|
|
cancelButtonColor: '#6c757d',
|
|
confirmButtonText: 'Ya, Hapus!',
|
|
cancelButtonText: 'Batal'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
form.submit();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@stop
|