Skip to content

Commit 81f6dcb

Browse files
author
jfusco
committed
Add more functionality to test app
Add user detail and simplify loader component. Create a popover component to be used as the navigation eventually. Add eslinter to the project and bring in vue-eslint-parser as the engine and add parserOptions according to documentation. User beforeRouteEnter to fetch the users before continuing route to ensure users are there for the detail screen. Move some SCSS in to the components and scope it. Create an alias in webpack to resolve the variables file so it's easy to import in to any file.
1 parent 68757fc commit 81f6dcb

File tree

15 files changed

+464
-99
lines changed

15 files changed

+464
-99
lines changed

‎.eslintrc‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
{
2+
"parser": "vue-eslint-parser",
3+
"parserOptions": {
4+
"parser": "babel-eslint",
5+
"sourceType": "module",
6+
"allowImportExportEverywhere": false
7+
},
8+
"rules": {
9+
"eqeqeq": [
10+
2,
11+
"allow-null"
12+
],
13+
"no-extra-semi": 2,
14+
"semi": [
15+
0,
16+
"never"
17+
],
18+
"no-cond-assign": 2,
19+
"accessor-pairs": 2,
20+
"no-with": 2,
21+
"no-sparse-arrays": 2,
22+
"vars-on-top": 2,
23+
"no-void": 2,
24+
"no-undef": 2,
25+
"no-caller": 2,
26+
"no-new": 2,
27+
"yoda": 2,
28+
"no-whitespace-before-property": 2,
29+
"no-inner-declarations": 2,
30+
"no-ex-assign": 2,
31+
"no-else-return": 2,
32+
"no-dupe-keys": 2,
33+
"constructor-super": 2,
34+
"no-extra-boolean-cast": 2,
35+
"no-obj-calls": 2,
36+
"no-empty": 2,
37+
"semi-spacing": [
38+
"error",
39+
{
40+
"before": false,
41+
"after": true
42+
}
43+
],
44+
"keyword-spacing": [
45+
"error",
46+
{
47+
"overrides": {
48+
"if": {
49+
"after": true
50+
},
51+
"else": {
52+
"before": true,
53+
"after": true
54+
},
55+
"for": {
56+
"after": false
57+
},
58+
"while": {
59+
"after": false
60+
},
61+
"function": {
62+
"after": true
63+
}
64+
}
65+
}
66+
],
67+
"space-before-function-paren": [
68+
"error",
69+
{
70+
"anonymous": "never",
71+
"named": "never"
72+
}
73+
],
74+
"comma-dangle": [
75+
2,
76+
"never"
77+
],
78+
"comma-style": [
79+
2,
80+
"last"
81+
],
82+
"comma-spacing": [
83+
"error",
84+
{
85+
"before": false,
86+
"after": true
87+
}
88+
],
89+
"quotes": [
90+
2,
91+
"single",
92+
"avoid-escape"
93+
],
94+
"no-trailing-spaces": 2,
95+
"no-lonely-if": 0,
96+
"eol-last": 2,
97+
"no-nested-ternary": 2,
98+
"space-in-parens": [
99+
2,
100+
"never"
101+
],
102+
"brace-style": [
103+
2,
104+
"1tbs",
105+
{
106+
"allowSingleLine": true
107+
}
108+
],
109+
"object-curly-spacing": [
110+
2,
111+
"always",
112+
{
113+
"objectsInObjects": true,
114+
"arraysInObjects": true
115+
}
116+
],
117+
"computed-property-spacing": [
118+
"error",
119+
"never"
120+
],
121+
"block-spacing": [
122+
"error",
123+
"always"
124+
],
125+
"one-var": [
126+
2,
127+
{
128+
"let": "always",
129+
"const": "never"
130+
}
131+
],
132+
"no-spaced-func": 2,
133+
"spaced-comment": 0,
134+
"quote-props": [
135+
2,
136+
"as-needed",
137+
{
138+
"keywords": true
139+
}
140+
],
141+
"linebreak-style": [
142+
"error",
143+
"unix"
144+
],
145+
"guard-for-in": 2,
146+
"prefer-const": 2,
147+
"no-var": 2,
148+
"prefer-arrow-callback": 2,
149+
"no-const-assign": 2,
150+
"arrow-body-style": [
151+
2,
152+
"always"
153+
],
154+
"arrow-parens": [
155+
2,
156+
"as-needed"
157+
],
158+
"arrow-spacing": [
159+
2,
160+
{
161+
"before": true,
162+
"after": true
163+
}
164+
]
165+
},
166+
"globals": {
167+
"console": true,
168+
"alert": true,
169+
"document": true,
170+
"window": true,
171+
"setTimeout": true,
172+
"setInterval": true,
173+
"clearTimeout": true
174+
}
175+
}

