Skip to content

Commit 82da53b

Browse files
StubyProjectsStubyProjects
committed
dropdowns are closing on click outside,
used real registered getters
1 parent 298e611 commit 82da53b

File tree

8 files changed

+106
-27
lines changed

8 files changed

+106
-27
lines changed

‎components/Navigation/NotificationDropdown.vue

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="text-anthrazit font-bold">
3-
<div @click="dropdownActivated=!dropdownActivated"
3+
<div @click="TOGGLE_NOTIFICATION_DROPDOWN()"
44
class="rounded-full cursor-pointer p-2 hover:bg-primary relative">
55
<img src="~/assets/notification.png" alt="login symbol">
66
<div v-if="getNotifications.length > 0"
@@ -10,7 +10,7 @@
1010
</div>
1111
</div>
1212

13-
<div v-if="dropdownActivated" class="absolute z-50 mt-3 bg-white left-0 mr-6 rounded shadow-md w-full">
13+
<div v-if="isDroppedDown" class="absolute z-50 mt-3 bg-white left-0 mr-6 rounded shadow-md w-full">
1414

1515
<div v-if="getNotifications.length > 0">
1616
<div class="relative px-5 py-4 hover:bg-gray-200 cursor-pointer" v-for="(notification, index) in getNotifications">
@@ -47,7 +47,7 @@
4747
</template>
4848

4949
<script>
50-
import { mapGetters, mapActions } from 'vuex'
50+
import { mapGetters, mapActions, mapMutations } from 'vuex'
5151
5252
export default {
5353
data() {
@@ -56,10 +56,14 @@
5656
}
5757
},
5858
methods: {
59-
...mapActions('notifications', ['deleteNotification'])
59+
...mapActions('notifications', ['deleteNotification']),
60+
...mapMutations(['TOGGLE_NOTIFICATION_DROPDOWN'])
6061
},
6162
computed: {
62-
...mapGetters('notifications',['getNotifications'])
63+
...mapGetters({
64+
getNotifications: 'notifications/getNotifications',
65+
isDroppedDown: 'isNotificationDropDownActivated'
66+
})
6367
}
6468
}
6569
</script>

