%PDF-
%PDF-
Mini Shell
Mini Shell
<% include ../partials/header %>
<% include ../partials/sidebar %>
<style>
.quick-btn { background: #EEEEEE;
box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
color: #444444;
display: inline-block;
height: 80px;
margin: 10px;
padding-top: 16px;
text-align: center;
text-decoration: none;
width: 90px;
position: relative;
}
.quick-btn span {
display: block;
}
.quick-btn .label {
position: absolute;
right: -5px;
top: -5px;
}
.quick-btn:hover {
text-decoration: none;
color: #fff;
background-color: #4d7589;
box-shadow: 3px 4px 1px #ccc;
}
.quick-btn.small {
width: 40px;
height: 30px;
padding-top: 6px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<!-- Breadcrumb starts-->
<div class="content-header-left col-md-6 col-12 mb-2">
<h3 class="content-header-title">Role Management</h3>
<div class="row breadcrumbs-top">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Dashboard</a>
</li>
<li class="breadcrumb-item active">Role Management
</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<div class="text-center">
<a class="quick-btn text-red" href="#" data-toggle="modal" data-target="#role">
<i class="la la-plus fa-2x"></i>
<span>New Role</span>
</a>
</div>
<div class="content-body">
<!-- Zero configuration table -->
<section id="configuration">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Role Management</h4>
<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
<li><a data-action="close"><i class="ft-x"></i></a></li>
</ul>
</div>
</div>
<div class="card-content collapse show">
<div class="card-body card-dashboard">
<table class="table table-striped table-bordered zero-configuration">
<thead>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Description</th>
<th>Give Roles Right</th>
<th>View</th>
<!-- <th>Edit Role Right</th> -->
<th>Action</th>
</tr>
</thead>
<tbody>
<% roles.forEach(function(role, index){ %>
<tr>
<td>
<%= (index + 1) %>
</td>
<td>
<%= role.name %>
</td>
<td>
<%= role.description %>
</td>
<td>
<a href="/roles/rights/<%= role.id %>">
<button type="button" title="Give Roles Right" class="btn btn-icon btn-warning btn-sm mr-1"><i
class="la la-cogs"></i></button>
</a>
</td>
<td>
<button title="View Roles Right" data-toggle="modal" onclick="getRoleRight(this.value)"
value="<%= role.id %>" data-target="#viewRoleRight" class="btn btn-icon btn-warning btn-sm mr-1">
<i class="la la-eye"></i>
</button>
</td>
<!-- <td>
<button title="Edit Roles Right" data-toggle="modal" roleId="<%= role.id %>" roleName="<%= role.name %>"
description="<%= role.description %>" data-target="#editRole" class="btn btn-icon btn-warning btn-sm mr-1">
<i class="la la-edit"></i>
</button>
</td> -->
<td>
<button title="Edit Role" data-toggle="modal" roleId="<%= role.id %>" roleName="<%= role.name %>"
description="<%= role.description %>" data-target="#editRole" class="btn btn-icon btn-warning btn-sm mr-1">
<i class="la la-pencil"></i>
</button>
<button type="button" title="Delete" onclick="deleteRole(this.value)" value="<%= role.id %>"
class="btn btn-icon btn-danger btn-sm mr-1"><i class="la la-close"></i></button>
</td>
</tr>
<% }); %>
</tbody>
<tfoot>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Description</th>
<th>Give Roles Right</th>
<th>View</th>
<!-- <th>Edit Role Right</th> -->
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/ Zero configuration table -->
</div>
</div>
</div>
</div>
<div class="modal fade text-left" id="role" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-success">
<h3 class="modal-title" id="myModalLabel35"> Create New Role</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="/roles">
<div class="modal-body">
<fieldset class="form-group floating-label-form-group">
<label for="name">Role Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Role Name">
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="title1">Description</label>
<textarea class="form-control" name="description" id="description" rows="3" placeholder="Description"></textarea>
</fieldset>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Save">
</div>
</form>
</div>
</div>
</div>
<div class="modal fade text-left" id="editRole" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-success">
<h3 class="modal-title" id="myModalLabel35"> Update Role</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="/roles/update/role" id="roleForm">
<input type="hidden" name="roleId" id="roleId" value="" />
<div class="modal-body">
<fieldset class="form-group floating-label-form-group">
<label for="name">Role Name</label>
<input type="text" class="form-control" name="name" id="roleName" placeholder="Enter Role Name">
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="title1">Description</label>
<textarea class="form-control" name="description" id="roleDescription" rows="3" placeholder="Description"></textarea>
</fieldset>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Save">
</div>
</form>
</div>
</div>
</div>
<div class="modal fade text-left" id="viewRoleRight" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-success">
<h3 class="modal-title" id="myModalLabel35"> View Role Right</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-content collapse show">
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>S/N</th>
<th>canCreate</th>
<th>canView</th>
<th>canEdit</th>
<th>canDelete</th>
</tr>
</thead>
<tbody id="showRoles">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/footer %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
<script>
$('#editRole').on('show.bs.modal', function (e) {
var opener = e.relatedTarget; // Button that triggered the modal
var roleId = $(opener).attr('roleId'); // Extract info from data-* attributes
var roleName = $(opener).attr('roleName');
var roleDesc = $(opener).attr('description');
$('#roleForm').find('[name="roleId"]').val(roleId);
$('#roleForm').find('[name="name"]').val(roleName);
$('#roleForm').find('[name="description"]').val(roleDesc);
});
function deleteRole(id) {
$.confirm({
title: '<div style="color:red">Confirm!</div>',
content: 'Are you sure you want to delete permanently?',
buttons: {
confirm: function () {
delete_role(id);
},
cancel: function () {
$.alert('Canceled!');
},
}
});
}
var delete_role = function (id) {
$.ajax({
type: "POST", // Post / Get method
url: "/roles/delete/role", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: { id: id }, //Form variables
success: function (response) {
if (response === "success") {
$.confirm({
title: '<div style="color:green">Success</div>',
content: 'Role deleted Successfully',
buttons: {
ok: function () {
location.reload(true)
},
}
});
}
},
error: function (xhr, ajaxOptions, thrownError) {
$.alert('Could not delete');
}
});
}
function getRoleRight(id) {
$.ajax({
type: "POST", // Post / Get method
url: "/roles/get/role/right", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: { roleId: id }, //Form variables
success: function (data) {
$('#showRoles').html('');
$.each(JSON.parse(data), function (key, value) {
var tr = (
'<tr>' +
'<td>' + (key + 1) + '</td>' +
'<td>' + value.canCreate +'</td>' +
'<td>' + value.canView + '</td>' +
'<td>' + value.canEdit + '</td>' +
'<td>' + value.canDelete + '</td>' +
'</tr>'
);
$('#showRoles').append(tr);
});
}
})
}
</script>
Zerion Mini Shell 1.0