ISMAIL MASSERAN
107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
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 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>
|
|
|
|
<admin-data-table :headers="positionTableHeaders" :items="data.positions" :loading="positionLoading"
|
|
:items-per-page="10" :show-pagination="true" empty-text="Tiada jawatan" :exportable="true"
|
|
export-file-name="jawatan">
|
|
<template v-slot:item-actions="{ item }">
|
|
<button type="button" class="btn btn-info" @click="edit(item)">
|
|
<i class="fa fa-edit"></i> Edit
|
|
</button>
|
|
<button type="button" class="btn btn-danger"
|
|
@click="util.showModal('#delete-position-modal'); id = item.id">
|
|
<i class="fa fa-trash"></i> Padam
|
|
</button>
|
|
</template>
|
|
</admin-data-table>
|
|
</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 {
|
|
data: function () {
|
|
return {
|
|
id: 0,
|
|
positionLoading: false,
|
|
positionTableHeaders: [
|
|
{ title: 'Nama', key: 'name', sortable: true },
|
|
{ title: 'Tindakan', key: 'actions', sortable: false }
|
|
]
|
|
}
|
|
},
|
|
|
|
created: function () {
|
|
if (this.$route.query.refresh) {
|
|
this.refreshPosition();
|
|
this.$router.replace({ name: 'Kemaskini Jawatan' })
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
refreshPosition: function () {
|
|
var vm = this;
|
|
this.positionLoading = true;
|
|
this.util.notify('Refreshing Position', 'loading');
|
|
axios.get(config.API + 'position')
|
|
.then(response => {
|
|
$.notifyClose();
|
|
vm.data.positions = response.data;
|
|
})
|
|
.catch(error => {
|
|
$.notifyClose();
|
|
vm.util.showResult(error);
|
|
})
|
|
.finally(function () {
|
|
vm.positionLoading = false;
|
|
})
|
|
},
|
|
|
|
edit: function (position) {
|
|
var vm = this;
|
|
this.data.position = position;
|
|
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);
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script> |