Skip to content

Commit 81cae36

Browse files
supalarrysupalarry
committed
WIP: profile gender, preferences, interests, bio
1 parent 95b8caa commit 81cae36

File tree

4 files changed

+183
-3
lines changed

4 files changed

+183
-3
lines changed

‎frontend/src/assets/css/tailwind.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -482,6 +482,18 @@
482482
.slider-dropdown:focus {
483483
outline:none;
484484
}
485+
486+
.settings-button-choice {
487+
@apply border-gray-300;
488+
@apply rounded-lg;
489+
@apply border;
490+
@apply px-4;
491+
@apply py-2;
492+
@apply w-auto;
493+
@apply cursor-pointer;
494+
@apply text-sm;
495+
@apply text-center;
496+
}
485497
}
486498

487499
@tailwind utilities;

‎frontend/src/components/shared/DropdownDisplayChoice.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<div class="focus:outline-none sm:flex-none" @focusout="close" tabindex="0">
4+
<div v-bind:class="{'settings-button-choice': true, 'border-gray-matcha': !closed}" @click="toggle">
5+
<h1 v-bind:class="{ 'opacity-50': closed, 'noSelect': true, 'capitalize': true }">{{ currentOption }}</h1>
6+
</div>
7+
<div v-bind:class="{'sort-dropdown': true, 'z-10': true , 'hidden': closed, 'h-auto': options.length < 5}">
8+
<h1 v-for="(option, index) in options" :key="option + index + option"
9+
v-bind:class="{'capitalize': true, 'sort-dropdown-option': true, 'border-b': index !== options.length - 1, 'font-extrabold': option === currentOption, 'text-gray-matcha': option === currentOption}"
10+
v-on:click="select(option)">
11+
{{option}}
12+
</h1>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
props: ['options', 'name', 'position', 'startingOption'],
20+
data: () => ({
21+
closed: true,
22+
currentOption: '',
23+
}),
24+
methods: {
25+
select(option) {
26+
this.close();
27+
this.currentOption = option;
28+
this.$emit('saveSingleChoice', this.name, option);
29+
},
30+
toggle() {
31+
this.closed = !this.closed;
32+
},
33+
close() {
34+
this.closed = true;
35+
},
36+
},
37+
beforeMount() {
38+
this.currentOption = this.startingOption;
39+
},
40+
};
41+
</script>

‎frontend/src/components/shared/DropdownDisplayChoices.vue‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<div class="focus:outline-none ml-2 sm:flex-none" @focusout="close" tabindex="0">
4+
<div v-bind:class="{'settings-button-choice': true, 'rounded-lg': true , 'border-gray-matcha': !closed}" @click="toggle">
5+
<h1 v-bind:class="{ 'opacity-50': closed, 'noSelect': true, 'capitalize': true }">
6+
{{ getName }}</h1>
7+
</div>
8+
<div v-bind:class="{'sort-dropdown': true, 'z-10': true, 'h-auto': options.length < 5 , 'hidden': closed, 'right-0': position === 'right', 'md:right-auto': position === 'right'}">
9+
<h1 v-for="(option, index) in options" :key="option + index + option"
10+
v-bind:class="{'sort-dropdown-option': true, 'border-b': index !== options.length - 1, 'capitalize': true,
11+
'font-extrabold': selectedFilters.indexOf(option) !== -1, 'text-gray-matcha': selectedFilters.indexOf(option) !== -1}"
12+
v-on:click="select(option)">
13+
{{option}}
14+
</h1>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
props: ['options', 'name', 'position', 'startingOptions', 'min', 'max'],
22+
data: () => ({
23+
closed: true,
24+
selectedFilters: [],
25+
}),
26+
methods: {
27+
select(option) {
28+
const optionIndex = this.selectedFilters.indexOf(option);
29+
if (optionIndex !== -1) {
30+
if (this.selectedFilters.length > this.min) {
31+
this.selectedFilters.splice(optionIndex, 1);
32+
this.$emit('saveMultipleChoice', this.name, this.selectedFilters);
33+
}
34+
} else if (this.selectedFilters.length < this.max) {
35+
this.selectedFilters.push(option);
36+
this.$emit('saveMultipleChoice', this.name, this.selectedFilters);
37+
}
38+
},
39+
toggle() {
40+
this.closed = !this.closed;
41+
},
42+
close() {
43+
this.closed = true;
44+
},
45+
},
46+
computed: {
47+
getName() {
48+
if (this.selectedFilters.length) {
49+
return this.selectedFilters[0];
50+
}
51+
return this.name;
52+
},
53+
},
54+
beforeMount() {
55+
if (this.startingOptions) {
56+
this.selectedFilters = this.startingOptions;
57+
}
58+
},
59+
};
60+
</script>

‎frontend/src/views/app/Settings.vue‎

