%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;
}
td form{
display: inline-block;
}
</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"> Business Structures</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="collapse"><i class="ft-minus"></i></a></li>
<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li> -->
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
<!-- <li><a data-action="close"><i class="ft-x"></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> -->
<div class="mb-1 create text-center">
<a class="quick-btn" href="#" data-toggle="modal" data-target="#addBizStruct">
<i class="ft-plus"></i><br>
Add New
</a>
</div>
<table id="example" class="table table-striped table-bordered dom-jQuery-events">
<thead>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Email</th>
<!-- <th>Positon</th> -->
<%/*
<th>Start date</th>
<th>Edit/Delete</th>
*/%>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<% allBusinessStructures.forEach(function(structure, index){ %>
<tr>
<td><%= (index + 1) %></td>
<td><%= structure.name%></td>
<td><%= structure.email %></td>
<td>
<button title="Edit" data-toggle="modal" data-target="#editBizStruct" class="btn btn-icon btn-warning mr-1"
name="<%= structure.name %>"
email="<%= structure.email %>"
head="<%= structure.head %>"
assistant="<%= structure.assistant %>"
id="<%= structure.id %>"
>
<i class="la la-pencil"></i>
</button>
<form method="POST" action="/structure/business/delete">
<input type="hidden" name="id" value="<%= structure.id %>" />
<button type="submit" class="btn btn-icon btn-danger mr-1"><i class="la la-close"></i></button>
</form>
</td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- DOM - jQuery events table -->
</div>
</div>
</div>
<div class="modal fade text-left" id="addBizStruct" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#1E9FF2;">
<h3 class="modal-title" id="myModalLabel35"> Create New Structure</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="/structure/business/add" >
<div class="modal-body">
<fieldset class="form-group floating-label-form-group">
<label for="orgStructureType">Structure Type</label>
<select class="custom-select" name="orgStructureType" id="orgStructureType">
<option value="unit">Unit</option>
<option value="department">Department</option>
<option value="group">Group</option>
</select>
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="orgStructureId">Parent Structure</label>
<select class="custom-select" name="orgStructureId" id="orgStructureId">
<option value="unit">Accounting</option>
</select>
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="name"> Structure Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Name">
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="email"> Structure Email</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Email">
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="head">Structure Head</label>
<select class="custom-select" name="head" id="head">
<option value="">Select Head </option>
</select>
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="assistant">Structure Assistant</label>
<select class="custom-select" name="assistant" id="assistant">
<option value="">Select Assistant </option>
</select>
</fieldset>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Save">
</div>
</form>
</div>
</div>
</div>
<div class="modal fade text-left" id="editBizStruct" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#1E9FF2;">
<h3 class="modal-title" id="myModalLabel35"> Update Structure</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="/structure/business/edit" id="editForm" >
<div class="modal-body">
<input type="hidden" name="id" />
<fieldset class="form-group floating-label-form-group">
<label for="name"> Structure Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Name">
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="email"> Structure Email</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Email">
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="head">Structure Head</label>
<select class="custom-select" name="head" id="head">
<option value="">Select Head </option>
</select>
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="assistant">Structure Assistant</label>
<select class="custom-select" name="assistant" id="assistant">
<option value="">Select Assistant </option>
</select>
</fieldset>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Save">
</div>
</form>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../../partials/footer %>
<script>
$('#editBizStruct').on('show.bs.modal', function (e) {
var opener = e.relatedTarget; // Button that triggered the modal
var name = $(opener).attr('name'); // Extract info from data-* attributes
var email = $(opener).attr('email');
var head = $(opener).attr('head');
var assistant = $(opener).attr('assistant');
var id = $(opener).attr('id');
$('#editForm').find('[name="name"]').val(name);
$('#editForm').find('[name="email"]').val(email);
$('#editForm').find('[name="head"]').val(head);
$('#editForm').find('[name="assistant"]').val(assistant);
$('#editForm').find('[name="id"]').val(id);
});
</script>
Zerion Mini Shell 1.0