%PDF-
%PDF-
Mini Shell
Mini Shell
<% include ../partials/header %>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/sidebar %>
<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"> Create Region</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">
<a href="/branch/add" class="btn btn-primary btn-sm" ><i class="ft-plus white"></i> Add Branch</a>
<button class="btn btn-default btn-sm"><i class="ft-settings white"></i></button>
</div> -->
</div>
<div class="card-content" >
<div class="card-body">
<form action="/region/add" method="POST" class="steps-validation wizard-circle">
<!-- Step 1 -->
<h6><span class="_label"></span> Region Information</h6>
<fieldset>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="organisationStructureId">
Name :
<span class="danger">*</span>
</label>
<input type="text" name="name" id="name" class="form-control required">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">
<span class="_label"></span> Email Address :
<span class="danger">*</span>
</label>
<input type="email" class="form-control required" id="email" name="email">
</div>
</div>
</div>
<div class="row">
<div id="structureParent_div" class="col-md-6 ">
<div class="form-group">
<label for="description">
<span class="_label"></span> Description :
<span class="danger">*</span>
</label>
<textarea name="description" id="description" class="form-control required" >
</textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country">
<span class="_label"></span> Country :
<span class="danger">*</span>
</label>
<select class="custom-select required" id="country" name="country">
<option>Select Country</option>
<option value="nigeria">Nigeria</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="state">
<span class="_label"></span> State :
<span class="danger">*</span>
</label>
<select class="custom-select required" id="state" name="state">
<option>Select State</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="city">
<span class="_label"></span> L.G.A :
<span class="danger">*</span>
</label>
<select name="lga" id="lga" class="custom-select required">
</select>
</div>
</div>
</div>
</fieldset>
<!-- Step 2 -->
<h6><span class="_label"></span> Head</h6>
<fieldset>
<div class=""></div>
<!-- <div class="alert alert-warning mb-2" role="alert">
<span class="_label"></span> Head Information
</div> -->
<div class="row">
<div class="col-md-6 offset-md-2">
<div class="form-group">
<label for="proposalTitle3">
Search Employees :
<span class="danger">*</span>
</label>
<input type="text" class="form-control" id="headSearchName">
</div>
</div>
<div class="col-md-2" style="margin: auto 0;">
<button id="searchHead" type="button" class="btn btn-primary">Search</button>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-2 text-center selected">
<label class="label" for="headId">Selected Head: <span id="headLabel"></span></label>
<input type="hidden" class="" name="headId" id="headId" />
</div>
</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>Phone</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</fieldset>
<!-- Step 3 -->
<h6><span class="_label"></span> Head Assistant</h6>
<fieldset>
<!-- <div class=""></div> -->
<!-- <div class="alert alert-warning mb-2" role="alert">
<span class="_label"></span> assistant Information
</div> -->
<div class="row">
<div class="col-md-6 offset-md-2">
<div class="form-group">
<label for="proposalTitle3">
Search Employees :
<span class="danger">*</span>
</label>
<input type="text" class="form-control" id="headAssistantSearchName">
</div>
</div>
<div class="col-md-2" style="margin: auto 0;">
<button id="searchHeadAssistant" type="button" class="btn btn-primary">Search</button>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-2 text-center selected">
<label class="label" for="headAssistantId">Selected Head Assistant: <span id="headAssistantLabel"></span></label>
<input type="hidden" name="headAssistantId" id="headAssistantId" />
</div>
</div>
<table id="assistantExample" class="table table-striped table-bordered dom-jQuery-events">
<thead>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- DOM - jQuery events table -->
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<script>
//loading image preview
$('#blah1').hide();
$('#blah2').hide();
function readURL(input, num) {
if(num === 1)
blah = $('#blah1');
else
blah = $('#blah2');
$(blah).show();
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(blah)
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<% include ../partials/footer %>
<script>
function getHeadEmployees(name) {
$('#spinnerContainer').addClass('show');
jQuery.ajax({
type: "POST", // Post / Get method
url: "/employee/search/name", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: { "name": name }, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
$('#headSearchName').val('')
$('#headId').val('')
$('span#headLabel').html('')
var data = JSON.parse(response);
console.log((data))
$("#tableBody").html('');
data.forEach((employee, index) => {
// console.log(structure);
$("#tableBody").append(
`<tr>
<td>${index + 1} </td>
<td> ${(employee.firstName !== null ? employee.firstName : '') + " " + (employee.middleName !== null ? employee.middleName : '') + " " + (employee.lastName !== null ? employee.lastName : '')} </td>
<td> ${employee.email !== null ? employee.email : ''}</td>
<td>${employee.phone !== null ? employee.phone : ''} </td>
<td>
<button title="Delete" type="button" class="btn btn-success"
id="${employee.id}"
name="${(employee.firstName !== null ? employee.firstName : '') + " " + (employee.middleName !== null ? employee.middleName : '') + " " + (employee.lastName !== null ? employee.lastName : '')}"
onclick="selectHead([this.id, this.name]);"
><i class="la ft-user-check"></i>
</button>
</td>
</tr>`
)
});
},
error: function (xhr, ajaxOptions, thrownError) {
$('#spinnerContainer').removeClass('show');
//$("#loading").hide();
// Swal.fire("Error!", "An error occurred!", "error");
}
});
}
function getHeadAssistantEmployees(name) {
$('#spinnerContainer').addClass('show');
jQuery.ajax({
type: "POST", // Post / Get method
url: "/employee/search/name", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: { "name": name }, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
$('#headAssistantSearchName').val('')
$('#headAssistantId').val('')
$('span#headAssistantLabel').html('')
var data = JSON.parse(response);
console.log((data))
$("table#assistantExample #tableBody").html('');
data.forEach((employee, index) => {
// console.log(structure);
$("table#assistantExample #tableBody").append(
`<tr>
<td>${index + 1} </td>
<td> ${(employee.firstName !== null ? employee.firstName : '') + " " + (employee.middleName !== null ? employee.middleName : '') + " " + (employee.lastName !== null ? employee.lastName : '')} </td>
<td> ${employee.email !== null ? employee.email : ''}</td>
<td>${employee.phone !== null ? employee.phone : ''} </td>
<td>
<button title="Delete" type="button" class="btn btn-success"
id="${employee.id}"
name="${(employee.firstName !== null ? employee.firstName : '') + " " + (employee.middleName !== null ? employee.middleName : '') + " " + (employee.lastName !== null ? employee.lastName : '')}"
onclick="selectHeadAssistant([this.id, this.name]);"
><i class="la ft-user-check"></i>
</button>
</td>
</tr>`
)
});
},
error: function (xhr, ajaxOptions, thrownError) {
$('#spinnerContainer').removeClass('show');
//$("#loading").hide();
// Swal.fire("Error!", "An error occurred!", "error");
}
});
}
function selectHead(employee){
console.log(employee)
$('#headId').val(employee[0])
$('span#headLabel').html(employee[1])
$('#headSearchName').val(employee[1])
}
function selectHeadAssistant(employee){
console.log(employee)
$('#headAssistantId').val(employee[0])
$('span#headAssistantLabel').html(employee[1])
$('#headAssistantSearchName').val(employee[1])
}
</script>
<script>
$('table#example').DataTable();
$('table#assistantExample').DataTable();
$('#searchHead').click(function(e){
var headName = $('#headSearchName').val();
if(headName == ''){
$.alert("Please enter an Employee name");
return;
}
getHeadEmployees(headName);
})
$('#searchHeadAssistant').click(function(e){
var headAssistantName = $('#headAssistantSearchName').val();
if(headAssistantName == ''){
$.alert("Please enter an Employee name");
return;
}
getHeadAssistantEmployees(headAssistantName);
})
</script>
<script src="/assets/js/states.js"></script>
<script>
$(function(){
var stateElement = $('#state');
var lgaElement = $('#lga');
stateElement.html('');
stateElement.append('<option value="">Select State</option>')
allStates.forEach(function({state}){
stateElement.append('<option value="' + state.name + '">'+ state.name + '</option>')
})
var defaultLocals = allStates[0].state.locals;
lgaElement.append('<option value="">Select L.G.A</option>')
defaultLocals.forEach(function(local){
lgaElement.append('<option value="' + local.name + '">'+ local.name + '</option>')
})
stateElement.change(function(e){
var stateName = $(this).val();
let locals;
allStates.forEach(({state}) => {
if(state.name == stateName){
locals = state.locals;
}
})
lgaElement.html('')
lgaElement.append('<option value="">Select L.G.A</option>')
locals.forEach(function(lga){
lgaElement.append('<option value="' + lga.name + '">'+ lga.name + '</option>')
})
console.log(locals)
})
})
</script>
Zerion Mini Shell 1.0