352 lines
18 KiB
Plaintext
352 lines
18 KiB
Plaintext
@*
|
|
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
|
|
*@
|
|
@{
|
|
ViewData["Title"] = "Company & Department Administration";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
<div id="app">
|
|
<div class="row">
|
|
<div class="card-header">
|
|
<button id="addCompDeptBtn" class="btn btn-success col-md-3 col-lg-3 m-1 col-12"><i class="fa fa-plus"></i> Add Company & Department</button>
|
|
</div>
|
|
<div class="col-md-12 col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Company And Department</h4>
|
|
<div class="col-md-12 col-lg-12">
|
|
<div>
|
|
<table class="table table-bordered table-hover table-striped no-wrap" id="userDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ADD COMPANY DEPARTMENT MODAL -->
|
|
<div class="modal fade" id="registerCompDept" tabindex="-2" role="dialog" aria-labelledby="addCompDeptModalLabel" 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="addCompDeptModalLabel">Add Item</h5>
|
|
<button type="button" class="closeModal" data-dismiss="modal" aria-label="Close" v-on:click="showItemModal=false">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="container-fluid">
|
|
<form v-on:submit.prevent="addCompanyDepartment" data-aos="fade-right">
|
|
<div class="register" data-aos="fade-right">
|
|
<div class="row" data-aos="fade-right">
|
|
<div class="col-md-12">
|
|
<h3 class="register-heading">REGISTER COMPANY & DEPARTMENT</h3>
|
|
<div class="row register-form d-flex justify-content-center">
|
|
<div class="col-md-9">
|
|
<!-- Company Input -->
|
|
<div class="form-group row">
|
|
<label class="col-sm-3 col-form-label">Company:</label>
|
|
<div class="col-sm-4">
|
|
<input type="text" class="form-control col-md-10" v-model="company" required>
|
|
</div>
|
|
|
|
<!-- Add Department -->
|
|
<div class="col-sm-4">
|
|
<button type="button"
|
|
class="btn f-icon d-flex align-items-center text-success"
|
|
style="height: 36px; width: auto"
|
|
v-on:click="departments.push({ departmentName: '', departmentCode: '' })">
|
|
<i class="fas fa-plus-square fa-lg"></i> Add Department
|
|
</button>
|
|
|
|
<span class="text-danger">*Click to add more department</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department Inputs -->
|
|
<div class="form-group row">
|
|
<span class="text-danger">*Department code only accept 2 alphabets character. This code will be use for the item identification</span>
|
|
<label class="col-sm-3 col-form-label">Department:</label>
|
|
<div class="col-sm-8">
|
|
<div class="row mb-2 align-items-center" v-for="(department, index) in departments" :key="index">
|
|
<div class="col-10">
|
|
<input type="text" class="form-control"
|
|
v-model="departments[index].departmentName"
|
|
placeholder="Department Name"
|
|
v-on:input="updateUppercase($event, index, 'departmentName')"
|
|
required>
|
|
|
|
<input type="text" class="form-control"
|
|
minlength="2" maxlength="2" pattern="[a-zA-Z]{2}"
|
|
v-model="departments[index].departmentCode"
|
|
placeholder="Department Code"
|
|
v-on:input="updateUppercase($event, index, 'departmentCode')"
|
|
required>
|
|
</div>
|
|
<div class="col-2">
|
|
<button type="button" class="btn btn-danger" v-on:click="removeDepartment(index)">
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@* Submit and Reset Buttons *@
|
|
<div class="row">
|
|
<div class="col-sm-8 col-md-12 d-flex justify-content-center">
|
|
<button type="button" v-on:click="resetDetails()" class="btn btn-secondary m-1">Reset</button>
|
|
<button type="submit" class="btn btn-primary m-1" :disabled="departments.length == 0">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- DELETE MODAL -->
|
|
<div class="modal fade" id="confirm-dialog" tabindex="-1" role="dialog" aria-labelledby="confirm-dialog-title" 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="confirm-dialog-title">Confirmation</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close" v-on:click="hideModal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div v-if="selectedModule">
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to delete module {{ selectedModule.moduleName }}?</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="hideModal">Cancel</button>
|
|
<input type="hidden" id="delete-id">
|
|
<a id="confirmButton" href="#" class="btn btn-danger" v-on:click="confirmDelete(selectedModule)">Confirm</a>
|
|
</div>
|
|
</div>
|
|
<div v-else><p>Loading...</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@section Scripts {
|
|
@{
|
|
await Html.RenderPartialAsync("_ValidationScriptsPartial");
|
|
}
|
|
<script>
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
userList: null,
|
|
selectedModule: null,
|
|
compDeptList: null,
|
|
company: null,
|
|
departments: [{
|
|
departmentName: '',
|
|
departmentCode: '',
|
|
}],
|
|
compDeptDatatable: null,
|
|
};
|
|
},
|
|
watch: {
|
|
// departments: {
|
|
// handler() {
|
|
// // Code to be executed when the 'departments' data property changes
|
|
// console.log(this.departments);
|
|
// },
|
|
// deep: true, // Watch nested changes inside the departments array
|
|
// },
|
|
},
|
|
mounted() {
|
|
this.fetchCompDept();
|
|
},
|
|
methods: {
|
|
async fetchCompDept() {
|
|
fetch('/AdminAPI/GetDepartmentWithCompanyList', {
|
|
method: 'POST'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log(data)
|
|
this.compDeptList = data ? data : [];
|
|
if (this.compDeptDatatable != null) {
|
|
this.compDeptDatatable.clear().destroy();
|
|
}
|
|
this.initiateTable();
|
|
})
|
|
.catch(error => {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
});
|
|
},
|
|
editCompDept(compDept) {
|
|
// Check if the user ID exists
|
|
if (module.settingId) {
|
|
// Redirect the user to the edit user page
|
|
window.location.href = 'ModuleSetting/' + module.settingId;
|
|
} else {
|
|
console.error('Module ID not found');
|
|
}
|
|
},
|
|
deleteCompDept(compDept) {
|
|
this.selectedModule = module; // Set selected user
|
|
$('#confirm-dialog').modal('show'); // Show the modal
|
|
|
|
// console.log(this.selectedModule);
|
|
},
|
|
confirmDelete(compDept) {
|
|
fetch(`/ModuleAPI/DeleteModule/${module.settingId}`, {
|
|
method: 'POST'
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Failed to delete module');
|
|
}
|
|
// Remove the deleted user from the userData array
|
|
const index = this.moduleData.findIndex(u => u.settingId === module.settingId);
|
|
if (index !== -1) {
|
|
alert("Module deleted successfully");
|
|
this.moduleData.splice(index, 1);
|
|
}
|
|
this.hideModal(); // Hide the modal after deletion
|
|
})
|
|
.catch(error => {
|
|
console.error('Failed to delete module with status:', error);
|
|
});
|
|
},
|
|
hideModal() {
|
|
$('#confirm-dialog').modal('hide');
|
|
},
|
|
initiateTable() {
|
|
self = this;
|
|
// Flatten the data to create rows for each department
|
|
var flatData = [];
|
|
self.compDeptList.forEach(function (company) {
|
|
company.departments.forEach(function (department) {
|
|
flatData.push({
|
|
companyId: company.companyId,
|
|
companyName: company.companyName,
|
|
departmentName: department.departmentName,
|
|
departmentCode: department.departmentCode
|
|
});
|
|
});
|
|
});
|
|
this.compDeptDatatable = $('#userDatatable').DataTable({
|
|
"data": flatData,
|
|
"columns": [
|
|
{
|
|
"title": "Company Name",
|
|
"data": "companyName",
|
|
"visible": false,
|
|
},
|
|
{
|
|
"title": "Department Name",
|
|
"data": "departmentName",
|
|
},
|
|
{
|
|
"title": "Department Code",
|
|
"data": "departmentCode",
|
|
},
|
|
{
|
|
"title": "Delete",
|
|
"data": "companyId",
|
|
"render": function (data) {
|
|
var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${data}">Delete</button>`;
|
|
return deleteButton;
|
|
},
|
|
}
|
|
],
|
|
"rowGroup": {
|
|
"dataSrc": "companyName" // Group rows by the companyName column
|
|
},
|
|
responsive: true,
|
|
ordering: false,
|
|
})
|
|
|
|
// Attach click event listener to the delete buttons
|
|
$('#itemDatatable tbody').on('click', '.delete-btn', function () {
|
|
const itemId = $(this).data('id');
|
|
self.deleteItem(itemId);
|
|
});
|
|
|
|
$('#itemDatatable tbody').on('click', '.print-btn', function () {
|
|
const itemId = $(this).data('id');
|
|
var $row = $(this).closest('tr'); // get the row containing the button
|
|
var imageSrc = $row.find('img').attr('src'); // find the img element in the row and get its src
|
|
// console.log(imageSrc);
|
|
self.printItem(itemId, imageSrc);
|
|
});
|
|
|
|
this.loading = false;
|
|
},
|
|
async addCompanyDepartment() {
|
|
try {
|
|
// Show the loading modal
|
|
$('#loadingModal').modal('show');
|
|
|
|
// Perform the fetch request
|
|
const response = await fetch('/AdminAPI/AddCompanyDepartment', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
Company: this.company,
|
|
Department: this.departments,
|
|
}),
|
|
});
|
|
|
|
// Check if the response is OK
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.message);
|
|
}
|
|
|
|
const data = await response.json();
|
|
this.fetchCompDept();
|
|
$('#registerCompDept').modal('hide');
|
|
alert("Company and department successfully added");
|
|
}
|
|
catch (error) {
|
|
console.error('Failed to add company and department:', error);
|
|
alert(error.message);
|
|
}
|
|
finally {
|
|
await new Promise(resolve => {
|
|
$('#loadingModal').on('shown.bs.modal', resolve);
|
|
});
|
|
$('#loadingModal').modal('hide');
|
|
}
|
|
},
|
|
removeDepartment(index) {
|
|
this.departments.splice(index, 1);
|
|
},
|
|
updateUppercase(event, index, key) {
|
|
this.departments[index][key] = event.target.value.toUpperCase();
|
|
},
|
|
resetDetails(){
|
|
this.company = null;
|
|
this.departments = [{
|
|
departmentName: '',
|
|
departmentCode: '',
|
|
}];
|
|
}
|
|
}
|
|
})
|
|
|
|
$(function () {
|
|
app.mount('#app');
|
|
$('#addCompDeptBtn').on('click', function () {
|
|
$('#registerCompDept').modal('show');
|
|
});
|
|
$('.closeModal').on('click', function () {
|
|
$('.modal').modal('hide');
|
|
});
|
|
});
|
|
</script>
|
|
}
|