252 lines
14 KiB
PHP
252 lines
14 KiB
PHP
@extends('layout.app')
|
|
@section('content')
|
|
@include('sweetalert::alert')
|
|
<div class="container">
|
|
<div class="page-inner">
|
|
<div class="page-header">
|
|
<h3 class="fw-bold mb-3">Data Pengguna</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<a href="#" data-bs-toggle="modal" data-bs-target="#addModal"
|
|
class="btn btn-primary btn-icon-split mb-3">
|
|
<span class="icon text-white-50"><i class="fas fa-plus"></i></span>
|
|
<span class="text">Tambah Pengguna</span>
|
|
</a>
|
|
<table id="basic-datatables" class="display table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 5%;" class="text-center">No</th>
|
|
<th style="width: 25%;">Nama</th>
|
|
<th style="width: 20%;">Username</th>
|
|
<th style="width: 20%;">Email</th>
|
|
<th style="width: 20%;" class="text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th style="width: 5%;" class="text-center">No</th>
|
|
<th style="width: 25%;">Nama</th>
|
|
<th style="width: 20%;">Username</th>
|
|
<th style="width: 20%;">Email</th>
|
|
<th style="width: 20%;" class="text-center">Aksi</th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
@foreach ($users as $item)
|
|
<tr>
|
|
<td class="text-center">{{ $loop->iteration }}</td>
|
|
<td>{{ $item->fullname }}</td>
|
|
<td>{{ $item->username }}</td>
|
|
<td>{{ $item->email }}</td>
|
|
<td class="text-center">
|
|
<a href="#" data-bs-toggle="modal" data-bs-target="#updateModal"
|
|
class="btn btn-warning mb-3"
|
|
onclick="updateData({{ $item }})">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
<a class="btn btn-danger mb-3" href="#" data-bs-toggle="modal"
|
|
data-bs-target="#deleteModal"
|
|
onclick="deleteData({{ $item->id }})">
|
|
<i class="fas fa-trash"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Modal-->
|
|
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Tambah Pengguna</h5>
|
|
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="{{ route('users.store') }}" method="POST" id="addForm">
|
|
@csrf
|
|
<div class="form-group">
|
|
<label for="addFullName" class="form-label" style="font-weight: bold">Nama Lengkap</label>
|
|
<input type="text" class="form-control form-control-user" id="addFullName"
|
|
placeholder="Masukkan nama lengkap" name="fullname" value="{{ old('fullname') }}" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="addUsername" class="form-label" style="font-weight: bold">Username</label>
|
|
<input type="text" class="form-control form-control-user" id="addUsername"
|
|
placeholder="Masukkan username" name="username" value="{{ old('username') }}" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="addEmail" class="form-label" style="font-weight: bold">Email</label>
|
|
<input type="email" class="form-control form-control-user" id="addEmail"
|
|
placeholder="Masukkan email" name="email" value="{{ old('email') }}" required>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-sm-6 mb-3 mb-sm-0">
|
|
<label for="addPassword" class="form-label" style="font-weight: bold">Password</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control form-control-user" id="addPassword"
|
|
placeholder="Masukkan password" name="password" value="{{ old('password') }}" required>
|
|
<button class="btn btn-outline-secondary" type="button"
|
|
onclick="togglePassword('addPassword', 'togglePasswordIcon1')">
|
|
<i id="togglePasswordIcon1" class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label for="addRepeatPassword" class="form-label" style="font-weight: bold">Konfirmasi
|
|
Password</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control form-control-user" id="addRepeatPassword"
|
|
placeholder="Ulangi password" name="password_confirmation" value="{{ old('password_confirmation') }}" required>
|
|
<button class="btn btn-outline-secondary" type="button"
|
|
onclick="togglePassword('addRepeatPassword', 'togglePasswordIcon2')">
|
|
<i id="togglePasswordIcon2" class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-danger" type="button" data-bs-dismiss="modal">Batal</button>
|
|
<button class="btn btn-primary" type="submit" form="addForm">Tambah</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Update Modal -->
|
|
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Update Pengguna</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="" method="POST" id="updateForm">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="mb-3">
|
|
<label for="updateFullName" class="form-label" style="font-weight: bold">Nama Lengkap</label>
|
|
<input type="text" class="form-control" id="updateFullName"
|
|
placeholder="Masukkan nama lengkap" name="fullname" value="{{ old('fullname') }}"
|
|
required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="updateUsername" class="form-label" style="font-weight: bold">Username</label>
|
|
<input type="text" class="form-control" id="updateUsername"
|
|
placeholder="Masukkan username" name="username" value="{{ old('username') }}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="updateEmail" class="form-label" style="font-weight: bold">Email</label>
|
|
<input type="email" class="form-control" id="updateEmail" placeholder="Masukkan email"
|
|
name="email" value="{{ old('email') }}" required>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6 mb-3">
|
|
<label for="updatePassword" class="form-label" style="font-weight: bold">Password</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="updatePassword"
|
|
placeholder="Masukkan password" name="password">
|
|
<button class="btn btn-outline-secondary" type="button"
|
|
onclick="togglePassword('updatePassword', 'toggleUpdatePasswordIcon1')">
|
|
<i id="toggleUpdatePasswordIcon1" class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 mb-3">
|
|
<label for="updateRepeatPassword" class="form-label" style="font-weight: bold">Konfirmasi
|
|
Password</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="updateRepeatPassword"
|
|
placeholder="Ulangi password" name="password_confirmation">
|
|
<button class="btn btn-outline-secondary" type="button"
|
|
onclick="togglePassword('updateRepeatPassword', 'toggleUpdatePasswordIcon2')">
|
|
<i id="toggleUpdatePasswordIcon2" class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-primary" form="updateForm">Edit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Delete Modal -->
|
|
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteModalLabel">Hapus Pengguna</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="" method="POST" id="deleteForm">
|
|
@csrf
|
|
@method('DELETE')
|
|
Apakah anda yakin menghapus pengguna ini?
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-danger" form="deleteForm">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script>
|
|
function togglePassword(inputId, iconId) {
|
|
let passwordField = document.getElementById(inputId);
|
|
let icon = document.getElementById(iconId);
|
|
|
|
if (passwordField.type === "password") {
|
|
passwordField.type = "text";
|
|
icon.classList.remove("fa-eye");
|
|
icon.classList.add("fa-eye-slash");
|
|
} else {
|
|
passwordField.type = "password";
|
|
icon.classList.remove("fa-eye-slash");
|
|
icon.classList.add("fa-eye");
|
|
}
|
|
}
|
|
$(document).ready(function() {
|
|
$("#basic-datatables").DataTable({});
|
|
});
|
|
|
|
function updateData(data) {
|
|
const form = document.getElementById('updateForm');
|
|
form.action = "{{ route('users.update', ':id') }}".replace(':id', data.id);
|
|
form.querySelector('#updateFullName').value = data.fullname;
|
|
form.querySelector('#updateUsername').value = data.username;
|
|
form.querySelector('#updateEmail').value = data.email;
|
|
}
|
|
|
|
function deleteData(id) {
|
|
const form = document.getElementById('deleteForm');
|
|
form.action = "{{ route('users.destroy', ':id') }}".replace(':id', id);
|
|
}
|
|
</script>
|
|
@endsection
|