ISMAIL MASSERAN
125 lines
3.0 KiB
Vue
125 lines
3.0 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>
|
|
|
|
<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>
|
|
|
|
<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
|
|
}
|
|
},
|
|
|
|
created: function () {
|
|
if (this.$route.query.refresh) {
|
|
this.refreshPosition();
|
|
this.$router.replace({ name: 'Kemaskini Jawatan' })
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
refreshPosition: function () {
|
|
var vm = this;
|
|
this.util.notify('Refreshing Position', 'loading');
|
|
axios.get(config.API + 'position')
|
|
.then(response => {
|
|
console.log(response)
|
|
$.notifyClose();
|
|
vm.data.positions = response.data;
|
|
})
|
|
.catch(error => {
|
|
$.notifyClose();
|
|
vm.util.showResult(error);
|
|
})
|
|
},
|
|
|
|
initDatatable: function () {
|
|
var vm = this;
|
|
$('#position_table').DataTable({
|
|
destroy: true,
|
|
searching: false,
|
|
info: false,
|
|
autoWidth: false,
|
|
dom: 'Bfrtip'
|
|
});
|
|
},
|
|
|
|
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 } })
|
|
},
|
|
|
|
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> |