rent history view

src/components/UserProfileComponents/RentHistoryComponents/RentHistory.vue

-<template>
-  <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
-    <div class="relative" id="searchComponent">
-      <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-        <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
-          <path
-            d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          ></path>
-        </svg>
-      </span>
-
-      <input
-        type="text"
-        id="searchInput"
-        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
-        placeholder="Search"
-        v-model="search"
-      />
-    </div>
-
-    <div class="absolute inset-x-0 px-6 py-3 mt-4 border-2 border-slate-500">
-      <div class="grid grid-cols-2">
-        <rent-history-item v-for="historyItem in fullHistory" :key="historyItem.rentId" />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-import RentHistoryItem from "@/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue"
-
-export default {
-  components: {
-    RentHistoryItem,
-  },
-  props: {
-    renterHistory: [{
-      rentId: Number,
-      fromTime: Number,
-      toTime: Number,
-      isAccepted: Boolean,
-      listingId: Number,
-      renterId: Number,
-      message: String,
-    }],
-    ownerHistory: [{
-      rentId: Number,
-      fromTime: Number,
-      toTime: Number,
-      isAccepted: Boolean,
-      listingId: Number,
-      renterId: Number,
-      message: String,
-    }],
-  },
-  computed: {
-    fullHistory() {
-      function compareHistoryItems(itemA, itemB) {
-        if(itemA.fromTime < itemB.fromTime) {
-          return -1;
-        }
-        if(itemA.fromTime > itemB.fromTime) {
-          return 1;
-        }
-        return 0;
-      };
-
-      let fullHistory = renterHistory.concat(ownerHistory);
-      fullHistory.filter((item) => item.isAccepted);
-      fullHistory.sort(compareHistoryItems);
-      return fullHistory;
-    }
-  },
-}
-</script>

src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue

 <template>
-  <div class="mt-5">
-    <div class="w-4/5 rounded bg-gray-200">
-      <img
-        class="w-full"
-        :src="listing.img || require('../assets/default-product.png')"
-        alt="Item image"
-      />
-      <div class="p-1 m-1">
-        <p class="font-bold text-sm" id="title">{{ listing.title }}</p>
-        <p class="text-gray-700 text-xs" id="price">{{ price }} kr</p>
-        <div>Leid til:</div>
-        <router-link :to="{ path: '/' + historyItem.rentedBy.id }">
-          {{ renter }}
-        </router-link>
-        <div>Leid fra:</div>
-        <router-link
-          :to="{ path: '/' + historyItem.rentedFrom.id }"
-          class="text-left pa-2"
-        >
-          {{ owner }}
+  <div
+    class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50"
+  >
+    <p class="font-bold mx-4" id="title">
+      {{ historyItem.listing.title }}
+    </p>
+    <div class="flex flex-row items-center">
+      <div class="flex flex-col px-4 flex-1">
+        <router-link :to="{ path: '/profile/' + user.accountId }">
+          Leid til: {{ user.firstName }} {{ user.lastName }}
         </router-link>
+      </div>
+      <div class="flex flex-col flex-1">
         <div>
           Fra:
           {{ this.getDateString(historyItem.fromTime, isMultipleDays) }}
@@ -28,23 +20,40 @@
           Til: {{ this.getDateString(historyItem.toTime, isMultipleDays) }}
         </div>
       </div>
+      <colored-button :text="'Vurder'" class="px-4 flex-1" />
     </div>
   </div>
 </template>
 
 <script>
