Skip to content

Commit 14aeeb1

Browse files
egaluzaegaluza
authored
Update application template (#14)
1 parent 9660595 commit 14aeeb1

20 files changed

+19555
-11291
lines changed

‎package-lock.json‎

Lines changed: 1554 additions & 1252 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"vue": "^2.6.11",
1515
"node-sass": "^4.11.0",
1616
"vue-router": "^3.0.1",
17-
"devextreme": "20.1-stable",
18-
"devextreme-vue": "20.1-stable"
17+
"devextreme": "^20.2.4",
18+
"devextreme-vue": "^20.2.4"
1919
},
2020
"devDependencies": {
2121
"@vue/cli-plugin-babel": "~4.5.0",
@@ -25,9 +25,9 @@
2525
"eslint": "^6.7.2",
2626
"eslint-plugin-vue": "^6.2.2",
2727
"vue-template-compiler": "^2.6.11",
28-
"devextreme-cli": "1.2.3",
28+
"devextreme-cli": "1.2.6",
2929
"sass-loader": "^7.1.0",
30-
"devextreme-themebuilder": "20.1-stable"
30+
"devextreme-themebuilder": "^20.2.4"
3131
},
3232
"eslintConfig": {
3333
"root": true,
@@ -48,4 +48,4 @@
4848
"last 2 versions",
4949
"not dead"
5050
]
51-
}
51+
}

‎src/App.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@
1111
<router-view name="content" />
1212
</div>
1313
<template #footer>
14-
<the-footer />
14+
<app-footer />
1515
</template>
1616
</router-view>
1717
</div>
1818
</div>
1919
</template>
2020

2121
<script>
22-
import TheFooter from "./components/the-footer";
22+
import AppFooter from "./components/app-footer";
2323
import { sizes, subscribe, unsubscribe } from "./utils/media-query";
2424
2525
function getScreenSizeInfo() {
@@ -60,7 +60,7 @@ export default {
6060
},
6161
6262
components: {
63-
TheFooter
63+
AppFooter
6464
}
6565
};
6666
</script>

‎src/auth.js‎

