Allowance check
This commit is contained in:
ISMAIL MASSERAN
@@ -1,77 +1,71 @@
|
||||
<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="col-md-12 panel panel-default">
|
||||
<div class="panel-body table-responsive">
|
||||
<div class="nominee-filter-chips">
|
||||
<button
|
||||
type="button"
|
||||
class="nominee-chip btn btn-xs"
|
||||
:class="position_id == 0 ? 'btn-primary' : 'btn-default'"
|
||||
@click="setPosition(0)"
|
||||
>
|
||||
Semua Jawatan
|
||||
</button>
|
||||
<button
|
||||
v-for="position in data.positions"
|
||||
:key="position.id"
|
||||
type="button"
|
||||
class="nominee-chip btn btn-xs"
|
||||
:class="String(position_id) === String(position.id) ? 'btn-primary' : 'btn-default'"
|
||||
@click="setPosition(position.id)"
|
||||
>
|
||||
{{ position.name }}
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
<admin-data-table
|
||||
:headers="nomineeTableHeaders"
|
||||
:items="nominees"
|
||||
:loading="nomineeLoading"
|
||||
:items-per-page="10"
|
||||
:show-pagination="true"
|
||||
empty-text="Tiada calon"
|
||||
:exportable="true"
|
||||
export-file-name="calon"
|
||||
>
|
||||
<template v-slot:item-photo="{ item }">
|
||||
<img
|
||||
:alt="item.name"
|
||||
:src="createBase64ImageUrl(item.photo)"
|
||||
class="thumbnail"
|
||||
style="height: 60px; width: 60px;"
|
||||
>
|
||||
</template>
|
||||
|
||||
</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>
|
||||
<template v-slot:item-education="{ item }">
|
||||
<ol style="margin: 0; padding-left: 18px;">
|
||||
<li v-for="(x, idx) in (item.education || [])" :key="idx">{{ x }}</li>
|
||||
</ol>
|
||||
</template>
|
||||
|
||||
<template v-slot:item-experience="{ item }">
|
||||
<ol style="margin: 0; padding-left: 18px;">
|
||||
<li v-for="(x, idx) in (item.experience || [])" :key="idx">{{ x }}</li>
|
||||
</ol>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
<template v-slot:item-actions="{ item }">
|
||||
<router-link :to="{ name: 'Edit Nominee', params: { id: item.id } }" class="btn btn-primary">
|
||||
<i class="fa fa-edit"></i>Kemaskini
|
||||
</router-link>
|
||||
<button type="button" class="btn btn-danger" @click="openDeleteModal(item)">
|
||||
<i class="fa fa-trash"></i>Padam
|
||||
</button>
|
||||
</template>
|
||||
</admin-data-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -97,7 +91,32 @@ export default {
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
id: 0
|
||||
id: 0,
|
||||
nomineeLoading: false,
|
||||
nomineeTableHeaders: [
|
||||
{ title: '', key: 'photo', sortable: false },
|
||||
{ title: 'Nama', key: 'name', sortable: true },
|
||||
{ title: 'No. Anggota', key: 'no_anggota', sortable: true },
|
||||
{ title: 'Unit', key: 'unit', sortable: true },
|
||||
{ title: 'Jawatan', key: 'position', sortable: true },
|
||||
{
|
||||
title: 'Taraf Pendidikan',
|
||||
key: 'education',
|
||||
sortable: false,
|
||||
exportValue: function (item) {
|
||||
return Array.isArray(item.education) ? item.education.join(' | ') : '';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Pengalaman Kerja',
|
||||
key: 'experience',
|
||||
sortable: false,
|
||||
exportValue: function (item) {
|
||||
return Array.isArray(item.experience) ? item.experience.join(' | ') : '';
|
||||
}
|
||||
},
|
||||
{ title: 'Tindakan', key: 'actions', sortable: false }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -106,6 +125,15 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
setPosition: function (id) {
|
||||
var q = Object.assign({}, this.$route.query);
|
||||
if (!id || String(id) === '0') {
|
||||
delete q.position_id;
|
||||
} else {
|
||||
q.position_id = id;
|
||||
}
|
||||
this.$router.replace({ query: q });
|
||||
},
|
||||
|
||||
openDeleteModal: function (nominee) {
|
||||
this.id = nominee.id;
|
||||
@@ -140,8 +168,13 @@ export default {
|
||||
|
||||
refreshNominee: function () {
|
||||
var vm = this;
|
||||
this.nomineeLoading = true;
|
||||
this.util.notify('Refreshing Nominees', 'loading');
|
||||
axios.get(config.API + 'nominee')
|
||||
axios.get(config.API + 'nominee', {
|
||||
params: {
|
||||
position_id: this.position_id && String(this.position_id) !== '0' ? this.position_id : undefined
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
$.notifyClose();
|
||||
console.log(response);
|
||||
@@ -151,6 +184,9 @@ export default {
|
||||
$.notifyClose();
|
||||
vm.showResult(error);
|
||||
})
|
||||
.finally(function () {
|
||||
vm.nomineeLoading = false;
|
||||
})
|
||||
},
|
||||
|
||||
getPosition: function (id) {
|
||||
@@ -179,7 +215,7 @@ export default {
|
||||
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];
|
||||
var x = Object.assign({}, y[nominee]);
|
||||
x.position = this.getPosition(y[nominee].position_id);
|
||||
x.partylist = this.getPartylist(y[nominee].partylist_id);
|
||||
nominees.push(x);
|
||||
@@ -191,9 +227,28 @@ export default {
|
||||
position_id: function () {
|
||||
return this.$route.query.position_id ? this.$route.query.position_id : 0;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
position_id: function () {
|
||||
this.refreshNominee();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style></style>
|
||||
<style>
|
||||
.nominee-filter-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.nominee-chip {
|
||||
border-radius: 999px;
|
||||
padding: 6px 10px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user