Allowance check

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

@@ -2,41 +2,22 @@
 	<div class="container">
 		<div class="row">
 			<div class="col-md-12">
-				<div v-for="position in positions">
+				<div v-for="position in positions" :key="position.id">
 					<h5>{{ position.name }}</h5>
-					<div class="table-responsive">
-						<table class="table table-striped table-condensed">
-							<thead>
-								<tr>
-									<th width="20%">No. Anggota</th>
-									<th width="30%">Nama</th>
-									<th width="20%">Unit</th>
-									<th width="10%">Undian</th>
-									<th width="20%">Peratus (%)</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr v-for="result in results" v-if="result.position_id == position.id">
-									<td>{{ getNominee(result.nominee_id)['no_anggota'] }}</td>
-									<td>{{ getNominee(result.nominee_id)['name'] }}</td>
-									<td>{{ getNominee(result.nominee_id)['unit'] }}</td>
-									<td>{{ result.votes }}</td>
-									<td>{{ calculatePercentage(result.votes, position.id) }}</td>
-								</tr>
-								<tr v-for="no_vote in no_votes" v-if="no_vote.position_id == position.id">
-									<td>{{ no_vote.no_anggota }}</td>
-									<td>{{ no_vote.name }}</td>
-									<td>{{ no_vote.unit }}</td>
-									<td>0</td>
-									<td>0</td>
-								</tr>
-								<tr>
-									<td colspan="3"><b>Jumlah Undian</b></td>
-									<td><b>{{ calculateTotalVotes(position.id) }}</b></td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
+					<admin-data-table
+						:headers="finalTableHeaders"
+						:items="finalRowsByPosition(position.id)"
+						:loading="finalLoading"
+						:items-per-page="10"
+						:show-pagination="true"
+						empty-text="Tiada keputusan"
+						:exportable="true"
+						:export-file-name="'keputusan-akhir-' + position.id"
+					>
+						<template v-slot:item-percentage="{ item }">
+							{{ item.percentage }}
+						</template>
+					</admin-data-table>
 					<hr />
 				</div>
 			</div>
@@ -51,11 +32,69 @@ export default {
 			nominees: [],
 			results: [],
 			partylists: [],
-			positions: []
+			positions: [],
+			finalLoading: false,
+			finalTableHeaders: [
+				{ title: 'No. Anggota', key: 'no_anggota', sortable: true },
+				{ title: 'Nama', key: 'name', sortable: true },
+				{ title: 'Unit', key: 'unit', sortable: true },
+				{ title: 'Undian', key: 'votes', sortable: true },
+				{ title: 'Peratus (%)', key: 'percentage', sortable: true }
+			]
 		}
 	},
 
 	methods: {
+		finalRowsByPosition: function (positionId) {
+			var vm = this;
+			var rows = [];
+
+			// rows with votes
+			this.results.forEach(function (result) {
+				if (result.position_id == positionId) {
+					var n = vm.getNominee(result.nominee_id) || {};
+					rows.push({
+						no_anggota: n.no_anggota || '',
+						name: n.name || '',
+						unit: n.unit || '',
+						votes: result.votes || 0,
+						percentage: vm.calculatePercentage(result.votes || 0, positionId)
+					});
+				}
+			});
+
+			// rows without votes
+			this.no_votes.forEach(function (nv) {
+				if (nv.position_id == positionId) {
+					rows.push({
+						no_anggota: nv.no_anggota || '',
+						name: nv.name || '',
+						unit: nv.unit || '',
+						votes: 0,
+						percentage: '0.00'
+					});
+				}
+			});
+
+			// total row (kept as a normal row so it exports too)
+			rows.push({
+				no_anggota: '',
+				name: 'Jumlah Undian',
+				unit: '',
+				votes: this.calculateTotalVotes(positionId),
+				percentage: ''
+			});
+
+			// Sort by votes desc, but keep total row last
+			var total = rows.pop();
+			rows.sort(function (a, b) {
+				return (b.votes || 0) - (a.votes || 0);
+			});
+			rows.push(total);
+
+			return rows;
+		},
+
 		getNominee: function (id) {
 			let nominees = this.nominees;
 			for (var i in nominees)
@@ -77,7 +116,7 @@ export default {
 				.filter(result => result.position_id === positionId)
 				.reduce((total, result) => total + result.votes, 0);
 
-			return ((votes / totalVotes) * 100).toFixed(2);
+			return totalVotes === 0 ? '0.00' : ((votes / totalVotes) * 100).toFixed(2);
 		},
 
 		calculateTotalVotes(positionId) {
@@ -90,6 +129,7 @@ export default {
 	created: function () {
 		this.util.notify('Loading please wait...', 'loading');
 		var vm = this;
+		this.finalLoading = true;
 		axios.get(config.API + 'election/result/' + this.election_id)
 			.then(response => {
 				$.notifyClose();
@@ -102,6 +142,9 @@ export default {
 				$.notifyClose();
 				vm.util.showResult(error, 'error');
 			})
+			.finally(function () {
+				vm.finalLoading = false;
+			})
 	},
 
 	computed: {