Skip to content
Snippets Groups Projects
Commit 96d6065f authored by Gilgard's avatar Gilgard
Browse files

changed from vuetify to tailwind

parent 6f156182
No related branches found
No related tags found
1 merge request!13User profile view
Hide whitespace changes
Inline Side-by-side
src/components/UserProfileComponents/LargeProfileCard.vue
+ 125
− 48
View file @ 96d6065f
<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>
src/components/UserProfileComponents/RatingComponent.vue
+ 32
− 18
View file @ 96d6065f
<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 }}:&nbsp;
</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>
src/views/ProfileView.vue
+ 1
− 5
View file @ 96d6065f
<!-- 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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment