%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;
}
form {
padding: 20px;
}
td form {
display: inline-block;
}
.actionBtn {
border: none;
border-radius: 4px;
color:white;
}
</style>
<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 row">
<div class="content-header-left col-md-6 col-12 mb-1">
<h2 class="content-header-title"><%= structure.name %> </h2>
</div>
<div class="content-header-right breadcrumbs-right breadcrumbs-top col-md-6 col-12">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a>
</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<!-- DOM - jQuery events table -->
<section id="dom">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<!-- <h4 class="card-title">DOM / jQuery events</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="expand"><i class="ft-maximize"></i></a></li>
</ul>
</div>
</div>
<div class="card-content collapse show">
<div class="card-body card-dashboard">
<!-- <p class="card-text">Events assigned to the table can be exceptionally useful for
user interaction, however you must be aware that DataTables
will add and remove rows from the DOM as they are needed (i.e.
when paging only the visible elements are actually available
in the DOM). As such, this can lead to the odd hiccup when
working with events.</p> -->
<!-- <dl>
<dt>Head Name:</dt>
<dd><%= (structure.head.firstName !== null ? structure.head.firstName : '') + ' ' + (structure.head.middleName !== null ? structure.head.middleName : '') + ' ' + (structure.head.lastName !== null ? structure.head.lastName : '') %></dd>
<dt>Head Grade:</dt>
<dd><%= structure.head.grade.title %></dd>
</dl>
-->
<% if(structure.head !== null){ %>
<div class="row" style="justify-content: center;">
<div class="col-md-6 col-sm-12">
<div class="card border-blue text-center bg-transparent" style="height: 313.562px;">
<div class="card-content">
<div class="card-body pt-3">
<img style="min-width: 100px; min-width: 200px; min-height: 250px; background-color: #999; border-radius: 10px;" src="/assets/images/users/<%= structure.head.image %>" alt="element 01" width="190" class="float-left">
<h3><%= structure.name %> Head</h3>
<dl>
<dt>Head Name:</dt>
<dd><%= (structure.head.firstName !== null ? structure.head.firstName : '') + ' ' + (structure.head.middleName !== null ? structure.head.middleName : '') + ' ' + (structure.head.lastName !== null ? structure.head.lastName : '') %></dd>
<dt>Head Grade:</dt>
<dd><%= structure.head.grade.title %></dd>
</dl>
<a href="/employee/view/<%= structure.head.id %>" class="btn btn-outline-blue">View</a>
</div>
</div>
</div>
</div>
</div>
<% }%>
<!-- <div class="col-xl-4 col-md-6 col-sm-12">
<div class="card" style="height: 500px;">
<div class="card-content">
<img class="card-img-top img-fluid" style="min-width: 100px; min-width: 300px; min-height: 300px; background-color: #999;" src="/assets/images/users/<%= structure.head.image %>" alt="Card image cap">
<div class="card-body">
<h3><%= structure.name %> Head</h3>
<dl>
<dt>Head Name:</dt>
<dd><%= (structure.head.firstName !== null ? structure.head.firstName : '') + ' ' + (structure.head.middleName !== null ? structure.head.middleName : '') + ' ' + (structure.head.lastName !== null ? structure.head.lastName : '') %></dd>
<dt>Head Grade:</dt>
<dd><%= structure.head.grade.title %></dd>
</dl>
<a href="#" class="btn btn-outline-blue">View</a>
</div>
</div>
</div>
</div> -->
<h3>Employees in <%= structure.name %></h3>
<table class="table table-striped table-bordered employees">
<thead>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Grade</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% structure.employees.forEach((employee, index) => { %>
<tr>
<td><%= index + 1 %></td>
<td><%= (employee.firstName !== null ? employee.firstName : '') + ' ' + (employee.middleName !== null ? employee.middleName : '') + ' ' + (employee.lastName !== null ? employee.lastName : '') %></td>
<td><%= employee.grade.title %></td>
<td>
<a href="/employee/view/<%= employee.id %>" class="btn btn-outline-blue">View</a>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- DOM - jQuery events table -->
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/footer %>
<script>
$('table.employees').DataTable();
</script>
Zerion Mini Shell 1.0