This commit is contained in:
MOHD ARIFF 2024-11-27 15:52:26 +08:00
parent 0168aa1929
commit 0ee2817376
10 changed files with 426 additions and 357 deletions

View File

@ -1,4 +1,5 @@
using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace PSTW_CentralSystem.Areas.Inventory.Models namespace PSTW_CentralSystem.Areas.Inventory.Models
{ {
@ -7,5 +8,6 @@ namespace PSTW_CentralSystem.Areas.Inventory.Models
[Key] [Key]
public int CompanyId { get; set; } public int CompanyId { get; set; }
public required string Name { get; set; } public required string Name { get; set; }
public virtual ICollection<DepartmentModel>? Departments { get; set; }
} }
} }

View File

@ -6,7 +6,7 @@ namespace PSTW_CentralSystem.Areas.Inventory.Models
public class ItemModel public class ItemModel
{ {
[Key] [Key]
public required string ItemID { get; set; } public string? ItemID { get; set; }
public required int CompanyId { get; set; } public required int CompanyId { get; set; }
public required int DepartmentId { get; set; } public required int DepartmentId { get; set; }
public required int ProductId { get; set; } public required int ProductId { get; set; }

View File

@ -15,5 +15,6 @@ namespace PSTW_CentralSystem.Areas.Inventory.Models
public required string ImageProduct { get; set; } public required string ImageProduct { get; set; }
[ForeignKey("ManufacturerId")] [ForeignKey("ManufacturerId")]
public virtual ManufacturerModel? Manufacturer { get; set; } public virtual ManufacturerModel? Manufacturer { get; set; }
public virtual ICollection<ItemModel>? Items { get; set; } // Navigation property>
} }
} }

View File