Lines changed: 70 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,66 @@
4444
v-bind:type="'password'"
4545
v-bind:currentValuePassed="''"></AccountInput>
4646
</section>
47+
<section v-if="getShow === 'profile'" class="profile-section flex flex-col items-start z-10 absolute bg-white-matcha px-8 pb-4 w-full top-0 left-0 h-screen md:ml-4 md:relative md:shadow-md md:rounded-md">
48+
<SectionHeader v-bind:name="'profile'" v-on:click.native="closeSetting()"></SectionHeader>
49+
<div>
50+
<h1 class="inline-block mr-4">I am</h1>
51+
<DropdownDisplayChoice
52+
class="inline-block"
53+
v-on:saveSingleChoice="saveSingleChoice"
54+
v-bind:name="'gender'"
55+
v-bind:starting-option="this.$store.getters.getLoggedInUser.gender"
56+
v-bind:options="['male', 'female', 'other']"></DropdownDisplayChoice>
57+
</div>
58+
<div class="mt-4">
59+
<h1 class="inline-block mr-4">Sexuality</h1>
60+
<DropdownDisplayChoice
61+
class="inline-block"
62+
v-on:saveSingleChoice="saveSingleChoice"
63+
v-bind:name="'gender'"
64+
v-bind:starting-option="this.$store.getters.getLoggedInUser.orientation"
65+
v-bind:options="['heterosexual', 'homosexual', 'bisexual', 'other']"></DropdownDisplayChoice>
66+
</div>
67+
<div class="mt-4">
68+
<h1 class="inline-block mr-3">Interests</h1>
69+
<DropdownDisplayChoices
70+
class="inline-block"
71+
v-bind:options="[
72+
'swimming', 'wine', 'reading', 'foodie', 'netflix', 'music', 'yoga', 'golf',
73+
'photography', 'baking', 'shopping', 'outdoors', 'art', 'travel', 'hiking',
74+
'running', 'volunteering', 'cycling', 'climbing', 'tea', 'fishing', 'soccer',
75+
'museum', 'dancing', 'surfing', 'karaoke', 'parties', 'diy',
76+
'walking', 'cat lover', 'movies', 'gardening', 'trivia', 'working out',
77+
'cooking', 'gamer', 'brunch', 'blogging', 'picknicking', 'athlete',
78+
'dog lover', 'politics', 'environmentalism', 'instagram', 'spirituality',
79+
'language exchange', 'sports', 'comedy', 'fashion', 'disney', 'vlogging',
80+
'astrology', 'board games', 'craft beer', 'coffee', 'writer',
81+
]"
82+
v-bind:startingOptions="userInterests"
83+
v-bind:min="3"
84+
v-bind:max="10"
85+
v-bind:name="'interests'"
86+
v-on:saveMultipleChoice="saveMultipleChoice"></DropdownDisplayChoices>
87+
</div>
88+
<div class="mt-4">
89+
<AccountInput
90+
v-bind:name="'Bio'"
91+
v-bind:type="'bio'"
92+
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.bio"></AccountInput>
93+
</div>
94+
</section>
4795
</div>
4896
</div>
4997
</template>
5098

5199
<script>
100+
/* eslint-disable prefer-destructuring */
52101
import NavBar from '@/components/shared/NavBar.vue';
53102
import MenuButton from '@/components/app/settings/MenuButton.vue';
54103
import SectionHeader from '@/components/app/settings/SectionHeader.vue';
55104
import AccountInput from '@/components/app/settings/AccountInput.vue';
105+
import DropdownDisplayChoice from '@/components/shared/DropdownDisplayChoice.vue';
106+
import DropdownDisplayChoices from '@/components/shared/DropdownDisplayChoices.vue';
56107
import imageMan from '../../assets/recommendations/avatars/man1.png';
57108
import imageWoman from '../../assets/recommendations/avatars/woman1.png';
58109
import imageOther from '../../assets/recommendations/avatars/other.png';
@@ -63,9 +114,11 @@ export default {
63114
MenuButton,
64115
AccountInput,
65116
SectionHeader,
117+
DropdownDisplayChoice,
118+
DropdownDisplayChoices,
66119
},
67120
data: () => ({
68-
userInfo: {},
121+
userInterests: [],
69122
show: '',
70123
}),
71124
computed: {
@@ -74,6 +127,18 @@ export default {
74127
},
75128
},
76129
methods: {
130+
saveSingleChoice(...args) {
131+
const [key, value] = args;
132+
if (key === 'gender') {
133+
console.log(value);
134+
}
135+
},
136+
saveMultipleChoice(...args) {
137+
const [key, value] = args;
138+
if (key === 'interests') {
139+
console.log(value);
140+
}
141+
},
77142
showSetting(setting) {
78143
this.show = setting;
79144
},
@@ -94,8 +159,10 @@ export default {
94159
},
95160
},
96161
beforeMount() {
97-
console.log(this.$store.getters.getLoggedInUser);
98-
// const userInfoRequest = this.$http.get();
162+
const tags = this.$store.getters.getLoggedInUser.tags;
163+
for (let i = 0; i < tags.length; i += 1) {
164+
this.userInterests.push(tags[i].name);
165+
}
99166
},
100167
};
101168
</script>

0 commit comments

Comments
 (0)