%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"><%= item.referenceNo %></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="/inventory/items">Items</a>
</li>
<li class="breadcrumb-item active"><%= item.referenceNo %>
</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<div class="text-center">
<a class="quick-btn text-red" href="/inventory/items/move" data-target="#moveItem" data-toggle="modal">
<i class="ft-arrow-right fa-2x"></i>
<span>Move Item</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="collapse"><i class="ft-minus"></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">
<div class="row col-sm-12">
<div class="col-lg-5 col-md-4 col-sm-12 ">
<img class=" col-sm-12 " src="/assets/images/items/<%= item.image %>" />
<div><br/></div>
</div>
<div class="col-lg-7 col-md-8 col-sm-12 ">
<div>
<label>Name</label>
<div><strong><%= item.name %></strong></div>
</div>
<div>
<label>Description</label>
<div><strong><%= item.description ? item.description : "--" %></strong></div>
</div>
<div>
<label>Location</label>
<div><strong>
<% if(item.movements.length > 0){ %>
<%= item.movements[item.movements.length - 1].location %> :
<%= item.receiver %>
<% } else { %>
<%= item.location %> Store
<% } %>
</strong></div>
</div>
</div>
</div>
<div>
<br>
<table class="table table-striped table-bordered " id="documentsTable">
<thead>
<tr>
<th>S/N</th>
<th>Document Name</th>
<!-- <th>Type</th> -->
<!-- <th>Size</th> -->
<th>Actions</th>
</tr>
</thead>
<tbody>
<% if(item.documents.length > 0){ %>
<% item.documents.forEach(function(document, index){ %>
<tr>
<td> <%= index +1 %> </td>
<td> <%= document.name %> </td>
<!-- <td> <%= document.type %> </td> -->
<!-- <td> <%= document.size %> </td> -->
<td>
<a href="/inventory/items/document/download/<%= document.filename %>" class="" download="<%= document.name %>" title="Download Document" ><i class="ft-arrow-down" > </i></a>
</td>
</tr>
<% })}%>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section >
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
Item Movement History
<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="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">
<div class="table">
<table class="table table-striped table-bordered " id="historiesTable">
<thead>
<tr>
<th>Moved From</th>
<th>Moved To</th>
<!-- <th>Type</th> -->
<th>Moved By</th>
<th>Remarks</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<% if(item.movements.length > 0){ %>
<% item.movements.forEach(function(movement, index){ %>
<tr>
<td id="moverName<%= movement.id %>"> <%= movement.location %></td>
<td id="receiverName<%= movement.id %>"> <%= movement.location %><%= movement.moverType %> </td>
<td> <%= movement.moveBy.firstName+" "+movement.moveBy.lastName %></td>
<td> <%= movement.remarks %> </td>
<td> <%= moment(movement.createdAt).format('MMMM Do YYYY') %> </td>
</tr>
<% })}%>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="modal fade text-left bd-example-modal-sm" id="moveItem" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#1E9FF2;">
<h3 class="modal-title" id="myModalLabel35"> Move Item</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="moveForm" class="form" action="/inventory/item/move" method="POST">
<input type="hidden" readonly name="itemId" value="<%= item.id %>">
<div class="form-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="location">Move To</label>
<select class="custom-select" name="location" id="location">
<option value="">Select Location</option>
<option value="Store">Store</option>
<option value="Region">Region</option>
<option value="Branch">Branch</option>
<option value="Company Structure">Company Structure</option>
<option value="Employee">Employee</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div id="companyUnitContainer" class="hide">
<label for="companyUnit">Company Units</label>
<select class="custom-select" name="companyUnit" id="companyUnit">
<option value="">Select</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="receiverId">Receiver</label>
<select class="custom-select" name="receiverId" id="receiverId">
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="pieces">Remarks</label>
<textarea name="remarks" id="remarks" class="form-control" placeholder="Remarks" ></textarea>
</div>
</div>
<input type="hidden" name="itemId" />
<input type="hidden" name="receiverType" />
</div>
<div class="form-actions">
<button type="reset" class="btn btn-warning mr-1" data-dismiss="modal" value="close">
<i class="ft-x"></i> Cancel
</button>
<button type="submit" class="btn btn-primary"><i class="la la-check-square-o"></i>Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/footer %>
<script>
$("#documentsTable").DataTable({searching: false, paging: false, info: false});
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');
}
});
}
$('#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'))
})
</script>
<script>
function showStore(datas){
var element = $('#receiverId');
element.html('');
element.append('<option>Select Store</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>No store found</option>');
}
}
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 = $('#receiverId');
element.html('');
element.append('<option>Select Receiver</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 = $('#receiverId');
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 = $('#receiverId');
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 = $('#receiverId');
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 'Store':
showUnit(false)
getData('/inventory/stores/api/all', function(data){
showStore(data)
});
break;
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>
<script>
$(document).ready(function() {
$.ajax({
type: "POST", // Post / Get method
url: "/inventory/items/get-moverOrReceiverName", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: {_csrf: "<%= _csrfToken %>", itemId: "<%= item.id %>" }, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
response = JSON.parse(response);
// console.log(response.jobTitles)
if(response.status == "success"){
var itemMovements = response.itemMovements;
itemMovements.forEach((movement, index) => {
// console.log($(`#moverName${movement.id}`).html())
$(`#moverName${movement.id}`).html(movement.mover);
$(`#receiverName${movement.id}`).html(movement.receiver);
})
}
else{
toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
})
</script>
Zerion Mini Shell 1.0