user-ui-update

This commit is contained in:
unknown
2024-04-07 08:46:50 +08:00
parent 6768b360f6
commit 2da5918bbd
18 changed files with 308 additions and 178 deletions
@@ -9,7 +9,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" :href="data.baseURL" >MyKoPKB</a>
<a class="navbar-brand" :href="data.baseURL" ><img src='https://i.postimg.cc/ZBDD0ZfQ/Whats-App-Image-2024-03-21-at-1-24-46-PM-2.jpg' border='0' alt="MyKoPKB Logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
File diff suppressed because one or more lines are too long
@@ -21,13 +21,13 @@
</div>
<div class="form-group">
<label for="motto">Motto</label>
<input type="text" name="motto" class="form-control" placeholder="(Optional)" />
<label for="education">Taraf Pendidikan</label>
<input type="text" name="education" class="form-control" placeholder="(Optional)" />
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea name="description" class="form-control" placeholder="(Optional)"></textarea>
<label for="pengalaman">Pengalaman Kerja</label>
<textarea name="pengalaman" class="form-control" placeholder="(Optional)"></textarea>
</div>
<div class="form-group">
@@ -38,13 +38,13 @@
</select>
</div>
<div class="form-group">
<!-- <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> -->
<div id="imagePreview">
<img :src="imageUrl" v-if="imageUrl" alt="Preview">
@@ -28,13 +28,13 @@
</div>
<div class="form-group">
<label for="motto">Motto</label>
<input type="text" name="motto" class="form-control" :value="nominee.motto" placeholder="(Optional)" />
<label for="education">Taraf Pendidikan</label>
<input type="text" name="education" class="form-control" :value="nominee.education" placeholder="(Optional)" />
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea name="description" class="form-control" placeholder="(Optional)">{{ nominee.description}}</textarea>
<label for="experience">Pengalaman Kerja </label>
<textarea name="experience" class="form-control" placeholder="(Optional)">{{ nominee.experience}}</textarea>
</div>
<div class="form-group">
@@ -131,7 +131,7 @@ export default{
$.notifyClose();
vm.loading = false;
if (vm.util.showResult(response, 'success', 'ajax'))
vm.$router.push({name: 'Maklumat Calon'});
vm.$router.push({name: 'Maklumat Calon',query:{refresh:true}});
},
error: function (error) {
$.notifyClose();
@@ -139,7 +139,7 @@ export default{
vm.util.showResult(error, 'error', 'ajax');
},
uploadProgress: function (a, b, c, progress) {
vm.util.notify('Updating Nominee', 'progress', progress);
this.util.notify('Updating nominee', 'progress', progress);
}
})
}
@@ -1,103 +1,88 @@
<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="panel-body table-responsive">
<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>Id</th>
<th>Nama</th>
<th>No. Anggota</th>
<th>Unit</th>
<th>Jawatan</th>
<!-- <th>Partylist</th> -->
<th>Maklumat</th>
<th>Tindakan</th>
</tr>
</thead>
<tbody>
<tr v-for="nominee in nominees">
<td>
<img :alt="nominee.name" :src="createBase64ImageUrl(nominee.photo)" class="thumbnail" style="height: 60px;width: 60px;">
</td>
<td>{{ nominee.name}}</td>
<td>{{ nominee.no_anggota}}</td>
<td>{{ nominee.unit}}</td>
<td>{{ nominee.position}}</td>
<td>Papar</td>
<td>
<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="panel-body table-responsive">
<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>Id</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>
</tr>
</thead>
<tbody>
<tr v-for="nominee in nominees">
<td>
<img :alt="nominee.name" :src="createBase64ImageUrl(nominee.photo)" class="thumbnail"
style="height: 60px;width: 60px;">
</td>
<td>{{ nominee.name }}</td>
<td>{{ nominee.no_anggota }}</td>
<td>{{ nominee.unit }}</td>
<td>{{ nominee.position }}</td>
<td>{{ nominee.education }}</td>
<td>{{ nominee.experience }}</td>
<router-link :to="{name: 'Edit Nominee', params:{id:nominee.id}}" class="btn btn-primary">
<router-link :to="{ name: 'Edit Nominee', params: { id: nominee.id } }"
class="btn btn-primary">
<i class="fa fa-edit"></i> Edit
</router-link>
<button
class="btn btn-danger"
@click="util.showModal('#delete-nominee-modal');id=nominee.id">
<button class="btn btn-danger" @click="util.showModal(nominee.id)" id=nominee.id>
<i class="fa fa-trash"></i> Padam
</button>
</td>
</tr>
<tr v-if="nominees.length < 1">
<td colspan="7">No Calon</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr v-if="nominees.length < 1">
<td colspan="7">No Calon</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<modal id="delete-nominee-modal">
<modal-header>Padam Calon</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>
<modal id="delete-nominee-modal">
<modal-header>Padam Calon</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')">
Kembali
</button>
</modal-footer>
</modal>
</div>
</template>
<script>
export default{
data() {
return {
visible: true
}
},
export default {
data: function () {
@@ -112,32 +97,33 @@ export default{
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');
})
deleteNominee(nomineeId) {
this.util.hideModal('#delete-nominee-modal'); // Hide modal
this.util.notify('Deleting nominee', 'loading'); // Show loading notification
axios.delete(config.API + 'nominee/' + nomineeId) // Make DELETE request
.then(response => {
$.notifyClose(); // Close notification
if (this.util.showResult(response, 'success')) { // Show success notification
this.refreshNominee(); // Refresh the list of nominees
}
})
.catch(error => {
$.notifyClose(); // Close notification
this.util.showResult(error, 'error'); // Show error notification
})
},
refreshNominee: function () {
var vm = this;
this.util.notify('Refreshing Nominees', 'loading');
axios.get(config.API+'nominee')
.then(response=>{
axios.get(config.API + 'nominee')
.then(response => {
$.notifyClose();
console.log(response);
vm.data.nominees = response.data;
})
.catch(error=>{
.catch(error => {
$.notifyClose();
vm.showResult(error);
})
@@ -145,7 +131,7 @@ export default{
getPosition: function (id) {
var positions = this.data.positions;
for (var i in positions)
for (var i in positions)
if (positions[i].id == id)
return positions[i]['name'];
},
@@ -158,9 +144,9 @@ export default{
return 'No partylists';
},
createBase64ImageUrl: function(base64ImageData) {
return "data:image/png;base64," + base64ImageData;
}
createBase64ImageUrl: function (base64ImageData) {
return "data:image/png;base64," + base64ImageData;
}
},
computed: {
@@ -186,6 +172,4 @@ export default{
</script>
<style>
</style>
<style></style>
@@ -8,7 +8,7 @@
<script>
export default{
created: function () {
this.util.setTitle('Voting System - Maklumat Pengundi');
this.util.setTitle('MyKoPKB - Maklumat Pengundi');
}
}
</script>