Update
This commit is contained in:
parent
5a786d221d
commit
5576acc67d
@ -33,16 +33,16 @@
|
|||||||
<div class="modal-body d-flex justify-content-center align-items-center">
|
<div class="modal-body d-flex justify-content-center align-items-center">
|
||||||
<div class="container" style="font-family: 'OCR A', monospace;">
|
<div class="container" style="font-family: 'OCR A', monospace;">
|
||||||
<div class="row" ref="qrInfo" id="qrInfo">
|
<div class="row" ref="qrInfo" id="qrInfo">
|
||||||
<div class="col-5 text-center">
|
<div class="col-5 text-center d-flex align-items-center justify-content-center">
|
||||||
<div class="row">
|
|
||||||
<div id="QrContainer"></div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<div id="QrContainer"></div>
|
||||||
<div class="col-12 text-center">
|
<div class="col-12 text-center">
|
||||||
{{thisQRInfo.uniqueID}}
|
{{thisQRInfo.uniqueID}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="col-7 d-flex align-items-center justify-content-center">
|
<div class="col-7 d-flex align-items-center justify-content-center">
|
||||||
<div class="text-center fs-4 text">
|
<div class="text-center fs-4 text">
|
||||||
<div class="col-12 my-3">
|
<div class="col-12 my-3">
|
||||||
@ -607,8 +607,8 @@
|
|||||||
// Generate QR code only if not already generated
|
// Generate QR code only if not already generated
|
||||||
new QRCode(container[0], {
|
new QRCode(container[0], {
|
||||||
text: data.qrString,
|
text: data.qrString,
|
||||||
width: 150,
|
width: 100,
|
||||||
height: 150,
|
height: 100,
|
||||||
colorDark: "#000000",
|
colorDark: "#000000",
|
||||||
colorLight: "#ffffff",
|
colorLight: "#ffffff",
|
||||||
correctLevel: QRCode.CorrectLevel.M
|
correctLevel: QRCode.CorrectLevel.M
|
||||||
@ -847,7 +847,7 @@
|
|||||||
|
|
||||||
// Safely set image content
|
// Safely set image content
|
||||||
const sanitizedImgSrc = encodeURI(imgSrc); // Sanitize the URL
|
const sanitizedImgSrc = encodeURI(imgSrc); // Sanitize the URL
|
||||||
container.innerHTML = `<img src="${sanitizedImgSrc}" alt="QR Code" class="text-center "style="width: 150px; height: 150px;" />`;
|
container.innerHTML = `<img src="${sanitizedImgSrc}" alt="QR Code" class="text-center " />`;
|
||||||
|
|
||||||
// Fetch QR information
|
// Fetch QR information
|
||||||
const qrInfo = this.getPrintedQR(uniqueQR);
|
const qrInfo = this.getPrintedQR(uniqueQR);
|
||||||
@ -893,72 +893,33 @@
|
|||||||
}
|
}
|
||||||
return this.items.find(item => item.uniqueID === uniqueID);
|
return this.items.find(item => item.uniqueID === uniqueID);
|
||||||
},
|
},
|
||||||
// printQRInfo() {
|
|
||||||
// const qrElement = this.$refs.qrInfo;
|
|
||||||
|
|
||||||
// if (qrElement) {
|
|
||||||
// const qrElement = this.$refs.qrInfo;
|
|
||||||
// if (qrElement) {
|
|
||||||
// domtoimage.toPng(qrElement,{
|
|
||||||
// quality: 1,
|
|
||||||
// })
|
|
||||||
// .then(function (dataUrl) {
|
|
||||||
// // Print the image using printJS
|
|
||||||
// printJS({
|
|
||||||
// printable: dataUrl, // Image data URL
|
|
||||||
// type: 'image',
|
|
||||||
// css: '/../lib/bootstrap/dist/css/bootstrap.css',
|
|
||||||
// style: `
|
|
||||||
// @@media print {
|
|
||||||
// @@page { margin-top: 15px; margin-bottom: 15px; }
|
|
||||||
// body { margin: 0; }
|
|
||||||
// img {
|
|
||||||
// display: block;
|
|
||||||
// margin: auto;
|
|
||||||
// width: auto;
|
|
||||||
// max-width: 100%;
|
|
||||||
// height: auto;
|
|
||||||
// max-height: 100vh;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// `
|
|
||||||
// });
|
|
||||||
// })
|
|
||||||
// .catch(function (error) {
|
|
||||||
// console.error("Error generating image:", error);
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// else {
|
|
||||||
// console.error("QR Info element not found.");
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
printQRInfo() {
|
printQRInfo() {
|
||||||
// Create a virtual DOM element
|
// Create a virtual DOM element
|
||||||
const virtualElement = document.createElement('div');
|
const virtualElement = document.createElement('div');
|
||||||
virtualElement.style.width = '340px '; // Match label size for 2 inches at 203 DPI
|
virtualElement.style.width = '330px '; // Match label size for 2 inches at 203 DPI
|
||||||
virtualElement.style.height = '180px';
|
virtualElement.style.height = '160px';
|
||||||
virtualElement.style.position = 'absolute';
|
virtualElement.style.position = 'absolute';
|
||||||
virtualElement.style.left = '-9999px'; // Position offscreen to avoid rendering on the main UI
|
virtualElement.style.left = '-9999px'; // Position offscreen to avoid rendering on the main UI
|
||||||
// virtualElement.style.border = '1px solid #000'; // Optional: Add a border for debugging dimensions
|
// virtualElement.style.border = '1px solid #000'; // Optional: Add a border for debugging dimensions
|
||||||
|
|
||||||
// Populate the virtual DOM with content
|
// Populate the virtual DOM with content
|
||||||
virtualElement.innerHTML = `
|
virtualElement.innerHTML = `
|
||||||
<div class="container" style="font-family: 'OCR A', monospace;">
|
<div class="container-fluid my-3" style="font-family: 'OCR A', monospace;">
|
||||||
<div class="row" ref="qrInfo" id="qrInfo">
|
<div class="row mx-1" >
|
||||||
<div class="col-5 text-center d-flex align-items-center justify-content-center">
|
<div class="col-5 text-center d-flex align-items-center justify-content-center">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div>${this.thisQRInfo.imgContainer}</div>
|
<div>${this.thisQRInfo.imgContainer}</div>
|
||||||
|
<div class="col-12 h4"><b>${this.thisQRInfo.uniqueID}</b></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-7 d-flex align-items-center justify-content-center">
|
<div class="col-7 d-flex align-items-center justify-content-center">
|
||||||
<div class="text-center fs-4 text">
|
<div class="row-fluid">
|
||||||
<div class="col-12 h3">${this.thisQRInfo.uniqueID}</div>
|
<div class="col-12 h4"><b>${this.thisQRInfo.departmentName}</b></div>
|
||||||
<div class="col-12 h3">${this.thisQRInfo.departmentName}</div>
|
<div class="col-12 h4"><b>${this.thisQRInfo.serialNumber}</b></div>
|
||||||
<div class="col-12 h3">${this.thisQRInfo.productName}</div>
|
<div class="col-12 h4"><b>${this.thisQRInfo.productName}</b></div>
|
||||||
<div class="col-12 h3">${this.thisQRInfo.endWDate}</div>
|
<div class="col-12 h4"><b>${this.thisQRInfo.endWDate}</b></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -989,7 +950,7 @@
|
|||||||
style: `
|
style: `
|
||||||
@@media print {
|
@@media print {
|
||||||
@@page {
|
@@page {
|
||||||
margin: 2px;
|
margin: 5px 5px 0px 5px;
|
||||||
}
|
}
|
||||||
body { margin: 0; }
|
body { margin: 0; }
|
||||||
}
|
}
|
||||||
|
|||||||
@ -299,7 +299,7 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
|
|||||||
item.Department?.DepartmentName,
|
item.Department?.DepartmentName,
|
||||||
item.CreatedBy!.UserName,
|
item.CreatedBy!.UserName,
|
||||||
item.Product!.ProductName,
|
item.Product!.ProductName,
|
||||||
QRString = $"{HttpContext.Request.Scheme}://{HttpContext.Request.Host.Value}/Inventory/ItemInformation/{item.UniqueID}" // Generate QR String
|
QRString = $"{HttpContext.Request.Scheme}://{HttpContext.Request.Host.Value}/I/{item.UniqueID}" // Generate QR String
|
||||||
}).ToList();
|
}).ToList();
|
||||||
|
|
||||||
return Json(itemListWithDetails);
|
return Json(itemListWithDetails);
|
||||||
@ -411,6 +411,42 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
|
|||||||
return Ok(new { success = true, message = "Item deleted successfully" });
|
return Ok(new { success = true, message = "Item deleted successfully" });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[HttpPost("GetItem/{id}")] // Endpoint to retrieve an item by its ID
|
||||||
|
public async Task<IActionResult> GetItem(string id)
|
||||||
|
{
|
||||||
|
var item = await _centralDbContext.Items.Include("CreatedBy").Include("Department").Include("Product").FirstOrDefaultAsync(i => i.UniqueID == id);
|
||||||
|
if (item == null){
|
||||||
|
return NotFound(new { success = false, message = "Item not found" });
|
||||||
|
}
|
||||||
|
var singleItem = new
|
||||||
|
{
|
||||||
|
item.ItemID,
|
||||||
|
item.UniqueID,
|
||||||
|
item.CompanyId,
|
||||||
|
item.DepartmentId,
|
||||||
|
item.ProductId,
|
||||||
|
item.SerialNumber,
|
||||||
|
item.Quantity,
|
||||||
|
item.Supplier,
|
||||||
|
PurchaseDate = item.PurchaseDate.ToString("dd/MM/yyyy"),
|
||||||
|
item.PONo,
|
||||||
|
item.Currency,
|
||||||
|
item.DefaultPrice,
|
||||||
|
item.CurrencyRate,
|
||||||
|
item.ConvertPrice,
|
||||||
|
item.DODate,
|
||||||
|
item.Warranty,
|
||||||
|
EndWDate = item.EndWDate.ToString("dd/MM/yyyy"),
|
||||||
|
item.InvoiceDate,
|
||||||
|
item.Department?.DepartmentName,
|
||||||
|
item.CreatedBy!.UserName,
|
||||||
|
item.Product!.ProductName,
|
||||||
|
item.Product!.ImageProduct,
|
||||||
|
QRString = $"{HttpContext.Request.Scheme}://{HttpContext.Request.Host.Value}/I/{item.UniqueID}" // Generate QR String
|
||||||
|
};
|
||||||
|
return Json(singleItem);
|
||||||
|
}
|
||||||
|
|
||||||
#endregion Item
|
#endregion Item
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
using Microsoft.AspNetCore.Identity;
|
using Microsoft.AspNetCore.Authorization;
|
||||||
|
using Microsoft.AspNetCore.Identity;
|
||||||
using Microsoft.AspNetCore.Mvc;
|
using Microsoft.AspNetCore.Mvc;
|
||||||
using Microsoft.EntityFrameworkCore;
|
using Microsoft.EntityFrameworkCore;
|
||||||
using PSTW_CentralSystem.Areas.Inventory.Models;
|
using PSTW_CentralSystem.Areas.Inventory.Models;
|
||||||
@ -17,15 +18,16 @@ namespace PSTW_CentralSystem.Controllers
|
|||||||
_centralDbContext = centralDbContext;
|
_centralDbContext = centralDbContext;
|
||||||
}
|
}
|
||||||
|
|
||||||
[HttpGet("ItemInformation/{Id}")]
|
[HttpGet("/i/{Id}")]
|
||||||
public async Task<IActionResult> ItemInformation(int Id)
|
public IActionResult ItemInformation(string Id)
|
||||||
{
|
{
|
||||||
var item = await _centralDbContext.Items.FindAsync(Id);
|
ViewData["ItemId"] = Id;
|
||||||
return View(Json(item));
|
return View("ItemInformation");
|
||||||
}
|
}
|
||||||
|
|
||||||
[HttpPost("ItemInformation/{id}")]
|
[Authorize]
|
||||||
public IActionResult ItemInformation(int id, [FromBody] ItemModel item)
|
[HttpPost("/i/{id}")]
|
||||||
|
public IActionResult ItemInformation(string id, [FromBody] ItemModel item)
|
||||||
{
|
{
|
||||||
return View();
|
return View();
|
||||||
}
|
}
|
||||||
|
|||||||
159
Views/Inventory/ItemInformation.cshtml
Normal file
159
Views/Inventory/ItemInformation.cshtml
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
@*
|
||||||
|
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
|
||||||
|
*@
|
||||||
|
@{
|
||||||
|
ViewData["Item"] = "Item Information";
|
||||||
|
Layout = null;
|
||||||
|
var itemId = ViewData["ItemId"];
|
||||||
|
}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr" lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<!-- Tell the browser to be responsive to screen width -->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="keywords"
|
||||||
|
content="wrappixel, admin dashboard, html css dashboard, web dashboard, bootstrap 5 admin, bootstrap 5, css3 dashboard, bootstrap 5 dashboard, Matrix lite admin bootstrap 5 dashboard, frontend, responsive bootstrap 5 admin template, Matrix admin lite design, Matrix admin lite dashboard bootstrap 5 dashboard template" />
|
||||||
|
<meta name="description"
|
||||||
|
content="Matrix Admin Lite Free Version is powerful and clean admin dashboard template, inpired from Bootstrap Framework" />
|
||||||
|
<meta name="robots" content="noindex,nofollow" />
|
||||||
|
<title>Matrix Admin Lite Free Versions Template by WrapPixel</title>
|
||||||
|
<!-- Favicon icon -->
|
||||||
|
<link rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="/assets/images/favicon.png" />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=OCR+A&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom CSS -->
|
||||||
|
<link rel="stylesheet" href="~/assets/libs/select2/dist/css/select2.min.css" />
|
||||||
|
<link rel="stylesheet" href="~/assets/libs/jquery-minicolors/jquery.minicolors.css" />
|
||||||
|
<link rel="stylesheet" href="~/assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
|
||||||
|
<link rel="stylesheet" href="~/assets/libs/quill/dist/quill.snow.css" />
|
||||||
|
<link href="~/dist/css/style.min.css" rel="stylesheet" />
|
||||||
|
<link href="~/lib/printjs/print.min.css" rel="stylesheet" />
|
||||||
|
<!-- DataTables CSS-->
|
||||||
|
<link href="~/lib/datatables/datatables.css" rel="stylesheet" />
|
||||||
|
<!-- Vue Js -->
|
||||||
|
<script src="~/js/vue.global.js"></script>
|
||||||
|
@* <script src="~/js/vue.global.prod.js"></script> *@
|
||||||
|
<!-- QR Js -->
|
||||||
|
<script src="~/lib/qrcode/qrcode.min.js"></script>
|
||||||
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||||
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||||
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container-fluid my-2" id="app">
|
||||||
|
<div class="row-fluid" v-if="thisItem">
|
||||||
|
<div class="row m-3 d-flex align-items-center justify-content-center">
|
||||||
|
<div class="col-4 border">
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<img :src="thisItem.imageProduct" alt="Product Image" class="img-fluid" data-toggle="modal" data-target="#imageModal"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p class="h4">{{thisItem.uniqueID}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-3 d-flex align-items-center justify-content-center">
|
||||||
|
<div class="col-4 border">
|
||||||
|
<div class="col-12 ">
|
||||||
|
<p class="h4">
|
||||||
|
Item Name: {{thisItem.productName}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 ">
|
||||||
|
<p class="h4">
|
||||||
|
Part Number: Part Number
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 ">
|
||||||
|
<p class="h4">
|
||||||
|
Serial Number: {{thisItem.serialNumber}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<p class="h4">
|
||||||
|
PIC: Station PIC
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<p class="h4">
|
||||||
|
Location: Item Location
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="~/assets/libs/jquery/dist/jquery.min.js"></script>
|
||||||
|
<script src="~/dist/js/jquery-ui.min.js"></script>
|
||||||
|
<!-- Bootstrap tether Core JavaScript -->
|
||||||
|
<script src="~/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<!-- slimscrollbar scrollbar JavaScript -->
|
||||||
|
<script src="~/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
|
||||||
|
<script src="~/assets/extra-libs/sparkline/sparkline.js"></script>
|
||||||
|
<!--Wave Effects -->
|
||||||
|
<script src="~/dist/js/waves.js"></script>
|
||||||
|
<!--Menu sidebar -->
|
||||||
|
<script src="~/dist/js/sidebarmenu.js"></script>
|
||||||
|
<!--Custom JavaScript -->
|
||||||
|
<script src="~/dist/js/custom.min.js"></script>
|
||||||
|
<!--Form JS-->
|
||||||
|
<script src="~/assets/libs/inputmask/dist/min/jquery.inputmask.bundle.min.js"></script>
|
||||||
|
<script src="~/dist/js/pages/mask/mask.init.js"></script>
|
||||||
|
<script src="~/assets/libs/select2/dist/js/select2.full.min.js"></script>
|
||||||
|
<script src="~/assets/libs/jquery-asColor/dist/jquery-asColor.min.js"></script>
|
||||||
|
<script src="~/assets/libs/jquery-asGradient/dist/jquery-asGradient.js"></script>
|
||||||
|
<script src="~/assets/libs/jquery-asColorPicker/dist/jquery-asColorPicker.min.js"></script>
|
||||||
|
<script src="~/assets/libs/jquery-minicolors/jquery.minicolors.min.js"></script>
|
||||||
|
<script src="~/assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
|
||||||
|
<script src="~/assets/libs/quill/dist/quill.min.js"></script>
|
||||||
|
<script src="~/lib/printjs/print.min.js"></script>
|
||||||
|
<script src="~/lib/html2canvas/html2canvas.min.js"></script>
|
||||||
|
<script src="~/lib/html2canvas/dom-to-image.min.js"></script>
|
||||||
|
<!-- Datatables JS-->
|
||||||
|
<script src="~/lib/datatables/datatables.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
app.mount('#app');
|
||||||
|
});
|
||||||
|
const app = Vue.createApp({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
thisItem: null,
|
||||||
|
itemId: '@itemId',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// Fetch companies, depts, and products from the API
|
||||||
|
this.fetchItem();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fetchItem() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/InvMainAPI/GetItem/' + this.itemId, {
|
||||||
|
method: 'POST',}
|
||||||
|
);
|
||||||
|
if (response.ok) {
|
||||||
|
this.thisItem = await response.json();
|
||||||
|
console.log(this.thisItem);
|
||||||
|
} else {
|
||||||
|
console.error('Failed to fetch item information');
|
||||||
|
this.responseMessage = await response.text();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching item information:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user