310 lines
14 KiB
Plaintext
310 lines
14 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Manufactures";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
|
|
@await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartial.cshtml")
|
|
<div id="app">
|
|
<div class="row card">
|
|
<div class="card-header">
|
|
<button id="addManufacturerBtn" class="btn btn-success col-md-3 m-1"><i class="fa fa-plus"></i> Add Manufacturer</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div v-if="loading">
|
|
<div class="spinner-border text-info" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<table class="table table-bordered table-hover table-striped no-wrap" id="manufacturerTable" style="width:100%;border-style: solid; border-width: 1px"></table>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="addManufacturerModal" tabindex="-1" role="dialog" aria-labelledby="addManufacturerModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="addManufacturerModalLabel">Add Manufacturer</h5>
|
|
<button type="button" class="closeModal" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form v-on:submit.prevent="addManufacturer">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="manufacturerName">Manufacturer Name:</label>
|
|
<input type="text" class="form-control" id="manufacturerName" v-model="newManufacturer.manufacturerName" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary closeModal" data-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-primary">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="editManufacturerModal" tabindex="-1" role="dialog" aria-labelledby="editManufacturerModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Edit Manufacturer</h5>
|
|
<button type="button" class="closeModal" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form v-on:submit.prevent="updateManufacturer">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="editManufacturerName">Manufacturer Name:</label>
|
|
<input type="text" class="form-control" id="editManufacturerName" v-model="editManufacturer.manufacturerName" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary closeModal" data-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@section Scripts {
|
|
@{
|
|
await Html.RenderPartialAsync("_ValidationScriptsPartial");
|
|
}
|
|
<script>
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
manufacturer: null,
|
|
manufacturerDatatable: null,
|
|
newManufacturer: {
|
|
manufacturerName: null,
|
|
},
|
|
loading: true,
|
|
editManufacturer: {
|
|
manufacturerId: null,
|
|
manufacturerName: null,
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
mounted() {
|
|
// Fetch companies, depts, and products from the API
|
|
this.fetchManufactures();
|
|
this.initiateTable();
|
|
},
|
|
methods: {
|
|
async fetchManufactures() {
|
|
fetch('/InvMainAPI/ManufacturerList', {
|
|
method: 'POST'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data != null && data.length > 0)
|
|
{
|
|
this.manufacturer = data;
|
|
}
|
|
if (!this.manufacturerDatatable) {
|
|
this.initiateTable();
|
|
} else {
|
|
this.fillTable(data);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
});
|
|
|
|
},
|
|
async initiateTable() {
|
|
// Clear any existing DataTable instance before re-initializing
|
|
if (this.manufacturerDatatable) {
|
|
this.manufacturerDatatable.destroy();
|
|
}
|
|
|
|
this.manufacturerDatatable = $('#manufacturerTable').DataTable({
|
|
"data": this.manufacturer,
|
|
"columns": [
|
|
{
|
|
"title": "Manufacturer Name",
|
|
"data": "manufacturerName",
|
|
},
|
|
{
|
|
"title": "Edit",
|
|
"data": "manufacturerId", // Use manufacturerId for the data attribute
|
|
"render": (data, type, row) => { // Use arrow function to preserve 'this' context
|
|
// 'this' inside this arrow function will refer to the Vue instance
|
|
var editButton = `<button type="button" class="btn btn-success edit-btn" data-id="${data}">Edit</button>`;
|
|
return editButton;
|
|
},
|
|
},
|
|
{
|
|
"title": "Delete",
|
|
"data": "manufacturerId", // Use manufacturerId for the data attribute
|
|
"render": (data, type, row) => { // Use arrow function to preserve 'this' context
|
|
var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${data}">Delete</button>`;
|
|
return deleteButton;
|
|
},
|
|
"width": '10%',
|
|
},
|
|
],
|
|
});
|
|
|
|
// Use a variable to store the Vue instance for consistent access
|
|
const vueInstance = this;
|
|
|
|
// Attach click event listener to the edit buttons
|
|
$('#manufacturerTable tbody').off('click', '.edit-btn').on('click', '.edit-btn', function () {
|
|
const manufacturerId = $(this).data('id');
|
|
// Call the method on the stored Vue instance
|
|
vueInstance.openEditManufacturerModal(manufacturerId);
|
|
$('#editManufacturerModal').modal('show'); // Ensure the modal is shown here
|
|
});
|
|
|
|
// Attach click event listener to the delete buttons
|
|
$('#manufacturerTable tbody').off('click', '.delete-btn').on('click', '.delete-btn', function () {
|
|
const manufacturerId = $(this).data('id');
|
|
vueInstance.deleteManufacturer(manufacturerId);
|
|
});
|
|
|
|
this.loading = false;
|
|
},
|
|
fillTable(data){
|
|
if (!this.manufacturerDatatable) {
|
|
console.error("DataTable not initialized");
|
|
return;
|
|
}
|
|
this.manufacturerDatatable.clear();
|
|
this.manufacturerDatatable.rows.add(data);
|
|
this.manufacturerDatatable.draw();
|
|
this.loading = false;
|
|
},
|
|
addManufacturer() {
|
|
this.loading = true;
|
|
const existingManufacturer = this.manufacturer != null ? this.manufacturer.find(m => m.manufacturerName.toLowerCase() === this.newManufacturer.manufacturerName.toLowerCase()) : null;
|
|
if (existingManufacturer) {
|
|
alert('Manufacturer already exists');
|
|
return;
|
|
}
|
|
fetch('/InvMainAPI/AddManufacturer', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(this.newManufacturer)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data != null && data.length > 0)
|
|
{
|
|
this.manufacturer = data;
|
|
}
|
|
this.fillTable(data);
|
|
})
|
|
.catch(error => {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
})
|
|
.finally(() => {
|
|
$('#preloader').modal('hide');
|
|
this.newManufacturer.manufacturerName = null;
|
|
});
|
|
},
|
|
openEditManufacturerModal(manufacturerId) {
|
|
const selected = this.manufacturer.find(m => m.manufacturerId === manufacturerId);
|
|
if (!selected) {
|
|
alert('Manufacturer not found');
|
|
return;
|
|
}
|
|
|
|
this.editManufacturer.manufacturerId = selected.manufacturerId;
|
|
this.editManufacturer.manufacturerName = selected.manufacturerName;
|
|
|
|
$('#editManufacturerModal').modal('show');
|
|
},
|
|
async updateManufacturer() {
|
|
try {
|
|
const response = await fetch('/InvMainAPI/EditManufacturer', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(this.editManufacturer)
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data && data.success) {
|
|
alert('Manufacturer updated successfully');
|
|
this.fetchManufactures(); // Refresh list
|
|
$('#editManufacturerModal').modal('hide');
|
|
} else {
|
|
alert(data.message || 'Failed to update manufacturer');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating manufacturer:', error);
|
|
alert('Error occurred while updating');
|
|
}
|
|
},
|
|
|
|
async deleteManufacturer(manufacturerId) {
|
|
if (!confirm("Are you sure you want to delete this manufacturer?")) {
|
|
return;
|
|
}
|
|
try {
|
|
const response = await fetch(`/InvMainAPI/DeleteManufacturer/${manufacturerId}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
});
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
alert(result.message);
|
|
// Remove the row from DataTables
|
|
this.manufacturerDatatable
|
|
.row($(`.delete-btn[data-id="${manufacturerId}"]`).closest('tr'))
|
|
.remove()
|
|
.draw();
|
|
} else {
|
|
alert(result.message);
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error("Error deleting manufacturer:", error);
|
|
alert("An error occurred while deleting the manufacturer.");
|
|
}
|
|
finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
}
|
|
|
|
});
|
|
|
|
$(function () {
|
|
app.mount('#app');
|
|
|
|
// Attach a click event listener to elements with the class 'btn-success'.
|
|
$('#addManufacturerBtn').on('click', function () {
|
|
// Show the modal with the ID 'addManufacturerModal'.
|
|
$('#addManufacturerModal').modal('show');
|
|
});
|
|
$('.closeModal').on('click', function () {
|
|
// Show the modal with the ID 'addManufacturerModal'.
|
|
$('#addManufacturerModal').modal('hide');
|
|
});
|
|
$('#editManufacturerBtn').on('click', function () {
|
|
// Show the modal with the ID 'editManufacturerModal'.
|
|
$('#editManufacturerModal').modal('show');
|
|
});
|
|
$('.closeModal').on('click', function () {
|
|
// Show the modal with the ID 'editManufacturerModal'.
|
|
$('#editManufacturerModal').modal('hide');
|
|
});
|
|
});
|
|
</script>
|
|
}
|
|
|