%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"><%= store.name %></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/stores">Stores</a>
</li>
<li class="breadcrumb-item active"><%= store.name %>
</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<div class="text-center">
<a class="quick-btn text-red" href="/inventory/items/add" data-target="#addItem" data-toggle="modal">
<i class="la la-plus fa-2x"></i>
<span>New 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="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>Logo</th>
<th>Name</th>
<th>Reference No</th>
<th>Description</th>
<!-- <th>Pieces</th> -->
<th>Actions</th>
</tr>
</thead>
<tbody>
<% if(store.items.length > 0){ %>
<% store.items.forEach(function(item, index){ %>
<tr>
<td> <%= index + 1%> </td>
<td> <img height="50px" width="50px" src="/assets/images/items/<%= item.image %>" /> </td>
<td> <%= item.name %> </td>
<td> <%= item.referenceNo %> </td>
<td> <%= item.description %> </td>
<!-- <td> <%= item.pieces %> </td> -->
<td>
<!-- <form action="/inventory/item/delete" method="POST">
<input type="hidden" name="itemId" value="<%= item.id %>" />
<button type="submit" class="bg-danger actionBtn" data-toggle="tooltip" data-placement="bottom" data-original-title="Remove">
<i class="ft-delete" > </i>
</button>
</form> -->
<button class="bg-success actionBtn " style="colour:white"><a href="/inventory/items/view/<%= item.uuid %>" class="" title="View Item" ><i class="la la-eye" > </i></a>
</button>
<!-- <button
id="moveBtn"
itemId="<%= item.id %>"
class="actionBtn btn-primary" data-toggle="modal" data-target="#moveItem" data-toggle="tooltip" data-placement="bottom" data-original-title="Move" >
<i class="ft-arrow-right" > </i>
</button> -->
</td>
</tr>
<% })}%>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- DOM - jQuery events table -->
</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="storeId" value="<%= store.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="Region">Region</option>
<option value="Branch">Branch</option>
<option value="Company Structure">Company Unit</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="ownerId">Receiver</label>
<select class="custom-select" name="ownerId" id="ownerId">
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="pieces">Pieces to Move</label>
<input type="number" min="0" id="pieces" class="form-control" placeholder="Pieces" name="pieces">
</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>
<div class="modal fade text-left bd-example-modal-lg" id="addItem" 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="_addItemLabel"> Add Item</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/items/add" enctype="multipart/form-data" id="addItemForm">
<input type="hidden" name="_csrf" value="<%= _csrfToken %>" id="_csrf">
<input type="hidden" readonly name="storeId" value="<%= store.id %>">
<input type="hidden" name="docCount" id="docCount" value="0" readonly>
<div class="form-body">
<div class="form-group row">
<label class=" offset-sm-3 col-sm-2 form-control-label" for="inputName1">Name</label>
<div class="col-sm-5">
<div class="position-relative">
<input class="form-control" placeholder="Item Name" name="name"/>
<!-- <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">Pieces</label>
<div class="col-sm-5">
<div class="position-relative ">
<input class="form-control" placeholder="Pieces" type="number" name="pieces" />
<div class="form-control-position pl-1"><i class="la la-male"></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"></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 " for="inputEmail1">Item Image</label>
<div class="col-sm-5">
<input class="form-control" type="file" name="image" />
</div>
</div>
<div class="form-group col-12 mb-2 file-repeater">
<div data-repeater-list="repeater-list">
<div data-repeater-item>
<div class="row mb-1">
<div class="col-6 col-xl-5">
<input type="text" name="documentName" placeholder="Document Name" class="form-control documentNames">
</div>
<div class="col-4 col-xl-6">
<label class="file center-block">
<input type="file" id="file" class="item-documents form-control" name="documents" required>
<span class="file-custom"></span>
</label>
</div>
<div class="col-2 col-xl-1">
<button type="button" data-repeater-delete class="btn btn-icon btn-danger mr-1"><i class="ft-x"></i></button>
</div>
</div>
</div>
</div>
<button type="button" data-repeater-create class="btn btn-primary">
<i class="ft-plus"></i> Add new document
</button>
</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"> Save <% /* <i style="margin-left:5px;" class="la la-paper-plane-o"></i> */ %> </button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/footer %>
<script src="/app-assets/vendors/js/forms/repeater/jquery.repeater.min.js" ></script>
<script src="/app-assets/js/scripts/forms/form-repeater.js" type="text/javascript"></script>
<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'))
})
</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;
}
})
$("#addItemForm").on('submit', (event) =>{
var documentNames = $('.documentNames');
$(".item-documents").each((index, document) => {
$(document).attr('name', `document[${index}]`);
$(documentNames[index]).attr('name', `documentName[${index}]`);
})
$("#docCount").val(documentNames.length)
// event.preventDefault();
})
</script>
Zerion Mini Shell 1.0