124 lines
3.8 KiB
Plaintext
124 lines
3.8 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Overtime Status";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
|
|
<style>
|
|
.hodstatus, .hrstatus {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.modal-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0,0,0,0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
width: 500px;
|
|
}
|
|
</style>
|
|
|
|
<div id="otStatusApp" class="container mt-4">
|
|
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Month</th>
|
|
<th>Year</th>
|
|
<th>Submitted On</th>
|
|
<th>HOD Status</th>
|
|
<th>HR Status</th>
|
|
<th>Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="status in statusList" :key="status.statusId">
|
|
<td>{{ getMonthName(status.month) }}</td>
|
|
<td>{{ status.year }}</td>
|
|
<td>{{ formatDate(status.submitDate) }}</td>
|
|
<td :class="status.hodStatus.toLowerCase()">{{ status.hodStatus }}</td>
|
|
<td :class="status.hrStatus.toLowerCase()">{{ status.hrStatus }}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-primary" v-on:click ="viewUpdates(status)">View Updates</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Modal -->
|
|
<div v-if="selectedStatus" class="modal-mask">
|
|
<div class="modal-container">
|
|
<h5>Status History</h5>
|
|
<p><strong>HOD Updates:</strong></p>
|
|
<ul>
|
|
<li v-for="update in parseJson(selectedStatus.hodUpdate)">
|
|
{{ formatUpdate(update) }}
|
|
</li>
|
|
</ul>
|
|
<p><strong>HR Updates:</strong></p>
|
|
<ul>
|
|
<li v-for="update in parseJson(selectedStatus.hrUpdate)">
|
|
{{ formatUpdate(update) }}
|
|
</li>
|
|
</ul>
|
|
<button class="btn btn-secondary" v-on:click ="selectedStatus = null">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
|
|
<script>
|
|
const { createApp } = Vue;
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
statusList: [],
|
|
selectedStatus: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
fetch('/OvertimeAPI/GetUserOtStatus')
|
|
.then(res => {
|
|
if (!res.ok) throw new Error(`HTTP error ${res.status}`);
|
|
return res.json();
|
|
})
|
|
.then(data => this.statusList = data)
|
|
.catch(err => console.error("Fetch error:", err));
|
|
},
|
|
methods: {
|
|
formatDate(dateStr) {
|
|
return new Date(dateStr).toLocaleDateString();
|
|
},
|
|
getMonthName(month) {
|
|
return new Date(2000, month - 1, 1).toLocaleString('default', { month: 'long' });
|
|
},
|
|
parseJson(jsonStr) {
|
|
try {
|
|
return jsonStr ? JSON.parse(jsonStr) : [];
|
|
} catch (e) {
|
|
return [];
|
|
}
|
|
},
|
|
formatUpdate(update) {
|
|
return `${update.timestamp} - ${update.updatedBy} changed ${update.field} from '${update.oldValue}' to '${update.newValue}'`;
|
|
},
|
|
viewUpdates(status) {
|
|
this.selectedStatus = status;
|
|
}
|
|
}
|
|
}).mount('#otStatusApp');
|
|
</script>
|
|
}
|