DONE: remove verified by ajk, fix bug on pagination, improve UI
This commit is contained in:
ISMAIL MASSERAN
@@ -1,53 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<nav class="nav navbar-default navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<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="">MyKoPKB</a>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="myNavbar">
|
||||
<ul class="nav navbar-nav">
|
||||
<router-link :to="{name: 'Admin Home'}" tag="li" exact>
|
||||
<a href="#"><span class="fa fa-home"></span></a>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'Kemaskini Jawatan'}" tag="li">
|
||||
<a href="#">Kemaskini Jawatan</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="nav navbar-default navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<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="">MyKoPKB</a>
|
||||
</div>
|
||||
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="myNavbar">
|
||||
<ul class="nav navbar-nav">
|
||||
<router-link :to="{ name: 'Admin Home' }" tag="li" exact>
|
||||
<a href="#"><span class="fa fa-home"></span></a>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Kemaskini Sesi' }" tag="li">
|
||||
<a href="#">Kemaskini Sesi</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
created: function () {
|
||||
if (!this.util.isLogin())
|
||||
return this.$router.push({name: 'Log Masuk Admin ==='});
|
||||
return this.$router.push({ name: 'Log Masuk Admin ===' });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.navbar-default {
|
||||
box-shadow: 0 1px 10px rgba(0,0,0,.5);
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 1px 10px rgba(0, 0, 0, .5);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
color: #000000;
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
margin-top: 70px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
margin-top: 70px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,57 +1,57 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h3><b>Tambah Jawatan</b></h3>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Jawatan</label>
|
||||
<input type="text" name="name" class="form-control" required/>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h3><b>Tambah Sesi</b></h3>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Jawatan</label>
|
||||
<input type="text" name="name" class="form-control" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="button" value="Submit" class="btn btn-info"/>
|
||||
<input type="reset" value="Reset" class="btn btn-default"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<datatable v-bind="data" />
|
||||
<div class="form-group">
|
||||
<input type="button" value="Submit" class="btn btn-info" />
|
||||
<input type="reset" value="Reset" class="btn btn-default" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<datatable v-bind="data" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
export default {
|
||||
data: () => ({
|
||||
yyy : [
|
||||
{id: 1, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 2, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 3, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 4, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 5, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 6, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 7, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 8, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 9, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 10, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 11, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 12, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 13, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 14, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 15, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 16, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 17, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 18, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'}
|
||||
yyy: [
|
||||
{ id: 1, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 2, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 3, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 4, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 5, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 6, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 7, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 8, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 9, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 10, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 11, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 12, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 13, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 14, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 15, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 16, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 17, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 18, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' }
|
||||
],
|
||||
|
||||
data: {
|
||||
columns: [
|
||||
{title:'ID', field: 'id'},
|
||||
{title:'name', field: 'name'},
|
||||
{title:'x', field:'x'},
|
||||
{title:'', field:'btn', html: true}
|
||||
{ title: 'ID', field: 'id' },
|
||||
{ title: 'name', field: 'name' },
|
||||
{ title: 'x', field: 'x' },
|
||||
{ title: '', field: 'btn', html: true }
|
||||
],
|
||||
data: [],
|
||||
|
||||
@@ -70,9 +70,9 @@ export default{
|
||||
console.log(this);
|
||||
},
|
||||
|
||||
watch : {
|
||||
watch: {
|
||||
'data.query': {
|
||||
handler (query) {
|
||||
handler(query) {
|
||||
this.data.data = this.xxx;
|
||||
this.data.total = this.yyy.length;
|
||||
},
|
||||
@@ -82,10 +82,10 @@ export default{
|
||||
},
|
||||
|
||||
computed: {
|
||||
xxx : function () {
|
||||
xxx: function () {
|
||||
var offset = this.data.query.offset; //0
|
||||
var limit = this.data.query.limit; //10
|
||||
return this.yyy.slice(offset, offset+limit);
|
||||
return this.yyy.slice(offset, offset + limit);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user