Memberlist view design

src/components/MemberList.vue

+<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>

src/components/UserProfileComponents/UserListItemCard.vue

 <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>

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"),
   },
 ];
 

src/views/MemberListView.vue

+<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>