-import { parseCurrentUser } from '@/utils/token-utils';
+import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
+import { getUser } from "@/utils/apiutil";
+import { parseCurrentUser } from "@/utils/token-utils";
 
 export default {
   name: "RentHistoryItem",
+  components: {
+    ColoredButton,
+  },
+  data() {
+    return {
+      user: {},
+    };
+  },
   props: {
     historyItem: {
       rentId: Number,
-      fromTime: Date,
-      toTime: Date,
-      listingId: Number,
+      fromTime: Number,
+      toTime: Number,
+      isAccepted: Boolean,
+      listing: {
+        listingID: Number,
+        title: String,
+        pricePerDay: Number,
+        address: String,
+        userID: Number,
+      },
       renterId: Number,
-      accepted: Boolean,
     },
   },
   computed: {
@@ -52,7 +61,7 @@ export default {
       return parseCurrentUser();
     },
     isMultipleDays() {
-      if (this.agreement.toTime - this.agreement.fromTime < 86400000) {
+      if (this.historyItem.toTime - this.historyItem.fromTime < 86400000) {
         return false;
       }
       return true;
@@ -60,31 +69,39 @@ export default {
     price() {
       if (this.isMultipleDays) {
         let numDays = Math.round(
-          (this.agreement.toTime - this.agreement.fromTime) / 86400000
+          (this.historyItem.toTime - this.historyItem.fromTime) / 86400000
         );
-        return this.listing.pricePerDay * numDays;
+        return this.historyItem.listing.pricePerDay * numDays;
       }
-      return this.listing.pricePerDay;
-    },
-    isRenter(historyItem) {
-      return historyItem.renterId == currentUserId;
+      return this.historyItem.listing.pricePerDay;
     },
   },
   methods: {
-    getDateString(date, isMultipleDays) {
+    getDateString(milliseconds) {
       let today = new Date();
+      let date = new Date(milliseconds);
       let dateString = date.getDate() + "." + date.getMonth();
 
       if (date.getFullYear() != today.getFullYear()) {
         dateString += "." + date.getFullYear();
       }
-
-      if (isMultipleDays) {
-        return dateString;
+      return dateString;
+    },
+    async getUser(historyItem) {
+      if (this.isCurrentUser(historyItem.renterId)) {
+        this.user = await getUser(historyItem.listing.userID);
+      }
+      if (this.isCurrentUser(historyItem.listing.userID)) {
+        this.user = await getUser(historyItem.renterId);
       }
-
-      dateString += " " + date.getHours() + ":" + date.getMinutes();
     },
+    isCurrentUser(id) {
+      return id == this.currentUser.accountId;
+    },
+  },
+  beforeMount() {
+    this.getUser(this.historyItem);
+    console.log(this.user);
   },
 };
 </script>

src/router/index.js

@@ -26,6 +26,12 @@ const routes = [
     component: () => import("../views/UserProfileViews/ProfileView.vue"),
     beforeEnter: guardRoute,
   },
+  {
+    path: "/profile/rent/history",
+    name: "history",
+    component: () => import("../views/UserProfileViews/RentHistoryView.vue"),
+    beforeEnter: guardRoute,
+  },
   {
     path: "/register",
     name: "register",

src/services/user.service.js

+import { tokenHeader } from "@/utils/token-utils";
+import axios from "axios";
+
+const API_URL = process.env.VUE_APP_BASEURL;
+
+class UserService {
+  async getUserFromId(userId) {
+    return await axios
+      .get(API_URL + "/users/" + userId + "/profile")
+      .then((res) => {
+        return res.data;
+      })
+      .catch((err) => console.error(err));
+  }
+
+  async getUserRatingAverage(userId) {
+    return await axios
+      .get(API_URL + "rating/" + userId + "/average")
+      .then((res) => {
+        return res.data;
+      })
+      .catch((err) => console.error(err));
+  }
+
+  //TODO
+  async getUserRatingAsOwner() {}
+
+  //TODO
+  async getUserRatingAsRenter() {}
+
+  async getRenterHistory() {
+      return await axios
+      .get(API_URL + "user/profile/rent/history/all", {
+        headers: tokenHeader(),
+      })
+      .then((res) => {
+        return res.data;
+      })
+      .catch((err) => console.error(err));
+  }
+
+  async getOwnerHistory() {
+    return await axios
+    .get(API_URL + "user/profile/rent/history/owner/all", {
+        headers: tokenHeader(),
+      })
+    .then((res) => {
+      return res.data;
+    })
+    .catch((err) => console.error(err));
+}
+}
+
+export default new UserService();

src/views/TestView.vue

 <template>
-  <div />
-  <rent-history :ownerHistory="ownerHistory" :renterHistory="renterHistory"/>
+<div></div>
 </template>
 
 <script>
-import RentHistory from "@/components/UserProfileComponents/RentHistoryComponents/RentHistory.vue"
-
 export default {
   data() {
     return {
-      show: false,
-      ownerHistory: [{
-
-      }],
-      renterHistory: [{
-
-      }],
-    };
+    }
   },
   components: {
-    RentHistory
   },
   methods: {
     toggleModal() {

src/views/UserProfileViews/RentHistoryView.vue

+<template>
+  <ul>
+    <li v-for="historyItem in fullHistory" :key="historyItem.rentId">
+      <rent-history-item :historyItem="historyItem" />
+    </li>
+  </ul>
+</template>
+
+<script>
+import RentHistoryItem from "@/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue";
+import UserService from "@/services/user.service"
+
+export default {
+  components: {
+    RentHistoryItem,
+  },
+  data() {
+    return {
+      renterHistory: [],
+      ownerHistory: [],
+    }
+  },
+  computed: {
+    fullHistory() {
+      function compareHistoryItems(itemA, itemB) {
+        if (itemA.fromTime < itemB.fromTime) {
+          return -1;
+        }
+        if (itemA.fromTime > itemB.fromTime) {
+          return 1;
+        }
+        return 0;
+      }
+
+      let fullHistory = this.renterHistory.concat(this.ownerHistory);
+      fullHistory.filter((item) => item.isAccepted);
+      fullHistory.sort(compareHistoryItems);
+      return fullHistory;
+    },
+  },
+  methods: {
+    getHistories() {
+      this.renterHistory = UserService.getRenterHistory();
+      this.ownerHistory = UserService.getOwnerHistory();
+    }
+  },
+  beforeMount() {
+    this.getHistories()
+  },
+};
+</script>