From e11c942d4976209fd4338c992946986795aab0c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20R=C3=B8skaft?= <haakoero@stud.ntnu.no> Date: Fri, 6 May 2022 10:14:39 +0200 Subject: [PATCH] Added correct image display to rental message --- src/components/ChatComponents/ChatMessage.vue | 10 +++++----- src/components/ChatComponents/RentalMessage.vue | 16 ++++++++++------ .../UserProfileComponents/UserProfile.vue | 6 +++++- .../ChatComponentsTest/RentalMessage.spec.js | 10 ++++++++++ 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/components/ChatComponents/ChatMessage.vue b/src/components/ChatComponents/ChatMessage.vue index 3c63cef..8b046dc 100644 --- a/src/components/ChatComponents/ChatMessage.vue +++ b/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 + ""; diff --git a/src/components/ChatComponents/RentalMessage.vue b/src/components/ChatComponents/RentalMessage.vue index f7d6a6e..9bfaeaa 100644 --- a/src/components/ChatComponents/RentalMessage.vue +++ b/src/components/ChatComponents/RentalMessage.vue @@ -60,13 +60,16 @@ export default { }, data() { return { - image: "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80", + image: null, } }, computed: { userID() { return parseCurrentUser().accountId; }, + img() { + return "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80"; //this.rent.listing.imageUrl; + }, from() { // take ms and turn into date and return date return new Date(this.rent.fromTime).toLocaleDateString(); @@ -105,13 +108,14 @@ export default { ); }, async getImage() { - console.log(this.rent); let images = await getItemPictures(this.rent.listingId); - console.log(images); - if (images.length > 0) { - this.image = images[0].picture; - } + 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() { diff --git a/src/components/UserProfileComponents/UserProfile.vue b/src/components/UserProfileComponents/UserProfile.vue index 7f0f32e..c2d2a05 100644 --- a/src/components/UserProfileComponents/UserProfile.vue +++ b/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" diff --git a/tests/unit/component-tests/ChatComponentsTest/RentalMessage.spec.js b/tests/unit/component-tests/ChatComponentsTest/RentalMessage.spec.js index 3f4158e..c081301 100644 --- a/tests/unit/component-tests/ChatComponentsTest/RentalMessage.spec.js +++ b/tests/unit/component-tests/ChatComponentsTest/RentalMessage.spec.js @@ -13,6 +13,16 @@ jest.mock("@/utils/token-utils", () => { }; }); +jest.mock("@/utils/apiutil", () => { + return { + getItemPictures: () => { + return new Promise((resolve) => { + resolve([]); + }); + }, + }; +}); + jest.mock("axios"); describe("RentalMessage.vue", () => { -- GitLab