Lines changed: 96 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,101 @@
1-
let authenticated = true;
1+
const defaultUser = {
2+
email: '[email protected]',
3+
avatarUrl: 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'
4+
};
5+
26
export default {
3-
authenticated() {
4-
return authenticated;
7+
_user: defaultUser,
8+
loggedIn() {
9+
return !!this._user;
10+
},
11+
12+
async logIn(email, password) {
13+
try {
14+
// Send request
15+
console.log(email, password);
16+
this._user = { ...defaultUser, email };
17+
18+
return {
19+
isOk: true,
20+
data: this._user
21+
};
22+
}
23+
catch {
24+
return {
25+
isOk: false,
26+
message: "Authentication failed"
27+
};
28+
}
29+
},
30+
31+
async logOut() {
32+
this._user = null;
33+
},
34+
35+
async getUser() {
36+
try {
37+
// Send request
38+
39+
return {
40+
isOk: true,
41+
data: this._user
42+
};
43+
}
44+
catch {
45+
return {
46+
isOk: false
47+
};
48+
}
49+
},
50+
51+
async resetPassword(email) {
52+
try {
53+
// Send request
54+
console.log(email);
55+
56+
return {
57+
isOk: true
58+
};
59+
}
60+
catch {
61+
return {
62+
isOk: false,
63+
message: "Failed to reset password"
64+
};
65+
}
566
},
6-
logIn() {
7-
authenticated = true;
67+
68+
async changePassword(email, recoveryCode) {
69+
try {
70+
// Send request
71+
console.log(email, recoveryCode);
72+
73+
return {
74+
isOk: true
75+
};
76+
}
77+
catch {
78+
return {
79+
isOk: false,
80+
message: "Failed to change password"
81+
}
82+
}
883
},
9-
logOut() {
10-
authenticated = false;
84+
85+
async createAccount(email, password) {
86+
try {
87+
// Send request
88+
console.log(email, password);
89+
90+
return {
91+
isOk: true
92+
};
93+
}
94+
catch {
95+
return {
96+
isOk: false,
97+
message: "Failed to create account"
98+
};
99+
}
11100
}
12101
};

‎src/components/the-footer.vue‎ renamed to ‎src/components/app-footer.vue‎

File renamed without changes.

‎src/components/header-toolbar.vue‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,50 @@
66
location="before"
77
css-class="menu-button"
88
>
9-
<!-- eslint-disable vue/no-unused-vars -->
10-
<dx-button
11-
icon="menu"
12-
styling-mode="text"
13-
@click="toggleMenuFunc"
14-
slot-scope="_"
15-
/>
16-
<!-- eslint-enable -->
9+
<template #default>
10+
<dx-button
11+
icon="menu"
12+
styling-mode="text"
13+
@click="toggleMenuFunc"
14+
/>
15+
</template>
1716
</dx-item>
1817

1918
<dx-item
2019
v-if="title"
2120
location="before"
2221
css-class="header-title dx-toolbar-label"
2322
>
24-
<!-- eslint-disable vue/no-unused-vars -->
25-
<div slot-scope="_">{{ title }}</div>
26-
<!-- eslint-enable -->
23+
<template>
24+
<div>{{ title }}</div>
25+
</template>
2726
</dx-item>
2827

2928
<dx-item
3029
location="after"
3130
locate-in-menu="auto"
3231
menu-item-template="menuUserItem"
3332
>
34-
<!-- eslint-disable vue/no-unused-vars -->
35-
<div slot-scope="_">
36-
<!-- eslint-enable -->
37-
<dx-button
38-
class="user-button authorization"
39-
:width="210"
40-
height="100%"
41-
styling-mode="text"
42-
>
43-
<user-panel :menu-items="userMenuItems" menu-mode="context" />
44-
</dx-button>
45-
</div>
33+
<template #default>
34+
<div>
35+
<dx-button
36+
class="user-button authorization"
37+
:width="210"
38+
height="100%"
39+
styling-mode="text"
40+
>
41+
<user-panel :user="user" :menu-items="userMenuItems" menu-mode="context" />
42+
</dx-button>
43+
</div>
44+
</template>
4645
</dx-item>
47-
<!-- eslint-disable vue/no-unused-vars -->
48-
<user-panel
49-
:menu-items="userMenuItems"
50-
menu-mode="list"
51-
slot-scope="_"
52-
slot="menuUserItem"
53-
/>
54-
<!-- eslint-enable -->
46+
<template #menuUserItem>
47+
<user-panel
48+
:user="user"
49+
:menu-items="userMenuItems"
50+
menu-mode="list"
51+
/>
52+
</template>
5553
</dx-toolbar>
5654
</header>
5755
</template>
@@ -70,12 +68,17 @@ export default {
7068
toggleMenuFunc: Function,
7169
logOutFunc: Function
7270
},
71+
created() {
72+
auth.getUser().then((e) => this.user = e.data);
73+
},
7374
data() {
7475
return {
76+
user: { },
7577
userMenuItems: [
7678
{
7779
text: "Profile",
78-
icon: "user"
80+
icon: "user",
81+
onClick: this.onProfileClick
7982
},
8083
{
8184
text: "Logout",
@@ -92,6 +95,12 @@ export default {
9295
path: "/login-form",
9396
query: { redirect: this.$route.path }
9497
});
98+
},
99+
onProfileClick() {
100+
this.$router.push({
101+
path: "/profile",
102+
query: { redirect: this.$route.path }
103+
});
95104
}
96105
},
97106
components: {

‎src/components/user-panel.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="image-container">
55
<div class="user-image" />
66
</div>
7-
<div class="user-name">[email protected]</div>
7+
<div class="user-name">{{user.email}}</div>
88
</div>
99

1010
<dx-context-menu
@@ -33,7 +33,8 @@ import DxList from "devextreme-vue/list";
3333
export default {
3434
props: {
3535
menuMode: String,
36-
menuItems: Array
36+
menuItems: Array,
37+
user: Object
3738
},
3839
components: {
3940
DxContextMenu,

‎src/layouts/side-nav-inner-toolbar.vue‎

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -21,34 +21,31 @@
2121
<slot name="footer" />
2222
</dx-scroll-view>
2323
</div>
24-
<!-- eslint-disable vue/no-unused-vars -->
25-
<side-nav-menu
26-
slot="menu"
27-
slot-scope="_"
28-
:compact-mode="!menuOpened"
29-
@click="handleSideBarClick"
30-
>
31-
<!-- eslint-enable-->
32-
<dx-toolbar id="navigation-header">
33-
<dx-item v-if="!isXSmall" location="before" css-class="menu-button">
34-
<!-- eslint-disable vue/no-unused-vars -->
35-
<dx-button
36-
icon="menu"
37-
styling-mode="text"
38-
@click="toggleMenu"
39-
slot-scope="_"
40-
/>
41-
<!-- eslint-enable -->
42-
</dx-item>
43-
<dx-item location="before" css-class="header-title dx-toolbar-label">
44-
<!-- eslint-disable vue/no-unused-vars -->
45-
<div slot-scope="_">
46-
<div>{{ title }}</div>
47-
</div>
48-
<!-- eslint-enable -->
49-
</dx-item>
50-
</dx-toolbar>
51-
</side-nav-menu>
24+
<template #menu>
25+
<side-nav-menu
26+
:compact-mode="!menuOpened"
27+
@click="handleSideBarClick"
28+
>
29+
<dx-toolbar id="navigation-header">
30+
<dx-item v-if="!isXSmall" location="before" css-class="menu-button">
31+
<template #default>
32+
<dx-button
33+
icon="menu"
34+
styling-mode="text"
35+
@click="toggleMenu"
36+
/>
37+
</template>
38+
</dx-item>
39+
<dx-item location="before" css-class="header-title dx-toolbar-label">
40+
<template #default>
41+
<div>
42+
<div>{{ title }}</div>
43+
</div>
44+
</template>
45+
</dx-item>
46+
</dx-toolbar>
47+
</side-nav-menu>
48+
</template>
5249
</dx-drawer>
5350
</div>
5451
</template>

‎src/layouts/side-nav-outer-toolbar.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,12 @@
2121
<slot />
2222
<slot name="footer" />
2323
</dx-scroll-view>
24-
<!-- eslint-disable vue/no-unused-vars -->
25-
<side-nav-menu
26-
slot="menu"
27-
slot-scope="_"
28-
:compact-mode="!menuOpened"
29-
@click="handleSideBarClick"
30-
/>
31-
<!-- eslint-enable -->
24+
<template #menu>
25+
<side-nav-menu
26+
:compact-mode="!menuOpened"
27+
@click="handleSideBarClick"
28+
/>
29+
</template>
3230
</dx-drawer>
3331
</div>
3432
</template>

0 commit comments

Comments
 (0)