Allowance check
This commit is contained in:
ISMAIL MASSERAN
@@ -15,51 +15,36 @@
|
||||
<i class="fa fa-list"></i> Database Anggota
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover" id="position_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bil.</th>
|
||||
<th>Nama Anggota</th>
|
||||
<th>No. Kad Pengenalan</th>
|
||||
<th>No. Anggota</th>
|
||||
<th>Unit</th>
|
||||
<th>Saham</th>
|
||||
<th>Yuran</th>
|
||||
<th>Tindakan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(voter, i) in data.voters.data">
|
||||
<td>{{ i + 1 }}</td>
|
||||
<td>{{ voter.name }}</td>
|
||||
<td>{{ voter.no_kp }}</td>
|
||||
<td>{{ voter.no_anggota }}</td>
|
||||
<td>{{ voter.unit }}</td>
|
||||
<td>{{ voter.saham }}</td>
|
||||
<td>{{ voter.yuran }}</td>
|
||||
<td>
|
||||
<button class="btn btn-info" @click="edit(i)">
|
||||
<i class="fa fa-edit"></i> Set semula
|
||||
</button>
|
||||
<button class="btn btn-danger"
|
||||
@click="util.showModal('#delete-voter-modal'); id = voter.id">
|
||||
<i class="fa fa-trash"></i> Padam
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="data.voters.data && data.voters.data.length < 1">
|
||||
<td colspan="3">No Voters</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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['pages']"
|
||||
:to="{ query: { page: page['page'] } }" :class="{ 'active': current_page == page['page'] }"
|
||||
exact>
|
||||
<a href="#">{{ page['page'] }}</a>
|
||||
<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>
|
||||
|
||||
@@ -80,11 +65,82 @@
|
||||
</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
|
||||
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;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -92,17 +148,45 @@ export default {
|
||||
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?page=' + this.current_page)
|
||||
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 => {
|
||||
console.log(response)
|
||||
$.notifyClose();
|
||||
vm.data.voters = response.data;
|
||||
})
|
||||
@@ -110,11 +194,14 @@ export default {
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
.finally(function () {
|
||||
vm.voterLoading = false;
|
||||
})
|
||||
},
|
||||
|
||||
edit: function (i) {
|
||||
edit: function (voter) {
|
||||
var vm = this;
|
||||
this.data.voter = this.data.voters.data[i];
|
||||
this.data.voter = voter;
|
||||
this.$router.push({ name: 'Edit Voter', params: { id: vm.data.voter.id } })
|
||||
},
|
||||
|
||||
@@ -132,30 +219,6 @@ export default {
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route.query.page': function () {
|
||||
$.notifyClose();
|
||||
this.refreshVoter();
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
pages: function () {
|
||||
var pages = [];
|
||||
if (this.data.voters.last_page)
|
||||
for (var i = 1; i <= this.data.voters.last_page; i++) {
|
||||
let x = {};
|
||||
x['page'] = i;
|
||||
pages.push(x);
|
||||
}
|
||||
return pages;
|
||||
},
|
||||
|
||||
current_page: function () {
|
||||
return this.$route.query.page ? this.$route.query.page : 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user