Merge branch 'rental-image-chat' into 'main'

Rental image chat

See merge request !143

src/components/ChatComponents/ChatMessage.vue

@@ -58,18 +58,18 @@ export default {
     calculateTime() {
       var time = this?.message.timestamp;
       var date = new Date(time);
-    
+
       var mmOfMessage = String(date.getMinutes());
       var hhOfMessage = String(date.getHours());
-      if(mmOfMessage <= 9){
+      if (mmOfMessage <= 9) {
         mmOfMessage = "0" + mmOfMessage;
       }
-      if(hhOfMessage<=9){
+      if (hhOfMessage <= 9) {
         hhOfMessage = "0" + hhOfMessage;
       }
       var ddOfMessage = String(date.getDate()).padStart(2, "0");
       var dayOfMessage = date.toLocaleString("default", { weekday: "short" });
-      var monthOfMessage = String(date.getMonth() + 1).padStart(2, "0"); 
+      var monthOfMessage = String(date.getMonth() + 1).padStart(2, "0");
       const shortMonthOfMessage = date.toLocaleString("default", {
         month: "short",
       });
@@ -77,7 +77,7 @@ export default {
 
       var today = new Date();
       var dd = String(today.getDate()).padStart(2, "0");
-      var mm = String(today.getMonth() + 1).padStart(2, "0"); 
+      var mm = String(today.getMonth() + 1).padStart(2, "0");
       var yyyy = today.getFullYear();
       if (ddOfMessage == dd) {
         return "" + hhOfMessage + ":" + mmOfMessage + "";

src/components/ChatComponents/RentalMessage.vue

@@ -8,7 +8,7 @@
           <p>Pris: {{ price }}kr</p>
         </div>
         <div class="img-container">
-          <img class="img" :src="img" alt="Produkt Bilde" />
+          <img class="img" :src="image" alt="Produkt Bilde" />
         </div>
       </div>
       <div>
@@ -19,11 +19,21 @@
           </p>
         </div>
       </div>
-      <div class="buttons" v-if="(!rent.isAccepted && !rent.deleted && this.rent.renterId != this.userID)">
+      <div
+        class="buttons"
+        v-if="
+          !rent.isAccepted && !rent.deleted && this.rent.renterId != this.userID
+        "
+      >
         <button class="button green" @click="accept">Godta</button>
         <button class="button red" @click="reject">Avslå</button>
       </div>
-      <div class="waiting" v-if="!rent.isAccepted && !rent.deleted && this.rent.renterId == this.userID">
+      <div
+        class="waiting"
+        v-if="
+          !rent.isAccepted && !rent.deleted && this.rent.renterId == this.userID
+        "
+      >
         Waiting for owner to accept
       </div>
       <div class="" v-if="rent.isAccepted">
@@ -38,8 +48,8 @@
 
 <script>
 import axios from "axios";
-import { tokenHeader } from "@/utils/token-utils";
-import { parseCurrentUser } from "@/utils/token-utils";
+import { tokenHeader, parseCurrentUser } from "@/utils/token-utils";
+import { getItemPictures, } from "@/utils/apiutil";
 
 export default {
   props: {
@@ -48,6 +58,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      image: null,
+    }
+  },
   computed: {
     userID() {
       return parseCurrentUser().accountId;
@@ -75,9 +90,8 @@ export default {
       return this.rent.message || "Ingen Melding";
     },
     side() {
-      return this.rent.renterId == this.userID
-        ? "flex-end" : "flex-start";
-    }
+      return this.rent.renterId == this.userID ? "flex-end" : "flex-start";
+    },
   },
   methods: {
     async accept() {
@@ -93,6 +107,19 @@ export default {
         { headers: tokenHeader() }
       );
     },
+    async getImage() {
+      let images = await getItemPictures(this.rent.listingId);
+
+      if (images.length > 0) {
+        this.image = images[0].picture;
+      } else {
+        this.image = "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80";
+
+      }
+    },
+  },
+  async beforeMount() {
+    await this.getImage();
   },
 };
 </script>

src/components/UserProfileComponents/UserProfile.vue

@@ -98,7 +98,11 @@
         <rating-component :rating="ownerRating" :ratingType="'Utleier'" />
       </div>
 
-      <div v-show="!isCurrentUser" @click="$router.push('/messages?userID=' + id)" class="flex mt-4 space-x-3 lg:mt-6">
+      <div
+        v-show="!isCurrentUser"
+        @click="$router.push('/messages?userID=' + id)"
+        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"

tests/unit/component-tests/ChatComponentsTest/RentalMessage.spec.js

@@ -13,6 +13,15 @@ jest.mock("@/utils/token-utils", () => {
   };
 });
 
+jest.mock("@/utils/apiutil", () => {
+  return {
+    getItemPictures: () => {
+      return new Promise((resolve) => {
+        resolve([]);
+      });
+    },
+  };
+});
 
 jest.mock("axios");