%PDF-
%PDF-
Mini Shell
Mini Shell
<% include ../partials/header %>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/sidebar %>
<link rel="stylesheet" href="/app-assets/css/plugins/jquery-confirm/dist/jquery-confirm.min.css">
<style>
form {
padding: 20px;
}
td form {
display: inline-block;
}
div.actions{
margin-top: 40px;
}
.hide {
display: none;
}
.label{
font-size: 16px;
font-weight: bold;
}
.selected {
margin: 10px 0;
}
table{
margin-top: 10px;
}
.center {
margin:auto;
}
</style>
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row">
<div class="content-header-left col-md-6 col-12 mb-2">
<h3 class="content-header-title mb-0">Structures</h3>
<div class="row breadcrumbs-top">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/index">Home</a>
</li>
<li class="breadcrumb-item"><a href="/structure">Structures</a>
</li>
<li class="breadcrumb-item active">Add Structure
</li>
</ol>
</div>
</div>
</div>
<!-- <div class="content-header-right text-md-right col-md-6 col-12">
<div class="btn-group">
<a href="/structure/add" class="btn btn-round btn-info btn-sm" type="button"
aria-expanded="true" ><i class="icon-plus"></i> Add Organization</a>
</div>
</div> -->
</div>
<!--/ eCommerce statistic -->
</div>
<div>
<div class="col-12">
<section id="validation">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Add New Company Structure</h4>
<a class="heading-elements-toggle"><i class="la la-ellipsis-h 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" >
<div class="card-body">
<form action="/structure/add" method="POST" enctype="multipart/form-data" class="steps-validation wizard-circle">
<!-- Step 1 -->
<h6><span class="_label"></span> Information</h6>
<fieldset>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="organisationStructureId">
Structure Type :
<span class="danger">*</span>
</label>
<select name="organisationStructureId" id="structureTypeId" class="form-control required">
<option class="form-control" value="">Select Structure Type</option>
<% structures.forEach(structure =>{ %>
<option value="<%= structure.id %>" class="form-control" > <%= structure.structure.name %></option>
<% }) %>
</select>
</div>
</div>
<div id="structureParent_div" class="col-md-6 d-none">
<div class="form-group">
<label for="lastName3">
<span class="_label"></span> Parent :
<span class="danger">*</span>
</label>
<select name="structureParentId" id="structureParentId" class="form-control required">
<option class="form-control" value="0" selected>Select <span class="_label"></span> Parent</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="firstName3">
<span class="_label"></span> Name :
<span class="danger">*</span>
</label>
<input type="text" class="form-control required" id="structureName" name="name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastName3">
<span class="_label"></span> Email Address :
<span class="danger">*</span>
</label>
<input type="text" class="form-control required" id="email" name="email">
</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="center 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="center 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>
</div>
</div>
</div>
<!-- </div>
</div> -->
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/footer %>
<script src="/app-assets/js/core/libraries/jquery-confirm/dist/jquery-confirm.min.js"></script>
<script >
$(document).ready(function() {
$("#structureTypeId").change(function() {
var structureTypeId = $("#structureTypeId option:selected").val();
if(isNaN(structureTypeId)){
$("._label").html('')
return;
// $('#invoiceType').empty($("#structureTypeId option:selected").text());
}
$("._label").html($("#structureTypeId option:selected").text())
// if(structureTypeId)
var selectedIndex = document.getElementById('structureTypeId').selectedIndex;
if(selectedIndex == 1){//its the first on list, it has no parent
$("#structureParent_div").addClass('d-none')
}
else{
$("#structureParent_div").removeClass('d-none')
$('#structureParentId').html('<option>Select Parent</option>');
$.ajax({
type: 'POST',
url: '/structure/getParents',
dataType: 'json',
data: { parentStructureId: structureTypeId },
success: function(data) {
console.log(data);
$('#structureParentId').empty();
$('#structureParentId').append('<option>Select Parent</option>');
data.forEach(function(companyStructure){
$('#structureParentId').append('<option value="'+ companyStructure.id+'"> ' + companyStructure.name + '</option>');
})
}
});
}
});
});
//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]);
}
}
let counter = 0; //hold d last id
let name_list = [];
function getStructure(){
jQuery.ajax({
type: "POST", // Post / Get method
url: "structure/get", //Where form data is sent on submission
dataType:"text", // Data type, HTML, json etc.
data:{ "_token": "{{ csrf_token() }}"}, //Form variables
success:function(response){
var data=JSON.parse(response);
// console.log((data))
$("#basic-list-group").html('');
data.forEach(structure => {
// console.log(structure);
$("#basic-list-group").append(
`<li class="list-group-item col-12">
${structure.name}
<span class=" pull-right">
<span aria-hidden="true" class="btn btn-danger" onclick="removeStructure(this)">×</span>
<input type="hidden" class="structures" name="structure_ids" value="${structure.id}">
<input type="hidden" class="" name="structure_names" value="${structure.name}">
<i class="icon-cursor-move btn btn-success font-medium-1"></i>
</span>
</li>`
)
counter = structure.id;
});
},
error:function (xhr, ajaxOptions, thrownError){
//$("#loading").hide();
Swal.fire("Error!", "An error occurred!", "error");
}
});
}
// function showList(){
// var list = $(".structures");
// for (let i = 0; i < list.length; i++) {
// const element = list[i];
// console.log(element)
// }
// console.log(counter);
// }
//add new structur to list
function addNewStructure(){
let name = $("#new_structure").val();
if(name == "")
return alert("Structure name cannot be empty");
if($.inArray(name, name_list) !== -1)
return alert("You've already added '"+name+"'");
$("#basic-list-group").append(
`<li class="list-group-item col-12">
${name}
<span class="pull-right">
<span aria-hidden="true" class="btn btn-danger" onclick="removeStructure(this)">×</span>
<input type="hidden" class="structures" name="structure_ids" value="${++counter}">
<input type="hidden" class="" name="structure_names" value="${name}">
<i class="icon-cursor-move btn btn-success font-medium-1"></i>
</span>
</li>`
)
$("#new_structure").val('');
name_list.push(name);
}
function removeStructure(element){
$(element).parent().parent().remove();
}
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>
Zerion Mini Shell 1.0