Allowance check

resources/assets/js/components/demo/admin/home/index.vue

@@ -17,37 +17,17 @@
 
 			</div>
 
-			<div class="table-responsive">
-				<table class="table table-hover">
-					<thead>
-						<tr>
-							<th>ID</th>
-							<th>Nama Undian</th>
-							<th>Undian Mula</th>
-							<th>Undian Tamat</th>
-							<th>Papar</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="election in data.elections">
-							<td>{{ election.id }}</td>
-							<td>{{ election.name }}</td>
-							<td>{{ election.start }}</td>
-							<td>{{ election.end }}</td>
-							<td>
-								<router-link :to="{ name: 'Election Result', params: { election_id: election.id } }"
-									class="btn btn-info">Keputusan Undian</router-link>
-
-								<a class="btn btn-warning" :href="getPDFurl(election.id)">Muat Turun PDF</a>
-								
-							</td>
-						</tr>
-						<tr v-if="data.elections.length < 1">
-							<td colspan="5">No elections yet</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
+			<admin-data-table :headers="electionTableHeaders" :items="data.elections" :loading="electionLoading"
+				:items-per-page="10" :show-pagination="true" empty-text="Tiada undian" :exportable="true"
+				export-file-name="undian">
+				<template v-slot:item-actions="{ item }">
+					<router-link :to="{ name: 'Election Result', params: { election_id: item.id } }"
+						class="btn btn-info">
+						Keputusan Undian
+					</router-link>
+					<a class="btn btn-warning" :href="getPDFurl(item.id)">Muat Turun PDF</a>
+				</template>
+			</admin-data-table>
 
 			<form @submit.prevent="start" id="start_form">
 				<div class="modal fade" id="start-election-modal" tabindex="-1" role="dialog"
@@ -119,15 +99,31 @@
 </template>
 
 <style>
-    .center-header {
-        text-align: center;
-    }
+.center-header {
+	text-align: center;
+}
+
+/* Ensure Bootstrap modals appear above the admin floating header (z-index: 2000). */
+.modal {
+	z-index: 2200;
+}
+
+.modal-backdrop {
+	z-index: 2190 !important;
+}
 </style>
 
 <script>
 export default {
 	data: () => ({
-		start_date: null
+		start_date: null,
+		electionLoading: false,
+		electionTableHeaders: [
+			{ title: 'Nama Undian', key: 'name', sortable: true },
+			{ title: 'Undian Mula', key: 'start', sortable: true },
+			{ title: 'Undian Tamat', key: 'end', sortable: true },
+			{ title: 'Papar', key: 'actions', sortable: false }
+		]
 	}),
 	created: function () {
 		this.refreshElection();
@@ -184,6 +180,7 @@ export default {
 		refreshElection: function () {
 			this.util.notify('Refreshing Election', 'loading');
 			var vm = this;
+			this.electionLoading = true;
 			axios.get(config.API + 'election')
 				.then(response => {
 					$.notifyClose();
@@ -193,6 +190,9 @@ export default {
 					$.notifyClose();
 					vm.util.showResult(error, 'error');
 				})
+				.finally(function () {
+					vm.electionLoading = false;
+				})
 		},