Chillweb/numstation-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
benjibennn
2023-12-22 12:35:55 +08:00
commit 9f89a732d6
872 changed files with 156291 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

545
resources/views/themes/tailwind/user/user-management.blade.php Normal file
View File

@@ -0,0 +1,545 @@
@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