initialize project
This commit is contained in:
Afrina Alimi
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<form
|
||||
class="row"
|
||||
method="POST"
|
||||
id="add_form"
|
||||
:action="data.API+'nominee'"
|
||||
enctype="mutlipart/formdata"
|
||||
@submit.prevent="add()">
|
||||
<div class="col-md-4">
|
||||
<uploader file-name="image" />
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="student_id">Student ID</label>
|
||||
<input type="text" name="student_id" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="course">Course</label>
|
||||
<input type="text" name="course" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="motto">Motto</label>
|
||||
<input type="text" name="motto" class="form-control" placeholder="(Optional)" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea name="description" class="form-control" placeholder="(Optional)"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="position_id">Position</label>
|
||||
<select class="form-control" v-model="position_id" name="position_id" required>
|
||||
<option value="0" disabled>--- Select Position ---</option>
|
||||
<option v-for="position in data.positions" :value="position.id">{{ position.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="partylist_id">Partylist</label>
|
||||
<select class="form-control" name="partylist_id">
|
||||
<option value="">--- Select Partylist (Optional) ---</option>
|
||||
<option v-for="partylist in data.partylists" :value="partylist.id">{{ partylist.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group pull-right">
|
||||
<input type="submit" value="Submit" class="btn btn-info">
|
||||
<router-link
|
||||
:to="{name:'Manage Nominee', query:{position_id:position_id}}"
|
||||
class="btn btn-default">
|
||||
Submit
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
add: function () {
|
||||
if (this.loading) return;
|
||||
var vm = this;
|
||||
this.loading = true;
|
||||
this.util.notify('Adding Nominee', 'progress', 0);
|
||||
$('#add_form').ajaxSubmit({
|
||||
success: function (response) {
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
if (vm.util.showResult(response, 'success', 'ajax'))
|
||||
vm.$router.push({name: 'Manage Nominee'});
|
||||
},
|
||||
error: function (error) {
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error, 'error', 'ajax');
|
||||
},
|
||||
uploadProgress: function (a, b, c, progress) {
|
||||
vm.util.notify('Adding Nominee', 'progress', progress);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
position_id: {
|
||||
get: function () {
|
||||
return this.$route.query.position_id;
|
||||
},
|
||||
|
||||
set: function (id) {
|
||||
this.$router.replace({query: {position_id: id}});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<form
|
||||
method="POST"
|
||||
class="row"
|
||||
id="edit_form"
|
||||
:action="data.API+'nominee/'+id"
|
||||
enctype="multipart/form-data"
|
||||
@submit.prevent="edit()">
|
||||
<input type="hidden" name="_method" value="PUT"/>
|
||||
|
||||
<div class="col-md-4">
|
||||
<uploader file-name="image" :image-src="data.storageURL+nominee.image"/>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" :value="nominee.name" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="student_id">Student ID</label>
|
||||
<input type="text" name="student_id" class="form-control" :value="nominee.student_id" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="course">Course</label>
|
||||
<input type="text" name="course" class="form-control" :value="nominee.course" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="motto">Motto</label>
|
||||
<input type="text" name="motto" class="form-control" :value="nominee.motto" placeholder="(Optional)" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea name="description" class="form-control" placeholder="(Optional)">{{ nominee.description}}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="position_id">Position</label>
|
||||
<select class="form-control" name="position_id" :value="nominee.position_id" required>
|
||||
<option value="0" disabled>--- Select Position ---</option>
|
||||
<option v-for="position in data.positions" :value="position.id">{{ position.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="partylist_id">Partylist</label>
|
||||
<select class="form-control" name="partylist_id" :value="nominee.partylist_id">
|
||||
<option value="">--- Select Partylist (Optional) ---</option>
|
||||
<option v-for="partylist in data.partylists" :value="partylist.id">{{ partylist.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group pull-right">
|
||||
<input type="submit" value="Submit" class="btn btn-info">
|
||||
<router-link
|
||||
:to="{name:'Manage Nominee'}"
|
||||
class="btn btn-default">
|
||||
Back
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
if (!this.nominee.id)
|
||||
this.$router.push({name:'Manage Nominee'});
|
||||
},
|
||||
|
||||
methods: {
|
||||
edit: function () {
|
||||
if (this.loading) return;
|
||||
var vm = this;
|
||||
this.loading = true;
|
||||
this.util.notify('Updating nominee', 'progress', 0);
|
||||
$('#edit_form').ajaxSubmit({
|
||||
success: function (response) {
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
if (vm.util.showResult(response, 'success', 'ajax'))
|
||||
vm.$router.push({name: 'Manage Nominee'});
|
||||
},
|
||||
error: function (error) {
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error, 'error', 'ajax');
|
||||
},
|
||||
uploadProgress: function (a, b, c, progress) {
|
||||
vm.util.notify('Updating Nominee', 'progress', progress);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
id: function () {
|
||||
return this.$route.params.id;
|
||||
},
|
||||
|
||||
nominee: function () {
|
||||
for (var i in this.data.nominees)
|
||||
if(this.data.nominees[i].id == this.id)
|
||||
return this.data.nominees[i];
|
||||
return {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,168 @@
|
||||
<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: 'Manage Nominee'}"
|
||||
exact
|
||||
replace
|
||||
:class="{'active':position_id==0}">
|
||||
All Position
|
||||
</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="panel-body table-responsive">
|
||||
<div class="form-group">
|
||||
<router-link :to="{name: 'Add Nominee', query:{position_id:position_id}}" class="btn btn-success"><i class="fa fa-plus"></i> Add Nominee</router-link>
|
||||
</div>
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>No. Anggota</th>
|
||||
<th>Course</th>
|
||||
<th>Position</th>
|
||||
<th>Partylist</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="nominee in nominees">
|
||||
<td>
|
||||
<img :alt="nominee.name" :src="data.storageURL+nominee.image" class="thumbnail" style="height: 60px;width: 60px;">
|
||||
</td>
|
||||
<td>{{ nominee.name}}</td>
|
||||
<td>{{ nominee.student_id}}</td>
|
||||
<td>{{ nominee.course}}</td>
|
||||
<td>{{ nominee.position}}</td>
|
||||
<td>{{ nominee.partylist}}</td>
|
||||
<td>
|
||||
<router-link :to="{name: 'Edit Nominee', params:{id:nominee.id}}" class="btn btn-info">
|
||||
<i class="fa fa-edit"></i> Edit
|
||||
</router-link>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="util.showModal('#delete-nominee-modal');id=nominee.id">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="nominees.length < 1">
|
||||
<td colspan="7">No nominees</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal id="delete-nominee-modal">
|
||||
<modal-header>Delete Nominee</modal-header>
|
||||
<modal-body>
|
||||
<h3>Are you sure to delete this nominee?</h3>
|
||||
</modal-body>
|
||||
<modal-footer>
|
||||
<button class="btn btn-danger" @click="deleteNominee()">Delete</button>
|
||||
<button class="btn btn-default" @click="util.hideModal('#delete-nominee-modal')">
|
||||
Back
|
||||
</button>
|
||||
</modal-footer>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
this.refreshNominee();
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
deleteNominee: function () {
|
||||
this.util.hideModal('#delete-nominee-modal');
|
||||
var vm = this;
|
||||
this.util.notify('Deleting nominee', 'loading');
|
||||
axios.delete(config.API+'nominee/'+this.id)
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if(vm.util.showResult(response, 'success'))
|
||||
vm.refreshNominee();
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error, 'error');
|
||||
})
|
||||
},
|
||||
|
||||
refreshNominee: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing Nominees', 'loading');
|
||||
axios.get(config.API+'nominee')
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
console.log(response);
|
||||
vm.data.nominees = response.data;
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.showResult(error);
|
||||
})
|
||||
},
|
||||
|
||||
getPosition: function (id) {
|
||||
var positions = this.data.positions;
|
||||
for (var i in positions)
|
||||
if (positions[i].id == id)
|
||||
return positions[i]['name'];
|
||||
},
|
||||
|
||||
getPartylist: function (id) {
|
||||
var partylists = this.data.partylists;
|
||||
for (var i in partylists)
|
||||
if (partylists[i].id == id)
|
||||
return partylists[i]['name'];
|
||||
return 'No partylists';
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
nominees: function () {
|
||||
var nominees = [];
|
||||
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];
|
||||
x.position = this.getPosition(y[nominee].position_id);
|
||||
x.partylist = this.getPartylist(y[nominee].partylist_id);
|
||||
nominees.push(x);
|
||||
}
|
||||
}
|
||||
return nominees;
|
||||
},
|
||||
|
||||
position_id: function () {
|
||||
return this.$route.query.position_id ? this.$route.query.position_id : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="container col-md-10 col-md-offset-1">
|
||||
<h4>Manage Nominee</h4>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Manage Nominee');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user