68 lines
2.7 KiB
Plaintext
68 lines
2.7 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Overtime Approval";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
|
|
<div class="container mt-4" id="hod-approval-app">
|
|
<table class="table table-bordered table-striped mt-3">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Submission Date</th>
|
|
<th>Month/Year</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="submission in submittedRecords" :key="submission.userId + '-' + submission.monthYear">
|
|
<td><a :href="'/OTcalculate/HodDashboard/OtReview/' + submission.userId + '/' + getMonthYearParts(submission.monthYear).month + '/' + getMonthYearParts(submission.monthYear).year">{{ submission.userName }}</a></td>
|
|
<td>{{ formatDate(submission.submissionDate) }}</td>
|
|
<td>{{ submission.monthYear }}</td>
|
|
<td><button class="btn btn-info btn-sm">Review</button></td>
|
|
</tr>
|
|
<tr v-if="!submittedRecords.length">
|
|
<td colspan="4">No overtime records submitted for review.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
|
|
<script>
|
|
const hodApprovalApp = Vue.createApp({
|
|
data() {
|
|
return {
|
|
submittedRecords: []
|
|
};
|
|
},
|
|
mounted() {
|
|
this.fetchSubmittedRecords();
|
|
},
|
|
methods: {
|
|
async fetchSubmittedRecords() {
|
|
try {
|
|
const res = await fetch('/OvertimeAPI/GetSubmittedOvertimeRecords');
|
|
if (res.ok) {
|
|
this.submittedRecords = await res.json();
|
|
} else {
|
|
console.error("Failed to fetch submitted records:", await res.text());
|
|
alert("Error fetching submitted records.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching submitted records:", error);
|
|
alert("An unexpected error occurred.");
|
|
}
|
|
},
|
|
formatDate(dateString) {
|
|
if (!dateString) return '-';
|
|
return new Date(dateString).toLocaleDateString();
|
|
},
|
|
getMonthYearParts(monthYearString) {
|
|
const parts = monthYearString.split('/');
|
|
return { month: parts[0], year: parts[1] };
|
|
}
|
|
}
|
|
}).mount("#hod-approval-app");
|
|
</script>
|
|
} |