KoPKB/E-Vote
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DONE: enhance UI on admin and voter side, add docker config, fix delete button modal not showing

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-04-02 11:59:56 +08:00
parent bed56792e6
commit 4369b079cb
31 changed files with 3044 additions and 1216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/demo/admin/position/index.vue
+68 -70
View File
@@ -1,67 +1,65 @@
<template>
<div>
<div class="panel panel-default">
<div class="panel-body">
<div>
<div class="form-group">
<router-link class="btn btn-success" :to="{name:'Tambah Jawatan'}">
<i class="fa fa-plus"></i> Tambah Jawatan
</router-link>
<button class="btn btn-default" @click="refreshPosition()">
<i class="fa fa-refresh"></i> Kemaskini Jawatan
</button>
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<router-link class="btn btn-success" :to="{ name: 'Tambah Jawatan' }">
<i class="fa fa-plus"></i> Tambah Jawatan
</router-link>
<button class="btn btn-default" @click="refreshPosition()">
<i class="fa fa-refresh"></i> Kemaskini Jawatan
</button>
</div>
<div class="table-responsive">
<table class="table table-hover" id="position_table">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Tindakan</th>
</tr>
</thead>
<tbody>
<tr v-for="(position, i) in data.positions">
<td>{{ position.id }}</td>
<td>{{ position.name }}</td>
<td>
<button class="btn btn-info" @click="edit(i)">
<i class="fa fa-edit"></i> Edit
</button>
<button class="btn btn-danger" @click="util.showModal('#delete-position-modal'); id = position.id">
<i class="fa fa-trash"></i> Padam
</button>
</td>
</tr>
<tr v-if="data.positions.length < 1">
<td colspan="3">No Jawatan</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover" id="position_table">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Tindakan</th>
</tr>
</thead>
<tbody>
<tr v-for="(position,i) in data.positions">
<td>{{ position.id }}</td>
<td>{{ position.name }}</td>
<td>
<button class="btn btn-info" @click="edit(i)">
<i class="fa fa-edit"></i> Edit
</button>
<button
class="btn btn-danger"
@click="util.showModal('#delete-position-modal');id=position.id">
<i class="fa fa-trash"></i> Padam
</button>
</td>
</tr>
<tr v-if="data.positions.length < 1">
<td colspan="3">No Jawatan</td>
</tr>
</tbody>
</table>
</div>
<modal id="delete-position-modal">
<modal-header>Padam Jawatan</modal-header>
<modal-body>
<h2>Are you sure to delete Position?</h2>
</modal-body>
<modal-footer>
<button class="btn btn-danger" @click="deletePosition()">Padam</button>
<button class="btn btn-default" @click="util.hideModal('#delete-position-modal')">Cancel</button>
</modal-footer>
</modal>
</div>
</div>
<modal id="delete-position-modal">
<modal-header>Padam Jawatan</modal-header>
<modal-body>
<h2>Are you sure to delete Position?</h2>
</modal-body>
<modal-footer>
<button class="btn btn-danger" @click="deletePosition()">Padam</button>
<button class="btn btn-default" @click="util.hideModal('#delete-position-modal')">Cancel</button>
</modal-footer>
</modal>
</div>
</template>
<script>
export default{
export default {
data: function () {
return {
id: 0
@@ -71,7 +69,7 @@ export default{
created: function () {
if (this.$route.query.refresh) {
this.refreshPosition();
this.$router.replace({name: 'Kemaskini Jawatan'})
this.$router.replace({ name: 'Kemaskini Jawatan' })
}
},
@@ -79,13 +77,13 @@ export default{
refreshPosition: function () {
var vm = this;
this.util.notify('Refreshing Position', 'loading');
axios.get(config.API+'position')
.then(response=>{
axios.get(config.API + 'position')
.then(response => {
console.log(response)
$.notifyClose();
vm.data.positions = response.data;
})
.catch(error=>{
.catch(error => {
$.notifyClose();
vm.util.showResult(error);
})
@@ -105,22 +103,22 @@ export default{
edit: function (i) {
var vm = this;
this.data.position = this.data.positions[i];
this.$router.push({name: 'Edit Position', params:{id:vm.data.position.id}})
this.$router.push({ name: 'Edit Position', params: { id: vm.data.position.id } })
},
deletePosition: function () {
var vm = this;
this.util.notify('Deleting position', 'loading');
this.util.hideModal('#delete-position-modal');
axios.delete(config.API+'position/'+this.id)
.then(response=>{
$.notifyClose();
if (vm.util.showResult(response, 'success')) vm.refreshPosition();
})
.catch(error=>{
$.notifyClose();
vm.util.showResult(error);
})
axios.delete(config.API + 'position/' + this.id)
.then(response => {
$.notifyClose();
if (vm.util.showResult(response, 'success')) vm.refreshPosition();
})
.catch(error => {
$.notifyClose();
vm.util.showResult(error);
})
}
}
}