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

<template>
	<div class="row">
		<div class="col-md-3" style="max-width: 250px;">
			<ul class="list-group">
				<router-link tag="li" class="list-group-item" :to="{ name: 'Maklumat Calon' }" exact replace
					:class="{ 'active': position_id == 0 }">
					Senarai Jawatan
				</router-link>
				<router-link v-for="position in data.positions" :key="position.id" tag="li" class="list-group-item"
					:to="{ query: { position_id: position.id } }" exact replace>
					{{ position.name }}
				</router-link>
			</ul>
		</div>
		<div class="col-md-9 panel panel-default">
			<div class="panel-body table-responsive">
				<div class="form-group">
					<router-link :to="{ name: 'Tambah Calon', query: { position_id: position_id } }"
						class="btn btn-success"><i class="fa fa-plus"></i> Tambah Calon</router-link>
				</div>
				<table class="table table-hover">
					<thead>
						<tr>
							<th></th>
							<th>Nama</th>
							<th>No. Anggota</th>
							<th>Unit</th>
							<th>Jawatan</th>
							<!-- <th>Partylist</th> -->
							<th>Taraf Pendidikan </th>
							<th>Pengalaman Kerja</th>
							<th>Tindakan</th>

						</tr>
					</thead>
					<tbody>
						<tr v-for="nominee in nominees" :key="nominee.id">
							<td>
								<img :alt="nominee.name" :src="createBase64ImageUrl(nominee.photo)" class="thumbnail"
									style="height: 60px;width: 60px;">
							</td>
							<!-- <td>{{ nominee.id }}</td> -->
							<td>{{ nominee.name }}</td>
							<td>{{ nominee.no_anggota }}</td>
							<td>{{ nominee.unit }}</td>
							<td>{{ nominee.position }}</td>
							<td>
								<ol>
									<li v-for="(item, index) in nominee.education" :key="index">{{ item }}</li>
								</ol>
							</td>
							<td>
								<ol>
									<li v-for="(item, index) in nominee.experience" :key="index">{{ item }}</li>
								</ol>
							</td>




							<router-link :to="{ name: 'Edit Nominee', params: { id: nominee.id } }"
								class="btn btn-primary">
								<i class="fa fa-edit"></i>Kemaskini
							</router-link>
							<button class="btn btn-danger" @click="openDeleteModal(nominee)">
								<i class="fa fa-trash"></i>Padam
							</button>

						</tr>
						<tr v-if="nominees.length < 1">
							<td colspan="7">No Calon</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<modal id="delete-nominee-modal">
			<modal-header>Padam Calon</modal-header>
			<modal-body>
				<h3>Are you sure to delete this nominee?</h3>
			</modal-body>
			<modal-footer>
				<button class="btn btn-danger" @click="deleteNominee()">Padam</button>
				<button class="btn btn-default" @click="util.hideModal('#delete-nominee-modal')">
					Kembali
				</button>
			</modal-footer>
		</modal>
	</div>

</template>

<script>
export default {


	data: function () {
		return {
			id: 0
		}
	},

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

	methods: {

		openDeleteModal: function (nominee) {
			this.id = nominee.id;
			this.util.showModal('#delete-nominee-modal');
		},

		deleteNominee() {
			const nomineeId = this.id;
			this.util.hideModal('#delete-nominee-modal'); // Hide modal
			this.util.notify('Deleting nominee', 'loading'); // Show loading notification

			axios.delete(config.API + 'nominee/' + nomineeId) // Make DELETE request
				.then(response => {
					$.notifyClose(); // Close notification
					// if (this.util.showResult(response, 'success')) {
					if (response.data && response.data.status === 'success') {
						this.util.notify('Nominee deleted successfully', 'success');


						// Show success notification
						this.refreshNominee(); // Refresh the list of nominees
					} else {
						this.util.notify('Failed to delete nominee', 'error'); // Show error notification

					}
				})
				.catch(error => {
					$.notifyClose(); // Close notification
					this.util.showResult(error, 'error'); // Show error notification
				})
		},

		refreshNominee: function () {
			var vm = this;
			this.util.notify('Refreshing Nominees', 'loading');
			axios.get(config.API + 'nominee')
				.then(response => {
					$.notifyClose();
					console.log(response);
					vm.data.nominees = response.data;
				})
				.catch(error => {
					$.notifyClose();
					vm.showResult(error);
				})
		},

		getPosition: function (id) {
			var positions = this.data.positions;
			for (var i in positions)
				if (positions[i].id == id)
					return positions[i]['name'];
		},

		getPartylist: function (id) {
			var partylists = this.data.partylists;
			for (var i in partylists)
				if (partylists[i].id == id)
					return partylists[i]['name'];
			return 'No partylists';
		},

		createBase64ImageUrl: function (base64ImageData) {
			return "data:image/png;base64," + base64ImageData;
		}
	},

	computed: {
		nominees: function () {
			var nominees = [];
			var y = this.data.nominees;
			for (var nominee in this.data.nominees) {
				if (y[nominee].position_id == this.position_id || this.position_id == 0) {
					var x = y[nominee];
					x.position = this.getPosition(y[nominee].position_id);
					x.partylist = this.getPartylist(y[nominee].partylist_id);
					nominees.push(x);
				}
			}
			return nominees;
		},

		position_id: function () {
			return this.$route.query.position_id ? this.$route.query.position_id : 0;
		}
	}
}
</script>


<style></style>