‎components/Profile/Settings.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -131,11 +131,11 @@
131131
},
132132
mounted() {
133133
if (this.$auth.user.name) {
134-
this.firstName = this.$store.getters['profile/getUserProfile'].userAuth0.given_name;
135-
this.lastName = this.$store.getters['profile/getUserProfile'].userAuth0.family_name;
134+
this.firstName = this.getUserProfile.userAuth0.given_name;
135+
this.lastName = this.getUserProfile.userAuth0.family_name;
136136
}
137-
if(this.$store.getters['profile/getUserProfile'].profileIsCompleted) {
138-
this.birthday = this.$store.getters['profile/getUserProfile'].mangoPayUser.Birthday.toString()
137+
if(this.getUserProfile.profileIsCompleted) {
138+
this.birthday = this.getUserProfile.mangoPayUser.Birthday.toString()
139139
}
140140
141141
this.$v.$touch();
@@ -160,7 +160,7 @@
160160
let url = URL.createObjectURL(event.target.files[0])
161161
},
162162
getSocialProfiles(identityProvider) {
163-
const identities = this.$store.getters['profile/getUserProfile'].userAuth0.identities
163+
const identities = this.getUserProfile.userAuth0.identities
164164
return identities.filter(identity => identity.provider === identityProvider).length > 0 ? 'Verbunden' : '';
165165
},
166166
completeUserRegistration() {

‎components/Profile/Shipping.vue

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,16 +71,16 @@
7171
</template>
7272

7373
<script>
74-
import { mapActions } from 'vuex'
74+
import { mapActions, mapGetters } from 'vuex'
7575
import { validationMixin } from 'vuelidate'
7676
import { required,numeric } from 'vuelidate/lib/validators'
7777
7878
export default {
7979
mixins: [validationMixin],
8080
mounted() {
81-
if (this.$store.getters['profile/getUserProfile'].profileIsCompleted
82-
&& this.$store.getters['profile/getUserProfile'].mangoPayUser.Address.AddressLine1) {
83-
Object.assign(this.Address , this.$store.getters['profile/getUserProfile'].mangoPayUser.Address);
81+
if (this.getUserProfile.profileIsCompleted
82+
&& this.getUserProfile.mangoPayUser.Address.AddressLine1) {
83+
Object.assign(this.Address , this.getUserProfile.mangoPayUser.Address);
8484
}
8585
},
8686
data() {
@@ -105,6 +105,9 @@
105105
}
106106
}
107107
},
108+
computed: {
109+
...mapGetters('profile', ['getUserProfile'])
110+
},
108111
validations: {
109112
Address: {
110113
AddressLine1: {

‎components/ProfileDropdown.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div @click="TOGGLE_PROFILE_DROPDOWN()" class="absolute z-50 mt-3 bg-white right-0 mr-6 rounded shadow-md w-2/3">
2+
<div @click.stop="TOGGLE_PROFILE_DROPDOWN()" class="absolute shadow z-50 mt-3 bg-white right-0 mr-6 rounded w-2/3">
33
<nuxt-link to="/profile">
44
<div class="px-5 py-2 hover:bg-gray-200 cursor-pointer">Mein Profil</div>
55
</nuxt-link>

‎components/TheHeader.vue

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
Einloggen
4646
</a>
4747

48-
<app-profile-dropdown v-if="isDropDownActivated && $auth.loggedIn"></app-profile-dropdown>
48+
<app-profile-dropdown v-if="isProfileDropDownActivated && $auth.loggedIn"></app-profile-dropdown>
4949

5050
</div>
5151
</div>
@@ -83,18 +83,17 @@
8383
return {
8484
view: {
8585
atTopOfPage: true,
86-
profileDropDownActivated: false,
8786
}
8887
}
8988
},
9089
beforeMount() {
9190
window.addEventListener('scroll', this.handleScroll);
9291
},
9392
computed: {
94-
...mapGetters(["isDropDownActivated"])
93+
...mapGetters(["isProfileDropDownActivated"])
9594
},
9695
methods: {
97-
...mapMutations(["TOGGLE_PROFILE_DROPDOWN"]),
96+
...mapMutations(["TOGGLE_PROFILE_DROPDOWN","CLOSE_PROFILE_DROPDOWN"]),
9897
handleScroll() {
9998
if (window.pageYOffset > 0) {
10099
// user is scrolled

‎layouts/default.vue

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<template>
22
<div>
33
<TheHeader/>
4-
<nuxt />
4+
<div @click="closeDropDowns()">
5+
<nuxt/>
6+
</div>
57
<TheSnackbar/>
68
<TheFooter/>
79
</div>
@@ -11,12 +13,20 @@
1113
import TheHeader from '@/components/TheHeader'
1214
import TheFooter from "@/components/TheFooter";
1315
import TheSnackbar from "../components/TheSnackbar";
16+
import { mapMutations } from 'vuex'
1417
1518
export default {
1619
components: {
1720
TheSnackbar,
1821
TheFooter,
1922
TheHeader
23+
},
24+
methods: {
25+
...mapMutations(['CLOSE_PROFILE_DROPDOWN','CLOSE_NOTIFICATION_DROPDOWN']),
26+
closeDropDowns() {
27+
this.CLOSE_PROFILE_DROPDOWN();
28+
this.CLOSE_NOTIFICATION_DROPDOWN();
29+
}
2030
}
2131
}
2232
</script>

‎pages/profile/Email/index.vue

Lines changed: 55 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,66 @@
11
<template>
2-
<div>
3-
email
2+
<div class="max-w-2xl mt-16 mx-auto">
3+
<div class="mt-5">
4+
<h3 class="font-bold text-2xl">Neue E-Mail</h3>
5+
6+
<p class="mt-3">
7+
Du kannst dich mit dieser E-Mail anmelden, sobald du sie bestätigt hast. <br/>
8+
Wenn du deine neue E-Mail angegeben hast, wird eine Bestätigungsmail an diese Mail gesendet.
9+
Bis dahin musst du dich mit deiner aktuellen Mail anmelden.
10+
</p>
11+
12+
13+
<div class="mt-5">
14+
<button
15+
@click="updateEmail()"
16+
class="font-bold rounded shadow block bg-primary hover:bg-white px-4 py-2">
17+
E-Mail aktualisieren
18+
</button>
19+
</div>
20+
421
</div>
22+
</div>
523
</template>
624

725
<script>
8-
export default {
9-
name: "index",
10-
middleware: 'changeEmail'
26+
import { validationMixin } from 'vuelidate'
27+
import { required, email } from 'vuelidate/lib/validators'
28+
29+
export default {
30+
mounted() {
31+
this.email = this.$auth.user.email
32+
},
33+
mixins: [validationMixin],
34+
middleware: ['auth', 'changeEmail'],
35+
data() {
36+
return {
37+
email: ""
38+
}
39+
},
40+
validations: {
41+
email: {
42+
required,
43+
email
44+
}
45+
},
46+
methods: {
47+
updateEmail() {
48+
if (this.$v.$invalid) {
49+
this.$v.$touch();
50+
} else {
51+
alert('E-Mail changed')
52+
}
53+
}
1154
}
55+
}
1256
</script>
1357

1458
<style scoped>
59+
.is-invalid {
60+
@apply border border-red-500;
61+
}
1562
63+
.error {
64+
@apply text-sm text-red-500;
65+
}
1666
</style>

‎store/index.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,28 @@
11
export const state = () => ({
2-
profileDropDownActivated: false
2+
profileDropDownActivated: false,
3+
notificationDropdownActivated: false
34
})
45

56
export const getters = {
6-
isDropDownActivated: state => {
7+
isProfileDropDownActivated: state => {
78
return state.profileDropDownActivated
9+
},
10+
isNotificationDropDownActivated: state => {
11+
return state.notificationDropdownActivated
812
}
913
}
1014

1115
export const mutations = {
1216
TOGGLE_PROFILE_DROPDOWN(state) {
1317
state.profileDropDownActivated = !state.profileDropDownActivated
1418
},
19+
CLOSE_PROFILE_DROPDOWN(state) {
20+
state.profileDropDownActivated = false
21+
},
22+
TOGGLE_NOTIFICATION_DROPDOWN(state) {
23+
state.notificationDropdownActivated = !state.notificationDropdownActivated
24+
},
25+
CLOSE_NOTIFICATION_DROPDOWN(state) {
26+
state.notificationDropdownActivated = false
27+
},
1528
}

0 commit comments

Comments
 (0)