From 96d6065fe35949b2945dd61148414cb818c1277e Mon Sep 17 00:00:00 2001
From: Gilgard <Hjelljord.alida@gmail.com>
Date: Mon, 25 Apr 2022 10:55:59 +0200
Subject: [PATCH] changed from vuetify to tailwind
---
.../LargeProfileCard.vue | 173 +++++++++++++-----
.../UserProfileComponents/RatingComponent.vue | 50 +++--
src/views/ProfileView.vue | 6 +-
3 files changed, 158 insertions(+), 71 deletions(-)
diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index ddf52b1..2e4c3b5 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -1,68 +1,145 @@
<template>
- <v-card min-width="350" class="mx-auto py-2">
- <v-img height="250" src="@/assets/defaultUserProfileImage.jpg"></v-img>
+ <div
+ class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
+ >
+ <div v-show="isCurrentUser" class="flex justify-end px-4 pt-4">
+ <button
+ id="dropdownButton"
+ data-dropdown-toggle="dropdown"
+ class="hidden sm:inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
+ type="button"
+ >
+ <svg
+ class="w-6 h-6"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
+ ></path>
+ </svg>
+ </button>
- <v-card-title>{{ name }}</v-card-title>
+ <div
+ id="dropdown"
+ class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+ data-popper-reference-hidden=""
+ data-popper-escaped=""
+ data-popper-placement="top"
+ style="
+ position: absolute;
+ inset: auto auto 0px 0px;
+ margin: 0px;
+ transform: translate3d(653.6px, 2976.8px, 0px);
+ "
+ >
+ <ul class="py-1" aria-labelledby="dropdownButton">
+ <li>
+ <router-link
+ to=""
+ class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ >Mine gjenstander</router-link
+ >
+ </li>
+ <li>
+ <router-link
+ to=""
+ class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ >Mine grupper
+ </router-link>
+ </li>
+ <li>
+ <router-link
+ to=""
+ class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ >Leiehistorikk</router-link
+ >
+ </li>
+ <li>
+ <router-link
+ to=""
+ class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ >Endre passord</router-link
+ >
+ </li>
+ <li>
+ <router-link
+ to=""
+ class="block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ >Slett bruker</router-link
+ >
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="flex flex-col items-center pb-10">
+ <img
+ class="mb-3 w-24 h-24 rounded-full shadow-lg"
+ :src="getProfilePicture()"
+ alt="Profile picture"
+ />
+ <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
+ {{ user.firstName }} {{ user.lastName }}
+ </h5>
+ <div>
+ <rating-component :rating="renterRating" :ratingType="'Leietaker'" />
+ <rating-component :rating="ownerRating" :ratingType="'Utleier'" />
+ </div>
- <v-card-text>
- <rating-component :rating="renterRating" :ratingType="'Leietaker'" />
- <rating-component :rating="ownerRating" :ratingType="'Utleier'" />
- </v-card-text>
-
- <v-divider class="mx-4"></v-divider>
-
- <v-card-text v-if="isCurrentUser">
- <v-chip class="ma-2" color="primary" outlined pill>
- Mine gjenstander
- <v-icon right> mdi-archive-outline </v-icon>
- </v-chip>
-
- <v-chip class="ma-2" color="primary" outlined pill>
- Mine grupper
- <v-icon right> mdi-account-multiple-outline </v-icon>
- </v-chip>
-
- <v-chip class="ma-2" color="primary" outlined pill>
- Leiehistorikk
- <v-icon right> mdi-history </v-icon>
- </v-chip>
-
- <v-chip class="ma-2" color="primary" outlined pill>
- Endre passord
- <v-icon right> mdi-wrench-outline </v-icon>
- </v-chip>
- </v-card-text>
-
- <v-card-text v-else>
- <v-chip class="ma-2" color="primary" outlined pill>
- Ã…pne chat
- <v-icon right> mdi-chat </v-icon>
- </v-chip>
- </v-card-text>
- </v-card>
+ <div v-show="!isCurrentUser" class="flex mt-4 space-x-3 lg:mt-6">
+ <a
+ href="#"
+ class="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700"
+ >Ã…pne chat</a
+ >
+ </div>
+ </div>
+ </div>
</template>
<script>
import RatingComponent from "@/components/UserProfileComponents/RatingComponent.vue";
+import { parseUserFromToken } from "@/utils/token-utils";
+import { getUser /* getRenterRating, getOwnerRating */ } from "@/utils/apiutil";
+import router from "@/router";
export default {
name: "LargeProfileCard",
+ props: {
+ isCurrentUser: Boolean,
+ },
data() {
return {
- name: "Navn Navnesen",
- renterRating: 3.5,
- ownerRating: 4.5,
+ user: this.getUser(),
+ renterRating: 3, //getRenterRating(this.userID),
+ ownerRating: 5, //getOwnerRating(this.userID),
};
},
- computed: {
- //user: getUser(userID),
- },
components: {
RatingComponent,
},
- props: {
- userID: Number,
- isCurrentUser: Boolean,
+ methods: {
+ getUser() {
+ let id = router.currentRoute.value.params.id;
+ /* let user = {
+ id: router.currentRoute.value.params.id,
+ firstName: "Navn",
+ lastName: "Navnesen",
+ picture: "",
+ }; */
+ if (this.isCurrentUser) {
+ return parseUserFromToken();
+ }
+ return getUser(id);
+ //return user;
+ },
+ getProfilePicture() {
+ if (this.user.picture == "") {
+ return "../assets/defaultUserProfileImage.jpg";
+ }
+ return this.user.picture;
+ },
},
};
</script>
diff --git a/src/components/UserProfileComponents/RatingComponent.vue b/src/components/UserProfileComponents/RatingComponent.vue
index 218b35c..f79ff22 100644
--- a/src/components/UserProfileComponents/RatingComponent.vue
+++ b/src/components/UserProfileComponents/RatingComponent.vue
@@ -1,22 +1,28 @@
<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>
+ <ul class="flex justify-center">
+ <li>
+ <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+ {{ ratingType }}:
+ </p>
+ </li>
+ <li v-for="i in 5" :key="i">
+ <svg
+ :class="getFill(i)"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+ ></path>
+ </svg>
+ </li>
+ <li>
+ <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+ {{ compRating }} out of 5
+ </p>
+ </li>
+ </ul>
</template>
<script>
@@ -31,5 +37,13 @@ export default {
rating: Number,
ratingType: String,
},
+ methods: {
+ getFill(i) {
+ if (i <= this.rating) {
+ return "w-5 h-5 text-yellow-400";
+ }
+ return "w-5 h-5 text-gray-300 dark:text-gray-500";
+ },
+ },
};
</script>
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 020125b..cfd2cef 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,10 +1,6 @@
<!-- 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-container>
+ <large-profile-card :isCurrentUser="true" />
</template>
<script>
--
GitLab