From dd55d9f01a01fc171970b42aa61e17ece74de185 Mon Sep 17 00:00:00 2001
From: Gilgard <Hjelljord.alida@gmail.com>
Date: Tue, 3 May 2022 16:38:42 +0200
Subject: [PATCH] rent history view
---
.../RentHistoryComponents/RentHistory.vue | 79 ----------------
.../RentHistoryComponents/RentHistoryItem.vue | 93 +++++++++++--------
src/router/index.js | 6 ++
src/services/user.service.js | 54 +++++++++++
src/views/TestView.vue | 15 +--
.../UserProfileViews/RentHistoryView.vue | 51 ++++++++++
6 files changed, 168 insertions(+), 130 deletions(-)
delete mode 100644 src/components/UserProfileComponents/RentHistoryComponents/RentHistory.vue
create mode 100644 src/services/user.service.js
create mode 100644 src/views/UserProfileViews/RentHistoryView.vue
diff --git a/src/components/UserProfileComponents/RentHistoryComponents/RentHistory.vue b/src/components/UserProfileComponents/RentHistoryComponents/RentHistory.vue
deleted file mode 100644
index af96c67..0000000
--- a/src/components/UserProfileComponents/RentHistoryComponents/RentHistory.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<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>
diff --git a/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue b/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue
index e1cc25a..dad006b 100644
--- a/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue
+++ b/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue
@@ -1,25 +1,17 @@
<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>
diff --git a/src/router/index.js b/src/router/index.js
index f9bc42d..0152474 100644
--- a/src/router/index.js
+++ b/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",
diff --git a/src/services/user.service.js b/src/services/user.service.js
new file mode 100644
index 0000000..5161ffa
--- /dev/null
+++ b/src/services/user.service.js
@@ -0,0 +1,54 @@
+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();
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index db95c63..644e450 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,25 +1,14 @@
<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() {
diff --git a/src/views/UserProfileViews/RentHistoryView.vue b/src/views/UserProfileViews/RentHistoryView.vue
new file mode 100644
index 0000000..5a826fc
--- /dev/null
+++ b/src/views/UserProfileViews/RentHistoryView.vue
@@ -0,0 +1,51 @@
+<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>
--
GitLab