%PDF-
%PDF-
Mini Shell
Mini Shell
<% include ../partials/header %>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/sidebar %>
<style>
form {
padding: 20px;
}
td form {
display: inline-block;
}
.actionBtn {
border: none;
border-radius: 4px;
color:white;
}
.hide {
display: none;
}
</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-left col-md-6 col-12 mb-2">
<h3 class="content-header-title">Stores</h3>
<div class="row breadcrumbs-top">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Dashboard</a>
</li>
<!-- <li class="breadcrumb-item"><a href="/employee/all">Employees</a> -->
</li>
<li class="breadcrumb-item active">Stores
</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<div class="text-center">
<a class="quick-btn text-red" href="/inventory/store/add" data-target="#addStore" data-toggle="modal">
<i class="la la-plus fa-2x"></i>
<span>New Store</span>
</a>
</div>
<%- format_messages(messages) %>
<section id="dom">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<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> -->
<table class="table table-striped table-bordered inventory">
<thead>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Reference No</th>
<th>Description</th>
<th>Location</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% if(stores.length > 0){ %>
<% stores.forEach(function(store, index){ %>
<tr>
<td> <%= index + 1%> </td>
<td> <%= store.name %> </td>
<td> <%= store.referenceNumber %> </td>
<td> <%= store.description %> </td>
<td> <%= store.location %> </td>
<td>
<!-- <form action="/inventory/stores/delete" method="POST">
<input type="hidden" name="storeId" value="<%= store.id %>" />
<button type="submit" class="bg-danger actionBtn" data-toggle="tooltip" data-placement="bottom" data-original-title="Remove">
<i class="la la-close" > </i>
</button>
</form>
-->
<button class="bg-success actionBtn "><a href="/inventory/stores/view/<%= store.uuid %>" class="" title="View Store" ><i class="la la-eye" > </i></a>
</button>
<button type="submit" class="bg-primary actionBtn" data-target="#addStore" data-toggle="modal" title="Edit Store" onclick="getStore('<%= store.uuid %>')"><i class="la la-pencil" > </i></button>
</td>
</tr>
<% })}%>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- DOM - jQuery events table -->
</div>
</div>
</div>
<!-- ////////////////////////// -->
<input type="hidden" name="_csrf" value="<%= _csrfToken %>" id="_csrf">
<div class="modal fade text-left bd-example-modal-lg" id="addStore" tabindex="-1" role="dialog" aria-labelledby="myModalLabel36" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#1E9FF2;">
<h3 class="modal-title" id="_addStoreLabel"> Add Store</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form form-horizontal" method="post" action="/inventory/stores/add" enctype="multipart/form-data" >
<input type="hidden" name="_csrf" value="<%= _csrfToken %>">
<input type="hidden" name="storeId" value="" id="storeId">
<div class="form-body">
<div class="form-group row">
<label class=" offset-sm-3 col-sm-2 form-control-label" for="inputName1">Store Name</label>
<div class="col-sm-5">
<div class="position-relative ">
<input class="form-control" placeholder="Store Name" name="name" id="storeName"/>
<!-- <div class="form-control-position pl-1"><i class="la la-institution"></i></div> -->
</div>
</div>
</div>
<div class="form-group row">
<label class="offset-sm-3 col-sm-2 " for="inputEmail1">Description</label>
<div class="col-sm-5">
<div class="position-relative ">
<textarea class="form-control" placeholder="Description" type="number" name="description" id="storeDescription"></textarea>
<!-- <div class="form-control-position pl-1"><i class="la la-note"></i></div> -->
</div>
</div>
</div>
<div class="form-group row">
<label class=" offset-sm-3 col-sm-2 form-control-label" for="inputName1">Location</label>
<div class="col-sm-5">
<div class="position-relative ">
<input class="form-control" placeholder="Location" name="location" id="storeLocation"/>
<!-- <div class="form-control-position pl-1"><i class="la la-institution"></i></div> -->
</div>
</div>
</div>
<!-- <div class="form-group row">
<label class="offset-sm-3 col-sm-2 " for="inputEmail1">Upload Image</label>
<div class="col-sm-5">
<input class="form-control" type="file" name="logo" />
</div>
</div> -->
<div class="row">
<div class="col-sm-12 row mb-1 btn-div">
<button class="btn btn-success offset-md-6 col-md-2" type="submit"> Submit <i style="margin-left:5px;" class="la la-paper-plane-o"></i> </button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/footer %>
<script>
function getEmployees(){
$.ajax({
type: "GET", // Post / Get method
url: "/inventory/api/employees", //Where form data is sent on submission
dataType:"text", // Data type, HTML, json etc.
data:{ }, //Form variables
success:function(response){
alert("Request sent")
console.log(response)
//$('#receiverId').html();
},
error:function (xhr, ajaxOptions, thrownError){
console.log("Request error")
$.alert('Could not delete');
}
});
}
$("table.inventory").DataTable();
$('#orgStructure').change(function(e){
var selectedVal = $(this).val();
if(selectedVal === 'employee'){
getEmployees();
} else {
getStructures();
}
})
function getData(url, next){
$('#spinnerContainer').addClass('show');
let fetchData = {
method: 'get',
headers: new Headers()
}
fetch(url, fetchData) // Call the fetch function passing the url of the API as a parameter
.then(function(res) {
// Your code for handling the data you get from the API
res.json().then(function(data){
console.log(data, "Data")
$('#spinnerContainer').removeClass('show');
next(data)
})
})
.catch(function(err) {
// This is where you run code if the server returns any errors
console.log(err, "Error")
});
}
$('#moveBtn').click(function(e){
var opener = $(this)
$('#moveForm').find('[name="itemId"]').val(opener.attr('itemId'))
})
function getStore(uuid){
if(uuid){
$('#spinnerContainer').addClass('show');
$.ajax({
type: "POST", // Post / Get method
url: "/inventory/stores/get-store", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: {_csrf: "<%= _csrfToken %>", uuid }, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
response = JSON.parse(response);
// console.log(response.jobTitles)
if(response.status == "success"){
var store = response.store;
$("#storeId").val(store.id);
$("#storeName").val(store.name);
$("#storeDescription").val(store.description);
$("#storeLocation").val(store.location);
}
else{
toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
}
}
</script>
<script>
function showOrganisationStructures(datas){
var element = $('#companyUnit');
element.html('');
element.append('<option>Select</option>');
if(datas.length > 0){
datas.forEach(function(data){
console.log(data)
element.append('<option value="' + data.id + '">' + data.structure.name + '</option>')
})
} else {
element.html('');
element.append('<option>Nothing was found</option>');
}
}
function showStructureOwner(datas){
var element = $('#ownerId');
element.html('');
element.append('<option>Select Owner</option>');
if(datas.length > 0){
datas.forEach(function(data){
console.log(data)
element.append('<option value="' + data.id + '">' + data.name + '</option>')
})
} else {
element.html('');
element.append('<option>Nothing was found</option>');
}
}
function showRegion(datas){
var element = $('#ownerId');
element.html('');
element.append('<option>Select Region</option>');
if(datas.length > 0){
datas.forEach(function(data){
console.log(data)
element.append('<option value="' + data.id + '">' + data.name + '</option>')
})
} else {
element.html('');
element.append('<option>Nothing was found</option>');
}
}
function showBranch(datas){
var element = $('#ownerId');
element.html('');
element.append('<option>Select Branch</option>');
if(datas.length > 0){
datas.forEach(function(data){
console.log(data)
element.append('<option value="' + data.id + '">' + data.name + '</option>')
})
} else {
element.html('');
element.append('<option>Nothing was found</option>');
}
}
function showEmployee(datas){
var element = $('#ownerId');
element.html('');
element.append('<option>Select Owner</option>');
if(datas.length > 0){
datas.forEach(function(data){
console.log(data)
element.append('<option value="' + data.id + '">' + (data.firstName ? data.firstName : '') + ' ' + (data.middleName ? data.middleName : '') + ' ' + (data.lastName ? data.lastName : '') + '</option>')
})
} else {
element.html('');
element.append('<option>Nothing was found</option>');
}
}
</script>
<script>
$('#companyUnit').change(function(e){
var orgStructureId = $(this).val();
getData('/structure/api/all/' + orgStructureId, function(data){
showStructureOwner(data)
});
})
function showUnit(show){
if(show){
$('#companyUnitContainer').removeClass('hide')
} else {
$('#companyUnitContainer').addClass('hide')
}
}
$('#location').change(function(e){
var value = $(this).val();
switch(value){
case 'Region':
showUnit(false)
getData('/region/api/all', function(data){
showRegion(data)
});
break;
case 'Employee':
showUnit(false)
getData('/employee/api/all', function(data){
showEmployee(data)
});
break;
case 'Branch':
showUnit(false)
getData('/branch/api/all', function(data){
showBranch(data)
});
break;
case 'Company Structure':
showUnit(true)
getData('/structure/organisation/api/all', function(data){
showOrganisationStructures(data)
});
break;
}
})
</script>
Zerion Mini Shell 1.0