<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><div class="mail-box">
<aside class="lg-side">
<div class="inbox-head">
<h3>Phân công cho tôi</h3>
<form action="#" class="pull-right position">
<div class="input-append">
<input type="text" class="sr-input" placeholder="Tìm kiếm">
<button class="btn sr-btn" type="button"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
<div class="inbox-body">
<div class="mail-option">
<table class="table table-inbox">
<tbody style="background-color: #f0f0f0;">
<tr class="unread">
<th class="col-sm-2" class="align-top">Mã công việc</th>
<th class="view-message col-sm-3">Tên công việc</th>
<th class="col-sm-2">
<div class="text-center">Tình trạng</div>
<div class="text-center">
<div id="checkbutton" class="btn-group" data-toggle="buttons">
<label id="checkbutton" class="btn btn-xs done active filter show" data-target="done"><i class="glyphicon glyphicon-stop"></i></label>
<label id="checkbutton" class="btn btn-xs doing active filter show" data-target="doing"><i class="glyphicon glyphicon-stop"></i></label>
<label id="checkbutton" class="btn btn-xs late active filter show" data-target="late"><i class="glyphicon glyphicon-stop"></i></label>
<label id="checkbutton" class="btn btn-xs fail active filter show" data-target="fail"><i class="glyphicon glyphicon-stop"></i></label>
</div>
</div>
</th>
<th class="view-message text-left col-sm-2">Ngày phân công</th>
<th class="col-sm-2">
<span>Hạn hoàn thành
<!--div>
<span class="label label-success pull-left"> </span>
<span class="label label-danger pull-left"> </span>
</div-->
</span>
</th>
<th class="col-sm-1"></th>
</tr>
</tbody>
<table class="table table-inbox table-hover table-inside">
<tbody>
<tr data-status="done">
<td class="col-sm-2" onclick="myFunction(this)" class="view-message dont-show"><h5>CV0001</h5></td>
<td class="col-sm-3" onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của công việc</h5></td>
<td class="col-sm-2" onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="col-sm-12 label label-success " >Hoàn thành</span></h4></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td>
<span class="btn-group pull-right" style="margin-top: 5px">
<button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#product_edit"><i class="glyphicon glyphicon-edit" ></i></button>
<button class="btn btn-success btn-xs disabled"; data-toggle="modal" data-target="#product_remove"><i class="glyphicon glyphicon-check" ></i></button>
</span>
</td>
</tr>
<tr class="" data-status="fail">
<td class="col-sm-2" onclick="myFunction(this)" class="view-message dont-show"><h5>CV0001</h5></td>
<td class="col-sm-3" onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của công việc</h5></td>
<td class="col-sm-2" onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="col-sm-12 label label-danger">Thất bại</span></h5></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td >
<span class="btn-group pull-right" style="margin-top: 5px">
<button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#product_edit"><i class="glyphicon glyphicon-edit" ></i></button>
<button class="btn btn-success btn-xs disabled"; data-toggle="modal" data-target="#product_remove"><i class="glyphicon glyphicon-check" ></i></button>
</span>
</td>
</tr>
<tr class="" data-status="done">
<td class="col-sm-2" onclick="myFunction(this)" class="view-message dont-show"><h5>CV0001</h5></td>
<td class="col-sm-3" onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của công việc</h5></td>
<td class="col-sm-2" onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="col-sm-12 label label-success " >Hoàn thành</span></h4></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td >
<span class="btn-group pull-right" style="margin-top: 5px">
<button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#product_edit"><i class="glyphicon glyphicon-edit" ></i></button>
<button class="btn btn-success btn-xs disabled"; data-toggle="modal" data-target="#product_remove"><i class="glyphicon glyphicon-check" ></i></button>
</span>
</td>
</tr>
<tr class="" data-status="done">
<td class="col-sm-2" onclick="myFunction(this)" class="view-message dont-show"><h5>CV0001</h5></td>
<td class="col-sm-3" onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của công việc</h5></td>
<td class="col-sm-2" onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="col-sm-12 label label-success " >Hoàn thành</span></h4></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td >
<span class="btn-group pull-right" style="margin-top: 5px">
<button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#product_edit"><i class="glyphicon glyphicon-edit" ></i></button>
<button class="btn btn-success btn-xs disabled"; data-toggle="modal" data-target="#product_remove"><i class="glyphicon glyphicon-check" ></i></button>
</span>
</td>
</tr>
<tr class="" data-status="late">
<td class="col-sm-2" onclick="myFunction(this)" class="view-message dont-show"><h5>CV0001</h5></td>
<td class="col-sm-3" onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của công việc</h5></td>
<td class="col-sm-2" onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="col-sm-12 label label-warning">Trễ hạn</span></h4></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td >
<span class="btn-group pull-right" style="margin-top: 5px">
<button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#product_edit"><i class="glyphicon glyphicon-edit" ></i></button>
<button class="btn btn-success btn-xs"; data-toggle="modal" data-target="#product_remove"><i class="glyphicon glyphicon-check" ></i></button>
</span>
</td>
</tr>
<tr class="" data-status="doing">
<td class="col-sm-2" onclick="myFunction(this)" class="view-message dont-show"><h5>CV0001</h5></td>
<td class="col-sm-3" onclick="myFunction(this)" colspan="3" class="view-message"><h5>Tên của công việc</h5></td>
<td class="col-sm-2" onclick="myFunction(this)"><h4 style="margin-top: 5px;"><span class="col-sm-12 label label-info">Đang làm</span></h4></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td onclick="myFunction(this)" class="view-message text-left"><h5>DD-MM-YYY</h5></td>
<td >
<span class="btn-group pull-right" style="margin-top: 5px">
<button class="btn btn-warning btn-xs" data-toggle="modal" data-target= "#product_edit"><i class="glyphicon glyphicon-edit" ></i></button>
<button class="btn btn-success btn-xs"; data-toggle="modal" data-target="#product_remove"><i class="glyphicon glyphicon-check" ></i></button>
</span>
</td>
</tbody>
</table>
</div>
</div>
<div class="text-center">
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="active"><span>1</span></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><span>...</span></li>
<li><a href="#">5</a></li>
<li><a href="#" rel="next">»</a></li>
</ul>
</div>
</aside>
</div>
<div class="modal fade product_edit" id="product_edit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">Cập nhật thông tin nhân viên </h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4 product_img">
<img src="http://www.bvctch.vn/vnt_upload/about/thumbs/270_crop__Bsvoduylinh.jpg" class="img-responsive">
</div>
<div class="col-md-8 product_content">
<form>
<h4>
<span>Mã nhân viên: CV0001</span>
<!--span class="input-group-btn">
<button class="btn btn-danger btn-xs pull-right"; data-toggle="modal" data-target="#product_view"><i class="glyphicon glyphicon-remove" ></i></button>
</span-->
</h4>
<div class="container" >
<div class="row">
<div class="col-md-5" >
<div class="panel">
<div class="panel-body">
<label>DD-MM-YYY</label><input type='text' class='form-control' value=''>
<label style="margin-top:15px;">Tinh trạng</label><input type='text' class='form-control' value='' >
<label style="margin-top:15px;">Họ và tên</label><input type='text' class='form-control' value='' >
<!--label style="margin-top:15px;">Giới tính</label><input type='text' class='form-control' value='' >
<label style="margin-top:15px;">CMND/CCCD :</label><input type='text' class='form-control' value='' >
<label style="margin-top:15px;">Số diện thoại</label><input type='text' class='form-control' value='' >
<label style="margin-top:15px;">Địa chỉ</label><input type='text' class='form-control' value='' -->
<label style="margin-top:15px;">Mô tả bản thân</label><textarea class="form-control " style="resize: vertical;" rows="2" id="comment"></textarea>
<div class="text-center" style="margin-top:15px;"><button class="btn btn-primary btn-sx" type="button"><i class="glyphicon glyphicon-save" ></i> Save</button></div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">Thông tin chi tiết nhân viên </h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6 product_img">
<img src="http://www.bvctch.vn/vnt_upload/about/thumbs/270_crop__Bsvoduylinh.jpg" class="img-responsive">
</div>
<div class="col-md-6 product_content">
<h4>
<span>Mã nhân viên: CV0001</span>
<!--span class="input-group-btn">
<button class="btn btn-danger btn-xs pull-right"; data-dismiss="modal" data-toggle="modal" data-target="#product_remove"><i class="glyphicon glyphicon-remove" ></i></button>
<button class="btn btn-warning btn-xs pull-right"; data-dismiss="modal" data-toggle="modal" data-target= "#product_edit"><i class="glyphicon glyphicon-edit" ></i></button>
</span-->
</h4>
<h5>DD-MM-YYY: <span>Kế toán</span></h5>
<p>Tình trạng: Hoàn thành</p>
<p>Họ và tên: Tên của công việc</p>
<p>Bằng cấp: Đại học</p>
<p>SĐT: 09111xxxxx</p>
<p>Địa chỉ: 227 Nguyễn Văn Cừ - P.2 - Q.5 - Tp.HCM</p>
<p>Mô tả bản thân.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade product_remove" id="product_remove">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">Xác nhận</h3>
</div>
<div class="modal-body">
<p>Bạn có thật sự muốn xóa?</p>
<div class="row">
<div class="col-12-xs text-center">
<button class="btn btn-success btn-md col-3-xs">Có</button>
<button class="btn btn-danger btn-md col-3-xs">Không</button>
</div>
</div>
</div>
</div>
</div>
</div>
.product_view .modal-dialog{max-width: 800px; width: 100%;}
.product_edit .modal-dialog{max-width: 800px; width: 100%;}
.product_remove .modal-dialog{max-width: 300px; width: 100%;}
.pre-cost{text-decoration: line-through; color: #a5a5a5;}
.space-ten{padding: 10px 0;}
.mail-box {
border-collapse: collapse;
border-spacing: 0;
display: table;
table-layout: fixed;
width: 100%;
}
.mail-box aside {
display: table-cell;
float: none;
height: 100%;
padding: 0;
vertical-align: top;
}
.mail-box .sm-side {
background: none repeat scroll 0 0 #e5e8ef;
border-radius: 4px 0 0 4px;
width: 25%;
}
.mail-box .lg-side {
background: none repeat scroll 0 0 #fff;
border-radius: 0 4px 4px 0;
width: 75%;
}
.mail-box .sm-side .user-head {
background: none repeat scroll 0 0 #00a8b3;
border-radius: 4px 0 0;
color: #fff;
min-height: 80px;
padding: 10px;
}
.user-head .inbox-avatar {
float: left;
width: 65px;
}
.user-head .inbox-avatar img {
border-radius: 4px;
}
.user-head .user-name {
display: inline-block;
margin: 0 0 0 10px;
}
.user-head .user-name h5 {
font-size: 14px;
font-weight: 300;
margin-bottom: 0;
margin-top: 15px;
}
.user-head .user-name h5 a {
color: #fff;
}
.user-head .user-name span a {
color: #87e2e7;
font-size: 12px;
}
a.mail-dropdown {
background: none repeat scroll 0 0 #80d3d9;
border-radius: 2px;
color: #01a7b3;
font-size: 10px;
margin-top: 20px;
padding: 3px 5px;
}
.inbox-body {
padding-top: 20px;
}
.btn-compose {
background: none repeat scroll 0 0 #ff6c60;
color: #fff;
padding: 12px 0;
text-align: center;
width: 100%;
}
.btn-compose:hover {
background: none repeat scroll 0 0 #f5675c;
color: #fff;
}
ul.inbox-nav {
display: inline-block;
margin: 0;
padding: 0;
width: 100%;
}
.inbox-divider {
border-bottom: 1px solid #d5d8df;
}
ul.inbox-nav li {
display: inline-block;
line-height: 45px;
width: 100%;
}
ul.inbox-nav li a {
color: #6a6a6a;
display: inline-block;
line-height: 45px;
padding: 0 20px;
width: 100%;
}
ul.inbox-nav li a:hover, ul.inbox-nav li.active a, ul.inbox-nav li a:focus {
background: none repeat scroll 0 0 #d5d7de;
color: #6a6a6a;
}
ul.inbox-nav li a i {
color: #6a6a6a;
font-size: 16px;
padding-right: 10px;
}
ul.inbox-nav li a span.label {
margin-top: 13px;
}
ul.labels-info li h4 {
color: #5c5c5e;
font-size: 13px;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
text-transform: uppercase;
}
ul.labels-info li {
margin: 0;
}
ul.labels-info li a {
border-radius: 0;
color: #6a6a6a;
}
ul.labels-info li a:hover, ul.labels-info li a:focus {
background: none repeat scroll 0 0 #d5d7de;
color: #6a6a6a;
}
ul.labels-info li a i {
padding-right: 10px;
}
.nav.nav-pills.nav-stacked.labels-info p {
color: #9d9f9e;
font-size: 11px;
margin-bottom: 0;
padding: 0 22px;
}
.inbox-head {
background: none repeat scroll 0 0 #41cac0;
border-radius: 0 4px 0 0;
color: #fff;
min-height: 80px;
padding: 20px;
}
.inbox-head h3 {
display: inline-block;
font-weight: 300;
margin: 0;
padding-top: 6px;
}
.inbox-head .sr-input {
border: medium none;
border-radius: 4px 0 0 4px;
box-shadow: none;
color: #8a8a8a;
float: left;
height: 40px;
padding: 0 10px;
}
.inbox-head .sr-btn {
background: none repeat scroll 0 0 #00a6b2;
border: medium none;
border-radius: 0 4px 4px 0;
color: #fff;
height: 40px;
padding: 0 20px;
}
.table-inbox {
border: 1px solid #d3d3d3;
margin-bottom: 0;
}
.table-inbox tr td {
padding: 12px !important;
}
.table-inbox tr td:hover {
cursor: pointer;
}
.table-inbox tr td .fa-star.inbox-started, .table-inbox tr td .fa-star:hover {
color: #f78a09;
}
.table-inbox tr td .fa-star {
color: #d5d5d5;
}
.table-inbox tr.unread td {
background: none repeat scroll 0 0 #f7f7f7;
font-weight: 600;
}
ul.inbox-pagination {
float: right;
}
ul.inbox-pagination li {
float: left;
}
.mail-option {
display: inline-block;
margin-bottom: 10px;
width: 100%;
}
.mail-option .chk-all, .mail-option .btn-group {
margin-right: 5px;
}
.mail-option .chk-all, .mail-option .btn-group a.btn {
background: none repeat scroll 0 0 #fcfcfc;
border: 1px solid #e7e7e7;
border-radius: 3px !important;
color: #afafaf;
display: inline-block;
padding: 5px 10px;
}
.inbox-pagination a.np-btn {
background: none repeat scroll 0 0 #fcfcfc;
border: 1px solid #e7e7e7;
border-radius: 3px !important;
color: #afafaf;
display: inline-block;
padding: 5px 15px;
}
.mail-option .chk-all input[type="checkbox"] {
margin-top: 0;
}
.mail-option .btn-group a.all {
border: medium none;
padding: 0;
}
.inbox-pagination a.np-btn {
margin-left: 5px;
}
.inbox-pagination li span {
display: inline-block;
margin-right: 5px;
margin-top: 7px;
}
.fileinput-button {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #e6e6e6;
}
.inbox-body .modal .modal-body input, .inbox-body .modal .modal-body textarea {
border: 1px solid #e6e6e6;
box-shadow: none;
}
.btn-send, .btn-send:hover {
background: none repeat scroll 0 0 #00a8b3;
color: #fff;
}
.btn-send:hover {
background: none repeat scroll 0 0 #009da7;
}
.modal-header h4.modal-title {
font-family: "Open Sans",sans-serif;
font-weight: 300;
}
.modal-body label {
font-family: "Open Sans",sans-serif;
font-weight: 400;
}
.heading-inbox h4 {
border-bottom: 1px solid #ddd;
color: #444;
font-size: 18px;
margin-top: 20px;
padding-bottom: 10px;
}
.sender-info {
margin-bottom: 20px;
}
.sender-info img {
height: 30px;
width: 30px;
}
.sender-dropdown {
background: none repeat scroll 0 0 #eaeaea;
color: #777;
font-size: 10px;
padding: 0 3px;
}
.view-mail a {
color: #ff6c60;
}
.attachment-mail {
margin-top: 30px;
}
.attachment-mail ul {
display: inline-block;
margin-bottom: 30px;
width: 100%;
}
.attachment-mail ul li {
float: left;
margin-bottom: 10px;
margin-right: 10px;
width: 150px;
}
.attachment-mail ul li img {
width: 100%;
}
.attachment-mail ul li span {
float: right;
}
.attachment-mail .file-name {
float: left;
}
.attachment-mail .links {
display: inline-block;
width: 100%;
}
.fileinput-button {
float: left;
margin-right: 4px;
overflow: hidden;
position: relative;
}
.fileinput-button input {
cursor: pointer;
direction: ltr;
font-size: 23px;
margin: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transform: translate(-300px, 0px) scale(4);
}
.fileupload-buttonbar .btn, .fileupload-buttonbar .toggle {
margin-bottom: 5px;
}
.files .progress {
width: 200px;
}
.fileupload-processing .fileupload-loading {
display: block;
}
* html .fileinput-button {
line-height: 24px;
margin: 1px -3px 0 0;
}
* + html .fileinput-button {
margin: 1px 0 0;
padding: 2px 15px;
}
@media (max-width: 767px) {
.files .btn span {
display: none;
}
.files .preview * {
width: 40px;
}
.files .name * {
display: inline-block;
width: 80px;
word-wrap: break-word;
}
.files .progress {
width: 20px;
}
.files .delete {
width: 60px;
}
}
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
/********************************************************/
#checkbutton .done.active{
color: #5cb85c;
background-color: #5cb85c;
}
#checkbutton .doing.active{
color: #31b0d5;
background-color: #31b0d5;
}
#checkbutton .late.active{
color: #f0ad4e;
background-color: #f0ad4e;
}
#checkbutton .fail.active{
color: #c9302c;
background-color: #c9302c;
}
#checkbutton .done{
color: #449d44;
background-color: #f0f0f0;
border-color: #449d44;
border:none;
}
#checkbutton .doing{
color: #31b0d5;
background-color: #f0f0f0;
border-color: #31b0d5;
border:none;
}
#checkbutton .late{
color: #f0ad4e;
background-color: #f0f0f0;
border-color: #f0ad4e;
border:none;
}
#checkbutton .fail{
color: #c9302c;
background-color: #f0f0f0;
border-color: #c9302c;
//border-width: 4px;
border:none;
}
.glyphicon-none:before {
font-size: 1px;
content: "\2122";
color: transparent !important;
}
//<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button>
function myFunction(x) {
$("#product_view").modal();
};
$(document).ready(function () {
$('.filter').on('click', function () {
var $target = $(this).data('target');
if ($(this).hasClass("show")) {
// $('.table-inside tr').css('display', 'none');
$('.table-inside tr[data-status="' + $target + '"]').fadeOut('slow');
$(this).removeClass("show");
}
else {
$('.table-inside tr[data-status="' + $target + '"]').css('display', 'none').fadeIn('slow');
$(this).addClass("show");
}
});
});
