DONE: enhance UI on admin and voter side, add docker config, fix delete button modal not showing
This commit is contained in:
ISMAIL MASSERAN
@@ -1,80 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div v-if="!loading">
|
||||
<nav class="navbar navbar-default navbar-fixed-top" id="nav">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<nav class="navbar navbar-default navbar-fixed-top floating-header logo-header" id="nav">
|
||||
<div class="container">
|
||||
<div class="navbar-header logo-section">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<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' width="150" height="auto" alt="MyKoPKB Logo"></a>
|
||||
</button>
|
||||
<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' width="150" height="auto" alt="MyKoPKB Logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="myNavbar">
|
||||
|
||||
|
||||
<ul class="nav navbar-nav">
|
||||
<!-- {{ users }} -->
|
||||
<router-link :to="{name: 'Admin Home'}" tag="li" exact><a href="#">Laman Utama</a></router-link>
|
||||
<router-link :to="{name: 'Kemaskini Jawatan'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Jawatan</a>
|
||||
<router-link :to="{ name: 'Admin Home' }" tag="li" exact><a href="#"><b>Laman
|
||||
Utama</b></a></router-link>
|
||||
<router-link :to="{ name: 'Kemaskini Jawatan' }" v-if="data.user.role == 1" tag="li">
|
||||
<a href="#"><b>Jawatan</b></a>
|
||||
</router-link>
|
||||
|
||||
|
||||
<!-- <router-link :to="{name: 'Manage Partylist'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Manage Partylist</a>
|
||||
</router-link> -->
|
||||
|
||||
<router-link :to="{name: 'Manage Voter'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Anggota Koperasi</a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Maklumat Calon'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Calon</a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Kehadiran Calon'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Kehadiran</a>
|
||||
|
||||
<router-link :to="{ name: 'Manage Voter' }" v-if="data.user.role == 1" tag="li">
|
||||
<a href="#"><b>Anggota Koperasi</b></a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Pembiayaan'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Pembiayaan Anggota </a>
|
||||
<router-link :to="{ name: 'Maklumat Calon' }" v-if="data.user.role == 1" tag="li">
|
||||
<a href="#"><b>Calon</b></a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Penyata Anggota'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Penyata Anggota</a>
|
||||
<router-link :to="{ name: 'Kehadiran Calon' }" v-if="data.user.role == 1" tag="li">
|
||||
<a href="#"><b>Kehadiran</b></a>
|
||||
</router-link>
|
||||
|
||||
|
||||
<router-link :to="{ name: 'Pembiayaan' }" v-if="data.user.role == 1" tag="li">
|
||||
<a href="#"><b>Pembiayaan Anggota</b></a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{ name: 'Penyata Anggota' }" v-if="data.user.role == 1" tag="li">
|
||||
<a href="#"><b>Penyata Anggota</b></a>
|
||||
</router-link>
|
||||
|
||||
|
||||
</ul>
|
||||
<ul class="nav navbar-right navbar-nav">
|
||||
<li class="dropdown">
|
||||
<a
|
||||
href="#"
|
||||
class="dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
role="button" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<span class="fa fa-user"></span> {{ data.user.name }} <span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
|
||||
<router-link :to="{name:'Update Account'}" tag="li" exact>
|
||||
|
||||
<router-link :to="{ name: 'Update Account' }" tag="li" exact>
|
||||
<a href="#">Kemaskini Akaun</a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Manage Account'}" tag="li" v-if="data.user.id==1">
|
||||
|
||||
<router-link :to="{ name: 'Manage Account' }" tag="li" v-if="data.user.id == 1">
|
||||
<a href="#">Pengurusan Akaun</a>
|
||||
</router-link>
|
||||
|
||||
|
||||
<li @click="logout()"><a>Log Keluar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<router-view></router-view>
|
||||
|
||||
<div class="admin-main">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading" class="container">
|
||||
<div class="jumbotron">
|
||||
@@ -82,52 +84,238 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
|
||||
// data: () =>({
|
||||
// loading: true,
|
||||
// users:{'roles' : 1},
|
||||
// }),
|
||||
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Administrator');
|
||||
var vm = this;
|
||||
if (this.util.isLogin()) {
|
||||
this.util.setAuthorization();
|
||||
axios.get(config.API+'admin/information')
|
||||
.then(response=>{
|
||||
console.log(response);
|
||||
vm.data.user = response.data.user;
|
||||
vm.data.election = response.data.election;
|
||||
vm.data.partylists = response.data.partylist;
|
||||
vm.data.positions = response.data.position;
|
||||
vm.loading = false;
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
if (this.util.showResult(error) == 401) {
|
||||
vm.logout();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$router.push({name:'Admin Login'});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
logout: function () {
|
||||
localStorage.clear();
|
||||
this.$router.push({name: 'Admin Login'});
|
||||
}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
// data: () =>({
|
||||
// loading: true,
|
||||
// users:{'roles' : 1},
|
||||
// }),
|
||||
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Administrator');
|
||||
var vm = this;
|
||||
if (this.util.isLogin()) {
|
||||
this.util.setAuthorization();
|
||||
axios.get(config.API + 'admin/information')
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
vm.data.user = response.data.user;
|
||||
vm.data.election = response.data.election;
|
||||
vm.data.partylists = response.data.partylist;
|
||||
vm.data.positions = response.data.position;
|
||||
vm.loading = false;
|
||||
})
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
if (this.util.showResult(error) == 401) {
|
||||
vm.logout();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$router.push({ name: 'Admin Login' });
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
logout: function () {
|
||||
localStorage.clear();
|
||||
this.$router.push({ name: 'Admin Login' });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body{
|
||||
padding: 70px 5px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-header {
|
||||
position: fixed !important;
|
||||
top: 16px !important;
|
||||
left: 16px !important;
|
||||
right: 16px !important;
|
||||
width: calc(100% - 32px) !important;
|
||||
margin: 0;
|
||||
border-radius: 16px !important;
|
||||
z-index: 2000 !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.logo-header {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.96) 0%,
|
||||
rgb(8, 0, 126) 48%,
|
||||
rgb(255, 0, 0) 100%) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25) !important;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(33, 150, 243, 0.35),
|
||||
0 4px 16px rgba(2, 19, 36, 0.28) !important;
|
||||
backdrop-filter: blur(12px) !important;
|
||||
position: fixed;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.logo-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.logo-header>* {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 24px;
|
||||
margin-left: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#nav.navbar {
|
||||
border: none;
|
||||
min-height: 78px;
|
||||
}
|
||||
|
||||
#nav .container {
|
||||
width: 100%;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#nav .navbar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
height: auto;
|
||||
padding: 14px 0;
|
||||
color: #1f2937;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
display: inline-block;
|
||||
color: #1f2937 !important;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
#nav .nav>li>a,
|
||||
#nav .navbar-toggle {
|
||||
color: #f8fbff;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
#nav .nav>li>a:hover,
|
||||
#nav .nav>li.active>a,
|
||||
#nav .nav>li.active>a:hover,
|
||||
#nav .nav>li.active>a:focus,
|
||||
#nav .navbar-brand:hover {
|
||||
color: #fff;
|
||||
background: rgba(204, 0, 0, 0.833);
|
||||
}
|
||||
|
||||
#nav .nav>li>a {
|
||||
border-radius: 10px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 18px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
#nav .navbar-right {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#nav .navbar-nav>li,
|
||||
#nav .dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#nav .dropdown-menu {
|
||||
margin-top: 6px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
|
||||
z-index: 2101;
|
||||
}
|
||||
|
||||
#nav .dropdown-menu>li>a {
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#nav .dropdown-menu>li>a:hover {
|
||||
background-color: #f39c12;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#nav .navbar-toggle {
|
||||
margin-top: 20px;
|
||||
margin-right: 18px;
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
#nav .navbar-toggle .icon-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
background: transparent !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.admin-main {
|
||||
padding-top: 112px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.floating-header {
|
||||
top: 10px !important;
|
||||
left: 10px !important;
|
||||
right: 10px !important;
|
||||
width: calc(100% - 20px) !important;
|
||||
border-radius: 14px !important;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
margin-left: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
#nav .navbar-brand img {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
#nav .navbar-collapse {
|
||||
border-top: 0;
|
||||
box-shadow: none;
|
||||
padding-bottom: 12px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#nav .nav>li>a {
|
||||
margin: 4px 10px;
|
||||
}
|
||||
|
||||
.admin-main {
|
||||
padding-top: 102px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +1,56 @@
|
||||
<template>
|
||||
<div class="col-md-5 col-md-offset-3">
|
||||
<div class="panel panel-default">
|
||||
<div class="text-center">
|
||||
<img id="logo-admin" alt="Logo-admin">
|
||||
<div class="panel-heading">
|
||||
<h4><b>ADMIN LOG MASUK</b> </h4>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<form @submit.prevent="login" id="login_form">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">E-mail</label>
|
||||
<input type="email" name="email" class="form-control" required/>
|
||||
<div class="col-md-5 col-md-offset-3">
|
||||
<div class="panel panel-default">
|
||||
<div class="text-center">
|
||||
<img id="logo-admin" alt="Logo-admin">
|
||||
<div class="panel-heading">
|
||||
<h4><b>ADMIN LOG MASUK</b> </h4>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Kata laluan </label>
|
||||
<input type="password" name="password" class="form-control" id="password" required/>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form @submit.prevent="login" id="login_form">
|
||||
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="visibility"
|
||||
onclick=" $(this)[0].checked ?
|
||||
<div class="form-group">
|
||||
<label for="email">E-mail</label>
|
||||
<input type="email" name="email" class="form-control" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Kata laluan </label>
|
||||
<input type="password" name="password" class="form-control" id="password" required />
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" id="visibility" onclick=" $(this)[0].checked ?
|
||||
$('#password').attr('type','text'):
|
||||
$('#password').attr('type','password')"/> Show Password
|
||||
</label>
|
||||
$('#password').attr('type','password')" /> Show Password
|
||||
</label>
|
||||
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="submit"
|
||||
class="btn btn-info form-control"
|
||||
:class="{'disabled': loading.isLoading}"
|
||||
:value="loading.value"/>
|
||||
<div class="form-group">
|
||||
<input type="submit" class="btn btn-info form-control"
|
||||
:class="{ 'disabled': loading.isLoading }" :value="loading.value" />
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// JavaScript to set the image source
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Select the image element by its ID
|
||||
var logoImage = document.getElementById('logo-admin');
|
||||
// Set the source of the image dynamically
|
||||
logoImage.src = window.location.origin + '/images/login-admin.jpeg?' + new Date().getTime(); // Replace this URL with your desired image URL
|
||||
});
|
||||
// JavaScript to set the image source
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Select the image element by its ID
|
||||
var logoImage = document.getElementById('logo-admin');
|
||||
// Set the source of the image dynamically
|
||||
logoImage.src = window.location.origin + '/images/login-admin.jpeg?' + new Date().getTime(); // Replace this URL with your desired image URL
|
||||
console.log(logoImage.src);
|
||||
});
|
||||
|
||||
export default{
|
||||
export default {
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
@@ -68,7 +63,7 @@ export default{
|
||||
|
||||
created: function () {
|
||||
if (this.util.isLogin())
|
||||
return this.$router.push({name:'Admin Home'})
|
||||
return this.$router.push({ name: 'Admin Home' })
|
||||
this.util.setTitle('Log Masuk Admin ');
|
||||
},
|
||||
|
||||
@@ -80,19 +75,19 @@ export default{
|
||||
|
||||
this.startLoading();
|
||||
|
||||
axios.post(config.API+'admin/login', $('#login_form').serialize())
|
||||
.then(response => {
|
||||
vm.stopLoading();
|
||||
if (this.util.showResult(response, 'success')) {
|
||||
localStorage['Access Token'] = `Bearer ${response.data.token}`;
|
||||
axios.post(config.API + 'admin/login', $('#login_form').serialize())
|
||||
.then(response => {
|
||||
vm.stopLoading();
|
||||
if (this.util.showResult(response, 'success')) {
|
||||
localStorage['Access Token'] = `Bearer ${response.data.token}`;
|
||||
this.util.setAuthorization();
|
||||
vm.$router.push({name: 'Admin Home'});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
vm.stopLoading();
|
||||
this.util.showResult(error, 'error');
|
||||
})
|
||||
vm.$router.push({ name: 'Admin Home' });
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
vm.stopLoading();
|
||||
this.util.showResult(error, 'error');
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
@@ -124,7 +119,7 @@ body {
|
||||
.logo-admin {
|
||||
width: 30px;
|
||||
/* Adjust width as needed */
|
||||
height:50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
|
||||
}
|
||||
@@ -132,15 +127,14 @@ body {
|
||||
.form-control {
|
||||
|
||||
border-radius: 0.50rem;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background-color: #c2ccc8;/* Change background color on hover */
|
||||
color: #f3f6f8; /* Change text color on hover */
|
||||
background-color: #c2ccc8;
|
||||
/* Change background color on hover */
|
||||
color: #f3f6f8;
|
||||
/* Change text color on hover */
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -62,7 +62,7 @@
|
||||
class="btn btn-primary">
|
||||
<i class="fa fa-edit"></i>Kemaskini
|
||||
</router-link>
|
||||
<button class="btn btn-danger" @click="util.showModal(nominee.id)" id=nominee.id>
|
||||
<button class="btn btn-danger" @click="openDeleteModal(nominee)">
|
||||
<i class="fa fa-trash"></i>Padam
|
||||
</button>
|
||||
|
||||
@@ -107,7 +107,13 @@ export default {
|
||||
|
||||
methods: {
|
||||
|
||||
deleteNominee(nomineeId) {
|
||||
openDeleteModal: function (nominee) {
|
||||
this.id = nominee.id;
|
||||
this.util.showModal('#delete-nominee-modal');
|
||||
},
|
||||
|
||||
deleteNominee() {
|
||||
const nomineeId = this.id;
|
||||
this.util.hideModal('#delete-nominee-modal'); // Hide modal
|
||||
this.util.notify('Deleting nominee', 'loading'); // Show loading notification
|
||||
|
||||
|
||||
@@ -1,67 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<div>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</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{
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
id: 0
|
||||
@@ -71,7 +69,7 @@ export default{
|
||||
created: function () {
|
||||
if (this.$route.query.refresh) {
|
||||
this.refreshPosition();
|
||||
this.$router.replace({name: 'Kemaskini Jawatan'})
|
||||
this.$router.replace({ name: 'Kemaskini Jawatan' })
|
||||
}
|
||||
},
|
||||
|
||||
@@ -79,13 +77,13 @@ export default{
|
||||
refreshPosition: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing Position', 'loading');
|
||||
axios.get(config.API+'position')
|
||||
.then(response=>{
|
||||
axios.get(config.API + 'position')
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
$.notifyClose();
|
||||
vm.data.positions = response.data;
|
||||
})
|
||||
.catch(error=>{
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
@@ -105,22 +103,22 @@ export default{
|
||||
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}})
|
||||
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);
|
||||
})
|
||||
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);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,92 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<div>
|
||||
|
||||
<div class="form-group">
|
||||
<router-link class="btn btn-success" :to="{name:'Tambah Pengundi'}">
|
||||
<i class="fa fa-plus"></i> Tambah Pengundi
|
||||
</router-link>
|
||||
<button class="btn btn-default" @click="refreshVoter()">
|
||||
<i class="fa fa-refresh"></i> Kemaskini Pengundi
|
||||
</button>
|
||||
<router-link class="btn btn-info" :to="{name:'History Senarai Anggota '}">
|
||||
<i class="fa fa-list"></i> Database Anggota
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover" id="position_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bil.</th>
|
||||
<th>Nama Anggota</th>
|
||||
<th>No. Kad Pengenalan</th>
|
||||
<th>No. Anggota</th>
|
||||
<th>Unit</th>
|
||||
<th>Saham</th>
|
||||
<th>Yuran</th>
|
||||
<th>Tindakan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(voter,i) in data.voters.data">
|
||||
<td>{{ i + 1 }}</td>
|
||||
<td>{{ voter.name }}</td>
|
||||
<td>{{ voter.no_kp }}</td>
|
||||
<td>{{ voter.no_anggota }}</td>
|
||||
<td>{{ voter.unit }}</td>
|
||||
<td>{{ voter.saham }}</td>
|
||||
<td>{{ voter.yuran }}</td>
|
||||
<td>
|
||||
<button class="btn btn-info" @click="edit(i)">
|
||||
<i class="fa fa-edit"></i> Set semula
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="util.showModal('#delete-voter-modal');id=voter.id">
|
||||
<i class="fa fa-trash"></i> Padam
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="data.voters.data && data.voters.data.length < 1">
|
||||
<td colspan="3">No Voters</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="form-group">
|
||||
<router-link class="btn btn-success" :to="{ name: 'Tambah Pengundi' }">
|
||||
<i class="fa fa-plus"></i> Tambah Pengundi
|
||||
</router-link>
|
||||
<button class="btn btn-default" @click="refreshVoter()">
|
||||
<i class="fa fa-refresh"></i> Kemaskini Pengundi
|
||||
</button>
|
||||
<router-link class="btn btn-info" :to="{ name: 'Penyata Anggota' }">
|
||||
<i class="fa fa-list"></i> Database Anggota
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover" id="position_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bil.</th>
|
||||
<th>Nama Anggota</th>
|
||||
<th>No. Kad Pengenalan</th>
|
||||
<th>No. Anggota</th>
|
||||
<th>Unit</th>
|
||||
<th>Saham</th>
|
||||
<th>Yuran</th>
|
||||
<th>Tindakan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(voter, i) in data.voters.data">
|
||||
<td>{{ i + 1 }}</td>
|
||||
<td>{{ voter.name }}</td>
|
||||
<td>{{ voter.no_kp }}</td>
|
||||
<td>{{ voter.no_anggota }}</td>
|
||||
<td>{{ voter.unit }}</td>
|
||||
<td>{{ voter.saham }}</td>
|
||||
<td>{{ voter.yuran }}</td>
|
||||
<td>
|
||||
<button class="btn btn-info" @click="edit(i)">
|
||||
<i class="fa fa-edit"></i> Set semula
|
||||
</button>
|
||||
<button class="btn btn-danger"
|
||||
@click="util.showModal('#delete-voter-modal'); id = voter.id">
|
||||
<i class="fa fa-trash"></i> Padam
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="data.voters.data && data.voters.data.length < 1">
|
||||
<td colspan="3">No Voters</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<ul class="pagination" v-if="pages.length > 1">
|
||||
<router-link tag="li" v-for="page in pages" :key="page['pages']"
|
||||
:to="{ query: { page: page['page'] } }" :class="{ 'active': current_page == page['page'] }"
|
||||
exact>
|
||||
<a href="#">{{ page['page'] }}</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="pagination" v-if="pages.length > 1">
|
||||
<router-link
|
||||
tag="li"
|
||||
v-for="page in pages"
|
||||
:key="page['pages']"
|
||||
:to="{query:{page:page['page']}}"
|
||||
:class="{'active':current_page==page['page']}"
|
||||
exact>
|
||||
<a href="#">{{ page['page'] }}</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
<modal id="delete-voter-modal">
|
||||
<modal-header>Delete Voter</modal-header>
|
||||
<modal-body>
|
||||
<h2>Are you sure to delete voter?</h2>
|
||||
</modal-body>
|
||||
<modal-footer>
|
||||
<button class="btn btn-danger" @click="deleteVoter()">Delete</button>
|
||||
<button class="btn btn-default" @click="util.hideModal('#delete-voter-modal')">Cancel</button>
|
||||
</modal-footer>
|
||||
</modal>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal id="delete-voter-modal">
|
||||
<modal-header>Delete Voter</modal-header>
|
||||
<modal-body>
|
||||
<h2>Are you sure to delete voter?</h2>
|
||||
</modal-body>
|
||||
<modal-footer>
|
||||
<button class="btn btn-danger" @click="deleteVoter()">Delete</button>
|
||||
<button class="btn btn-default" @click="util.hideModal('#delete-voter-modal')">Cancel</button>
|
||||
</modal-footer>
|
||||
</modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
id: 0
|
||||
@@ -105,13 +100,13 @@ export default{
|
||||
refreshVoter: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing Voter', 'loading');
|
||||
axios.get(config.API+'voter?page='+this.current_page)
|
||||
.then(response=>{
|
||||
axios.get(config.API + 'voter?page=' + this.current_page)
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
$.notifyClose();
|
||||
vm.data.voters = response.data;
|
||||
})
|
||||
.catch(error=>{
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
@@ -120,22 +115,22 @@ export default{
|
||||
edit: function (i) {
|
||||
var vm = this;
|
||||
this.data.voter = this.data.voters.data[i];
|
||||
this.$router.push({name: 'Edit Voter', params:{id:vm.data.voter.id}})
|
||||
this.$router.push({ name: 'Edit Voter', params: { id: vm.data.voter.id } })
|
||||
},
|
||||
|
||||
deleteVoter: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Deleting voter', 'loading');
|
||||
this.util.hideModal('#delete-voter-modal');
|
||||
axios.delete(config.API+'voter/'+this.id)
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) vm.refreshVoter();
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
axios.delete(config.API + 'voter/' + this.id)
|
||||
.then(response => {
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) vm.refreshVoter();
|
||||
})
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@@ -150,16 +145,16 @@ export default{
|
||||
pages: function () {
|
||||
var pages = [];
|
||||
if (this.data.voters.last_page)
|
||||
for (var i = 1; i <= this.data.voters.last_page;i++) {
|
||||
let x = {};
|
||||
x['page'] = i;
|
||||
pages.push(x);
|
||||
}
|
||||
for (var i = 1; i <= this.data.voters.last_page; i++) {
|
||||
let x = {};
|
||||
x['page'] = i;
|
||||
pages.push(x);
|
||||
}
|
||||
return pages;
|
||||
},
|
||||
|
||||
current_page: function () {
|
||||
return this.$route.query.page ? this.$route.query.page : 1;
|
||||
return this.$route.query.page ? this.$route.query.page : 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user