Skip to content

V
ViewAdminpanel
Commit 7a6385c9 by Jansa Jose
Options

vue js comit(till login signup and logout)

parent b368c98c
Showing with 294 additions and 277 deletions
package-lock.json
......@@ -4785,7 +4785,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -4806,12 +4807,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -4826,17 +4829,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -4953,7 +4959,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
......@@ -4965,6 +4972,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -4979,6 +4987,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -4986,12 +4995,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
......@@ -5010,6 +5021,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -5090,7 +5102,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
......@@ -5102,6 +5115,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -5187,7 +5201,8 @@
"safe-buffer": {
"version": "5.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -5223,6 +5238,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -5242,6 +5258,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -5285,12 +5302,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
......@@ -10794,6 +10813,11 @@
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
"dev": true
},
"vee-validate": {
"version": "2.2.15",
"resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-2.2.15.tgz",
"integrity": "sha512-4TOsI8XwVkKVLkg8Nhmy+jyoJrR6XcTRDyxBarzcCvYzU61zamipS1WsB6FlDze8eJQpgglS4NXAS6o4NDPs1g=="
},
"vendors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.1.tgz",
......
package.json
......@@ -27,6 +27,7 @@
"indent-string": "^4.0.0",
"jquery": "^2.2.2",
"moment": "^2.12.0",
"vee-validate": "^2.2.15",
"vue": "^2.2.2",
"vue-date-picker": "^1.0.2",
"vue-resource": "^1.0.3",
......
src/components/Login.vue
......@@ -8,20 +8,26 @@
<div class="login_container_panel">
<h3>Login</h3>
<hr>
<form @submit.prevent="checkCreds">
<form>
<fieldset>
<div class="login_row">
<input class="login_input" placeholder="Username" type="text" v-model="username">
<input class="login_input" name="email" v-validate="'required|email'" :class="{'is-danger': errors.has('email') }" placeholder="Email Id" value="" type="text" v-model="email">
<i v-show="errors.has('email')" class="fa fa-warning"></i>
<span v-show="errors.first('email')" class="help is-danger">{{ errors.first('email') }}</span>
</div>
<div class="login_row">
<input class="login_input" placeholder="Password" type="password" v-model="password">
<input class="login_input" v-validate="'required|min:6'" :class="{'is-danger': errors.has('password'), min: 6 }" name="password" placeholder="Password" type="password" v-model="password">
<i v-show="errors.has('password')" class="fa fa-warning"></i>
<span v-show="errors.first('password')" class="help is-danger">{{ errors.first('password') }}</span>
</div>
<div class="login_row textCenter">
<router-link class="pageLink" to="/">
<div class="login_btn">
<div v-if=response class="text-red"><p class="vertical-5p lead">{{response}}</p></div>
<div class="login_row textCenter cpoint">
<!-- <router-link class="pageLink" to="/"> -->
<div class="login_btn" @click="checkCreds">
SIGN IN
</div>
</router-link>
<!-- </router-link> -->
</div>
<router-link class="pageLink" to="/signup">
<div class="login_row textCenter">
......@@ -32,7 +38,6 @@
</form>
</div>
<div class="clear"></div>
<div v-if=response class="text-red"><p class="vertical-5p lead">{{response}}</p></div>
</div>
</div>
</div>
......@@ -41,62 +46,65 @@
</template>
<script>
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import api from '../api'
import config from '../../src/config'
Vue.use(VeeValidate)
export default {
name: 'Login',
data(router) {
return {
section: 'Login',
loading: '',
username: '',
email: '',
password: '',
response: ''
}
},
methods: {
checkCreds() {
const { username, password } = this
this.toggleLoading()
this.resetResponse()
this.$store.commit('TOGGLE_LOADING')
/* Making API call to authenticate a user */
if (this.email === '' && this.password === '') {
this.response = 'All Fields are required'
} else if (this.email === '') {
this.response = 'Email Id is required'
} else if (this.password === '') {
this.response = 'Password is required'
}
if (this.response !== '') {
var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
return
}
var params = {'email': this.email, 'password': this.password, 'client_id': config.clientId, 'client_secret': config.clientSecret}
api
.request('post', '/login', { username, password })
.request('post', 'login', params)
.then(response => {
this.toggleLoading()
var data = response.data
/* Checking if error object was returned from the server */
if (data.error) {
var errorName = data.error.name
if (errorName) {
this.response =
errorName === 'InvalidCredentialsError'
? 'Username/Password incorrect. Please try again.'
: errorName
} else {
this.response = data.error
if (data.status === 'success') {
// this.$store.commit('SET_USER', data.data.user)
// this.$store.commit('SET_TOKEN', data.data.access_token)
if (window.localStorage) {
window.localStorage.setItem('user', JSON.stringify(data.data.user))
window.localStorage.setItem('token', data.data.access_token)
}
} else {
this.response = data.data.message
var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
return
}
/* Setting user in the state and caching record to the localStorage */
if (data.user) {
var token = 'Bearer ' + data.token
this.$store.commit('SET_USER', data.user)
this.$store.commit('SET_TOKEN', token)
if (window.localStorage) {
window.localStorage.setItem('user', JSON.stringify(data.user))
window.localStorage.setItem('token', token)
}
this.$router.push(data.redirect ? data.redirect : '/')
if (data.data.user) {
// this.$router.push(data.redirect ? data.redirect : '/')
this.$router.push('/tables')
}
})
.catch(error => {
......@@ -104,7 +112,11 @@ export default {
console.log(error)
this.response = 'Server appears to be offline'
this.toggleLoading()
var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
// this.toggleLoading()
})
},
toggleLoading() {
......@@ -128,7 +140,9 @@ body,
height: 100%;
background-color: #1a5c7c !important;
}
.cpoint{
cursor: pointer !important;
}
......
src/components/layout/DashHeader.vue
......@@ -13,7 +13,6 @@
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<tasks-menu></tasks-menu>
<user-menu :user="user"></user-menu>
</ul>
</div>
......
src/components/layout/Sidebar.vue
......@@ -10,7 +10,7 @@
</div>
<div class="info">
<div>
<p class="white">{{user.displayName}}</p>
<p class="white">{{userData.email}}</p>
</div>
<a href="javascript:;">
<i class="fa fa-circle text-success"></i> Online
......@@ -37,6 +37,9 @@ export default {
.jQuery('[data-toggle="hideseek"]')
.off()
.hideseek()
},
created: function() {
this.userData = JSON.parse(localStorage.getItem('user'))
}
}
</script>
......
src/components/layout/SidebarMenu.vue
......@@ -3,14 +3,53 @@
<router-link tag="li" class="pageLink" to="/tables">
<a>
<i class="fa fa-table"></i>
<span class="page">Tables</span>
<span class="page">Transaction List</span>
</a>
</router-link>
<li class="pageLink router-link-active">
<a @click="connectBank">
<i class="fa fa-table"></i>
<span class="page">Add Bank</span>
</a>
</li>
</ul>
</template>
<script>
import api from '../../api'
import config from '../../../src/config'
export default {
name: 'SidebarMenu'
name: 'SidebarMenu',
methods: {
connectBank() {
this.toggleLoading()
this.access_token = localStorage.getItem('token')
var params = {'client_id': config.clientId, 'client_secret': config.clientSecret, 'access_token': this.access_token}
api
.request('post', 'connectbank', params)
.then(response => {
this.toggleLoading()
console.log(response.data)
var data = response.data
if (data.status === 'success') {
// this.$router.push(data.data.redirect_url)
// window.location = data.data.redirect_url
window.open(data.data.redirect_url, '_blank')
}
})
.catch(error => {
this.$store.commit('TOGGLE_LOADING')
console.log(error)
this.response = 'Server appears to be offline'
// this.toggleLoading()
})
},
toggleLoading() {
this.loading = this.loading === '' ? 'loading' : ''
}
}
}
</script>
<style>
......
src/components/layout/TasksMenu.vue deleted 100644 → 0
<template>
<li class="dropdown tasks-menu">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">{{ userInfo.tasks | count }} </span>
</a>
<ul class="dropdown-menu">
<li class="header">You have {{ userInfo.tasks | count }} task(s)</li>
<li v-if="userInfo.tasks.length > 0">
<!-- Inner menu: contains the tasks -->
<ul class="menu">
<li>
<!-- Task item -->
<a href="javascript:;">
<!-- Task title and progress text -->
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<!-- The progress bar -->
<div class="progress xs">
<!-- Change the css width attribute to simulate progress -->
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer" v-if="userInfo.tasks.length > 0">
<a href="javascript:;">View all tasks</a>
</li>
</ul>
</li>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'TasksMenu',
computed: {
...mapState([
'userInfo'
])
}
}
</script>
src/components/layout/UserMenu.vue
......@@ -4,31 +4,63 @@
<!-- The user image in the navbar-->
<img :src="user.avatar" class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">{{user.displayName}}</span>
<span class="hidden-xs">{{userData.email}}</span>
</a>
<!-- Account Info and Menu -->
<ul class="dropdown-menu">
<li class="user-header" style="height:auto;min-height:85px;padding-bottom:15px;">
<p>
<span>{{user.displayName}}</span>
<span>{{userData.email}}</span>
<small v-for="role in user.roles" :key="role">{{role}}</small>
</p>
</li>
<li class="user-footer">
<router-link tag="li" class="pageLink" to="/login">
<a href="javascript:;" class="btn btn-default btn-flat btn-block">
<!-- <router-link tag="li" class="pageLink" to="/login"> -->
<a href="javascript:;" @click="logout" class="btn btn-default btn-flat btn-block">
<i class="fa fa-sign-out"></i>
<span>Logout</span>
</a>
</router-link>
<!-- </router-link> -->
</li>
</ul>
</li>
</template>
<script>
import api from '../../api'
import config from '../../config'
export default {
name: 'UserMenu',
props: ['user']
props: ['user'],
methods: {
logout() {
this.access_token = localStorage.getItem('token')
var params = {'client_id': config.clientId, 'client_secret': config.clientSecret, 'access_token': this.access_token}
api
.request('post', 'logout', params)
.then(response => {
this.toggleLoading()
var data = response.data
if (data.status === 'success') {
localStorage.removeItem('user')
localStorage.removeItem('token')
this.$router.push('/')
}
})
.catch(error => {
console.log(error)
this.$store.commit('TOGGLE_LOADING')
this.response = 'Server appears to be offline'
})
},
toggleLoading() {
this.loading = this.loading === '' ? 'loading' : ''
}
},
created: function() {
this.userData = JSON.parse(localStorage.getItem('user'))
}
}
</script>
src/components/signup.vue
......@@ -8,41 +8,37 @@
<div class="login_container_panel">
<h3>Sign up</h3>
<hr>
<form @submit.prevent="checkCreds">
<form>
<fieldset>
<div class="login_row">
<input class="login_input" placeholder="First Name" type="text">
</div>
<div class="login_row">
<input class="login_input" placeholder="Last Name" type="text">
</div>
<div class="login_row">
<input class="login_input" placeholder="Account Number" type="text">
</div>
<div class="login_row">
<input class="login_input" placeholder="Mobile Number" type="text">
<input class="login_input" name="email" v-model="email" v-validate="'required|email'" :class="{'is-danger': errors.has('email') }" placeholder="Email Id" type="text">
<i v-show="errors.has('email')" class="fa fa-warning"></i>
<span v-show="errors.first('email')" class="help is-danger">{{ errors.first('email') }}</span>
</div>
<div class="login_row">
<input class="login_input" placeholder="Enter Password" type="password" v-model="password">
<input class="login_input" ref="password" v-validate="'required|min:6'" name="password" placeholder="Enter Password" :class="{'is-danger': errors.has('password'), min: 6 }" type="password" v-model="password">
<i v-show="errors.has('password')" class="fa fa-warning"></i>
<span v-show="errors.first('password')" class="help is-danger">{{ errors.first('password') }}</span>
</div>
<div class="login_row">
<input class="login_input" placeholder="Confirm Password" type="password" v-model="password">
<input class="login_input" v-validate="'required|confirmed:password'" :class="{'is-danger': errors.has('password_confirmation'), min: 6,}" name="confirm_password" data-vv-as="password" placeholder="Confirm Password" type="password" v-model="cnfpassword">
<i v-show="errors.has('confirm_password')" class="fa fa-warning"></i>
<span v-show="errors.first('confirm_password')" class="help is-danger">{{ errors.first('confirm_password') }}</span>
</div>
<div class="login_row textCenter">
<router-link class="pageLink" to="/login">
<div class="login_btn">
<div v-if=response class="text-red"><p class="vertical-5p lead">{{response}}</p></div>
<div class="login_row textCenter cpoint">
<!-- <router-link class="pageLink" to="/login"> -->
<div class="login_btn" @click="signUp">
SIGN UP
</div>
</router-link>
<!-- </router-link> -->
</div>
</fieldset>
</form>
</div>
<div class="clear"></div>
<div v-if=response class="text-red"><p class="vertical-5p lead">{{response}}</p></div>
</div>
</div>
</div>
......@@ -51,7 +47,12 @@
</template>
<script>
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import api from '../api'
import config from '../../src/config'
Vue.use(VeeValidate)
export default {
name: 'Signup',
......@@ -59,62 +60,69 @@ export default {
return {
section: 'Signup',
loading: '',
username: '',
email: '',
password: '',
cnfpassword: '',
response: ''
}
},
methods: {
checkCreds() {
const { username, password } = this
signUp() {
this.toggleLoading()
this.resetResponse()
this.$store.commit('TOGGLE_LOADING')
/* Making API call to authenticate a user */
if (this.email === '' && this.password === '' && this.cnfpassword === '') {
this.response = 'All Fields are required'
} else if (this.email === '') {
this.response = 'Email Id is required'
} else if (this.password === '') {
this.response = 'Password is required'
} else if (this.cnfpassword === '') {
this.response = 'Confirm Password is required'
}
if (this.password !== '' && this.cnfpassword !== '' && this.password !== this.cnfpassword) {
this.response = 'Password and Confirm Password Doesnot Match'
}
if (this.response !== '') {
var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
return
}
var params = {'email': this.email, 'password': this.password, 'client_id': config.clientId, 'client_secret': config.clientSecret}
api
.request('post', '/Signup', { username, password })
.request('post', 'signup', params)
.then(response => {
this.toggleLoading()
var data = response.data
/* Checking if error object was returned from the server */
if (data.error) {
var errorName = data.error.name
if (errorName) {
this.response =
errorName === 'InvalidCredentialsError'
? 'Username/Password incorrect. Please try again.'
: errorName
} else {
this.response = data.error
if (data.status === 'success') {
// this.$store.commit('SET_USER', data.data.user)
// this.$store.commit('SET_TOKEN', data.data.access_token)
if (window.localStorage) {
window.localStorage.setItem('user', JSON.stringify(data.data.user))
window.localStorage.setItem('token', data.data.access_token)
}
} else {
this.response = data.data.message
var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
return
}
/* Setting user in the state and caching record to the localStorage */
if (data.user) {
var token = 'Bearer ' + data.token
this.$store.commit('SET_USER', data.user)
this.$store.commit('SET_TOKEN', token)
if (window.localStorage) {
window.localStorage.setItem('user', JSON.stringify(data.user))
window.localStorage.setItem('token', token)
}
this.$router.push(data.redirect ? data.redirect : '/')
if (data.data.user) {
this.$router.push('/tables')
}
})
.catch(error => {
.catch(() => {
this.$store.commit('TOGGLE_LOADING')
console.log(error)
this.response = 'Server appears to be offline'
this.toggleLoading()
var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
// this.toggleLoading()
})
},
toggleLoading() {
......@@ -138,6 +146,9 @@ body,
height: 100%;
background-color: #1a5c7c !important;
}
.cpoint{
cursor: pointer !important;
}
......
src/components/views/Tables.vue
......@@ -4,124 +4,36 @@
<div class="col-md-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Data Table With Full Features</h3>
<h3 class="box-title">Transaction Lists</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
<div class="row">
<div class="col-sm-6">
<div id="example1_length" class="dataTables_length">
</div>
<div id="example1_length" class="dataTables_length"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12 table-responsive">
<table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
<thead>
<tr role="row">
<th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Rendering engine</th>
<th aria-label="Browser: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Browser</th>
<th aria-label="Platform(s): activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Platform(s)</th>
<th aria-label="Engine version: activate to sort column ascending" style="width: 142px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Engine version</th>
<th aria-label="CSS grade: activate to sort column ascending" style="width: 101px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">CSS grade</th>
<th aria-label="Date: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Date</th>
<th aria-label="Description: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Description</th>
<th aria-label="Amount: activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Amount</th>
</tr>
</thead>
<tbody>
<tr class="even" role="row">
<td class="sorting_1">Blink</td>
<td>Iridium 54.0</td>
<td>GNU/Linux</td>
<td>54</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td>1.9</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td>1.8</td>
<td>A</td>
<!-- <tbody v-if="transactions">
<tr class="even" role="row" v-for="trans in transactions" :key="trans">
<td class="sorting_1">{{trans.date}}</td>
<td>{{trans.description}}</td>
<td>{{trans.amount}}</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td>1</td>
<td>A</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="1" rowspan="1">Rendering engine</th>
<th colspan="1" rowspan="1">Browser</th>
<th colspan="1" rowspan="1">Platform(s)</th>
<th colspan="1" rowspan="1">Engine version</th>
<th colspan="1" rowspan="1">CSS grade</th>
</tr>
</tfoot>
</tbody> -->
</table>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
......@@ -130,6 +42,8 @@
</template>
<script>
import api from '../../api'
import config from '../../config'
import $ from 'jquery'
// Require needed datatables modules
require('datatables.net')
......@@ -138,9 +52,38 @@ require('datatables.net-bs')
export default {
name: 'Tables',
mounted() {
this.getData()
this.loadDatatable()
this.access_token = localStorage.getItem('token')
},
methods: {
loadDatatable() {
this.$nextTick(() => {
$('#example1').DataTable()
})
},
getData() {
var params = {'client_id': config.clientId, 'client_secret': config.clientSecret, 'access_token': this.access_token}
var thisObj = this
api
.request('post', 'listTransactions', params)
.then(response => {
thisObj.toggleLoading()
var data = response.data
if (data.status === 'success') {
thisObj.transactions = data.data.resources
} else {
thisObj.response = data.data.message
}
})
.catch(() => {
thisObj.$store.commit('TOGGLE_LOADING')
thisObj.response = 'Server appears to be offline'
})
},
toggleLoading() {
this.loading = this.loading === '' ? 'loading' : ''
}
}
}
</script>
......
src/config/index.js
export default {
serverURI: '',
// serverURI: 'https://bridge.techlabz.in/',
serverURI: 'http://localhost:3000/',
clientId: '457f0b3a161f44d591540957331af34b',
clientSecret: 'gED8FX2b4IPeO2bg8htG59NKjIQSbczuDlSOBEfDLHO1Tmc7A4rhMqUCH1Ciwa4j',
fixedLayout: false,
hideLogoOnMobile: false
}
src/routes.js
......@@ -2,14 +2,12 @@ import DashView from './components/Dash.vue'
import LoginView from './components/Login.vue'
import SignupView from './components/Signup.vue'
import NotFoundView from './components/404.vue'
// Import Views - Dash
import TablesView from './components/views/Tables.vue'
// Routes
const routes = [
{
path: '/login',
path: '/',
component: LoginView
},
{
......@@ -17,14 +15,14 @@ const routes = [
component: SignupView
},
{
path: '/',
path: '/tables',
component: DashView,
children: [
{
path: 'tables',
alias: '',
component: TablesView,
name: 'Tables',
name: 'Transactions',
meta: {description: 'Simple and advance table in CoPilot'}
}
]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment