Skip to content

Commit a888900

Browse files
jsun1590jsun1590
authored
Merge pull request #130 from codersforcauses/i99-user_dashboard_page
I99 user dashboard page
2 parents 4602598 + 766fb20 commit a888900

21 files changed

Lines changed: 527 additions & 129 deletions

‎client/.eslintrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,7 @@ module.exports = {
1010
sourceType: 'module',
1111
},
1212
plugins: ['vue', 'cypress'],
13+
rules: {
14+
'vue/attribute-hyphenation': ['never'],
15+
},
1316
};

‎client/components/Dashboard/LeftBanner.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<!-- background image, along with alignment of elements -->
3+
<div
4+
class="flex flex-col justify-center items-center content-evenly space-y-2 h-full bg-[url('~/static/temp_Shapebg.svg')] bg-contain bg-no-repeat bg-center"
5+
>
6+
<!--Profile pic -->
7+
<nuxt-img
8+
:src="profilePic"
9+
class="h-52 mb-3"
10+
:alt="name + ' profile picture'"
11+
/>
12+
13+
<!--Welcome text -->
14+
<div>
15+
<p class="font-extrabold text-xl mb-1">Welcome {{ name }}.</p>
16+
</div>
17+
18+
<!--Email-->
19+
<p class="font-thin text-sm">{{ email }}</p>
20+
21+
<ButtonElement to="/edit-Profile" type="tertiary" class=""
22+
>Edit Profile</ButtonElement
23+
>
24+
</div>
25+
</template>
26+
27+
<script>
28+
export default {
29+
name: 'LeftBanner',
30+
props: {
31+
name: {
32+
type: String,
33+
default: undefined,
34+
},
35+
email: {
36+
type: String,
37+
default: undefined,
38+
},
39+
profilePic: {
40+
type: String,
41+
default: '/avatar.svg',
42+
},
43+
},
44+
};
45+
</script>

‎client/components/Dashboard/UserAttributeCard.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div
3+
class="h-[15.5rem] w-[15.75rem] hover:shadow-lg transition-shadow duration-200 ease-in-out"
4+
>
5+
<div
6+
class="flex flex-col space-y-2 justify-center items-center bg-lightgrey/75 h-full"
7+
>
8+
<ColouredBox :color="color" :value="value" />
9+
10+
<div>
11+
<p class="text-lg font-medium">
12+
{{ label }}
13+
</p>
14+
</div>
15+
<ButtonElement
16+
type="tertiary"
17+
@buttonClicked="$emit('SelectAttri', label)"
18+
>
19+
{{ buttonLabel }}
20+
</ButtonElement>
21+
</div>
22+
</div>
23+
</template>
24+
25+
<script>
26+
import ButtonElement from '../Input/ButtonElement.vue';
27+
import ColouredBox from '../Quiz/ColouredBox.vue';
28+
export default {
29+
name: 'UserAttributeCard',
30+
components: { ButtonElement, ColouredBox },
31+
props: {
32+
label: {
33+
type: String,
34+
default: undefined,
35+
},
36+
buttonLabel: {
37+
type: String,
38+
default: undefined,
39+
},
40+
value: {
41+
type: Number,
42+
default: 0,
43+
},
44+
color: {
45+
type: String,
46+
default: 'green',
47+
},
48+
},
49+
data: () => ({
50+
commonColoredBoxStyles:
51+
'rounded-md text-white text-4xl font-extrabold h-20 w-20 flex justify-center items-center',
52+
}),
53+
};
54+
</script>

‎client/components/Input/ButtonElement.vue‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,23 @@
33
<button
44
v-if="type === 'primary'"
55
:class="`text-white bg-primary ${commonBtnStyles}`"
6+
@click="$emit('buttonClicked')"
67
>
78
<slot></slot>
89
</button>
910

1011
<button
11-
v-else
12+
v-if="type === 'secondary'"
1213
:class="`bg-white text-primary border border-solid border-primary ${commonBtnStyles}`"
14+
@click="$emit('buttonClicked')"
15+
>
16+
<slot></slot>
17+
</button>
18+
19+
<button
20+
v-if="type === 'tertiary'"
21+
:class="`bg-blue text-white ${thinBtnStyles}`"
22+
@click="$emit('buttonClicked')"
1323
>
1424
<slot></slot>
1525
</button>
@@ -18,13 +28,23 @@
1828
<button
1929
v-if="type === 'primary'"
2030
:class="`text-white bg-primary ${commonBtnStyles}`"
31+
@click="$emit('buttonClicked')"
2132
>
2233
<slot></slot>
2334
</button>
2435

