478 lines
23 KiB
Plaintext
478 lines
23 KiB
Plaintext
@{
|
|
ViewData["Title"] = "User Form";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
|
|
@await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartial.cshtml")
|
|
<div id="registerSupplier">
|
|
<div class="row" v-if="addSection == true">
|
|
<form v-on:submit.prevent="addSupplier" data-aos="fade-right" id="registerSupplierForm" v-if="registerSupplierForm">
|
|
<div class="container register" data-aos="fade-right">
|
|
<div class="row">
|
|
@*Right Side*@
|
|
<div class="col-md-9 register-rights" data-aos="fade-right">
|
|
<div class="tab-content" id="myTabContent" data-aos="fade-right">
|
|
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" data-aos="fade-right">
|
|
<h3 class="register-heading">REGISTRATION SUPPLIER</h3>
|
|
<div class="row register-form">
|
|
<div class="col-md-61">
|
|
|
|
@* Supplier Name *@
|
|
<div class="form-group row">
|
|
<label for="supplierCompName" class="col-sm-3">Supplier Company Name:</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" id="supplierCompName" name="supplierCompName" class="form-control" required v-model="supplierCompName">
|
|
</div>
|
|
</div>
|
|
|
|
@* Supplier Address *@
|
|
<div class="form-group row">
|
|
<label class="col-sm-3">Supplier Address:</label>
|
|
<div class="col-sm-9">
|
|
<div class="dropdown">
|
|
<textarea type="text" id="supplierAddress" name="supplierAddress" class="form-control" required v-model="supplierAddress"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@* Supplier PIC *@
|
|
<div class="form-group row">
|
|
<label class="col-sm-3">Supplier PIC:</label>
|
|
<div class="col-sm-9">
|
|
<input type="email" id="supplierPIC" name="supplierPIC" class="form-control" v-model="supplierPIC">
|
|
</div>
|
|
</div>
|
|
|
|
@* Supplier Email *@
|
|
<div class="form-group row">
|
|
<label class="col-sm-3">Supplier Email:</label>
|
|
<div class="col-sm-9">
|
|
<input type="email" id="supplierEmail" name="supplierEmail" class="form-control" v-model="supplierEmail">
|
|
</div>
|
|
</div>
|
|
|
|
@* Supplier Number Phone *@
|
|
<div class="form-group row">
|
|
<label class="col-sm-3">Supplier Phone Number:</label>
|
|
<div class="col-sm-9">
|
|
<input type="tel" id="supplierPhoneNo" name="supplierPhoneNo" class="form-control" v-model="supplierPhoneNo">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-sm-9 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="row">
|
|
<button class="btn btn-danger col-md-3 m-1"
|
|
v-on:click="resetForm(); registerSupplierForm = false; addSection = false;">
|
|
<i class="fa fa-minus"></i> Hide Add Supplier Section
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row" v-if="editSection == true">
|
|
<form v-on:submit.prevent="submitEditSupplier" data-aos="fade-right">
|
|
<div class="container register" data-aos="fade-right">
|
|
<div class="row">
|
|
@*Right Side*@
|
|
<div class="col-md-9" data-aos="fade-right">
|
|
<div class="tab-content" id="myTabContent" data-aos="fade-right">
|
|
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" data-aos="fade-right">
|
|
<h3 class="register-heading">EDIT SUPPLIER</h3>
|
|
<div class="row register-form">
|
|
<div class="col-md-61">
|
|
|
|
@* Supplier Name *@
|
|
<div class="form-group row">
|
|
<label for="supplierCompName" class="col-sm-3">Supplier Company Name:</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" id="supplierCompName" name="supplierCompName" class="form-control" required v-model="supplierCompName">
|
|
</div>
|
|
</div>
|
|
|
|
@* Supplier Address *@
|
|
<div class="form-group row">
|
|
<label class="col-sm-3">Supplier Address:</label>
|
|
<div class="col-sm-9">
|
|
<div class="dropdown">
|
|
<textarea type="text" id="supplierAddress" name="supplierAddress" class="form-control" required v-model="supplierAddress"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@* Supplier PIC *@
|
|
<div class="form-group row">
|
|
<label class="col-sm-3">Supplier PIC:</label>
|
|
<div class="col-sm-9">
|
|
<input type="email" id="supplierPIC" name="supplierPIC" class="form-control" v-model="supplierPIC">
|
|
</div>
|
|
</div>
|
|
|
|
@* Supplier Email *@
|
|
<div class="form-group row">
|
|
<label class="col-sm-3">Supplier Email:</label>
|
|
<div class="col-sm-9">
|
|
<input type="email" id="supplierEmail" name="supplierEmail" class="form-control" v-model="supplierEmail">
|
|
</div>
|
|
</div>
|
|
|
|
@* Supplier Number Phone *@
|
|
<div class="form-group row">
|
|
<label class="col-sm-3">Supplier Phone Number:</label>
|
|
<div class="col-sm-9">
|
|
<input type="tel" id="supplierPhoneNo" name="supplierPhoneNo" class="form-control" v-model="supplierPhoneNo">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-sm-9 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="row">
|
|
<button class="btn btn-danger col-md-3 m-1" v-on:click="hideEditSection">
|
|
<i class="fa fa-minus"></i> Hide Edit Supplier Section
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row card">
|
|
<div class="card-header">
|
|
<div class="row">
|
|
<button id="addSupplierBtn"
|
|
class="btn btn-success col-md-3 m-1"
|
|
v-show="addSection == false"
|
|
v-on:click="resetForm(); registerSupplierForm = true; addSection = true; editSection = false;">
|
|
<i class="fa fa-plus"></i> Show Add Supplier Section
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-bordered table-hover table-striped no-wrap" id="supplierDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@section Scripts {
|
|
@{
|
|
await Html.RenderPartialAsync("_ValidationScriptsPartial");
|
|
}
|
|
<script>
|
|
$(function () {
|
|
app.mount('#registerSupplier');
|
|
|
|
// Attach a click event listener to elements with the class 'btn-success'.
|
|
$('#addSupplierBtn').on('click', function () {
|
|
// Show the modal with the ID 'addManufacturerModal'.
|
|
$('#registerSupplierModal').modal('show');
|
|
});
|
|
$('.closeModal').on('click', function () {
|
|
// Show the modal with the ID 'addManufacturerModal'.
|
|
$('.modal').modal('hide');
|
|
});
|
|
});
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
supplierCompName : null,
|
|
supplierEmail : null,
|
|
supplierAddress : null,
|
|
supplierPhoneNo : null,
|
|
supplierPIC : null,
|
|
suppliers: null,
|
|
supplierDatatable: null,
|
|
gender: ["Male", "Female"],
|
|
registerSupplierForm: false,
|
|
editSection: false,
|
|
supplierId: null,
|
|
addSection: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchSuppliers();
|
|
|
|
// Add this event delegation
|
|
document.addEventListener('click', (event) => {
|
|
if (event.target.classList.contains('delete-btn')) {
|
|
const supplierId = event.target.getAttribute('data-id');
|
|
this.deleteSupplier(supplierId);
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
async fetchSuppliers() {
|
|
try {
|
|
const response = await fetch('/InvMainAPI/SupplierList', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
console.error('Error response:', errorData);
|
|
this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');
|
|
return;
|
|
}
|
|
if (this.supplierDatatable){
|
|
this.supplierDatatable.clear().destroy();
|
|
}
|
|
const suppliers = await response.json();
|
|
this.suppliers = suppliers;
|
|
|
|
if (this.itemDatatable) {
|
|
this.itemDatatable.clear().destroy();
|
|
}
|
|
this.initiateTable();
|
|
} catch (error) {
|
|
console.error('Error fetching suppliers:', error);
|
|
this.errorMessage = 'Error: ' + error.message;
|
|
}
|
|
|
|
},
|
|
async addSupplier() {
|
|
$('#loadingModal').modal('show');
|
|
// Create the payload
|
|
const formData = {
|
|
supplierCompName: this.supplierCompName,
|
|
supplierEmail: this.supplierEmail,
|
|
supplierPIC: this.supplierPIC,
|
|
supplierAddress: this.supplierAddress,
|
|
supplierPhoneNo: this.supplierPhoneNo
|
|
};
|
|
|
|
try {
|
|
// List of required fields
|
|
const requiredFields = ['supplierCompName', 'supplierAddress'];
|
|
|
|
// Loop through required fields and check if any are null or empty
|
|
for (let field of requiredFields) {
|
|
if (this[field] === null || this[field] === '') {
|
|
alert('Supplier Error', `Please fill in required fields: ${field}.`, 'warning');
|
|
return; // Exit early if validation fails
|
|
}
|
|
}
|
|
|
|
// Proceed to send the data as raw JSON string
|
|
const response = await fetch('/InvMainAPI/AddSupplier', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(formData) // Convert the formData to a JSON string
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
console.error('Error response:', errorData);
|
|
this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');
|
|
|
|
} else {
|
|
alert('Success!', 'Supplier form has been successfully submitted.', 'success');
|
|
this.fetchSuppliers();
|
|
this.resetForm();
|
|
}
|
|
|
|
}
|
|
catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Supplier Error', `An error occurred: ${error.message}`, 'error');
|
|
}
|
|
finally {
|
|
await new Promise(resolve => {
|
|
$('#loadingModal').on('shown.bs.modal', resolve);
|
|
});
|
|
$('#loadingModal').modal('hide');
|
|
}
|
|
},
|
|
resetForm() {
|
|
this.supplierCompName = null;
|
|
this.supplierAddress = null;
|
|
this.supplierEmail = null;
|
|
this.supplierPhoneNo = null;
|
|
this.supplierPIC = null;
|
|
},
|
|
initiateTable() {
|
|
self = this;
|
|
this.supplierDatatable = $('#supplierDatatable').DataTable({
|
|
"data": this.suppliers,
|
|
"columns": [
|
|
{
|
|
"title": "Supplier Company Name",
|
|
"data": "supplierCompName",
|
|
},
|
|
{
|
|
"title": "Supplier Address",
|
|
"data": "supplierAddress",
|
|
},
|
|
{
|
|
"title": "Company PIC",
|
|
"data": "supplierPIC",
|
|
},
|
|
{
|
|
"title": "Supplier Email",
|
|
"data": "supplierEmail",
|
|
},
|
|
{
|
|
"title": "Supplier Phone No",
|
|
"data": "supplierPhoneNo",
|
|
},
|
|
{
|
|
"title": "Edit",
|
|
"data": "supplierId",
|
|
"render": function (data) {
|
|
var editButton = `<button type="button" class="btn btn-success edit-btn" data-id="${data}">Edit</button>`;
|
|
return editButton;
|
|
},
|
|
},
|
|
{
|
|
"title": "Delete",
|
|
"data": "supplierId",
|
|
"render": function (data) {
|
|
return `<button type="button" class="btn btn-danger delete-btn" data-id="${data}">Delete</button>`;
|
|
},
|
|
}
|
|
],
|
|
responsive: true,
|
|
});
|
|
|
|
// Attach click event listener to the edit buttons
|
|
$('#supplierDatatable tbody').off('click', '.edit-btn').on('click', '.edit-btn', function () {
|
|
const supplierId = $(this).data('id');
|
|
self.editSupplier(supplierId);
|
|
});
|
|
|
|
|
|
},
|
|
async editSupplier(supplierId) {
|
|
|
|
const supplier = this.suppliers.find(s => s.supplierId === supplierId);
|
|
if (!supplier) {
|
|
alert('Error', 'Supplier not found!', 'warning');
|
|
return;
|
|
}
|
|
|
|
// Populate form fields
|
|
this.supplierId = supplierId;
|
|
this.supplierCompName = supplier.supplierCompName;
|
|
this.supplierEmail = supplier.supplierEmail;
|
|
this.supplierAddress = supplier.supplierAddress;
|
|
this.supplierPhoneNo = supplier.supplierPhoneNo;
|
|
this.supplierPIC = supplier.supplierPIC;
|
|
|
|
// Show the edit form and hide the add form
|
|
this.addSection = false;
|
|
this.editSection = true;
|
|
|
|
},
|
|
async submitEditSupplier() {
|
|
const formData = {
|
|
supplierId: this.supplierId,
|
|
SupplierCompName: this.supplierCompName,
|
|
supplierEmail: this.supplierEmail,
|
|
SupplierPIC: this.supplierPIC,
|
|
SupplierAddress: this.supplierAddress,
|
|
SupplierPhoneNo: this.supplierPhoneNo
|
|
};
|
|
|
|
try {
|
|
// List of required fields
|
|
const requiredFields = ['supplierCompName', 'supplierAddress', 'supplierPIC', 'supplierEmail', 'supplierPhoneNo'];
|
|
|
|
// Loop through required fields and check if any are null or empty
|
|
for (let field of requiredFields) {
|
|
if (this[field] === null || this[field] === '') {
|
|
alert('Supplier Error', `Please fill in required fields: ${field}.`, 'warning');
|
|
return; // Exit early if validation fails
|
|
}
|
|
}
|
|
|
|
// Edit supplier detail
|
|
const response = await fetch('/InvMainAPI/EditSupplier', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
console.error('Error response:', errorData);
|
|
this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');
|
|
return;
|
|
}
|
|
|
|
// Refresh station list and reset form
|
|
alert('Success!', 'Supplier form has been successfully submitted.', 'success');
|
|
this.fetchSuppliers();
|
|
this.resetForm();
|
|
this.editSection = false;
|
|
} catch (error) {
|
|
console.error('Error editing Supplier:', error);
|
|
this.errorMessage = 'Error: ' + error.message;
|
|
}
|
|
},
|
|
async deleteSupplier(supplierId) {
|
|
if (!confirm("Are you sure you want to delete this supplier?")) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/InvMainAPI/DeleteSupplier/${supplierId}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
// REMOVED the body completely
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
console.error('Error response:', errorData);
|
|
alert('Error', errorData.message || 'Failed to delete supplier', 'error');
|
|
return;
|
|
}
|
|
|
|
// Success case
|
|
alert('Success', 'Supplier deleted successfully', 'success');
|
|
this.fetchSuppliers();
|
|
} catch (error) {
|
|
console.error('Error deleting supplier:', error);
|
|
alert('Error', 'An error occurred while deleting the supplier', 'error');
|
|
}
|
|
},
|
|
hideEditSection() {
|
|
this.resetForm();
|
|
this.editSection = false;
|
|
this.addSection = false;
|
|
},
|
|
toggleAddSupplier() {
|
|
this.resetForm();
|
|
this.editSection = false;
|
|
this.addSection = !this.addSection;
|
|
this.registerSupplierForm = this.addSection;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
} |