E-Vote/resources/assets/js/components/demo/admin/voter/index.vue

<template>
	<div>

		<div class="panel panel-default">
			<div class="panel-body">

				<div class="form-group">
					<router-link class="btn btn-success" :to="{ name: 'Tambah Pengundi' }">
						<i class="fa fa-plus"></i> Tambah Pengundi
					</router-link>
					<button class="btn btn-default" @click="refreshVoter()">
						<i class="fa fa-refresh"></i> Kemaskini Pengundi
					</button>
					<!-- <router-link class="btn btn-info" :to="{ name: 'Penyata Anggota' }">
						<i class="fa fa-list"></i> Database Anggota
					</router-link> -->
				</div>

				<div class="kehadiran-search">
					<div class="kehadiran-search__label">Carian pantas:</div>
					<input class="form-control kehadiran-search__input kehadiran-search__input--name"
						v-model.trim="searchName" placeholder="Nama Anggota" />
					<input class="form-control kehadiran-search__input" v-model.trim="searchNoAnggota"
						placeholder="No. Anggota" />
					<input class="form-control kehadiran-search__input" v-model.trim="searchNoKp"
						placeholder="No. Kad Pengenalan" />
					<button class="btn btn-primary" @click="applySearch()">Cari</button>
					<button class="btn btn-default" @click="clearSearch()" :disabled="!hasAnySearch">Reset</button>
				</div>

				<admin-data-table :headers="voterTableHeaders" :items="voterListItems" :loading="voterLoading"
					:show-pagination="true" index-title="Bil." empty-text="Tiada pengundi" :exportable="true">
					<template v-slot:item-actions="{ item }">
						<button type="button" class="btn btn-info" @click="edit(item)">
							<i class="fa fa-edit"></i> Kemaskini
						</button>
						<button type="button" class="btn btn-danger"
							@click="util.showModal('#delete-voter-modal'); id = item.id">
							<i class="fa fa-trash"></i> Padam
						</button>
					</template>
				</admin-data-table>

				<ul class="pagination" v-if="pages.length > 1">
					<router-link tag="li" v-for="page in pages" :key="page.page" :to="{ query: { page: page.page } }"
						:class="{ active: Number(current_page) === page.page }" exact>
						<a href="#">{{ page.page }}</a>
					</router-link>
				</ul>

			</div>
		</div>

		<modal id="delete-voter-modal">
			<modal-header>Delete Voter</modal-header>
			<modal-body>
				<h2>Are you sure to delete voter?</h2>
			</modal-body>
			<modal-footer>
				<button class="btn btn-danger" @click="deleteVoter()">Delete</button>
				<button class="btn btn-default" @click="util.hideModal('#delete-voter-modal')">Cancel</button>
			</modal-footer>
		</modal>

	</div>
</template>

<style>
.kehadiran-search {
	margin: 10px 0 12px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.kehadiran-search__label {
	color: #6b7280;
	font-size: 12px;
	font-weight: 700;
}

.kehadiran-search__input {
	max-width: 220px;
	height: 34px;
}

.kehadiran-search__input--name {
	max-width: 260px;
}
</style>

<script>
export default {
	data: function () {
		return {
			id: 0,
			voterLoading: false,
			searchName: '',
			searchNoAnggota: '',
			searchNoKp: '',
			voterTableHeaders: [
				{ title: 'Nama Anggota', key: 'name', sortable: true },
				{ title: 'No. Kad Pengenalan', key: 'no_kp', sortable: true },
				{ title: 'No. Anggota', key: 'no_anggota', sortable: true },
				{ title: 'Unit', key: 'unit', sortable: true },
				{ title: 'Saham', key: 'saham', sortable: true },
				{ title: 'Yuran', key: 'yuran', sortable: true },
				{ title: 'Tindakan', key: 'actions', sortable: false }
			]
		}
	},

	computed: {
		hasAnySearch: function () {
			return Boolean(
				(this.searchName && this.searchName.length)
				|| (this.searchNoAnggota && this.searchNoAnggota.length)
				|| (this.searchNoKp && this.searchNoKp.length)
			);
		},

		voterListItems: function () {
			var v = this.data.voters;
			if (v && Array.isArray(v.data)) {
				return v.data;
			}
			return [];
		},

		pages: function () {
			var pages = [];
			var last = this.data.voters && this.data.voters.last_page;
			if (last) {
				for (var i = 1; i <= last; i++) {
					pages.push({ page: i });
				}
			}
			return pages;
		},

		current_page: function () {
			return this.$route.query.page ? this.$route.query.page : 1;
		}
	},

	created: function () {
		this.refreshVoter();
	},

	watch: {
		'$route.query.page': function () {
			$.notifyClose();
			this.refreshVoter();
		}
	},

	methods: {
		search: function () {

		},

		applySearch: function () {
			var q = Object.assign({}, this.$route.query);
			q.page = 1;
			this.$router.replace({ query: q });
			this.refreshVoter();
		},

		clearSearch: function () {
			this.searchName = '';
			this.searchNoAnggota = '';
			this.searchNoKp = '';
			this.applySearch();
		},

		refreshVoter: function () {
			var vm = this;
			this.voterLoading = true;
			this.util.notify('Refreshing Voter', 'loading');
			axios.get(config.API + 'voter', {
				params: {
					page: this.current_page,
					name: this.searchName || undefined,
					no_anggota: this.searchNoAnggota || undefined,
					no_kp: this.searchNoKp || undefined
				}
			})
				.then(response => {
					$.notifyClose();
					vm.data.voters = response.data;
				})
				.catch(error => {
					$.notifyClose();
					vm.util.showResult(error);
				})
				.finally(function () {
					vm.voterLoading = false;
				})
		},

		edit: function (voter) {
			var vm = this;
			this.data.voter = voter;
			this.$router.push({ name: 'Edit Voter', params: { id: vm.data.voter.id } })
		},

		deleteVoter: function () {
			var vm = this;
			this.util.notify('Deleting voter', 'loading');
			this.util.hideModal('#delete-voter-modal');
			axios.delete(config.API + 'voter/' + this.id)
				.then(response => {
					$.notifyClose();
					if (vm.util.showResult(response, 'success')) vm.refreshVoter();
				})
				.catch(error => {
					$.notifyClose();
					vm.util.showResult(error);
				})
		}
	}
}
</script>