Merge branch 'SA_fixes' into 'main'

Sa fixes

See merge request !139

src/components/BaseComponents/NavBar.vue

@@ -121,7 +121,7 @@ export default {
   min-width: 20px;
   min-height: 20px;
   padding: 0.25rem;
-  transform: translate(-80%, -30%);
+  transform: translate(-290%, 50%);
   color: white;
   font-size: 10px;
   border-radius: 50%;
@@ -130,4 +130,10 @@ export default {
   right: 0;
   cursor: pointer;
 }
+
+@media (max-width: 768px) {
+  .notification {
+    transform: translate(-60%, 70%);
+  }
+}
 </style>

src/components/ChatComponents/RentalMessage.vue

 <template>
-  <div class="message" style="max-width: 70%">
-    <div class="info">
-      <div class="text">
-        <h2 class="header">Ny utleie forespørsel</h2>
-        <p>Dato: {{ from }} - {{ to }}</p>
-        <p>Pris: {{ price }}kr</p>
+  <div class="message-container">
+    <div class="message">
+      <div class="info">
+        <div class="text">
+          <h2 class="header">Ny utleie forespørsel</h2>
+          <p>Dato: {{ from }} - {{ to }}</p>
+          <p>Pris: {{ price }}kr</p>
+        </div>
+        <div class="img-container">
+          <img class="img" :src="img" alt="Produkt Bilde" />
+        </div>
       </div>
-      <div class="img-container">
-        <img class="img" :src="img" alt="Produkt Bilde" />
+      <div>
+        <p class="more-header">Melding fra leier:</p>
+        <div class="more">
+          <p>
+            {{ extra }}
+          </p>
+        </div>
       </div>
-    </div>
-    <div>
-      <p class="more-header">Melding fra leier:</p>
-      <div class="more">
-        <p>
-          {{ extra }}
-        </p>
+      <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">
+        Waiting for owner to accept
+      </div>
+      <div class="" v-if="rent.isAccepted">
+        <h1 class="approved">Godtatt</h1>
+      </div>
+      <div class="" v-if="rent.deleted">
+        <h1 class="declined">Avslått</h1>
       </div>
-    </div>
-    <div class="buttons" v-if="!rent.isAccepted && !rent.deleted">
-      <button class="button green" @click="accept">Godta</button>
-      <button class="button red" @click="reject">Avslå</button>
-    </div>
-    <div class="" v-if="rent.isAccepted">
-      <h1 class="green">Godtatt</h1>
-    </div>
-    <div class="" v-if="rent.deleted">
-      <h1 class="red">Avslått</h1>
     </div>
   </div>
 </template>
@@ -34,6 +39,8 @@
 <script>
 import axios from "axios";
 import { tokenHeader } from "@/utils/token-utils";
+import { parseCurrentUser } from "@/utils/token-utils";
+
 export default {
   props: {
     rent: {
@@ -42,6 +49,9 @@ export default {
     },
   },
   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;
     },
@@ -64,6 +74,10 @@ export default {
     extra() {
       return this.rent.message || "Ingen Melding";
     },
+    side() {
+      return this.rent.renterId == this.userID
+        ? "flex-end" : "flex-start";
+    }
   },
   methods: {
     async accept() {
@@ -76,7 +90,6 @@ export default {
     async reject() {
       await axios.delete(
         process.env.VUE_APP_BASEURL + `renting/${this.rent.rentId}/delete`,
-        null,
         { headers: tokenHeader() }
       );
     },
@@ -85,13 +98,32 @@ export default {
 </script>
 
 <style scoped>
-.message {
+.message-container {
   display: flex;
+  justify-content: v-bind(side);
+}
+.message {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  display: block;
   flex-direction: column;
   width: 100%;
   background: #d1d5db;
   border-radius: 10px;
   padding: 10px;
+  max-width: 50%;
+}
+
+@media (max-width: 800px) {
+  .message {
+    max-width: 80%;
+  }
+}
+
+.waiting {
+  font-weight: bold;
+  color: black;
+  text-align: center;
 }
 
 .info {
@@ -110,6 +142,20 @@ export default {
   text-decoration: underline;
 }
 
+.approved {
+  color: darkgreen;
+  font-weight: bold;
+  text-align: center;
+  margin: 0.5rem;
+}
+
+.declined {
+  color: darkred;
+  font-weight: bold;
+  text-align: center;
+  margin: 0.5rem;
+}
+
 @media (max-width: 1200px) {
   .img-container {
     max-width: 30%;

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

@@ -7,9 +7,13 @@ jest.mock("@/utils/token-utils", () => {
     tokenHeader: () => {
       return {};
     },
+    parseCurrentUser: () => {
+      return { accountId: 1 };
+    },
   };
 });
 
+
 jest.mock("axios");
 
 describe("RentalMessage.vue", () => {
@@ -29,7 +33,7 @@ describe("RentalMessage.vue", () => {
             description: "Test",
             pricePerDay: 100,
           },
-          renterId: 1,
+          renterId: 0,
           message: "Hello",
           deleted: false,
         },