From c323cea1d18bf2b4385385d121793797685a31ac Mon Sep 17 00:00:00 2001
From: Gilgard <Hjelljord.alida@gmail.com>
Date: Fri, 22 Apr 2022 11:11:41 +0200
Subject: [PATCH] Profile views designed
---
src/assets/defaultUserProfileImage.jpg | Bin 0 -> 5072 bytes
.../UserProfileComponents/RatingComponent.vue | 35 ++++++++++
.../UserListItemCard.vue | 64 ++++++++++++++++++
src/views/ProfileView.vue | 30 ++++++++
4 files changed, 129 insertions(+)
create mode 100644 src/assets/defaultUserProfileImage.jpg
create mode 100644 src/components/UserProfileComponents/RatingComponent.vue
create mode 100644 src/components/UserProfileComponents/UserListItemCard.vue
create mode 100644 src/views/ProfileView.vue
diff --git a/src/assets/defaultUserProfileImage.jpg b/src/assets/defaultUserProfileImage.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..18c8cd70555d36af38f2bf164b0a22740b14cf6b
GIT binary patch
literal 5072
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
Y+tOkEXp)R*nUv0Q28XR(zmw7b0E=>l;s5{u
literal 0
HcmV?d00001
diff --git a/src/components/UserProfileComponents/RatingComponent.vue b/src/components/UserProfileComponents/RatingComponent.vue
new file mode 100644
index 0000000..218b35c
--- /dev/null
+++ b/src/components/UserProfileComponents/RatingComponent.vue
@@ -0,0 +1,35 @@
+<template>
+ <v-row class="mb-6" justify="start" dense>
+ <v-col cols="5">
+ <div>{{ ratingType }} rating:</div>
+ </v-col>
+ <v-col cols="2">
+ <v-rating
+ v-model="compRating"
+ color="amber"
+ dense
+ half-increments
+ readonly
+ size="14"
+ ></v-rating>
+ </v-col>
+ <v-col cols="1">
+ <div class="grey--text ms-4">{{ compRating }}</div>
+ </v-col>
+ </v-row>
+</template>
+
+<script>
+export default {
+ name: "RatingComponent",
+ data() {
+ return {
+ compRating: this.rating + 0,
+ };
+ },
+ props: {
+ rating: Number,
+ ratingType: String,
+ },
+};
+</script>
diff --git a/src/components/UserProfileComponents/UserListItemCard.vue b/src/components/UserProfileComponents/UserListItemCard.vue
new file mode 100644
index 0000000..ec8b455
--- /dev/null
+++ b/src/components/UserProfileComponents/UserListItemCard.vue
@@ -0,0 +1,64 @@
+<template>
+ <v-card class="pa-2" max-height="100" width="90%" outlined tile>
+ <v-row align="center" class="spacer" no-gutters>
+ <v-col cols="4" sm="2" md="1">
+ <v-avatar size="60">
+ <v-img src="@/assets/defaultUserProfileImage.jpg"></v-img>
+ </v-avatar>
+ </v-col>
+
+ <v-col class="hidden-xs-only" sm="5" md="3">
+ <v-card-title> {{ name }} </v-card-title>
+ </v-col>
+
+ <v-col>
+ <v-card-text>
+ <div>{{ ratingType }} rating:</div>
+
+ <v-rating
+ v-model="rating"
+ color="amber"
+ dense
+ half-increments
+ readonly
+ size="14"
+ ></v-rating>
+ </v-card-text>
+ </v-col>
+
+ <v-col offset="4">
+ <v-card-text>
+ <v-chip v-if="admin" class="ma-2" color="error" outlined pill>
+ Fjern bruker
+ <v-icon right> mdi-trash-can-outline </v-icon>
+ </v-chip>
+ <v-chip v-else class="ma-2" color="primary" outlined pill>
+ Ã…pne chat
+ <v-icon right> mdi-chat </v-icon>
+ </v-chip>
+ </v-card-text>
+ </v-col>
+ </v-row>
+ <v-col> </v-col>
+ </v-card>
+</template>
+
+<script>
+export default {
+ name: "UserListItem",
+ data() {
+ return {
+ name: "Navn Navnesen",
+ rating: 3,
+ admin: true,
+ };
+ },
+ computed: {
+ //user: getUser(userID),
+ },
+ props: {
+ userID: Number,
+ ratingType: String,
+ },
+};
+</script>
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
new file mode 100644
index 0000000..09d3228
--- /dev/null
+++ b/src/views/ProfileView.vue
@@ -0,0 +1,30 @@
+<!-- View for looking at different profile display methods -->
+<template>
+ <v-container>
+ <v-row align="center" class="pa-2">
+ <large-profile-card :isCurrentUser="true" :userID="2" />
+ </v-row>
+ <v-row align="center" class="pa-2">
+ <large-profile-card :userID="1" :isCurrentUser="false" />
+ </v-row>
+ <v-row align="center" class="pa-2">
+ <user-list-item :userID="1" :ratingType="'Leietaker'" />
+ </v-row>
+ </v-container>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+// Components
+import LargeProfileCard from "@/components/UserProfileComponents/LargeProfileCard.vue";
+import UserListItem from "@/components/UserProfileComponents/UserListItemCard.vue";
+
+export default defineComponent({
+ name: "ProfileView",
+ components: {
+ LargeProfileCard,
+ UserListItem,
+ },
+});
+</script>
--
GitLab