????
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ý loại văn bả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-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="#">Loại văn bản</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-8 col-sm-6">
<div class="card">
<div class="card-body">
<table id="typeTable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th class="none">Nhóm loại văn bản</th>
<th>Tên loại văn bản</th>
<th>Mã loại văn bản</th>
<th class="control">Xóa/Sửa</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card">
<form id="add-form" action="" method="POST">
<div class="card-body">
<div class="form-group">
<label>Nhóm loại văn bản</label>
<select id="add-group" name="group" class="form-control" title="Không được để trống" required></select>
</div>
<div class="form-group">
<label>Tên loại văn bản</label>
<input type="text" name="name" class="k-textbox k-input" title="Không được để trống" required>
</div>
<div class="form-group">
<label>Mã</label>
<input type="text" name="code" class="k-textbox k-input">
</div>
</div>
<div class="card-footer d-flex justify-content-end">
<button type="submit" class="btn btn-success">
<span class="btn-label"><i class="fas fa-plus-circle"></i> Thêm mới</span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<!--Modal sửa loại văn bản-->
<div class="modal fade" id="edit-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Sửa loại văn bản</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form id="edit-form" action="" method="POST">
<div class="modal-body">
<div class="form-group">
<label>Nhóm loại văn bản</label>
<select class="form-control" name="group" data-role="dropdownlist" data-value-field="id"
data-text-field="text" data-bind="source: groups,value: type.TypeGroup" title="Không được để trống"
required></select>
</div>
<div class="form-group">
<label>Tên loại văn bản</label>
<input class="form-control" type="text" name="name" data-bind="value: type.TypeName"
title="Không được để trống" required>
</div>
<div class="form-group">
<label>Mã loại văn bản</label>
<input class="form-control" type="text" name="code" data-bind="value: type.TypeCode">
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" data-bind="value: type.Id">
<button type="submit" class="btn btn-warning"><i class="fas fa-edit"></i> Sửa</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-times"></i> Đóng</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var typeTable = $("#typeTable").DataTable({
ajax: {
url: "?list=true",
dataType: "json",
dataSrc: ""
},
language: {
url: "/js/plugin/datatables/Vietnamese.json"
},
ordering: false,
columns: [
{ data: "GroupName" },
{ data: "TypeName" },
{ data: "TypeCode" },
{
data: null,
render: function (data, type, row) {
return `<div class="btn-group">
<button class="btn btn-warning btn-xs btn-icon edit-btn"><i class="fas fa-edit"></i></button>
<button class="btn btn-danger btn-xs btn-icon delete-btn"><i class="fas fa-trash-alt"></i></button>
</div>`;
}
}
]
});
//Thêm loại văn bản
$("#add-group").select2({
ajax: {
url: "/quantri/loaivanban/nhom",
dataType: "json",
cache: true
},
theme: "bootstrap4",
delay: 250
});
$("#add-form").validate({
validClass: "success",
highlight: function (element) {
$(element).closest(".form-group").removeClass("has-primary").addClass("has-error");
},
unhighlight: function (element) {
$(element).closest(".form-group").removeClass("has-error").addClass("has-primary");
},
errorPlacement: function (error, element) {
$(element).closest(".form-group").append(error);
},
submitHandler: function (domForm) {
$.ajax({
url: "",
method: "POST",
data: $(domForm).serialize(),
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (data, text, jqXHR) {
location.replace(location.href)
},
error: function (jqXHR, text, err) {
Swal.fire({
text: jqXHR.responseText,
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
});
}
});
//Xóa, sửa loại văn bản
var typeViewModel = kendo.observable({
type: {},
groups: new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
url: "/quantri/loaivanban/nhom",
dataType: "json",
success: function (result) {
options.success(result.results)
},
error: function (result) {
options.error(result)
}
})
}
}
})
});
kendo.bind($("#edit-form"), typeViewModel);
$("#typeTable").on("click", ".delete-btn", function (e) {
var type = typeTable.row($(this).closest("tr")).data();
Swal.fire({
title: 'Xác nhận',
text: `Bạn có muốn xóa loại văn bản [${type.TypeName}]?`,
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#cd201f',
cancelButtonColor: '#467fcf',
confirmButtonText: 'Xóa',
cancelButtonText: 'Đóng lại'
}).then(function (result) {
if (result.value) {
$.ajax({
url: "",
type: "DELETE",
data: { id: type.Id },
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (data, textStatus, jqXHR) {
Swal.fire({
text: jqXHR.responseText,
type: 'info',
showConfirmButton: false,
timer: 1500
}).then(function () { typeTable.ajax.reload(null, false) })
},
error: function (jqXHR, textStatus, err) {
Swal.fire({
text: jqXHR.responseText,
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
});
}
})
});
$("#typeTable").on("click", ".edit-btn", function (e) {
var type = typeTable.row($(this).closest("tr")).data();
typeViewModel.set("type", type);
$("#edit-modal").modal("show");
});
$("#edit-form").validate({
validClass: "success",
highlight: function (element) {
$(element).closest(".form-group").removeClass("has-primary").addClass("has-error");
},
unhighlight: function (element) {
$(element).closest(".form-group").removeClass("has-error").addClass("has-primary");
},
errorPlacement: function (error, element) {
$(element).closest(".form-group").append(error);
},
submitHandler: function (domForm) {
$.ajax({
url: "",
method: "PUT",
data: $(domForm).serialize(),
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (data, text, jqXHR) {
location.replace(location.href)
},
error: function (jqXHR, text, err) {
Swal.fire({
text: jqXHR.responseText,
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
});
}
})
});
</script>