2536
<button
26-
v-else
37+
v-if="type === 'secondary'"
2738
:class="`bg-white text-primary border border-solid border-primary ${commonBtnStyles}`"
39+
@click="$emit('buttonClicked')"
40+
>
41+
<slot></slot>
42+
</button>
43+
44+
<button
45+
v-if="type === 'tertiary'"
46+
:class="`bg-blue text-white ${thinBtnStyles}`"
47+
@click="$emit('buttonClicked')"
2848
>
2949
<slot></slot>
3050
</button>
@@ -47,6 +67,8 @@ export default {
4767
data: () => ({
4868
commonBtnStyles:
4969
'h-10 w-32 rounded-md hover:shadow-lg transition-shadow duration-200 ease-in-out',
70+
thinBtnStyles:
71+
'h-6 w-40 rounded-md text-xs font-medium hover:shadow-lg transition-shadow duration-200 ease-in-out',
5072
}),
5173
};
5274
</script>

‎client/components/Quiz/ColouredBox.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<div class="">
3+
<div v-if="color === 'green'" :class="`bg-green ${commonColoredBoxStyles}`">
4+
{{ value }}
5+
</div>
6+
7+
<div
8+
v-if="color === 'yellow'"
9+
:class="`bg-yellow ${commonColoredBoxStyles}`"
10+
>
11+
{{ value }}
12+
</div>
13+
14+
<div v-if="color === 'red'" :class="`bg-red ${commonColoredBoxStyles}`">
15+
{{ value }}
16+
</div>
17+
18+
<div v-if="color === 'blue'" :class="`bg-blue ${commonColoredBoxStyles}`">
19+
{{ value }}
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script>
25+
export default {
26+
name: 'ColouredBox',
27+
props: {
28+
value: {
29+
type: Number,
30+
default: 0,
31+
},
32+
color: {
33+
type: String,
34+
default: 'green',
35+
},
36+
},
37+
data: () => ({
38+
commonColoredBoxStyles:
39+
'rounded-md text-white text-4xl font-extrabold h-20 w-20 flex justify-center items-center',
40+
}),
41+
};
42+
</script>

‎client/components/Quiz/QuizList.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="h-full w-full">
3+
<div class="grid grid-rows-auto mr-10 space-y-2">
4+
<!-- 7 cols, two per property, one for score -->
5+
<div class="py-1 px-6 grid grid-cols-7 text-lightgrey font-bold">
6+
<h1 class="col-span-2">Title</h1>
7+
<h1 class="col-span-2">Tags</h1>
8+
<h1 class="col-span-2">Date Taken</h1>
9+
<h1>Your Score</h1>
10+
</div>
11+
<QuizListItem
12+
v-for="(quiz, index) in quizzes"
13+
:key="index"
14+
:quiz="quiz"
15+
/>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import QuizListItem from './QuizListItem.vue';
22+
export default {
23+
name: 'QuizList',
24+
components: { QuizListItem },
25+
props: {
26+
quizzes: {
27+
type: Array,
28+
default: null,
29+
},
30+
},
31+
data: () => ({
32+
listItemStyles: 'h-10 my-4 p-10',
33+
}),
34+
methods: {},
35+
};
36+
</script>

‎client/components/Quiz/QuizListItem.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div
3+
class="w-full border-lightgrey/75 border rounded-md py-2 px-6 mr-5 grid-cols-7 grid"
4+
@click="$emit('showQuiz', quiz)"
5+
>
6+
<div class="col-span-2">{{ quiz.name }}</div>
7+
<div class="flex w-full space-x-2 col-span-2">
8+
<QuizTag
9+
v-for="(tag, index) in quiz.tags"
10+
:key="index"
11+
:label="tag.name"
12+
:colour="tag.color"
13+
/>
14+
</div>
15+
<div class="col-span-2">{{ Date(quiz.dateCreated).slice(0, 21) }}</div>
16+
<div>{{ quiz.score ? quiz.score + '%' : `Not Taken` }}</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
name: 'QuizListItem',
23+
props: {
24+
quiz: {
25+
type: Object,
26+
default: () => ({
27+
name: '',
28+
tags: [],
29+
dateCreated: '',
30+
}),
31+
},
32+
},
33+
};
34+
</script>

‎client/components/Quiz/QuizTag.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div class="">
3+
<button :class="css">{{ label }}</button>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'QuizTag',
10+
props: {
11+
label: {
12+
type: String,
13+
default: undefined,
14+
},
15+
colour: {
16+
type: String,
17+
default: 'blue',
18+
},
19+
},
20+
computed: {
21+
css: function () {
22+
return 'bg-' + this.colour + ' rounded px-2';
23+
},
24+
},
25+
};
26+
</script>

‎client/nuxt.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export default {
3535
'~/components',
3636
'~/components/Section',
3737
'~/components/Input',
38+
'~/components/Form',
3839
'~/components/Auth',
3940
],
4041
},

0 commit comments

Comments
 (0)