????
Your IP : 216.73.216.224
<% layout('../layouts/userLayout.eta') %>
<style>
@media (min-width: 768px) {
#task-dialog .list-group {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media (min-width: 992px) {
#task-dialog .list-group {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
</style>
<div class="content">
<div class="page-inner">
<div class="page-header">
<h4 class="page-title">Nhóm quyền tài khoản</h4>
<ul class="breadcrumbs">
<li class="nav-home"><a href="/"><i class="flaticon-home"></i></a></li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-home">Quản trị</li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-item">Nhóm quyền tài khoản</li>
</ul>
</div>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<table id="role-table" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Mã quyền</th>
<th>Tên quyền</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<form id='role-form' action="" method="POST">
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-sm btn-primary">
<span class="btn-label"><i class="fas fa-save"></i></span> Lưu
</button>
<button id="del-btn" type="button" class="btn btn-sm btn-danger" data-bind="visible: role.CanDelete">
<span class="btn-label"><i class="fas fa-trash-alt"></i></span> Xóa
</button>
<button type="button" class="btn btn-sm btn-success"
data-bind="visible: role.Id, events: { click: reset}">
<span class="btn-label"><i class="fas fa-plus-square"></i></span> Tạo mới
</button>
<button type="button" class="btn btn-sm btn-secondary"
data-bind="visible: role.Id, events: { click: setTask }">
<span class="btn-label"><i class="fas fa-users-cog"></i></span> Phân quyền
</button>
</div>
<input type="hidden" name="id" data-bind="value: role.Id">
<div class="form-group form-inline">
<div class="col-md-3 col-form-label">Mã quyền</div>
<div class="col-md-9 p-0">
<input class="k-textbox form-control" name="code" placeholder="Nhập mã quyền"
data-bind="value: role.Code, readonly: role.Id" title="Mã quyền không được để trống" required>
<span class="k-invalid-msg" data-for="code"></span>
</div>
</div>
<div class="form-group form-inline">
<div class="col-md-3 col-form-label">Tên quyền</div>
<div class="col-md-9 p-0">
<input class="k-textbox form-control" name="name" placeholder="Nhập tên quyền"
data-bind="value: role.Name" title="Tên quyền không được để trống" required>
<span class="k-invalid-msg" data-for="name"></span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="task-dialog">
<div data-role="listview" class="list-group" data-template="task-tmpl" data-bind="source: tasks"></div>
</div>
<script id="task-tmpl" type="text/x-kendo-template">
<li class="list-group-item justify-content-between">
<span data-bind="text: Name"></span>
<label class="custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="task" data-bind="value:Id,checked:roleTask">
<span class="custom-control-label"></span>
</label>
</li>
</script>
<script type="text/javascript">
$(function () {
// Bảng nhóm người dùng
var roleTable = $('#role-table').DataTable({
ajax: {
url: '/quantri/quyentaikhoan/json',
dataType: 'json'
},
searching: false,
ordering: false,
select: { style: 'single' },
language: { url: '/js/plugin/datatables/Vietnamese.json' },
columns: [
{ data: 'Code', className: 'text-right' },
{ data: 'Name', className: 'text-justify' }
],
rowId: 'Id'
});
// View model
var roleVM = kendo.observable({
role: {},
roleTask: [],
tasks: new kendo.data.DataSource({
transport: {
read: {
url: '/quantri/quyentaikhoan/chucnang',
dataType: 'json'
}
},
schema: {
data: 'data'
}
}),
reset: function () {
this.set('role', {});
this.set('roleTask', []);
},
setTask: function () {
var tasks = this.get('role.Tasks');
this.set('roleTask', tasks ? tasks.split(',') : []);
$('#task-dialog').data('kendoDialog').open();
}
})
kendo.bind($('#role-form, #task-dialog'), roleVM);
// Xử lý sự kiện
roleTable.on('select', function (e, dt, type, indexes) {
var data = dt.row(indexes[0]).data();
roleVM.set('role', data);
});
roleTable.on('deselect', function (e, dt, type, indexes) {
roleVM.reset();
});
// Xóa tài khoản
$('#del-btn').on('click', function (e) {
Swal.fire({
title: 'Xác nhận',
text: `Bạn có muốn xóa quyền [${roleVM.get('role.Code')}]?`,
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#cd201f',
cancelButtonColor: '#467fcf',
confirmButtonText: 'Xóa',
cancelButtonText: 'Đóng lại'
}).then(function (result) {
if (result.value) {
$.ajax({
url: '',
method: 'DELETE',
data: { id: roleVM.get('role.Id') },
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
success: function (data, textStatus, jqXHR) {
Swal.fire({
text: `Đã xóa quyền [${roleVM.get('role.Code')}]`,
type: 'info',
showConfirmButton: false,
timer: 1500
}).then(function () {
roleVM.reset();
roleTable.ajax.reload(null, false)
})
},
error: function (jqXHR, textStatus, err) {
Swal.fire({
text: jqXHR.responseText,
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
})
}
})
});
var roleValidator = $('#role-form').kendoValidator().data("kendoValidator");
// Lưu quyền
$('#role-form').on('submit', function (e) {
e.preventDefault();
e.stopPropagation();
if (roleValidator.validate()) {
$.ajax({
url: '',
method: roleVM.get('role.Id') ? 'PUT' : 'POST',
data: $('#role-form').serialize(),
headers: { 'X-XSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
success: function (data, text, jqXHR) {
roleVM.reset();
roleTable.ajax.reload(null, false);
},
error: function (jqXHR, text, err) {
Swal.fire({
text: jqXHR.responseText,
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
})
}
});
// Phân quyền
$('#task-dialog').kendoDialog({
width: '100%',
height: '100%',
title: 'Phân quyền cho tài khoản',
modal: true,
closable: true,
visible: false,
buttonLayout: 'normal',
animation: {
open: { duration: 500 },
close: { duration: 500 }
},
actions: [
{ text: 'Đóng lại' },
{
text: 'Lưu quyền',
primary: true,
action: function (e) {
$.ajax({
url: '/quantri/quyentaikhoan/chucnang',
method: 'POST',
headers: { 'X-XSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
// dataType: 'json',
data: {
id: roleVM.get('role.Id'),
task: roleVM.get('roleTask').toJSON()
},
success: function (data, text, jqXHR) {
roleTable.ajax.reload(null, false)
},
error: function (jqXHR, text, err) {
Swal.fire({
text: jqXHR.responseText,
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
})
}
}
]
});
})
</script>