Merge branch 'fix-userprofile-image' into 'main'

Fix userprofile image

See merge request !103

src/components/CommunityComponents/CommunityList.vue

 <template>
   <ul>
     <li v-for="community in communities" :key="community">
-      <CommunityListItem :community="community" :member="member" />
+      <CommunityListItem
+        :community="community"
+        :member="member"
+        class="border-black"
+      />
     </li>
   </ul>
 </template>

src/components/CommunityComponents/CommunityListItem.vue

@@ -47,11 +47,19 @@
   </CustomFooterModal>
   <div
     @click="toggleDialog()"
-    class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
+    class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
   >
-    <div class="h-10 w-10 flex flex-col justify-center items-center mr-4">
-      <UserGroupIcon v-if="!community.image" alt="Felleskapets bilde" />
-      <!-- TODO: USE COMMUNITY IMAGE <img alt="Felleskapets bilde" src="@/assets/group.png" /> -->
+    <div
+      v-if="!community.picture"
+      class="h-10 w-10 flex flex-col justify-center items-center ml-2 mr-2"
+    >
+      <UserGroupIcon alt="Felleskapets bilde" class="h-10 w-10" />
+    </div>
+    <div
+      v-else
+      class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
+    >
+      <img :src="community.picture" alt="Fellsekaps bilde" class="rounded-md" />
     </div>
     <div class="flex-1 pl-1 overflow-hidden">
       <div class="font-medium dark:text-white truncate">

src/components/UserProfileComponents/UserListItemCard.vue

@@ -5,7 +5,7 @@
     <!-- User image -->
     <div class="h-10 w-10 flex flex-col justify-center items-center mr-4">
       <router-link :to="'/profile/' + user.userId">
-        <img alt="Profilbilde" src="../../assets/defaultUserProfileImage.jpg" />
+        <img alt="Profilbilde" :src="getProfilePicture" />
       </router-link>
     </div>
 
@@ -78,6 +78,9 @@ export default {
     return {
       rating: -1.0,
       communityID: -1,
+      profileImage: {
+        src: require("../../assets/defaultUserProfileImage.jpg"),
+      },
     };
   },
   components: {
@@ -92,13 +95,15 @@ export default {
     user: Object,
     buttons: Array,
   },
-  methods: {
+  computed: {
     getProfilePicture() {
-      if (this.user.picture != "") {
+      if (this.user.picture !== "" && this.user.picture != null) {
         return this.user.picture;
       }
-      return "@/assets/defaultUserProfileImage.jpg";
+      return this.profileImage.src;
     },
+  },
+  methods: {
     openChatWithUser() {
       this.$router.push({
         name: "messages",

src/components/UserProfileComponents/UserProfile.vue

@@ -81,7 +81,7 @@
     <div class="flex flex-col items-center pb-10 mt-16 z-5">
       <img
         class="mb-3 w-24 h-24 rounded-full shadow-lg"
-        src="../../assets/defaultUserProfileImage.jpg"
+        :src="getProfilePicture"
         alt="Profile picture"
       />
       <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
@@ -120,11 +120,22 @@ export default {
       renterRating: -1,
       ownerRating: -1,
       dropdown: false,
+      profileImage: {
+        src: require("../../assets/defaultUserProfileImage.jpg"),
+      },
     };
   },
   components: {
     RatingComponent,
   },
+  computed: {
+    getProfilePicture() {
+      if (this.user.picture !== "" && this.user.picture != null) {
+        return this.user.picture;
+      }
+      return this.profileImage.src;
+    },
+  },
   methods: {
     async getUser() {
       this.currentUser = await parseCurrentUser();
@@ -133,6 +144,7 @@ export default {
       if (this.id === this.currentUser.accountId) {
         this.isCurrentUser = true;
         this.user = this.currentUser;
+        this.user = await UserService.getUserFromId(this.user.accountId);
         return;
       }
       this.user = await getUser(this.id);
@@ -146,12 +158,6 @@ export default {
         this.renterRating = ratingAsRenter;
       }
     },
-    getProfilePicture() {
-      if (this.user.picture !== "") {
-        return this.user.picture;
-      }
-      return "../assets/defaultUserProfileImage.jpg";
-    },
     logout() {
       this.$store.commit("logout");
       this.$router.push("/");

tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap

@@ -10,26 +10,16 @@ exports[`CommunityListItem component renders correctly 1`] = `
   <!--v-if-->
   
   <div
-    class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
+    class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
   >
     <div
-      class="h-10 w-10 flex flex-col justify-center items-center mr-4"
+      class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
     >
-      <svg
-        aria-hidden="true"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-      <!-- TODO: USE COMMUNITY IMAGE &lt;img alt="Felleskapets bilde" src="@/assets/group.png" /&gt; -->
+      <img
+        alt="Fellsekaps bilde"
+        class="rounded-md"
+        src="string"
+      />
     </div>
     <div
       class="flex-1 pl-1 overflow-hidden"