‎index.html‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,6 @@
88
body, html {
99
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1010
}
11-
nav ul {
12-
list-style: none;
13-
padding: 0;
14-
margin: 0;
15-
}
16-
nav ul li {
17-
display: inline-block;
18-
}
19-
nav ul li a {
20-
display: block;
21-
padding: 5px;
22-
}
23-
nav a.active, #users-page li a.active {
24-
color: black;
25-
pointer-events: none;
26-
cursor: default;
27-
}
2811
a {
2912
font-family: inherit;
3013
text-decoration: none;
@@ -33,27 +16,6 @@
3316
a:hover {
3417
color: black;
3518
}
36-
#users-page {
37-
position: relative;
38-
}
39-
#users-page ul {
40-
list-style: none;
41-
padding: 0;
42-
margin: 0;
43-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
44-
font-size: 14px;
45-
width: 300px;
46-
}
47-
#users-page ul li {
48-
border-bottom: 1px dashed lightgray;
49-
padding: 10px 5px;
50-
display: flex;
51-
justify-content: space-between;
52-
}
53-
#users-page .fetching {
54-
position: absolute;
55-
font-weight: bold;
56-
}
5719
.editing {
5820
display: flex;
5921
}

‎package.json‎

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,40 @@
11
{
2-
"name": "vue-router-vuex-example",
3-
"version": "1.2.1",
4-
"description": "",
5-
"scripts": {
6-
"start": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
7-
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
8-
},
9-
"dependencies": {
10-
"vue": "^2.1.10",
11-
"vue-resource": "^1.2.0",
12-
"vue-router": "^2.2.0",
13-
"vuex": "^2.1.1",
14-
"vuex-router-sync": "^4.1.2"
15-
},
16-
"devDependencies": {
17-
"babel-core": "^6.0.0",
18-
"babel-loader": "^6.0.0",
19-
"babel-plugin-transform-class-properties": "^6.19.0",
20-
"babel-plugin-transform-function-bind": "^6.8.0",
21-
"babel-plugin-transform-object-rest-spread": "^6.20.2",
22-
"babel-plugin-transform-runtime": "^6.22.0",
23-
"babel-preset-es2015": "^6.0.0",
24-
"babel-preset-stage-2": "^6.22.0",
25-
"babel-register": "^6.18.0",
26-
"cross-env": "^3.0.0",
27-
"css-loader": "^0.26.1",
28-
"file-loader": "^0.10.0",
29-
"vue-loader": "^10.0.0",
30-
"vue-template-compiler": "^2.1.0",
31-
"webpack": "^2.2.0",
32-
"webpack-dev-server": "^2.2.0"
33-
}
2+
"name": "vue-router-vuex-example",
3+
"version": "1.2.1",
4+
"description": "",
5+
"scripts": {
6+
"start": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
7+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
8+
},
9+
"dependencies": {
10+
"vue": "^2.2.1",
11+
"vue-resource": "^1.2.0",
12+
"vue-router": "^2.3.0",
13+
"vuex": "^2.2.1",
14+
"vuex-router-sync": "^4.1.2"
15+
},
16+
"devDependencies": {
17+
"babel-core": "^6.0.0",
18+
"babel-eslint": "^7.1.1",
19+
"babel-loader": "^6.0.0",
20+
"babel-plugin-transform-class-properties": "^6.19.0",
21+
"babel-plugin-transform-function-bind": "^6.8.0",
22+
"babel-plugin-transform-object-rest-spread": "^6.20.2",
23+
"babel-plugin-transform-runtime": "^6.22.0",
24+
"babel-preset-es2015": "^6.0.0",
25+
"babel-preset-stage-2": "^6.22.0",
26+
"babel-register": "^6.18.0",
27+
"cross-env": "^3.0.0",
28+
"css-loader": "^0.26.1",
29+
"eslint": "^3.16.1",
30+
"eslint-loader": "^1.6.3",
31+
"file-loader": "^0.10.0",
32+
"node-sass": "^4.5.0",
33+
"sass-loader": "^6.0.2",
34+
"vue-eslint-parser": "^1.0.0",
35+
"vue-loader": "^11.1.3",
36+
"vue-template-compiler": "^2.2.0",
37+
"webpack": "^2.2.0",
38+
"webpack-dev-server": "^2.2.0"
39+
}
3440
}

‎src/components/Loader.vue‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
<template>
22
<div>
3-
<div v-if="show">{{message}}</div>
4-
<div v-if="!show">Done loading</div>
3+
<div v-if="loader.show">{{loader.message}}</div>
4+
<div v-else>Done loading</div>
55
</div>
66
</template>
77

88
<script type="text/babel">
99
import Vue from 'vue'
10+
import { mapActions, mapState } from 'vuex'
1011
1112
export default Vue.component('loader', {
12-
props: {
13-
message: {
14-
type: String,
15-
required: true
16-
},
17-
show: {
18-
type: Boolean,
19-
required: true
20-
}
21-
}
13+
computed: mapState([
14+
'loader'
15+
])
2216
})
2317
</script>

‎src/components/Nav.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,30 @@
1919
2020
Vue.component('app-nav')
2121
</script>
22+
23+
<style lang="sass" scoped>
24+
@import '~styles/variables';
25+
26+
nav {
27+
ul {
28+
list-style: none;
29+
padding: $padding;
30+
margin: 0;
31+
32+
li {
33+
display: inline-block;
34+
}
35+
36+
a {
37+
display: block;
38+
padding: 5px;
39+
40+
&.active {
41+
color: black;
42+
pointer-events: none;
43+
cursor: default;
44+
}
45+
}
46+
}
47+
}
48+
</style>

0 commit comments

Comments
 (0)