PSTW_CentralizeSystem/Areas/OTcalculate/Views/HrDashboard/Rate.cshtml
2025-03-19 08:55:31 +08:00

148 lines
6.0 KiB
Plaintext

@model List<PSTW_CentralSystem.Areas.OTcalculate.Models.RateModel>
@{
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>
</div>
<div class="row">
<div id="rateUpdate" class="card m-1">
<div class="row" v-if="addSection == true">
<form v-on:submit.prevent="updateRate" data-aos="fade-right">
<div class="container update" data-aos="fade-right">
<div class="row" data-aos="fade-right">
<div class="col-md-12">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="card-header" style="background-color: white;">
<h3 class="rate-heading text-center">UPDATE RATE</h3>
</div>
<div class="row update-form card-body">
<div class="col-md-6">
@* Enter Rate *@
<div class="form-group row">
<label for="rate" class="col-sm-3">Rate</label>
<div class="col-sm-9">
<input type="number" id="rate" class="form-control" v-model="rate" placeholder="Enter new rateeee">
</div>
</div>
</div>
</div>
</div>
@* User Table Rate *@
<div id="app">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="card">
<div class="card-body">
<div class="col-md-12 col-lg-12">
<div>
<table class="table table-bordered table-hover table-striped no-wrap align-middle" id="rateTable" style="width:100%;border-style: solid; border-width: 1px"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@section Scripts {
@{
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
<script>
$(function () {
app.mount('#app');
});
const app = Vue.createApp({
data() {
return {
rateList: [],
};
},
mounted() {
this.fetchRates();
},
methods: {
async fetchRates() {
try {
let response = await fetch('/OTcalculate/HrDashboard/GetRateList', { method: 'GET' });
let data = await response.json();
this.rateList = data.length ? data : [];
this.$nextTick(() => {
if (this.rateTable) {
this.rateTable.clear().destroy();
}
this.initiateTable();
});
} catch (error) {
console.error('Error fetching rates:', error);
}
},
async initiateTable() {
self = this;
this.rateTable = $('#rateTable').DataTable({
"data": self.rateList,
"columns": [
{
"title": "Full Name",
"data": "fullName",
},
{
"title": "Department",
"data": "departmentName",
}
],
responsive: true,
order: [[0, 'asc']],
});
}
}
});
</script>
}