Skip to content

Commit f0fca5f

Browse files
vedovellivedovelli
committed
Merge branch 'feature/element' into develop
2 parents d20db39 + aca0029 commit f0fca5f

File tree

10 files changed

+395
-351
lines changed

10 files changed

+395
-351
lines changed

‎client/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Codecasts.com.br - SPA - Starter Kit</title>
6+
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
67
</head>
78
<body>
89
<a href="https://github.com/codecasts/spa-starter-kit"><img style="position: absolute; top: 0; left: 0; border: 0; z-index: 2;" src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"></a>

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"dependencies": {
1616
"axios": "^0.15.2",
1717
"bootstrap-sass": "^3.3.7",
18+
"element-ui": "^1.0.7",
1819
"font-awesome": "^4.7.0",
1920
"jquery": "^3.1.1",
2021
"lodash": "^4.17.2",

‎client/src/app/auth/components/forms/singin.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
* Handle form's submit event
2323
*/
2424
submit() {
25-
const { email, password } = this
25+
const { email, password } = this // http://wesbos.com/destructuring-objects/
2626
this.attemptLogin({ email, password }) // this is a Vuex action
2727
.then(() => {
2828
this.setMessage({ type: 'error', message: [] }) // this is a Vuex action

‎client/src/app/auth/vuex/getters.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// http://vuex.vuejs.org/en/getters.html
22
import { isEmpty } from 'lodash'
33

4-
// if has token, we assumed that user is logged in our system
4+
// if has token, we assume that user is logged in our system
55
export const isLogged = ({ token }) => !isEmpty(token)
66
// get current user data
77
export const currentUser = ({ user }) => user

‎client/src/app/dashboard/main.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@
77

88
<template>
99
<div>
10-
<div class="text-center">
10+
<div class="cover-container">
1111
<img class="cover" src="http://vedovelli.com.br/spas.png" alt="Codecasts Single Page Application starter kit">
1212
<h4>A highly opinionated Single Page Application starter kit built on top of Vue.js and Laravel.</h4>
1313
</div>
1414
</div>
1515
</template>
1616

1717
<style scoped>
18+
.cover-container {
19+
margin-top: 70px;
20+
text-align: center;
21+
}
1822
.cover {
1923
max-width: 800px;
2024
}

‎client/src/components/general/spinner.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,10 @@
1919
.container {
2020
display: inline-block;
2121
width: 40px;
22+
color: #fff;
23+
position: absolute;
24+
z-index: 1;
25+
right: 18px;
26+
top: 18px;
2227
}
2328
</style>

‎client/src/components/root/navbar.vue‎

Lines changed: 48 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,88 @@
11

22
<script>
33
import { mapActions, mapGetters } from 'vuex'
4-
import { version } from '../../config'
54
import CcSpinner from '../general/spinner'
5+
import { version } from '../../config'
66
77
export default {
88
components: {
99
CcSpinner,
1010
},
1111
computed: {
12+
/**
13+
* See src/app/auth/vuex/getters.js
14+
*/
1215
...mapGetters(['currentUser', 'isLogged']),
1316
version() {
1417
return version
1518
},
1619
},
1720
watch: {
18-
isLogged(value) {
21+
isLogged(value) { // isLogged changes when the token changes
1922
if (value === false) {
2023
this.$router.push({ name: 'auth.singin' })
2124
}
2225
},
2326
},
2427
methods: {
28+
/**
29+
* Makes logout() action available withint this component
30+
* See /src/app/auth/vuex/actions.js
31+
*/
2532
...mapActions(['logout']),
33+
/* eslint-disable no-undef */
34+
navigate(name) {
35+
switch (name) {
36+
case 'codecasts':
37+
window.location = 'https://codecasts.com.br/'
38+
break;
39+
case 'logout':
40+
this.logout()
41+
break;
42+
default:
43+
this.$router.push({ name })
44+
break;
45+
}
46+
},
2647
},
2748
}
2849
</script>
2950

3051
<template>
3152
<div>
32-
<nav class="navbar navbar-default">
33-
<div class="container-fluid">
34-
<div class="navbar-header spacer">
35-
<a class="navbar-brand" href="http://www.codecasts.com.br/">
36-
Codecasts.com.br
37-
</a><br>
38-
<small class="version">version {{ version }}</small>
39-
</div>
40-
<div class="collapse navbar-collapse">
41-
<ul class="nav navbar-nav">
42-
<router-link tag="li" :to="{ name: 'dashboard.index' }" exact>
43-
<a>Dashboard</a>
44-
</router-link>
45-
<router-link tag="li" :to="{ name: 'categories.index', query: { page: 1 } }">
46-
<a>Categories</a>
47-
</router-link>
48-
<router-link tag="li" :to="{ name: 'products.index', query: { page: 1 } }">
49-
<a>Products</a>
50-
</router-link>
51-
</ul>
52-
<div class="nav navbar-form navbar-right">
53-
<cc-spinner></cc-spinner>
54-
<span class="username">{{ currentUser.name }}</span>
55-
<button class="btn btn-default btn-sm" @click="logout">Logout</button>
56-
</div>
57-
</div>
58-
</div>
59-
</nav>
53+
<cc-spinner></cc-spinner>
54+
<el-menu theme="dark" default-active="1" class="cc-navigation"
55+
mode="horizontal" @select="navigate">
56+
<el-menu-item index="codecasts" class="brand">Codecasts.com.br</el-menu-item>
57+
<el-menu-item index="dashboard.index">Dashboard</el-menu-item>
58+
<el-submenu index="menu-modules">
59+
<template slot="title">Modules</template>
60+
<el-menu-item index="categories.index">Categories</el-menu-item>
61+
<el-menu-item index="products.index">Products</el-menu-item>
62+
</el-submenu>
63+
<el-submenu index="menu-user" class="logout-button">
64+
<template slot="title">{{ currentUser.name }}</template>
65+
<el-menu-item index="logout">Logout</el-menu-item>
66+
</el-submenu>
67+
</el-menu>
68+
<small class="version">version {{ version }}</small>
6069
</div>
6170
</template>
6271

6372
<style scoped>
64-
.spacer {
65-
margin-left: 120px;
73+
.cc-navigation {
74+
padding-left: 115px;
75+
padding-right: 30px;
76+
}
77+
.brand {
78+
font-size: 1.2em;
6679
}
67-
.username {
68-
padding: 6px 20px;
69-
border-radius: 20px;
70-
background-color: #ddd;
71-
display: inline-block;
80+
.logout-button {
81+
float: right;
7282
}
7383
.version {
7484
position: absolute;
7585
right: 15px;
76-
top: 58px;
86+
top: 65px;
7787
}
7888
</style>

‎client/src/main.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { sync } from 'vuex-router-sync'
22
import Vue from 'vue'
3+
import ElementUI from 'element-ui'
4+
import locale from 'element-ui/lib/locale/lang/en'
35
import Root from './Root'
46

57
/**
@@ -28,6 +30,11 @@ import eventbus from './plugins/eventbus'
2830
*/
2931
require('./includes')
3032

33+
/**
34+
* Element UI
35+
*/
36+
Vue.use(ElementUI, { locale })
37+
3138
/**
3239
* Make $http avaible to all components
3340
* Send store and router to httpPlugin (injection)

0 commit comments

Comments
 (0)