221 lines
10 KiB
Plaintext
221 lines
10 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Rate Update";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
|
|
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-6 col-md-6 col-lg-3">
|
|
<div class="card card-hover">
|
|
<a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Rate">
|
|
<div class="box bg-success text-center">
|
|
<h1 class="font-light text-white">
|
|
<i class="mdi mdi-currency-usd"></i>
|
|
</h1>
|
|
<h6 class="text-white">Rate</h6>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6 col-md-6 col-lg-3">
|
|
<div class="card card-hover">
|
|
<a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Calendar">
|
|
<div class="box bg-purple text-center">
|
|
<h1 class="font-light text-white">
|
|
<i class="mdi mdi-calendar"></i>
|
|
</h1>
|
|
<h6 class="text-white">Calendar</h6>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6 col-md-6 col-lg-3">
|
|
<div class="card card-hover">
|
|
<a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="HrUserSetting">
|
|
<div class="box bg-megna text-center">
|
|
<h1 class="font-light text-white">
|
|
<i class="mdi mdi-account-settings"></i>
|
|
</h1>
|
|
<h6 class="text-white">User Setting</h6>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="app" class="row">
|
|
<div class="card m-1">
|
|
<form v-on:submit.prevent="updateRates" data-aos="fade-right">
|
|
<div class="card-header bg-white text-center">
|
|
<h3 class="rate-heading">UPDATE RATE</h3>
|
|
</div>
|
|
@* Enter Rate *@
|
|
<div class="d-flex justify-content-center align-items-center">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<label for="rate" class="mb-0">Rate</label>
|
|
<input type="number" id="rate" class="form-control text-center" v-model="rate" placeholder="Enter new rate" step="0.01">
|
|
<button type="button" class="btn btn-danger me-2" v-on:click="clearForm">Clear</button>
|
|
<button type="submit" class="btn btn-success col-4">Update Rates</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<table id="rateDatatable" class="table table-bordered table-hover table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Full Name</th>
|
|
<th>Department</th>
|
|
<th>Current Rate</th>
|
|
<th class="text-center">Select</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-end gap-2 my-3">
|
|
<button type="button" class="btn btn-danger" v-on:click="clearForm">Clear</button>
|
|
<button type="submit" class="btn btn-success">Update Rates</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
@{
|
|
await Html.RenderPartialAsync("_ValidationScriptsPartial");
|
|
}
|
|
<script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>
|
|
<script>
|
|
window.onload = function () {
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
users: [],
|
|
selectedRates: [],
|
|
userList: [],
|
|
rate: null,
|
|
rateDatatable: null
|
|
};
|
|
},
|
|
mounted() {
|
|
console.log("Vue App Mounted Successfully");
|
|
this.fetchUser().then(() => {
|
|
this.fetchRates();
|
|
});
|
|
},
|
|
methods: {
|
|
async fetchRates() {
|
|
try {
|
|
const response = await fetch("/OvertimeAPI/GetUserRates", { method: "POST", headers: { "Content-Type": "application/json" }});
|
|
if (!response.ok) throw new Error("Failed to fetch rates");
|
|
const usersWithRates = await response.json();
|
|
this.userList = this.userList.map(user => {
|
|
const userRate = usersWithRates.find(rate => rate.userId === user.id);
|
|
return { ...user, rateValue: userRate ? userRate.rateValue : null };
|
|
});
|
|
this.initiateTable();
|
|
} catch (error) {
|
|
console.error("Error fetching rates:", error);
|
|
}
|
|
},
|
|
async updateRates() {
|
|
try {
|
|
if (this.selectedRates.length === 0) {
|
|
alert("Please select at least one user.");
|
|
return;
|
|
}
|
|
let rateValue = parseFloat(this.rate);
|
|
if (isNaN(rateValue)) {
|
|
alert("Please enter a valid rate.");
|
|
return;
|
|
}
|
|
const payload = this.selectedRates.map(userId => ({ UserId: userId, RateValue: rateValue.toFixed(2) }));
|
|
const response = await fetch("/OvertimeAPI/UpdateRates", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
if (response.ok) {
|
|
alert("Rates updated successfully!");
|
|
this.selectedRates = [];
|
|
this.rate = null;
|
|
await this.fetchRates();
|
|
} else {
|
|
alert("Failed to update rates. Please try again.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error updating rates:", error);
|
|
alert("An error occurred while updating rates.");
|
|
}
|
|
},
|
|
async fetchUser() {
|
|
try {
|
|
const response = await fetch(`/InvMainAPI/UserList/`, { method: 'POST' });
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
this.userList = data.filter(e => e.fullName !== "MAAdmin" && e.fullName !== "SysAdmin");
|
|
console.log(this.userList);
|
|
} else {
|
|
console.error(`Failed to fetch user: ${response.statusText}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
}
|
|
},
|
|
initiateTable() {
|
|
let self = this;
|
|
if ($.fn.dataTable.isDataTable('#rateDatatable')) {
|
|
$('#rateDatatable').DataTable().clear().destroy();
|
|
}
|
|
this.rateDatatable = $('#rateDatatable').DataTable({
|
|
"data": this.userList,
|
|
"columns": [
|
|
{
|
|
"title": "Full Name",
|
|
"data": "fullName"
|
|
},
|
|
{
|
|
"title": "Department",
|
|
"data": "departmentName"
|
|
},
|
|
{
|
|
"title": "Current Rate",
|
|
"data": "rateValue",
|
|
"render": data => data ? parseFloat(data).toFixed(2) : 'N/A'
|
|
},
|
|
{
|
|
"title": "Select",
|
|
"data": "id",
|
|
"className": "text-center",
|
|
"render": function (data)
|
|
{
|
|
return `<input type='checkbox' class='rate-checkbox' value='${data}'>`;
|
|
}}
|
|
],
|
|
responsive: true,
|
|
});
|
|
$('#rateDatatable tbody').on('change', '.rate-checkbox', function () {
|
|
const userId = $(this).val();
|
|
if (this.checked) self.selectedRates.push(userId);
|
|
else self.selectedRates = self.selectedRates.filter(id => id !== userId);
|
|
});
|
|
},
|
|
clearForm() {
|
|
this.rate = null;
|
|
this.selectedRates = [];
|
|
|
|
document.querySelectorAll('.rate-checkbox').forEach(checkbox => {
|
|
checkbox.checked = false;
|
|
});
|
|
}
|
|
|
|
}
|
|
});
|
|
app.mount('#app');
|
|
};
|
|
</script>
|
|
}
|