@ -4,279 +4,244 @@
Layout = "~/Views/Shared/_Layout.cshtml"; Layout = "~/Views/Shared/_Layout.cshtml";
} }
@await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartial.cshtml");
<div id="registerItem" class="row">
<div class="card">
<form v-on:submit.prevent="addItem" data-aos="fade-right">
<div class="container register" data-aos="fade-right">
<div class="row" data-aos="fade-right">
@*Left Side*@
<div class="col-md-3 register-left">
<img src="https://media.licdn.com/dms/image/C4E03AQEJ_X-GwTi3xg/profile-displayphoto-shrink_200_200/0/1607307680517?e=2147483647&v=beta&t=UL8IX1nO9iqRxGrQrNZ1O_i4tpjnOVVecIktw-GB6QI" alt="" />
<h3>Welcome</h3>
<p>Registration Product! Click button to go Product Page</p>
<a href="@Url.Action("Product", "Home")" class="btn btn-primary">Product Registration</a><br />
</div>
<div id="registerItem"> @*Right Side*@
<form v-on:submit.prevent="addItem" data-aos="fade-right"> <div class="col-md-9 register-right">
<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">REGISTRATION ITEM</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="container register" data-aos="fade-right"> <!-- Company Dropdown -->
<div class="row" data-aos="fade-right"> <div class="form-group row">
@*Left Side*@ <label class="col-sm-4 col-form-label">Company:</label>
<div class="col-md-3 register-left"> <div class="col-sm-8">
<img src="https://media.licdn.com/dms/image/C4E03AQEJ_X-GwTi3xg/profile-displayphoto-shrink_200_200/0/1607307680517?e=2147483647&v=beta&t=UL8IX1nO9iqRxGrQrNZ1O_i4tpjnOVVecIktw-GB6QI" alt="" /> <div class="dropdown">
<h3>Welcome</h3> <select class="btn btn-primary dropdown-toggle" v-model="selectedCompany" required>
<p>Registration Product! Click button to go Product Page</p> <option class="btn-light" value="" disabled selected>Select Company</option>
<a href="@Url.Action("Product", "Home")" class="btn btn-primary">Product Registration</a><br /> <option class="btn-light" v-for="(item, index) in companies" :key="index" :value="item.companyId">{{item.companyName}}</option>
</div> </select>
@*Right Side*@
<div class="col-md-9 register-right">
<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">REGISTRATION ITEM</h3>
<div class="row register-form">
<div class="col-md-6">
<!-- Company Dropdown -->
<div class="form-group row">
<label class="col-sm-3 col-form-label">Company:</label>
<div class="col-sm-9">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span id="updateCompany">{{ company || 'Select Company' }}</span>
</button>
<div class="dropdown-menu p-3">
<div v-for="(comp, index) in companies" :key="index" class="form-check">
<input class="form-check-input" type="radio" :id="'company-' + index" :value="comp.Name" name="company" v-model="company" v-on:change="updateDepts(comp.Departments)">
<label class="form-check-label" :for="'company-' + index">{{ comp.Name }}</label>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Department Dropdown --> <!-- Department Dropdown -->
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-3 col-form-label">Department:</label> <label class="col-sm-4 col-form-label">Department:</label>
<div class="col-sm-9"> <div class="col-sm-8">
<div class="dropdown"> <select class="btn btn-primary dropdown-toggle" v-model="selectedDepartment" required>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <option class="btn-light" value="" disabled selected>Select Department</option>
<span id="updateDept">{{ Dept || 'Select Dept/Div' }}</span> <option class="btn-light" v-for="(dept, index) in filteredDepartments" :key="index" :value="dept.departmentId">{{ dept.departmentName }}</option>
</button> </select>
<div class="dropdown-menu p-3"> </div>
<div v-for="(dept, index) in depts" :key="index" class="form-check"> </div>
<input class="form-check-input" type="radio" :id="'Dept-' + index" :value="dept" name="Dept" v-model="Dept">
<label class="form-check-label" :for="'Dept-' + index">{{ dept }}</label>
</div> @* Product Name Coding *@
<div class="form-group row">
<label class="col-sm-4 col-form-label">Product Name:</label>
<div class="col-sm-8">
<div class="dropdown">
<select type="button" class="btn btn-primary dropdown-toggle" v-model="selectedProduct" required>
<option class="btn-light" value="" disabled selected>Select Product</option>
<option class="btn-light" v-for="(item, index) in products" :key="index" :value="item.productId">{{ item.productName + ' (' + item.modelNo + ')' }}</option>
</select>
</div> </div>
</div> </div>
</div> </div>
</div>
@* Product Image Display *@
@* Product Name Coding *@
<div class="form-group row">
<label class="col-sm-3 col-form-label">Product Name:</label>
<div class="col-sm-9">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span id="updateName">{{ productName || 'Select Product Name' }}</span>
</button>
<div class="dropdown-menu p-3">
<div class="form-check" v-for="product in products" :key="product.modelNo">
<!-- Use modelNo as the key -->
<input class="form-check-input" type="radio" :id="product.modelNo" :value="product.modelNo"
v-on:click="updateProduct(product)" v-model="selectedProduct">
<label class="form-check-label" :for="product.modelNo">{{ product.productName }}</label>
</div>
</div>
</div>
</div>
</div>
@* Product Image Display *@
<div class="form-group row align-items-center">
<label for="imageProduct" class="col-sm-3 col-form-label">Product Image: </label>
<div class="col-sm-9">
<img v-if="imageProduct" :src="'data:image/png;base64,' + imageProduct" alt="Product Image" class="img-fluid" v-on:click="openModal" />
<input type="hidden" id="imageProduct" name="imageProduct" v-model="imageProduct">
</div>
</div>
<div v-if="isModalOpen" class="modal" v-on:click="closeModal">
<div class="modal-content" v-on:click.stop>
<span class="close" v-on:click="closeModal">&times;</span>
<img :src="'data:image/png;base64,' + imageProduct" alt="Product Image" class="enlarged-image" />
</div>
</div>
@* Product Category Coding *@
<div class="form-group row">
<label class="col-sm-3 col-form-label">Product Category:</label>
<div class="col-sm-9">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span id="updateProductCategory">{{ productCategory || 'Select Product' }}</span>
</button>
<div class="dropdown-menu p-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="productCategory" id="item" value="Item" v-on:click="updateProductCategory('Item')" v-model="productCategory">
<label class="form-check-label" for="item">Item</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="productCategory" id="part" value="Part" v-on:click="updateProductCategory('Part')" v-model="productCategory">
<label class="form-check-label" for="part">Part</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="productCategory" id="disposable" value="Disposable" v-on:click="updateProductCategory('Disposable')" v-model="productCategory">
<label class="form-check-label" for="disposable">Disposable</label>
</div>
</div>
</div>
</div>
</div>
@* Serial Number and Quantity Coding *@
<div v-if="showSerialNumber">
<div class="form-group row align-items-center"> <div class="form-group row align-items-center">
<div class="col-sm-3"> <label for="imageProduct" class="col-sm-4 col-form-label">Product Image: </label>
<label for="serialNumber">Serial Number: </label> <div class="col-sm-8">
</div> <img v-if="showProduct.imageProduct" :src="showProduct.imageProduct" alt="Product Image" class="img-fluid" data-toggle="modal" data-target="#imageModal" />
<div class="col-sm-9"> <input type="hidden" id="imageProduct" name="imageProduct" v-model="showProduct">
<input type="text" id="serialNumber" name="serialNumber" v-if="showSerialNumber" v-model="serialNumber" class="form-control">
</div> </div>
</div> </div>
</div>
<div v-if="!showSerialNumber"> <!-- Modal -->
<div class="form-group row align-items-center"> <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
<div class="col-sm-3"> <div class="modal-dialog modal-lg" role="document">
<label for="quantity">Quantity: </label> <div class="modal-content">
</div> <div class="modal-header">
<div class="col-sm-9"> <h5 class="modal-title" id="imageModalLabel">Product Image</h5>
<input type="number" id="quantity" name="quantity" v-if="!showSerialNumber" v-model="quantity" class="form-control"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</div> <span aria-hidden="true">&times;</span>
</div> </button>
</div> </div>
@* Supplier coding *@ <div class="modal-body">
<div class="form-group row align-items-center"> <img :src="showProduct.imageProduct" alt="Product Image" class="img-fluid">
<label class="col-sm-3 col-form-label">Supplier: </label> </div>
<div class="col-sm-9"> <div class="modal-footer">
<div class="dropdown"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span id="updateSupplierName">{{ supplierName || 'Select Supplier' }}</span>
</button>
<div class="dropdown-menu p-3">
<div class="form-check" v-for="supplier in supplies" :key="supplier.modelNoes">
<input class="form-check-input" type="radio" :id="supplier.modelNoes" :value="supplier.supplierName" v-on:click="updateSupplier(supplier)" v-model="selectedSupplier">
<label class="form-check-label" :for="supplier.modelNoes">{{ supplier.supplierName }}</label>
</div>@*
<div class="form-check">
<input class="form-check-input" type="radio" name="Supplier" id="otherS" v-on:click="toggleOtherInput('Supplier')">
<label class="form-check-label" for="otherS">Other:</label>
</div> </div>
<div v-if="showOtherSupplier">
<input type="text" class="form-control" id="otherSupplier" name="Supplier" placeholder="Your Supplier Name" v-model="Supplier">
</div> *@
</div> </div>
</div> </div>
</div> </div>
</div>
@* Purchase Date coding *@ @* Product Category Coding *@
<div class="form-group row align-items-center"> <div class="form-group row">
<label for="purchaseDate" class="col-sm-3 col-form-label">Purchase Date: </label> <label class="col-sm-4 col-form-label">Product Category:</label>
<div class="col-sm-9"> <div class="col-sm-8">
<input type="date" id="purchaseDate" name="purchaseDate" required v-model="purchaseDate" class="form-control"> <input type="text" id="category" name="category" v-model="showProduct.category" class="form-control" readonly />
</div>
</div>
@* Serial Number and Quantity Coding *@
<div v-if="showSerialNumber">
<div class="form-group row align-items-center">
<div class="col-sm-4">
<label for="serialNumber">Serial Number: </label>
</div>
<div class="col-sm-8">
<input type="text" id="serialNumber" name="serialNumber" v-if="showSerialNumber" v-model="serialNumber" class="form-control" v-bind:required="showSerialNumber">
</div>
</div>
</div>
<div v-if="!showSerialNumber">
<div class="form-group row align-items-center">
<div class="col-sm-4">
<label for="quantity">Quantity: </label>
</div>
<div class="col-sm-8">
<input type="number" id="quantity" name="quantity" min="1" v-if="!showSerialNumber" v-model="quantity" class="form-control" v-bind:required="!showSerialNumber">
</div>
</div>
</div>
@* Supplier coding *@
<div class="form-group row align-items-center">
<label class="col-sm-4 col-form-label">Supplier: </label>
<div class="col-sm-8">
<div class="dropdown">
<select type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" v-model="selectedSupplier" required>
<option class="btn-light" value="" disabled selected>Select Supplier</option>
<option class="btn-light" v-for="(item, index) in suppliers">{{ item.supplierName }}</option>
</select>
</div>
</div>
</div>
@* Purchase Date coding *@
<div class="form-group row align-items-center">
<label for="purchaseDate" class="col-sm-4 col-form-label">Purchase Date: </label>
<div class="col-sm-8">
<input type="date" id="purchaseDate" name="purchaseDate" required v-model="purchaseDate" class="form-control">
</div>
</div>
@* PO coding *@
<div class="form-group row align-items-center">
<label for="PO" class="col-sm-4 col-form-label">Enter PO: </label>
<div class="col-sm-8">
<input type="text" id="PO" name="PO" required v-model="PO" placeholder="PO123456" class="form-control">
</div>
</div> </div>
</div> </div>
@* PO coding *@ <div class="col-md-6">
<div class="form-group row align-items-center"> @* Item Price in RM *@
<label for="PO" class="col-sm-3 col-form-label">Enter PO: </label> <div class="form-group row">
<div class="col-sm-9"> <label for="priceInRM" class="col-sm-4">Item Price In(RM):</label>
<input type="text" id="PO" name="PO" required v-model="PO" placeholder="PO123456" class="form-control"> <div class="col-sm-8">
<input type="number" id="priceInRM" name="priceInRM" class="form-control" placeholder="RM 00.00" step="0.01" v-on:input="convertCurrency()" required v-model="priceInRM">
</div>
</div> </div>
</div>
</div>
<div class="col-md-6"> @* Currency Selection *@
@* Item Price in RM *@ <div class="form-group row">
<label for="currency" class="col-sm-4">Select Currency:</label>
<div class="col-sm-8">
<select id="currency" name="currency" class="form-control" v-model="currency" v-on:change="convertCurrency()">
<option value="" disabled selected>Select a currency</option>
<option v-for="(name, code) in currencies" :key="code" :value="code">
{{ code }} - {{ name }}
</option>
</select>
</div>
</div>
@* Currency Rate *@
<div class="form-group row">
<label for="currencyRate" class="col-sm-4">Currency Rate(%):</label>
<div class="col-sm-8">
<input type="number" id="currencyRate" name="currencyRate" class="form-control" placeholder="0.01%" step="0.01" v-on:input="convertCurrency()" required v-model="currencyRate">
</div>
</div>
@* Item Convert Price *@
<div class="form-group row">
<label for="convertPrice" class="col-sm-4">{{ currency ? 'Item Price (' + currency + ') : ' : 'Item Price : ' }}</label>
<div class="col-sm-8">
<input type="number" id="convertPrice" name="convertPrice" class="form-control" readonly v-model="convertPrice">
</div>
</div>
@* Delivery Order Date *@
<div class="form-group row">
<label for="DODate" class="col-sm-4">Enter DO Date:</label>
<div class="col-sm-8">
<input type="date" id="DODate" name="DODate" class="form-control" v-on:input="calculateWarrantyEndDate()" required v-model="DODate">
</div>
</div>
@* Warranty *@
<div class="form-group row">
<label for="warranty" class="col-sm-4">Enter Warranty Months(Number):</label>
<div class="col-sm-8">
<input type="number" id="warranty" name="warranty" class="form-control" placeholder="0 , 1 , 2 , 3, ..." step="1" min="0" v-on:input="calculateWarrantyEndDate()" required v-model="warranty">
</div>
</div>
@* Warranty End Date *@
<div class="form-group row">
<label for="EndWDate" class="col-sm-4">Warranty End:</label>
<div class="col-sm-8">
<input type="date" id="EndWDate" name="EndWDate" class="form-control" readonly v-model="EndWDate">
</div>
</div>
@* Invoice Date *@
<div class="form-group row">
<label for="invoiceDate" class="col-sm-4">Invoice Date:</label>
<div class="col-sm-8">
<input type="date" id="invoiceDate" name="invoiceDate" class="form-control" required v-model="invoiceDate">
</div>
</div>
</div>
@* Submit and Reset Buttons *@
<div class="form-group row"> <div class="form-group row">
<label for="priceInRM" class="col-sm-3">Item Price In(RM):</label> <div class="col-sm-8 offset-sm-3">
<div class="col-sm-9"> <button type="button" v-on:click="resetForm" class="btn btn-secondary">Reset</button>
<input type="number" id="priceInRM" name="priceInRM" class="form-control" placeholder="RM 00.00" step="0.01" v-on:input="convertCurrency()" required v-model="priceInRM"> <input type="submit" class="btn btn-primary" value="Submit" />
</div>
</div>
@* Currency Selection *@
<div class="form-group row">
<label for="currency" class="col-sm-3">Select Currency:</label>
<div class="col-sm-9">
<select id="currency" name="currency" class="form-control" v-model="currency" v-on:change="convertCurrency()">
<option value="" disabled selected>Select a currency</option>
<option v-for="(name, code) in currencies" :key="code" :value="code">
{{ code }} - {{ name }}
</option>
</select>
</div>
</div>
@* Currency Rate *@
<div class="form-group row">
<label for="currencyRate" class="col-sm-3">Currency Rate(%):</label>
<div class="col-sm-9">
<input type="number" id="currencyRate" name="currencyRate" class="form-control" placeholder="0.01%" step="0.01" v-on:input="convertCurrency()" required v-model="currencyRate">
</div>
</div>
@* Item Convert Price *@
<div class="form-group row">
<label for="convertPrice" class="col-sm-3">{{ currency ? 'Item Price (' + currency + ') : ' : 'Item Price : ' }}</label>
<div class="col-sm-9">
<input type="number" id="convertPrice" name="convertPrice" class="form-control" readonly v-model="convertPrice">
</div>
</div>
@* Delivery Order Date *@
<div class="form-group row">
<label for="DODate" class="col-sm-3">Enter DO Date:</label>
<div class="col-sm-9">
<input type="date" id="DODate" name="DODate" class="form-control" v-on:input="calculateWarrantyEndDate()" required v-model="DODate">
</div>
</div>
@* Warranty *@
<div class="form-group row">
<label for="warranty" class="col-sm-3">Enter Warranty Months(Number):</label>
<div class="col-sm-9">
<input type="number" id="warranty" name="warranty" class="form-control" placeholder="0 , 1 , 2 , 3, ..." step="1" min="0" v-on:input="calculateWarrantyEndDate()" required v-model="warranty">
</div>
</div>
@* Warranty End Date *@
<div class="form-group row">
<label for="EndWDate" class="col-sm-3">Warranty End:</label>
<div class="col-sm-9">
<input type="date" id="EndWDate" name="EndWDate" class="form-control" readonly v-model="EndWDate">
</div>
</div>
@* Invoice Date *@
<div class="form-group row">
<label for="invoiceDate" class="col-sm-3">Invoice Date:</label>
<div class="col-sm-9">
<input type="date" id="invoiceDate" name="invoiceDate" class="form-control" required v-model="invoiceDate">
</div> </div>
</div> </div>
</div> </div>
@* Submit and Reset Buttons *@
<div class="form-group row">
<div class="col-sm-9 offset-sm-3">
<button type="button" v-on:click="resetForm" class="btn btn-secondary">Reset</button>
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </form>
</form> </div>
</div> </div>
@*Vue Js - POST & RESET*@ @*Vue Js - POST & RESET*@
@ -286,36 +251,56 @@
el: '#registerItem', el: '#registerItem',
data() { data() {
return { return {
company: null, companies: [
{
companyId: 1,
companyName: "PSTW",
departments: [{ departmentId: 1, departmentName: "Air" }, { departmentId: 2, departmentName: "Marine" }, { departmentId: 3, departmentName: "River" }]
},
{
companyId: 2,
companyName: "TES",
departments: [{ departmentId: 1, departmentName: "Air" }],
},
],
company: "",
Dept: null, Dept: null,
productName: null, productName: null,
imageProduct: null, imageProduct: null,
productCategory: null, productCategory: null,
serialNumber: '', serialNumber: "",
quantity: 0, quantity: 1,
supplierName: null, supplierName: null,
purchaseDate: null, purchaseDate: null,
PO: null, PO: null,
currency: null, currency: null,
priceInRM: null, priceInRM: null,
currencyRate: null, currencyRate: 1,
convertPrice: null, convertPrice: 0,
DODate: null, DODate: null,
warranty: null, warranty: 0,
EndWDate: null, EndWDate: null,
invoiceDate: null, invoiceDate: null,
products: [], products: [],
companies: [],
depts: [], depts: [],
supplies: [], suppliers: [
{
supplierId: 1,
supplierName: "Pang",
},
{
supplierId: 2,
supplierName: "Ms Kim",
},
],
showOtherCompany: false, showOtherCompany: false,
showOtherDept: false, showOtherDept: false,
showOtherSupplier: false, showOtherSupplier: false,
isModalOpen: false, isModalOpen: false,
selectedProduct: null, selectedProduct: "",
selectedSupplier: null, selectedSupplier: "",
selectedCompany: null, selectedCompany: "",
selectedDepartment: null, selectedDepartment: "",
currencies: {}, currencies: {},
} }
}, },
@ -325,76 +310,78 @@
this.fetchCurrencyData(); this.fetchCurrencyData();
this.fetchCompanies(); this.fetchCompanies();
this.fetchProducts(); this.fetchProducts();
this.fetchSupplies(); this.fetchSuppliers();
}, },
computed: { computed: {
filteredDepartments() {
if (!this.selectedCompany) {
return []; // No company selected, return empty list
}
const company = this.companies.find(c => c.companyId === this.selectedCompany);
return company ? company.departments : [];
},
showProduct() {
if (!this.selectedProduct) {
return []; // No company selected, return empty list
}
const product = this.products.find(c => c.productId === this.selectedProduct);
return product ? product : {};
},
showSerialNumber() { showSerialNumber() {
return this.productCategory === 'Item' || this.productCategory === 'Part'; return this.showProduct.category === 'Item' || this.showProduct.category === 'Part';
} },
}, },
methods: { methods: {
async addItem() { async addItem() {
const formData = { const formData = {
company: this.showOtherCompany ? this.selectedCompany : this.company, CompanyId: this.selectedCompany,
Dept: this.showOtherDept ? this.Dept : this.Dept, DepartmentId: this.selectedDepartment,
productName: this.productName, ProductId: this.selectedProduct,
imageProduct: this.imageProduct, SerialNumber: this.serialNumber,
productCategory: this.productCategory, Quantity: this.quantity,
serialNumber: this.serialNumber, Supplier: this.selectedSupplier,
quantity: this.quantity, PurchaseDate: this.purchaseDate,
supplierName: this.supplierName, PONo: this.PO,
purchaseDate: this.purchaseDate, Currency: this.currency,
PO: this.PO, PriceInRM: this.priceInRM,
currency: this.currency, CurrencyRate: this.currencyRate,
priceInRM: this.priceInRM, ConvertPrice: this.convertPrice,
currencyRate: this.currencyRate,
convertPrice: this.convertPrice,
DODate: this.DODate, DODate: this.DODate,
warranty: this.warranty, Warranty: this.warranty,
EndWDate: this.EndWDate, EndWDate: this.EndWDate,
invoiceDate: this.invoiceDate InvoiceDate: this.invoiceDate
}; };
try { try {
// List of required fields (excluding serialNumber based on showSerialNumber)
const requiredFields = ['company', 'Dept', 'productCategory', 'productName', 'quantity', 'supplierName', 'purchaseDate', 'PO', 'currency', 'priceInRM', 'currencyRate', 'convertPrice', 'DODate', 'warranty', 'EndWDate', 'invoiceDate'];
// Loop through required fields and check if any are null or empty
for (let field of requiredFields) {
if (this[field] === null || this[field] === '') {
swal(`${field} Error`, `Please fill in required fields: ${field}.`, 'warning');
return; // Exit early if validation fails
}
}
// Additional specific checks // Additional specific checks
if (this.showSerialNumber) { if (this.showSerialNumber) {
this.quantity = 0; this.quantity = 0;
if (this.serialNumber === null || this.serialNumber === '') { if (this.serialNumber === null || this.serialNumber === '') {
swal('Serial Number Error', 'Serial Number must be filled when selecting Item or Part.', 'warning'); alert('Serial Number Error', 'Serial Number must be filled when selecting Item or Part.', 'warning');
return; return;
} }
} }
else { else {
this.serialNumber = null; this.serialNumber = null;
if (this.quantity === 0 || this.quantity === null || this.quantity === '') { if (this.quantity === 0 || this.quantity === null || this.quantity === '') {
swal('quantity Error', 'Quantity is required when selecting Disposable.', 'warning'); alert('quantity Error', 'Quantity is required when selecting Disposable.', 'warning');
return; return;
} }
} }
// Proceed to send the data to the API // Proceed to send the data to the API
const response = await fetch('/api/Item', { const response = await fetch('/InvMainAPI/AddItem', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Authorization': `Bearer ${this.token}` // 'Authorization': `Bearer ${this.token}`
}, },
body: JSON.stringify(formData) body: JSON.stringify(formData)
}); });
if (response.ok) { if (response.ok) {
// If the form submission was successful, display a success message // If the form submission was successful, display a success message
swal('Success!', 'Item form has been successfully submitted.', 'success'); alert('Success!', 'Item form has been successfully submitted.', 'success');
// Reset the form // Reset the form
this.resetForm(); this.resetForm();
@ -406,19 +393,19 @@
console.error('Error:', error); console.error('Error:', error);
// Displaying error message // Displaying error message
swal('Inventory PSTW Error', `An error occurred: ${error.message}`, 'error'); alert('Inventory PSTW Error', `An error occurred: ${error.message}`, 'error');
} }
}, },
async fetchProducts() { async fetchProducts() {
try { try {
const token = localStorage.getItem('token'); // Get the token from localStorage // const token = localStorage.getItem('token'); // Get the token from localStorage
const response = await fetch('/api/Product/GetProducts', { const response = await fetch('/InvMainAPI/ProductList', {
method: 'GET', // Specify the HTTP method method: 'POST', // Specify the HTTP method
headers: { headers: {
'Content-Type': 'application/json', // Set content type 'Content-Type': 'application/json', // Set content type
'Authorization': `Bearer ${token}` // Include the token in the headers // 'Authorization': `Bearer ${token}` // Include the token in the headers
} }
}); });
@ -451,7 +438,7 @@
} }
}, },
async fetchSupplies() { async fetchSuppliers() {
try { try {
const response = await fetch('/api/Item/GetSupplies', { const response = await fetch('/api/Item/GetSupplies', {
method: 'GET', // Specify the HTTP method method: 'GET', // Specify the HTTP method
@ -486,7 +473,6 @@
this.Dept = null; this.Dept = null;
this.productName = null; this.productName = null;
this.imageProduct = null; this.imageProduct = null;
this.productCategory = null;
this.serialNumber = ''; this.serialNumber = '';
this.quantity = 0; this.quantity = 0;
this.supplierName = null; this.supplierName = null;
@ -545,51 +531,6 @@
this.EndWDate = null; this.EndWDate = null;
} }
}, },
//Update Select View
updateCompany(company) {
this.company = company.Name; // Only set the company name
this.depts = company.Departments || []; // Populate depts based on selected company
this.Dept = null; // Reset the selected department
this.showOtherCompany = false; // Hide other company input if needed
},
updateDepts(departments) {
this.depts = departments || []; // Populate depts for the selected company
this.Dept = null; // Reset the selected department
},
updateDept(dept) {
this.Dept = dept;
this.showOtherDept = false;
},
updateProductCategory(productCategory) {
this.productCategory = productCategory;
},
updateProduct(selectedProduct) {
this.productName = selectedProduct.productName;
this.imageProduct = selectedProduct.imageProduct;
this.selectedProduct = selectedProduct.modelNo;
},
updateSupplier(selectedSupplier) {
this.supplierName = selectedSupplier.supplierName;
this.selectedSupplier = selectedSupplier.supplierName;
},
//User Press button Other
toggleOtherInput(type) {
if (type === 'company') {
this.showOtherCompany = true;
this.selectedCompany = null; // Clear company selection when "Other" is chosen
this.company = null;
}
else if (type === 'Dept') {
this.showOtherDept = true;
this.Dept = null; // Clear department selection when "Other" is chosen
}
else if (type === 'Supplier') {
this.supplierName = null; // Clear supplier selection when "Other" is chosen
}
},
}, },
}); });
</script> </script>

