546 lines
19 KiB
PHP
546 lines
19 KiB
PHP
@extends('theme::user.layouts.app')
|
|
|
|
|
|
@section('content')
|
|
|
|
<div class="user-management-page">
|
|
<div class="title-wrapper">
|
|
<h2 class="page-title">{{ __("User") }}</h2>
|
|
<button type="button" class="btn blue-btn" data-bs-toggle="modal" data-bs-target="#newUserModal">{{ __("New user") }}</button>
|
|
</div>
|
|
<div class="custom-nav-tabs">
|
|
<ul class="nav nav-tabs nav-justified">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#userList">
|
|
<img src="{{ asset('themes/tailwind/images/user-icon.png') }}">
|
|
{{ __("User List") }}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#userAccessRight">
|
|
<img src="{{ asset('themes/tailwind/images/security-safe.png') }}">
|
|
{{ __("User Access Right") }}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#accessLog">
|
|
<img src="{{ asset('themes/tailwind/images/access-log-icon.png') }}">
|
|
{{ __("Access Log") }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="userList">
|
|
<div class="table-responsive">
|
|
<table class="table custom-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{{ __("First name") }}</th>
|
|
<th scope="col">{{ __("Last name") }}</th>
|
|
<th scope="col">{{ __("User email") }}</th>
|
|
<th scope="col">{{ __("User role") }}</th>
|
|
<th scope="col">{{ __("Status") }}</th>
|
|
<th scope="col">{{ __("Action") }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($company_users as $user)
|
|
<tr>
|
|
<td>{{ $user->first_name }}</td>
|
|
<td>{{ $user->last_name }}</td>
|
|
<td>{{ $user->email }}</td>
|
|
<td>{{ $user->userRole->display_name }}</td>
|
|
<td><span class="green-text">{{ $user->status }}</span></td>
|
|
<td>
|
|
<input type="hidden" id="user-{{ $user->id }}-details" value="{{ json_encode($user) }}" >
|
|
<div class="table-actions">
|
|
<!-- <a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#userDetailsModal">View</a>
|
|
<span class="action-separator">|</span> -->
|
|
<a href="#" class="action-btn text-underline sky-blue-text btn-edit-user" data-user-id="{{ $user->id }}" data-bs-toggle="modal" data-bs-target="#userDetailsModal" >{{ __("Edit") }}</a>
|
|
<span class="action-separator">|</span>
|
|
<a href="#" class="action-btn text-underline red-text btn-delete-user" data-user-id="{{ $user->id }}" >{{ __("Archive") }}</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="userAccessRight">
|
|
<div class="table-responsive">
|
|
<table class="table custom-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{{ __("Access right") }}</th>
|
|
@foreach($roles as $role)
|
|
<th scope="col">{{ $role->display_name }}</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($permission_group as $group)
|
|
<tr style="background: #F4F7FA;">
|
|
<td colspan="5" class="fw-600">{{ $group->name }}</td>
|
|
</tr>
|
|
@foreach($group->permissions as $permission)
|
|
<tr>
|
|
<td>{{ $permission->display_name }}</td>
|
|
@foreach($roles as $role)
|
|
<td>
|
|
<div class="custom-radio-checkbox">
|
|
<input type="checkbox" id="checkbox-{{ $permission->id }}-{{ $role->id }}" class="update_permission" value="" data-permission-id="{{ $permission->id }}" data-role-id="{{ $role->id }}" {{ checkRoleHasPermission($permission->id, $role->id) ? 'checked' : '' }} >
|
|
<label for="checkbox-{{ $permission->id }}-{{ $role->id }}">
|
|
</label>
|
|
</div>
|
|
</td>
|
|
@endforeach
|
|
</tr>
|
|
@endforeach
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="accessLog">
|
|
<div class="table-responsive">
|
|
<table class="table custom-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{{ __("User email") }}</th>
|
|
<th scope="col">{{ __("Date") }}</th>
|
|
<th scope="col">{{ __("Time") }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($user_logs as $log)
|
|
<tr>
|
|
<td>{{ $log->description }}</td>
|
|
<td>{{ explode(' ', $log->created_at)[0] }}</td>
|
|
<td>{{ explode(' ', $log->created_at)[1] }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Add User Modal --}}
|
|
<div class="modal fade custom-modal style2" id="newUserModal" tabindex="-1" aria-labelledby="newUserModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered">
|
|
<div class="modal-content mx-auto">
|
|
<div class="modal-body p-0">
|
|
<p class="modal-title">{{ __("New User") }}</p>
|
|
<div id="create_user_error" ></div>
|
|
<form id="form_create_user" action="{{ route('wave.management.create.user') }}" method="POST" class="theme-form" >
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("First name") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" name="first_name" id="create_first_name" value="" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("New Password") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<div class="password-wrapper">
|
|
<input type="password" class="form-control" name="password" id="create_password" value="" autocomplete="off" required>
|
|
<img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-md-6">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">Current Password</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="password" class="form-control" name="create_password" id="create_password" value="">
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Last name") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" name="last_name" id="create_last_name" value="" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Confirm Password") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<div class="password-wrapper">
|
|
<input type="password" class="form-control" name="confirm_password" id="create_confirm_password" value="" required>
|
|
<img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Phone") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" name="phone" id="create_phone" value="" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Email") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="email" class="form-control" name="email" id="create_email" value="" autocomplete="off" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Role") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<select class="w-100" name="role_id" id="create_role" required>
|
|
<option value="" selected>-- {{ __("Select Role") }} --</option>
|
|
@foreach($roles as $role)
|
|
<option value="{{ $role->id }}" >{{ $role->display_name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Status") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<select class="w-100" name="status" id="create_status" required>
|
|
<option value="active" selected>{{ __("Active") }}</option>
|
|
<option value="inactive">{{ __("Inactive") }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center justify-content-center">
|
|
<button type="submit" class="btn blue-btn mx-3">{{ __("Save") }}</button>
|
|
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="{{ route('wave.management.delete.user') }}" id="user_delete_form" >
|
|
<input type="hidden" name="user_id" id="delete_user_id" value="" >
|
|
</form>
|
|
|
|
{{-- User Detail Modal --}}
|
|
<div class="modal fade custom-modal style2" id="userDetailsModal" tabindex="-1" aria-labelledby="userDetailsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content mx-auto">
|
|
<div class="modal-body p-0">
|
|
<p class="modal-title">{{ __("User Detail") }}</p>
|
|
<div id="update_user_error" ></div>
|
|
<form action="{{ route('wave.management.update.user') }}" id="update_user_form" class="theme-form">
|
|
<input type="hidden" name="user_id" id="update_user_id" value="" >
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("First name") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" value="" name="first_name" id="update_first_name" required>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Last name") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" value="" name="last_name" id="update_last_name" required>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Phone") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="number" class="form-control" value="" name="phone" id="update_phone" required>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Email") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="email" class="form-control" value="" name="email" id="update_email" required>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Password") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="password" class="form-control" value="" name="password" id="update_password">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Confirm Password") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="password" class="form-control" value="" name="confirm_password" id="update_confirm_password">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Role") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<select class="w-100" name="role_id" id="update_role_id" required>
|
|
<option value="" selected>-- {{ __("Select Role") }} --</option>
|
|
@foreach($roles as $role)
|
|
<option value="{{ $role->id }}" >{{ $role->display_name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-auto">
|
|
<label class="col-form-label">{{ __("Status") }}</label>
|
|
</div>
|
|
<div class="col">
|
|
<select class="w-100" name="status" id="update_status" required>
|
|
<option value="active" selected>{{ __("Active") }}</option>
|
|
<option value="inactive">{{ __("Inactive") }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center justify-content-center">
|
|
<button type="submit" class="btn blue-btn mx-3">{{ __("Update") }}</button>
|
|
<button type="button" class="btn red-btn" data-bs-dismiss="modal">{{ __("Back") }}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="add_permission_role_url" value="{{ route('user.role.add-permission') }}" >
|
|
<input type="hidden" id="remove_permission_role_url" value="{{ route('user.role.remove-permission') }}" >
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
$(function() {
|
|
$.ajaxSetup({
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
}
|
|
});
|
|
var add_permission_role_url = $('#add_permission_role_url').val();
|
|
var remove_permission_role_url = $('#remove_permission_role_url').val();
|
|
$('.password-hide-show').click(function() {
|
|
var type = $(this).parent().find('input').attr('type');
|
|
|
|
if (type == 'password') {
|
|
$(this).parent().find('input').attr('type', 'text');
|
|
}
|
|
else {
|
|
$(this).parent().find('input').attr('type', 'password');
|
|
}
|
|
});
|
|
|
|
$(document).on('submit', '#form_create_user', function(e){
|
|
e.preventDefault();
|
|
$('#create_user_error').html('');
|
|
if ($('#create_password').val() != $('#create_confirm_password').val()) {
|
|
$('#create_user_error').html('<div class="alert alert-danger" role="alert">Password didint match!</div>');
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: $(this).attr('action'),
|
|
type: 'post',
|
|
data: $(this).serialize(),
|
|
dataType:'json',
|
|
success:function(response) {
|
|
console.log('response', response);
|
|
if (response.success) {
|
|
$('#create_user_error').html(`<div class="alert alert-success" role="alert">${response.message}</div>`);
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 2000);
|
|
}
|
|
},
|
|
error:function(err) {
|
|
var error = err.responseJSON;
|
|
$('#create_user_error').html(`<div class="alert alert-danger" role="alert">${error.message}</div>`);
|
|
}
|
|
});
|
|
});
|
|
|
|
$(document).on('click', '.btn-edit-user', function(e){
|
|
e.preventDefault();
|
|
let user_id = $(this).attr('data-user-id');
|
|
let user_data = $('#user-' + user_id + '-details').val();
|
|
user_data = JSON.parse(user_data);
|
|
|
|
$('#update_user_error').html('');
|
|
$('#update_first_name').val(user_data.first_name);
|
|
$('#update_last_name').val(user_data.last_name);
|
|
$('#update_phone').val(user_data.phone);
|
|
$('#update_email').val(user_data.email);
|
|
$('#update_role_id').val(user_data.role_id);
|
|
$('#update_status').val(user_data.status);
|
|
$('#update_user_id').val(user_data.id);
|
|
});
|
|
|
|
$(document).on('submit', '#update_user_form', function(e){
|
|
e.preventDefault();
|
|
let password = $('#update_password').val();
|
|
let confirm_password = $('#update_confirm_password').val();
|
|
|
|
if (password != '' && confirm_password != '') {
|
|
if (passowrd != confirm_passowrd) {
|
|
$('#update_user_error').html(`<div class="alert alert-danger" role="alert">Password didint match!</div>`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
$.ajax({
|
|
url: $(this).attr('action'),
|
|
type: 'post',
|
|
data: $(this).serialize(),
|
|
dataType:'json',
|
|
success:function(response) {
|
|
if (response.success) {
|
|
$('#update_user_error').html(`<div class="alert alert-success" role="alert">${response.message}</div>`);
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 2000);
|
|
} else {
|
|
$('#update_user_error').html(`<div class="alert alert-danger" role="alert">${response.message}</div>`);
|
|
}
|
|
},
|
|
error:function(err) {
|
|
var error = err.responseJSON;
|
|
$('#update_user_error').html(`<div class="alert alert-danger" role="alert">${error.message}</div>`);
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
$(document).on('click', '.btn-delete-user', function(e){
|
|
e.preventDefault();
|
|
let user_id = $(this).attr('data-user-id');
|
|
|
|
$('#delete_user_id').val(user_id);
|
|
|
|
Swal.fire({
|
|
title: 'Are you sure?',
|
|
text: "You won't be able to revert this!",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#3085d6',
|
|
cancelButtonColor: '#d33',
|
|
confirmButtonText: 'Yes, delete it!'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$.ajax({
|
|
url: $('#user_delete_form').attr('action'),
|
|
type: 'post',
|
|
data: $('#user_delete_form').serialize(),
|
|
dataType:'json',
|
|
success:function(response) {
|
|
if (response.success) {
|
|
Swal.fire(
|
|
'Deleted!',
|
|
response.message,
|
|
'success'
|
|
);
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 2000);
|
|
}
|
|
},
|
|
error:function(err) {
|
|
var error = err.responseJSON;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
$(document).on('click', '.update_permission', function(){
|
|
var permission_id = $(this).attr('data-permission-id');
|
|
var role_id = $(this).attr('data-role-id');
|
|
|
|
console.log('permission_id', permission_id);
|
|
console.log('role_id', role_id);
|
|
|
|
if ($(this).prop('checked')) {
|
|
$.ajax({
|
|
url: add_permission_role_url,
|
|
type: 'post',
|
|
data: {
|
|
permission_id: permission_id,
|
|
role_id: role_id,
|
|
},
|
|
dataType:'json',
|
|
success:function(response) {
|
|
}
|
|
});
|
|
} else {
|
|
$.ajax({
|
|
url: remove_permission_role_url,
|
|
type: 'post',
|
|
data: {
|
|
permission_id: permission_id,
|
|
role_id: role_id,
|
|
},
|
|
dataType:'json',
|
|
success:function(response) {
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|