diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue new file mode 100644 index 0000000000000000000000000000000000000000..5f935be3e67737b6228cc4113fc0da6a8bb8a934 --- /dev/null +++ b/src/components/MemberList.vue @@ -0,0 +1,36 @@ +<template> + <ul> + <li v-for="member in memberlist" :key="member.userId"> + <user-list-item-card :admin="admin" :user="member" /> + </li> + </ul> +</template> + +<script> +import UserListItemCard from "./UserProfileComponents/UserListItemCard.vue"; + +export default { + data() { + return { + memberlist: [ + { + userId: 2, + firstName: "erik", + lastName: "hansen", + }, + { + userId: 1, + firstName: "Test", + lastName: "Testesen", + }, + ], + }; + }, + components: { + UserListItemCard, + }, + props: { + admin: Boolean, + }, +}; +</script> diff --git a/src/components/UserProfileComponents/UserListItemCard.vue b/src/components/UserProfileComponents/UserListItemCard.vue index 4da140e21610587c8e88953ed9b17572c9bef98a..005646d51d405772521392a452dc100e3ff75375 100644 --- a/src/components/UserProfileComponents/UserListItemCard.vue +++ b/src/components/UserProfileComponents/UserListItemCard.vue @@ -1,20 +1,31 @@ <template> <div - class="select-none cursor-pointer hover:bg-gray-50 flex flex-1 items-center p-4" + class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4" > - <div class="flex flex-col w-10 h-10 justify-center items-center mr-4"> - <router-link to=""> - <img alt="profil" :src="getProfilePicture" /> + <div class="h-10 w-10 flex flex-col justify-center items-center mr-4"> + <router-link :to="'/profile/' + user.userId"> + <img alt="profil" src="../../assets/defaultUserProfileImage.jpg" /> </router-link> </div> <div class="flex-1 pl-1"> <div class="font-medium dark:text-white"> - {{ user.first_name }} {{ user.last_name }} + {{ user.firstName }} {{ user.lastName }} </div> </div> + <div class="hidden md:block flex-auto"> + <rating-component :rating="rating" :ratingType="'Gjennomsnitts rating'" /> + </div> <div class="flex flex-row justify-center"> - <button class="w-10 text-right flex justify-end">Ã…pne chat</button> - <button v-if="admin" class="w-10 text-right flex justify-end"> + <button + v-if="!admin" + class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80" + > + Ã…pne chat + </button> + <button + v-if="admin" + class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80" + > Fjern bruker </button> </div> @@ -22,8 +33,19 @@ </template> <script> +import { getAverageRating } from "@/utils/apiutil"; +import RatingComponent from "./RatingComponent.vue"; + export default { name: "UserListItem", + data() { + return { + rating: this.getRating(), + }; + }, + components: { + RatingComponent, + }, props: { user: Object, admin: Boolean, @@ -35,6 +57,12 @@ export default { } return "../assets/defaultUserProfileImage.jpg"; }, + async getRating() { + this.rating = await getAverageRating(this.user.userId); + }, + }, + beforeMount() { + this.getRating(); }, }; </script> diff --git a/src/router/index.js b/src/router/index.js index cb3eca7e5476af3a0d4f8889ac6e31f4d5f5eb5a..85ac77a8b0f47d9baf239125b88296fe19efd20e 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -43,7 +43,6 @@ const routes = [ component: NewPasswordView, }, { - path: "/searchItemList", name: "searchItemList", component: () => import("../views/SearchItemListView.vue"), @@ -52,7 +51,11 @@ const routes = [ path: "/createNewGroup", name: "createNewGroup", component: () => import("../views/CreateNewGroupView.vue"), - + }, + { + path: "/group/:id/memberlist", + name: "memberlist", + component: () => import("../views/MemberListView.vue"), }, ]; diff --git a/src/views/MemberListView.vue b/src/views/MemberListView.vue new file mode 100644 index 0000000000000000000000000000000000000000..5e07022277233e69cbecd17ee711b194157619ad --- /dev/null +++ b/src/views/MemberListView.vue @@ -0,0 +1,83 @@ +<template> + <div class="flex items-center justify-between mx-4"> + <div class="flex-1 min-w-0"> + <h2 + class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate" + > + {{ groupe.name }} + </h2> + <div + class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6" + > + <div class="mt-2 flex items-center text-sm text-gray-500"> + <svg + class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 20 20" + fill="currentColor" + aria-hidden="true" + > + <path + fill-rule="evenodd" + d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" + clip-rule="evenodd" + /> + </svg> + {{ groupe.address }} + </div> + </div> + </div> + <div class="flex"> + <span class="hidden sm:block"> + <button + v-if="adminStatus" + @click="edit()" + type="button" + class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" + > + <!-- Heroicon name: solid/pencil --> + <svg + class="-ml-1 mr-2 h-5 w-5 text-gray-500" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 20 20" + fill="currentColor" + aria-hidden="true" + > + <path + d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" + /> + </svg> + Edit + </button> + </span> + </div> + </div> + <div class="h-screen bg-gray-200 content-top grid place-items-top"> + <member-list :admin="editing" /> + </div> +</template> + +<script> +import MemberList from "@/components/MemberList.vue"; + +export default { + data() { + return { + groupe: { + name: "Solsikken borettslag", + address: "Sollia 6, 7033 Trondheim", + }, + adminStatus: false, + editing: false, + }; + }, + components: { + MemberList, + }, + methods: { + edit() { + this.editing = !this.editing; + }, + }, +}; +</script>