View File

@ -96,7 +96,7 @@
<button id="addProductBtn" class="btn btn-success col-md-3 m-1" v-show="addSection == false" v-on:click="addSection = true"><i class="fa fa-plus"></i>&nbsp;Show Add Product Section</button> <button id="addProductBtn" class="btn btn-success col-md-3 m-1" v-show="addSection == false" v-on:click="addSection = true"><i class="fa fa-plus"></i>&nbsp;Show Add Product Section</button>
</div> </div>
<div class="row"> <div class="row">
<table class="table table-bordered table-hover" id="productTable"></table> <table class="table table-bordered table-hover" id="productDatatable"></table>
</div> </div>
</div> </div>
</div> </div>
@ -124,6 +124,7 @@
showOtherManufacturer: false, showOtherManufacturer: false,
imageSrc: '', imageSrc: '',
products: null, products: null,
productDatatable: null,
} }
}, },
mounted() { mounted() {
@ -134,7 +135,7 @@
methods: { methods: {
initiateTable() { initiateTable() {
console.log(this.products) console.log(this.products)
this.manufacturerDatatable = $('#productTable').DataTable({ this.productDatatable = $('#productDatatable').DataTable({
"data": this.products, "data": this.products,
"columns": [ "columns": [
{ "title": "Product Name", { "title": "Product Name",
@ -146,7 +147,7 @@
{ "title": "Manufacturer", { "title": "Manufacturer",
"data": "manufacturer.manufacturerName", "data": "manufacturer.manufacturerName",
}, },
{ "title": "productName Category", { "title": "Product Category",
"data": "category", "data": "category",
}, },
{ "title": "Product Stock", { "title": "Product Stock",
@ -154,21 +155,28 @@
}, },
{ "title": "Image", { "title": "Image",
"data": "imageProduct", "data": "imageProduct",
},
{ "title": "Delete",
"render": function (data, type, full, meta) { "render": function (data, type, full, meta) {
var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${full.manufacturerId}">Delete</button>`; var image = `<a href="${data}" target="_blank" data-lightbox="image-1">
<img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
</a>`;
return image;
},
},
{
"title": "Delete",
"render": function (data, type, full, meta) {
var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${full.productId}">Delete</button>`;
return deleteButton; return deleteButton;
}, },
"width": '10%', }
},
], ],
}) })
self = this; self = this;
// Attach click event listener to the delete buttons // Attach click event listener to the delete buttons
$('#manufacturerTable tbody').on('click', '.delete-btn', function () { $('#productDatatable tbody').on('click', '.delete-btn', function () {
const manufacturerId = $(this).data('id'); // Get the manufacturer ID from the button const productId = $(this).data('id'); // Get the manufacturer ID from the button
self.deleteManufacturer(manufacturerId); // Call the Vue method self.deleteProduct(productId); // Call the Vue method
}); });
this.loading = false; this.loading = false;
@ -207,7 +215,7 @@
async addProduct() { async addProduct() {
const existingProduct = this.products.find(p => p.modelNo === this.modelNo); const existingProduct = this.products.find(p => p.modelNo === this.modelNo);
if (existingProduct) { if (existingProduct) {
alert('Product Error', `The model number ${this.modelNo} already exists.`, 'error'); alert(`Product Error: The model number ${this.modelNo} already exists.`, 'error');
return; // Exit early if the modelNo exists return; // Exit early if the modelNo exists
} }
@ -247,7 +255,9 @@
this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error'); this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');
} else { } else {
this.products = await response.json();
alert('Success!', 'Product form has been successfully submitted.', 'success'); alert('Success!', 'Product form has been successfully submitted.', 'success');
this.fillTable(this.products);
this.resetForm(); this.resetForm();
} }
@ -301,6 +311,48 @@
this.imageProduct = null; this.imageProduct = null;
} }
}, },
async deleteProduct(productId) {
if (!confirm("Are you sure you want to delete this product?")) {
return;
}
try {
const response = await fetch(`/InvMainAPI/DeleteProduct/${productId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
},
});
const result = await response.json();
if (result.success) {
alert(result.message);
// Remove the row from DataTables
this.productDatatable
.row($(`.delete-btn[data-id="${productId}"]`).closest('tr'))
.remove()
.draw();
} else {
alert(result.message);
}
}
catch (error) {
console.error("Error deleting product:", error);
alert("An error occurred while deleting the product.");
}
finally {
this.loading = false;
}
},
fillTable(data){
if (!this.productDatatable) {
console.error("DataTable not initialized");
return;
}
this.productDatatable.clear();
this.productDatatable.rows.add(data);
this.productDatatable.draw();
this.loading = false;
},
} }
}); });

View File

@ -23,6 +23,7 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
_logger = logger; _logger = logger;
_authDbContext = authDbContext; _authDbContext = authDbContext;
} }
#region Manufacturer #region Manufacturer
[HttpPost("ManufacturerList")] [HttpPost("ManufacturerList")]
@ -74,6 +75,7 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
return Ok(new { success = true, message = "Manufacturer deleted successfully" }); return Ok(new { success = true, message = "Manufacturer deleted successfully" });
} }
#endregion Manufacturer #endregion Manufacturer
#region Product #region Product
@ -81,10 +83,22 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
[HttpPost("ProductList")] [HttpPost("ProductList")]
public async Task<IActionResult> ProductList() public async Task<IActionResult> ProductList()
{ {
var productList = await _authDbContext.Products.Include("Manufacturer").Where(x => x.ManufacturerId == x.ManufacturerId).ToListAsync(); var productList = await _authDbContext.Products.Include("Manufacturer").ToListAsync();
return Json(productList); return Json(productList);
} }
[HttpPost("ProductListWithItem")]
public async Task<IActionResult> ProductListWithItem()
{
var productList = await _authDbContext.Products
.Include(p => p.Items) // Include related items
.Include(p => p.Manufacturer) // Include related manufacturer
.ToListAsync();
return Json(productList);
}
[HttpPost("AddProduct")] [HttpPost("AddProduct")]
public async Task<IActionResult> AddProduct([FromBody] ProductModel product) public async Task<IActionResult> AddProduct([FromBody] ProductModel product)
{ {
@ -104,13 +118,13 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
if (!string.IsNullOrEmpty(product.ImageProduct)) if (!string.IsNullOrEmpty(product.ImageProduct))
{ {
var bytes = Convert.FromBase64String(product.ImageProduct); var bytes = Convert.FromBase64String(product.ImageProduct);
var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/media/inventory/images", product.ModelNo); var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/media/inventory/images", product.ModelNo + ".jpg");
await System.IO.File.WriteAllBytesAsync(filePath, bytes); await System.IO.File.WriteAllBytesAsync(filePath, bytes);
product.ImageProduct = "/media/inventory/images/" + product.ModelNo; product.ImageProduct = "/media/inventory/images/" + product.ModelNo + ".jpg";
} }
_authDbContext.Products.Add(product); _authDbContext.Products.Add(product);
await _authDbContext.SaveChangesAsync(); await _authDbContext.SaveChangesAsync();
var updatedList = await _authDbContext.Manufacturers.Include("Manufacturer").Where(x => x.ManufacturerId == x.ManufacturerId).ToListAsync(); var updatedList = await _authDbContext.Products.Include("Manufacturer").Where(x => x.ManufacturerId == x.ManufacturerId).ToListAsync();
return Json(updatedList); return Json(updatedList);
} }
catch (Exception ex) catch (Exception ex)
@ -122,18 +136,78 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
[HttpDelete("DeleteProduct/{id}")] [HttpDelete("DeleteProduct/{id}")]
public async Task<IActionResult> DeleteProduct(int id) public async Task<IActionResult> DeleteProduct(int id)
{ {
var Product = await _authDbContext.Manufacturers.FindAsync(id); var Product = await _authDbContext.Products.FindAsync(id);
if (Product == null) if (Product == null)
{ {
return NotFound(new { success = false, message = "Product not found" }); return NotFound(new { success = false, message = "Product not found" });
} }
_authDbContext.Manufacturers.Remove(Product); _authDbContext.Products.Remove(Product);
await _authDbContext.SaveChangesAsync(); await _authDbContext.SaveChangesAsync();
return Ok(new { success = true, message = "Product deleted successfully" }); return Ok(new { success = true, message = "Product deleted successfully" });
} }
#endregion Product #endregion Product
#region Company
[HttpPost("CompanyDepartmentList")]
public async Task<IActionResult> CompanyDepartmentList()
{
var productList = await _authDbContext.Companies.Include("Departments").ToListAsync();
return Json(productList);
}
#endregion Company
#region Item
[HttpPost("ItemList")]
public async Task<IActionResult> ItemList()
{
var itemList = await _authDbContext.Items.ToListAsync();
return Json(itemList);
}
[HttpPost("AddItem")]
public async Task<IActionResult> AddItem([FromBody] ItemModel item)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (item == null)
{
return NotFound("Item is null");
}
try
{
_authDbContext.Items.Add(item);
await _authDbContext.SaveChangesAsync();
var updatedList = await _authDbContext.Items.ToListAsync();
return Json(updatedList);
}
catch (Exception ex)
{
return BadRequest(ex.Message);
}
}
[HttpDelete("DeleteItem/{id}")]
public async Task<IActionResult> DeleteItem(int id)
{
var item = await _authDbContext.Items.FindAsync(id);
if (item == null)
{
return NotFound(new { success = false, message = "Item not found" });
}
_authDbContext.Items.Remove(item);
await _authDbContext.SaveChangesAsync();
return Ok(new { success = true, message = "Item deleted successfully" });
}
#endregion Item
} }
} }

View File

@ -30,7 +30,6 @@
<Folder Include="Controllers\JSA\API\" /> <Folder Include="Controllers\JSA\API\" />
<Folder Include="Logs\" /> <Folder Include="Logs\" />
<Folder Include="Migrations\" /> <Folder Include="Migrations\" />
<Folder Include="wwwroot\Media\Inventory\Images\" />
</ItemGroup> </ItemGroup>
</Project> </Project>

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 436 KiB

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB