Update Item & Product
This commit is contained in:
parent
58f3fc4c48
commit
c45251e08f
@ -187,7 +187,69 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="addRequestModalLabel" aria-hidden="true" >
|
||||
<div class="modal fade" id="approveModal" tabindex="-1" role="dialog" aria-labelledby="approveRequestModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="approveRequestModalLabel">Approve Request</h5>
|
||||
<button type="button" class="closeModal" data-dismiss="modal" aria-label="Close" v-on:click="showRequestModal=false">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container-fluid">
|
||||
<form v-on:submit.prevent="approveRequest" data-aos="fade-right">
|
||||
@* <div class=" register" data-aos="fade-right"> *@
|
||||
<div data-aos="fade-right">
|
||||
<div class="row" data-aos="fade-right">
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
||||
<h3 class="register-heading">APPROVE REQUEST</h3>
|
||||
<div class="row register-form">
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="form-group row">
|
||||
@* <label class="col-sm-4 col-form-label hidden-label">Request Id</label> *@
|
||||
<div class="col-sm-8">
|
||||
<div class="dropdown">
|
||||
<input type="text" id="currentrequestID" name="currentrequestID" v-model="currentrequestID" class="form-control" hidden />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">Remark</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="dropdown">
|
||||
<input type="text" id="approveremark" name="approveremark" v-model="approveremark" class="form-control" required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* Submit and Reset Buttons *@
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8 offset-sm-3">
|
||||
<button type="button" v-on:click="resetForm" class="btn btn-secondary m-1">Reset</button>
|
||||
<button type="submit" class="btn btn-primary m-1 submit-button">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="addRequestModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -346,67 +408,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="approveModal" tabindex="-1" role="dialog" aria-labelledby="approveRequestModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="approveRequestModalLabel">Approve Request</h5>
|
||||
<button type="button" class="closeModal" data-dismiss="modal" aria-label="Close" v-on:click="showRequestModal=false">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container-fluid">
|
||||
<form v-on:submit.prevent="approveRequest" data-aos="fade-right">
|
||||
@* <div class=" register" data-aos="fade-right"> *@
|
||||
<div data-aos="fade-right">
|
||||
<div class="row" data-aos="fade-right">
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
||||
<h3 class="register-heading">APPROVE REQUEST</h3>
|
||||
<div class="row register-form">
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="form-group row">
|
||||
@* <label class="col-sm-4 col-form-label hidden-label">Request Id</label> *@
|
||||
<div class="col-sm-8">
|
||||
<div class="dropdown">
|
||||
<input type="text" id="currentrequestID" name="currentrequestID" v-model="currentrequestID" class="form-control" hidden />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">Remark</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="dropdown">
|
||||
<input type="text" id="approveremark" name="approveremark" v-model="approveremark" class="form-control" required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* Submit and Reset Buttons *@
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8 offset-sm-3">
|
||||
<button type="button" v-on:click="resetForm" class="btn btn-secondary m-1">Reset</button>
|
||||
<button type="submit" class="btn btn-primary m-1 submit-button">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
@ -472,15 +473,16 @@
|
||||
dropdownOpen: false,
|
||||
showRequestModal: false,
|
||||
}
|
||||
}, async mounted() {
|
||||
this.fetchRequest();
|
||||
},
|
||||
async mounted() {
|
||||
this.fetchProducts();
|
||||
this.fetchStation();
|
||||
await this.fetchUser();
|
||||
|
||||
// Wait for fetchStoreSpecific to complete before calling fetchStore
|
||||
await this.fetchStoreSpecific(this.currentUserId);
|
||||
await Promise.all([
|
||||
await Promise.all([
|
||||
await this.fetchRequest(),
|
||||
await this.fetchStore(),
|
||||
]);
|
||||
},
|
||||
@ -629,7 +631,6 @@
|
||||
var actiontButtons = `<div class="row" style="padding: 5px;"> <button type="button" class="btn btn-success approve-btn" data-id="${data}">Approve</button></div> <div class="row" style="padding: 5px;"><button type="button" class="btn btn-danger reject-btn" data-id="${data}">Reject</button></div>`;
|
||||
return actiontButtons;
|
||||
}
|
||||
|
||||
function renderDocument(data, type, full, meta) {
|
||||
if (!data) {
|
||||
return "No Document";
|
||||
@ -696,7 +697,6 @@
|
||||
],
|
||||
responsive: true
|
||||
});
|
||||
|
||||
this.requestMasterDatatable = $('#requestMasterDatatable').DataTable({
|
||||
"data": this.items.filter(item => item.assignStoreItem != null && item.status == "Requested" && item.userId == this.currentUserId),
|
||||
"columns": [
|
||||
@ -723,9 +723,8 @@
|
||||
responsive: true,
|
||||
drawCallback: function (settings) { }
|
||||
});
|
||||
|
||||
this.requestOtherMasterDatatable = $('#requestOtherMasterDatatable').DataTable({
|
||||
"data": this.items.filter(item => item.status != "Requested" && item.assignStoreItem != null && item.userId != this.currentUserId),
|
||||
"data": this.items.filter(item => item.status == "Requested" && this.storeUser.some(store => store.id === item.fromStoreItem)),
|
||||
"columns": [
|
||||
{ "title": "Request ID", "data": "requestID" },
|
||||
{ "title": "Action", "data": "requestID", "render": renderActionButtons, "className": "align-middle" },
|
||||
@ -743,9 +742,8 @@
|
||||
],
|
||||
responsive: true
|
||||
});
|
||||
|
||||
this.settledrequestMasterDatatable = $('#settledrequestMasterDatatable').DataTable({
|
||||
"data": this.items.filter(item => item.status != "Requested" && item.assignStoreItem != null && item.userId != this.currentUserId),
|
||||
"data": this.items.filter(item => item.status != "Requested" && item.assignStoreItem != null),
|
||||
"columns": [
|
||||
{ "title": "Request ID", "data": "requestID" },
|
||||
{ "title": "Product", "data": "productName", "render": renderDocument },
|
||||
@ -798,12 +796,10 @@
|
||||
|
||||
async fetchRequest() {
|
||||
try {
|
||||
// const token = localStorage.getItem('token'); // Get the token from localStorage
|
||||
const response = await fetch('/InvMainAPI/ItemRequestList', {
|
||||
method: 'GET', // Specify the HTTP method
|
||||
headers: {
|
||||
'Content-Type': 'application/json', // Set content type
|
||||
// 'Authorization': `Bearer ${token}` // Include the token in the headers
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -64,7 +64,8 @@
|
||||
<h2>Pending Item Movement</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-bordered table-hover table-striped no-wrap" id="itemMovementNotCompleteDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
|
||||
<table class="table table-bordered table-hover table-striped no-wrap" id="itemMovementNotCompleteDatatable"
|
||||
style="width:100%;border-style: solid; border-width: 1px"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -73,7 +74,8 @@
|
||||
<h2>Complete Item Movement</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-bordered table-hover table-striped no-wrap" id="itemMovementCompleteDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
|
||||
<table class="table table-bordered table-hover table-striped no-wrap" id="itemMovementCompleteDatatable"
|
||||
style="width:100%;border-style: solid; border-width: 1px"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -284,7 +286,8 @@
|
||||
|
||||
<!--------------------------------------------STATION CATEGORY---------------------------------------------------------------------->
|
||||
<div v-if="sortBy === 'station'">
|
||||
<div v-for="(items, station) in filteredStation" :key="stationName" :class="{'bg-light-gray': station === 'Unassign Station', 'bg-white': station !== 'Unassign Station'}" class="station-category card mt-3">
|
||||
<div v-for="(items, station) in filteredStation" :key="stationName"
|
||||
:class="{'bg-light-gray': station === 'Unassign Station', 'bg-white': station !== 'Unassign Station'}" class="station-category card mt-3">
|
||||
<!-- Station Header -->
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h3>{{ station }}</h3>
|
||||
@ -569,7 +572,8 @@
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Sort items from newest to oldest & filter them
|
||||
let filteredGrouped = {};
|
||||
|
||||
for (let itemId in grouped) {
|
||||
let movements = grouped[itemId].movements
|
||||
.sort((a, b) => b.id - a.id); // Newest to oldest
|
||||
@ -578,14 +582,27 @@
|
||||
m.toOther === 'Return' && m.movementComplete == 1
|
||||
);
|
||||
|
||||
let nextIndex = movements.findIndex(m =>
|
||||
m.latestStatus === 'Ready To Deploy' && m.movementComplete == 1
|
||||
);
|
||||
|
||||
if (stopIndex !== -1) {
|
||||
movements = movements.slice(0, stopIndex);
|
||||
}
|
||||
|
||||
grouped[itemId].movements = movements;
|
||||
if (nextIndex !== -1) {
|
||||
movements = movements.slice(0, nextIndex);
|
||||
}
|
||||
|
||||
if (movements.length > 0) {
|
||||
filteredGrouped[itemId] = {
|
||||
uniqueID: grouped[itemId].uniqueID,
|
||||
movements: movements,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return grouped;
|
||||
return filteredGrouped;
|
||||
},
|
||||
|
||||
groupedByStation() {
|
||||
@ -611,11 +628,18 @@
|
||||
m.toOther === 'Return' && m.movementComplete == 1
|
||||
);
|
||||
|
||||
// Remove older movements
|
||||
let nextIndex = movements.findIndex(m =>
|
||||
m.latestStatus === 'Ready To Deploy' && m.movementComplete == 1
|
||||
);
|
||||
|
||||
if (stopIndex !== -1) {
|
||||
movements = movements.slice(0, stopIndex);
|
||||
}
|
||||
|
||||
if (nextIndex !== -1) {
|
||||
movements = movements.slice(0, nextIndex);
|
||||
}
|
||||
|
||||
if (movements.length > 0) {
|
||||
let latestMovement = movements[0];
|
||||
let station = latestMovement.lastStationName || latestMovement.toStationName || "Self Assigned";
|
||||
@ -648,11 +672,17 @@
|
||||
return this.processedGroupedItems;
|
||||
}
|
||||
const searchLower = this.searchQuery.toLowerCase();
|
||||
return Object.fromEntries(
|
||||
Object.entries(this.processedGroupedItems).filter(([_, group]) =>
|
||||
group.uniqueID.toLowerCase().includes(searchLower)
|
||||
)
|
||||
);
|
||||
let grouped = this.processedGroupedItems;
|
||||
let filtered = {};
|
||||
|
||||
Object.keys(grouped).forEach(item => {
|
||||
if (item.toLowerCase().includes(searchLower)) {
|
||||
if (grouped[item] > 0) {
|
||||
filtered[item] = grouped[item];
|
||||
}
|
||||
}
|
||||
});
|
||||
return filtered;
|
||||
},
|
||||
|
||||
filteredStation() {
|
||||
@ -720,6 +750,10 @@
|
||||
}
|
||||
},
|
||||
|
||||
handleSorting() {
|
||||
this.renderTables();
|
||||
},
|
||||
|
||||
renderTables() {
|
||||
if (this.sortBy === "all") {
|
||||
this.initAllTables();
|
||||
@ -737,7 +771,7 @@
|
||||
this.stationDatatable.destroy();
|
||||
}
|
||||
|
||||
// Get latest movement per uniqueID
|
||||
// Get latest movement per uniqueID after filtering
|
||||
function getLatestMovements(data) {
|
||||
let latestMovements = {};
|
||||
data.forEach(movement => {
|
||||
@ -749,17 +783,41 @@
|
||||
return Object.values(latestMovements);
|
||||
}
|
||||
|
||||
// Distribute items based on priority
|
||||
// Filter movements based on conditions
|
||||
function filterMovements(movements) {
|
||||
let stopIndex = movements.findIndex(m =>
|
||||
m.toOther === 'Return' && m.movementComplete == 1
|
||||
);
|
||||
|
||||
let nextIndex = movements.findIndex(m =>
|
||||
m.latestStatus === 'Ready To Deploy' && m.movementComplete == 1
|
||||
);
|
||||
|
||||
if (stopIndex !== -1) {
|
||||
movements = movements.slice(0, stopIndex);
|
||||
}
|
||||
|
||||
if (nextIndex !== -1) {
|
||||
movements = movements.slice(0, nextIndex);
|
||||
}
|
||||
|
||||
return movements;
|
||||
}
|
||||
|
||||
let latestMovements = getLatestMovements(this.itemMovements);
|
||||
|
||||
let notCompleteData = [];
|
||||
let completeData = [];
|
||||
let assignedData = [];
|
||||
|
||||
latestMovements.forEach(movement => {
|
||||
if (movement.movementComplete == 0) {
|
||||
notCompleteData.push(movement);
|
||||
} else if (movement.movementComplete == 1) {
|
||||
completeData.push(movement);
|
||||
let filteredMovements = filterMovements([movement]);
|
||||
|
||||
if (filteredMovements.length > 0) {
|
||||
if (movement.movementComplete == 0) {
|
||||
notCompleteData.push(movement);
|
||||
} else if (movement.movementComplete == 1) {
|
||||
completeData.push(movement);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -818,21 +876,22 @@
|
||||
var isPdf = /\.pdf$/i.test(data);
|
||||
if (isImage) {
|
||||
return `<a href="${data}" target="_blank" data-lightbox="image-1">
|
||||
<img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
|
||||
</a>`;
|
||||
} else if (isPdf) {
|
||||
return `<a href="${data}" target="_blank">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg"
|
||||
alt="PDF Document" class="img-thumbnail"
|
||||
style="width: 50px; height: 50px;" />
|
||||
<br>View PDF
|
||||
</a>`;
|
||||
<img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
|
||||
</a>`;
|
||||
} else if (isPdf) {
|
||||
return `<a href="${data}" target="_blank">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg"
|
||||
alt="PDF Document" class="img-thumbnail"
|
||||
style="width: 50px; height: 50px;" />
|
||||
<br>View PDF
|
||||
</a>`;
|
||||
} else {
|
||||
return `<a href="${data}" target="_blank">Download File</a>`;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
toggleCategory(itemId) {
|
||||
this.categoryVisible[itemId] = !this.categoryVisible[itemId];
|
||||
|
||||
@ -857,9 +916,6 @@
|
||||
this.detailsVisible[movementId] = !this.detailsVisible[movementId];
|
||||
},
|
||||
|
||||
handleSorting() {
|
||||
this.renderTables();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -439,231 +439,69 @@
|
||||
},
|
||||
|
||||
|
||||
initiateTable() {
|
||||
self = this;
|
||||
this.requestDatatable = $('#requestDatatable').DataTable({
|
||||
"data": this.request.filter(request => request.status == "Requested"),
|
||||
"columns": [
|
||||
{
|
||||
"title": "Request ID",
|
||||
"data": "requestID",
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
// Assign a unique ID to the <td> element
|
||||
$(td).attr('id', `qr${cellData}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
"title": "Product Name",
|
||||
"data": "productName",
|
||||
"render": function (data, type, full, meta) {
|
||||
if (!data) {
|
||||
return "No Document";
|
||||
}
|
||||
initiateTable() {
|
||||
let self = this;
|
||||
|
||||
var imageSrc = full.productPicture;
|
||||
// Check if the document is an image based on file extension
|
||||
var isImage = /\.(jpeg|jpg|png|gif)$/i.test(imageSrc);
|
||||
var isPdf = /\.pdf$/i.test(imageSrc);
|
||||
// var imageSrc = full.productImage; Fallback to data if imgsrc is unavailable
|
||||
console.log(full);
|
||||
function renderDocument(data, full) {
|
||||
if (!data) return "No Document";
|
||||
|
||||
if (isImage) {
|
||||
return ` <div class="row"><td>${data}</td></div>
|
||||
<a href="${imageSrc}" target="_blank" data-lightbox="image-1">
|
||||
<img src="${imageSrc}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
|
||||
</a>`;
|
||||
}
|
||||
else if (isPdf) {
|
||||
return `<div class="row"><td>${data}</td></div>
|
||||
<a href="${imageSrc}" target="_blank">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg"
|
||||
alt="PDF Document" class="img-thumbnail"
|
||||
style="width: 50px; height: 50px;" />
|
||||
<br>View PDF
|
||||
</a>`;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
"title": "Product Category",
|
||||
"data": "productCategory",
|
||||
},
|
||||
{
|
||||
"title": "Request Quantity",
|
||||
"data": "requestQuantity",
|
||||
},
|
||||
let isImage = /\.(jpeg|jpg|png|gif)$/i.test(data);
|
||||
let isPdf = /\.pdf$/i.test(data);
|
||||
|
||||
{
|
||||
"title": "Document / Picture",
|
||||
"data": "document",
|
||||
"render": function (data, type, full, meta) {
|
||||
if (!data) {
|
||||
return "No Document";
|
||||
}
|
||||
|
||||
// Check if the document is an image based on file extension
|
||||
var isImage = /\.(jpeg|jpg|png|gif)$/i.test(data);
|
||||
var isPdf = /\.pdf$/i.test(data);
|
||||
|
||||
if (isImage) {
|
||||
return `<a href="${data}" target="_blank" data-lightbox="image-1">
|
||||
<img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
|
||||
</a>`;
|
||||
}
|
||||
else if (isPdf) {
|
||||
return `<a href="${data}" target="_blank">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg"
|
||||
alt="PDF Document" class="img-thumbnail"
|
||||
style="width: 50px; height: 50px;" />
|
||||
<br>View PDF
|
||||
</a>`;
|
||||
} else {
|
||||
return `<a href="${data}" target="_blank">Download File</a>`;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
"title": "Remark",
|
||||
"data": "remarkUser",
|
||||
},
|
||||
{
|
||||
"title": "Station Deploy",
|
||||
"data": "stationName",
|
||||
"render": function (data, type, full, meta) {
|
||||
return data ? data : "Self Assign";
|
||||
}
|
||||
},
|
||||
{
|
||||
"title": "Request Date",
|
||||
"data": "requestDate",
|
||||
},
|
||||
{
|
||||
"title": "Status",
|
||||
"data": "status",
|
||||
},
|
||||
{
|
||||
"title": "Delete",
|
||||
"data": "requestID",
|
||||
"render": function (data) {
|
||||
var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${data}">Delete</button>`;
|
||||
return deleteButton;
|
||||
},
|
||||
"className": "align-middle",
|
||||
if (isImage) {
|
||||
return `<a href="${data}" target="_blank" data-lightbox="image-1">
|
||||
<img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
|
||||
</a>`;
|
||||
} else if (isPdf) {
|
||||
return `<a href="${data}" target="_blank">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg"
|
||||
alt="PDF Document" class="img-thumbnail"
|
||||
style="width: 50px; height: 50px;" />
|
||||
<br>View PDF
|
||||
</a>`;
|
||||
} else {
|
||||
return `<a href="${data}" target="_blank">Download File</a>`;
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
responsive: true,
|
||||
});
|
||||
this.requestDatatable = $('#settledrequestDatatable').DataTable({
|
||||
"data": this.request.filter(request => request.status !== "Requested"),
|
||||
"columns": [
|
||||
{
|
||||
"title": "Request ID",
|
||||
"data": "requestID",
|
||||
"createdCell": function (td, cellData, rowData, row, col) {
|
||||
// Assign a unique ID to the <td> element
|
||||
$(td).attr('id', `qr${cellData}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
"title": "Status",
|
||||
"data": "status",
|
||||
},
|
||||
{
|
||||
"title": "Product Name",
|
||||
"data": "productName",
|
||||
"render": function (data, type, full, meta) {
|
||||
if (!data) {
|
||||
return "No Document";
|
||||
}
|
||||
function renderDeleteButton(data) {
|
||||
return `<button type="button" class="btn btn-danger delete-btn" data-id="${data}">Delete</button>`;
|
||||
}
|
||||
|
||||
var imageSrc = full.productPicture;
|
||||
// Check if the document is an image based on file extension
|
||||
var isImage = /\.(jpeg|jpg|png|gif)$/i.test(imageSrc);
|
||||
var isPdf = /\.pdf$/i.test(imageSrc);
|
||||
// var imageSrc = full.productImage; Fallback to data if imgsrc is unavailable
|
||||
console.log(full);
|
||||
this.pendingRequestDatatable = $('#requestDatatable').DataTable({
|
||||
"data": this.request.filter(req => req.status === "Requested"),
|
||||
"columns": [
|
||||
{ "title": "Request ID", "data": "requestID", "createdCell": (td, cellData) => $(td).attr('id', `qr${cellData}`) },
|
||||
{ "title": "Product Name", "data": "productName", "render": (data, type, full) => renderDocument(full.productPicture) },
|
||||
{ "title": "Product Category", "data": "productCategory" },
|
||||
{ "title": "Request Quantity", "data": "requestQuantity" },
|
||||
{ "title": "Document / Picture", "data": "document", "render": (data, type, full) => renderDocument(data) },
|
||||
{ "title": "Remark", "data": "remarkUser" },
|
||||
{ "title": "Station Deploy", "data": "stationName", "render": (data) => data || "Self Assign" },
|
||||
{ "title": "Request Date", "data": "requestDate" },
|
||||
{ "title": "Status", "data": "status" },
|
||||
{ "title": "Delete", "data": "requestID", "render": renderDeleteButton, "className": "align-middle" }
|
||||
],
|
||||
responsive: true,
|
||||
});
|
||||
|
||||
if (isImage) {
|
||||
return ` <div class="row"><td>${data}</td></div>
|
||||
<a href="${imageSrc}" target="_blank" data-lightbox="image-1">
|
||||
<img src="${imageSrc}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
|
||||
</a>`;
|
||||
}
|
||||
else if (isPdf) {
|
||||
return `<div class="row"><td>${data}</td></div>
|
||||
<a href="${imageSrc}" target="_blank">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg"
|
||||
alt="PDF Document" class="img-thumbnail"
|
||||
style="width: 50px; height: 50px;" />
|
||||
<br>View PDF
|
||||
</a>`;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
"title": "Product Category",
|
||||
"data": "productCategory",
|
||||
},
|
||||
{
|
||||
"title": "Request Quantity",
|
||||
"data": "requestQuantity",
|
||||
},
|
||||
{
|
||||
"title": "Station Deploy",
|
||||
"data": "stationName",
|
||||
"render": function (data, type, full, meta) {
|
||||
return data ? data : "Self Assign";
|
||||
}
|
||||
},
|
||||
{
|
||||
"title": "Document / Picture",
|
||||
"data": "document",
|
||||
"render": function (data, type, full, meta) {
|
||||
if (!data) {
|
||||
return "No Document";
|
||||
}
|
||||
|
||||
// Check if the document is an image based on file extension
|
||||
var isImage = /\.(jpeg|jpg|png|gif)$/i.test(data);
|
||||
var isPdf = /\.pdf$/i.test(data);
|
||||
|
||||
if (isImage) {
|
||||
return `<a href="${data}" target="_blank" data-lightbox="image-1">
|
||||
<img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
|
||||
</a>`;
|
||||
} else if (isPdf) {
|
||||
return `<a href="${data}" target="_blank">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg"
|
||||
alt="PDF Document" class="img-thumbnail"
|
||||
style="width: 50px; height: 50px;" />
|
||||
<br>View PDF
|
||||
</a>`;
|
||||
} else {
|
||||
return `<a href="${data}" target="_blank">Download File</a>`;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
"title": "Remark",
|
||||
"data": "remarkUser",
|
||||
},
|
||||
{
|
||||
"title": "Remark (Master)",
|
||||
"data": "remarkMasterInv",
|
||||
},
|
||||
{
|
||||
"title": "Request Date",
|
||||
"data": "requestDate",
|
||||
},
|
||||
{
|
||||
"title": "Approval Date",
|
||||
"data": "approvalDate",
|
||||
}
|
||||
|
||||
],
|
||||
responsive: true,
|
||||
});
|
||||
this.settledRequestDatatable = $('#settledrequestDatatable').DataTable({
|
||||
"data": this.request.filter(req => req.status !== "Requested"),
|
||||
"columns": [
|
||||
{ "title": "Request ID", "data": "requestID", "createdCell": (td, cellData) => $(td).attr('id', `qr${cellData}`) },
|
||||
{ "title": "Status", "data": "status" },
|
||||
{ "title": "Product Name", "data": "productName", "render": (data, type, full) => renderDocument(full.productPicture) },
|
||||
{ "title": "Product Category", "data": "productCategory" },
|
||||
{ "title": "Request Quantity", "data": "requestQuantity" },
|
||||
{ "title": "Station Deploy", "data": "stationName", "render": (data) => data || "Self Assign" },
|
||||
{ "title": "Document / Picture", "data": "document", "render": (data, type, full) => renderDocument(data) },
|
||||
{ "title": "Remark", "data": "remarkUser" },
|
||||
{ "title": "Remark (Master)", "data": "remarkMasterInv" },
|
||||
{ "title": "Request Date", "data": "requestDate" },
|
||||
{ "title": "Approval Date", "data": "approvalDate" }
|
||||
],
|
||||
responsive: true,
|
||||
});
|
||||
|
||||
$('#requestDatatable tbody').off('click', '.delete-btn');
|
||||
|
||||
@ -672,9 +510,9 @@
|
||||
self.deleteRequestItem(requestID);
|
||||
});
|
||||
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
async fetchRequest() {
|
||||
try
|
||||
|
||||
@ -145,14 +145,6 @@
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Station -->
|
||||
<!-- <li class="list-group-item d-flex justify-content-between align-items-center"> -->
|
||||
<!-- <span class="fw-bold"> -->
|
||||
<!-- <i class="fas fa-map-marker-alt me-2 text-secondary"></i>Station: -->
|
||||
<!-- </span> -->
|
||||
<!-- <span class="text-muted">{{ thisItem.currentStation || 'N/A' }}</span> -->
|
||||
<!-- </li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -542,15 +534,6 @@
|
||||
|
||||
async returnItemMovement() {
|
||||
|
||||
// const requiredFields = ['remark', 'consignmentNote'];
|
||||
|
||||
// for (let field of requiredFields) {
|
||||
// if (!this[field]) {
|
||||
// alert(`Request Error: Please fill in required field ${field}.`, 'warning');
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
|
||||
if (!confirm("Are you sure you want to return this item?")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user