From bf17535edbc5c6b486a414b041d213b728be28ab Mon Sep 17 00:00:00 2001
From: Gilgard <Hjelljord.alida@gmail.com>
Date: Wed, 27 Apr 2022 09:59:55 +0200
Subject: [PATCH] Memberlist view design
---
src/components/MemberList.vue | 36 ++++++++
.../UserListItemCard.vue | 42 ++++++++--
src/router/index.js | 7 +-
src/views/MemberListView.vue | 83 +++++++++++++++++++
4 files changed, 159 insertions(+), 9 deletions(-)
create mode 100644 src/components/MemberList.vue
create mode 100644 src/views/MemberListView.vue
diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue
new file mode 100644
index 0000000..5f935be
--- /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 4da140e..005646d 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 cb3eca7..85ac77a 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 0000000..5e07022
--- /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>
--
GitLab