????
Your IP : 216.73.216.224
<% layout('../layouts/userLayout.eta') %>
<div class="content">
<div class="page-inner">
<div class="page-header">
<h4 class="page-title">Quản lý người dùng</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-item"><a href="/main">Giao diện chính</a></li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-item"><a href="#">Người dùng</a></li>
</ul>
</div>
<div class="row">
<div class="col-lg-8 col-md-6">
<div class="card">
<div class="card-body table-responsive">
<table id="staffTable" role="table" class="table table-bordered table-striped" style="width:100%">
<thead role="rowgroup">
<tr role="row">
<th style="max-width: 50px">Ảnh</th>
<th>Họ tên</th>
<th>Nam/Nữ</th>
<!-- <th>Địa chỉ</th> -->
<th>Số CMND hoặc hộ chiếu</th>
<th>Email</th>
<th>Điện thoại</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="card-header bg-primary">
<div class="card-title text-white">Thông tin tài khoản</div>
</div>
<div class="card-body">
<form id="user-form" action="" method="POST">
<div id="notify-div" class="mb-2"></div>
<div class="d-flex justify-content-end mr-3">
<input type="hidden" name="id" data-bind="value: user.UUID">
<div class="btn-group">
<button type="submit" class="btn btn-sm btn-primary" data-bind="html:saveBtnLabel"></button>
<button id="del-btn" type="button" class="btn btn-sm btn-danger"
data-bind="visible:user.UUID, events:{click:delUser}">
<span class="btn-label"><i class="fas fa-user-times"></i></span> Xóa
</button>
<button type="button" class="btn btn-sm btn-success"
data-bind="visible: user.UUID, events:{click:reset}">
<span class="btn-label"><i class="fas fa-user-plus"></i></span> Tạo mới
</button>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Tên đăng nhập</label>
<div class="col-sm-8">
<div class="input-group">
<input name="username" title="Tên đăng nhập không được để trống" data-bind="value:user.Username"
class="form-control" placeholder="Nhập tên đăng nhập..." type="text" required>
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
</div>
<span data-for='username' class='k-invalid-msg'></span>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Mật khẩu</label>
<div class="col-sm-8">
<div class="input-group">
<input id="new-pass" name="newpassword" type="password" title="Mật khẩu không được để trống"
placeholder="Nhập mật khẩu..." class="form-control"
data-bind="value: user.NewPass, notRequired:user.UUID">
<div class="input-group-append">
<span class="input-group-text show-pass"><i class="fas fa-eye-slash"></i></span>
</div>
</div>
<span data-for='newpassword' class='k-invalid-msg'></span>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Nhập lại mật khẩu</label>
<div class="col-sm-8">
<div class="input-group">
<input name="confpassword" type="password" placeholder="Nhập lai mật khẩu..." class="form-control"
data-bind="value: user.ConfPass">
<div class="input-group-append">
<span class="input-group-text show-pass"><i class="fas fa-eye-slash"></i></span>
</div>
</div>
<span data-for='confpassword' class='k-invalid-msg'></span>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Quyền tài khoản</label>
<div class="col-sm-8">
<select name="role" title="Không được để trống" placeholder="Chọn quyền tài khoản..."
data-role="dropdownlist" data-value-primitive="true" data-text-field="Name" data-value-field="Id"
data-bind="source: roles, value: user.Role" class="form-control" required></select>
<span data-for='role' class='k-invalid-msg'></span>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Họ tên</label>
<div class="col-sm-8">
<div class="input-group">
<input name="fullname" type="text" title="Họ tên không được để trống" placeholder="Nhập họ tên..."
class="form-control" data-bind="value: user.FullName" required>
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
</div>
<span data-for='fullname' class='k-invalid-msg'></span>
</div>
</div>
<div class="form-check form-inline">
<label class="placeholder col-sm-4">Giới tính</label>
<div class="col-sm-8">
<label class="custom-control custom-radio custom-control-inline">
<input name="gender" class="custom-control-input" type="radio" value="true"
data-bind="checked: user.Gender">
<span class="custom-control-label">Nam</span>
</label>
<label class="custom-control custom-radio custom-control-inline">
<input name="gender" class="custom-control-input" type="radio" value="false"
data-bind="checked: user.Gender">
<span class="custom-control-label">Nữ</span>
</label>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Số CMND, hộ chiếu</label>
<div class="col-sm-8">
<div class="input-group">
<input name="idnumber" type="text" placeholder="Nhập số thẻ căn cước, CMND hoặc hộ chiếu..."
class="form-control" data-bind="value: user.IdNumber">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-id-card"></i>
</div>
</div>
<span data-for='idnumber' class='k-invalid-msg'></span>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Email</label>
<div class="col-sm-8">
<div class="input-group">
<input name="email" type="email" title="Không đúng cú pháp địa chỉ email" class="form-control"
data-bind="value: user.Email" placeholder="Nhập địa chỉ email...">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-envelope"></i>
</div>
</div>
<span data-for='email' class='k-invalid-msg'></span>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Địa chỉ</label>
<div class="col-sm-8">
<div class="input-group">
<input name="address" type="text" data-bind="value: user.Address" class="form-control"
placeholder="Nhập địa chỉ...">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-home"></i>
</div>
</div>
</div>
</div>
<div class="form-group form-inline">
<label class="placeholder col-sm-4">Số điện thoại</label>
<div class="col-sm-8">
<div class="input-group">
<input name="phone" type="text" title="Chỉ được nhập số hoặc dấu chấm từ 10 đến 12 ký tự"
data-bind="value: user.Telephone" class="form-control" placeholder="Nhập số điện thoại...">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-phone"></i>
</div>
</div>
<span data-for='phone' class='k-invalid-msg'></span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".show-pass").on("click", function (e) {
showPassword(this);
});
kendo.data.binders.notRequired = kendo.data.Binder.extend({
refresh: function () {
var required = !this.bindings.notRequired.get();
if (required) {
this.element.setAttribute("required", "required");
} else {
this.element.removeAttribute("required");
}
}
});
var userValidator = $('#user-form').kendoValidator({
rules: {
confPass: function (input) {
var result = true;
if (input.is('[name=confpassword]')) {
result = input.val() === $('#new-pass').val()
}
return result;
}
},
messages: {
confPass: 'Mật khẩu xác thực không trùng khớp'
}
}).data('kendoValidator');
//DataTables
var userTable = $("#staffTable").DataTable({
ajax: {
type: "GET",
url: "/quantri/nguoidung/json"
},
responsive: false,
ordering: false,
select: { style: 'single' },
rowId: 'UUID',
language: { url: "/js/plugin/datatables/Vietnamese.json" },
columns: [
{
data: "UUID",
render: function (data, type, row) {
return `<img class="rounded img-rounded" src="/avatar?id=${data}" width="auto" height="50px" alt="Hình đại diện">`
},
orderable: false
},
{ data: "FullName" },
{
data: "Gender",
render: function (data, type, row) {
return data ? "Nam" : "Nữ";
}
},
// { data: "Address" },
{ data: "IdNumber" },
{ data: "Email" },
{ data: "Telephone" }
],
order: [[2, 'asc']]
});
// view model
var userVM = kendo.observable({
user: { Role: 3, Gender: true },
roles: new kendo.data.DataSource({
transport: {
read: {
url: "/quantri/quyentaikhoan/json",
dataType: "json"
}
},
schema: { data: 'data' }
}),
reset: function (e) {
this.set('user', { Role: 3, Gender: true });
if (userTable.rows({ selected: true }).count()) userTable.rows().deselect();
userValidator.hideMessages();
},
saveBtnLabel: function (e) {
return this.get('user.UUID') ? '<span class="btn-label"><i class="fas fa-save"></i></span> Lưu' : '<span class="btn-label"><i class="fas fa-save"></i></span> Lưu mới'
},
delUser: function (e) {
var userId = this.get('user.UUID');
$.ajax({
url: '',
method: 'DELETE',
data: { id: userId },
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
success: function (data, text, jqXHR) {
$('<div/>').kendoNotification({ appendTo: '#notify-div' }).data('kendoNotification').info('Đã xóa tài khoản thành công');
userTable.ajax.reload(null, false);
userVM.reset();
},
error: function (jqXHR, textStatus, err) {
$('<div/>').kendoNotification({ appendTo: '#notify-div' }).data('kendoNotification').error(jqXHR.responseText);
}
})
}
});
kendo.bind($("#user-form"), userVM);
userTable.on('select', function (e, dt, type, idxs) {
var data = dt.row(idxs[0]).data();
userVM.set('user', data);
userValidator.hideMessages()
});
userTable.on('deselect', function (e, dt, type, idxs) {
userVM.reset();
});
// Lưu thông tin người dùng
$('#user-form').on('submit', function (e) {
e.preventDefault();
e.stopPropagation();
if (userValidator.validate()) {
$.ajax({
url: '',
method: userVM.get('user.UUID') ? 'PUT' : 'POST',
data: $('#user-form').serialize(),
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
success: function (data, text, jqXHR) {
$('<div/>').kendoNotification({ appendTo: '#notify-div' }).data('kendoNotification').success('Lưu thông tin người dùng thành công');
userTable.ajax.reload(null, false);
if (!userVM.get('user.UUID')) userVM.reset();
},
error: function (jqXHR, textStatus, err) {
$('<div/>').kendoNotification({ appendTo: '#notify-div' }).data('kendoNotification').error(jqXHR.responseText);
}
})
}
});
})
</script>