initialize project
This commit is contained in:
Afrina Alimi
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Add Position</h4>
|
||||
<form @submit.prevent="add()" id="add-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-success">Submit</button>
|
||||
<router-link :to="{name: 'Manage Position'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function () {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
var vm = this;
|
||||
this.util.notify('Adding Position', 'loading')
|
||||
axios.post(config.API+'position', $('#add-form').serialize())
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.$router.push({name:'Manage Position', query:{refresh:true}});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Edit Position</h4>
|
||||
<form @submit.prevent="edit()" id="edit-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" :value="data.position.name" required/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Submit" class="btn btn-success"/>
|
||||
<router-link :to="{name: 'Manage Position'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
if (!this.data.position.id) {
|
||||
this.$router.push({name:'Manage Position'});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
edit: function () {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
var vm = this;
|
||||
this.util.notify('Updating position', 'loading');
|
||||
axios.put(config.API+'position/'+this.data.position.id, $('#edit-form').serialize())
|
||||
.then(response=>{
|
||||
vm.loading = false;
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.$router.push({name:'Manage Position', query:{refresh:true}});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="form-group">
|
||||
<router-link class="btn btn-success" :to="{name:'Add Position'}">
|
||||
<i class="fa fa-plus"></i> Add Position
|
||||
</router-link>
|
||||
<button class="btn btn-default" @click="refreshPosition()">
|
||||
<i class="fa fa-refresh"></i> Refresh Position
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover" id="position_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Action</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> Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="data.positions.length < 1">
|
||||
<td colspan="3">No Positions</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal id="delete-position-modal">
|
||||
<modal-header>Delete Position</modal-header>
|
||||
<modal-body>
|
||||
<h2>Are you sure to delete Position?</h2>
|
||||
</modal-body>
|
||||
<modal-footer>
|
||||
<button class="btn btn-danger" @click="deletePosition()">Delete</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: 'Manage Position'})
|
||||
}
|
||||
},
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="container col-md-8 col-md-offset-2">
|
||||
<h4>Manage Position</h4>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Manage Position');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<table id="sample_table" class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>A</th>
|
||||
<th>B</th>
|
||||
<th>C</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
created: function () {
|
||||
let fakeData = [
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>']
|
||||
]
|
||||
this.$nextTick(()=>{
|
||||
$('#sample_table').dataTable({
|
||||
aaData: fakeData
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
x: function () {
|
||||
console.log('clicked');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user