From 91861c9459136ab5aca2754344934258cacf00f7 Mon Sep 17 00:00:00 2001
From: Gilgard <Hjelljord.alida@gmail.com>
Date: Tue, 3 May 2022 10:06:15 +0200
Subject: [PATCH] Rent history
---
.../RentHistoryComponents/RentHistory.vue | 79 ++++++++++++++++
.../RentHistoryComponents/RentHistoryItem.vue | 90 +++++++++++++++++++
src/views/TestView.vue | 13 ++-
3 files changed, 181 insertions(+), 1 deletion(-)
create mode 100644 src/components/UserProfileComponents/RentHistoryComponents/RentHistory.vue
create mode 100644 src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue
diff --git a/src/components/UserProfileComponents/RentHistoryComponents/RentHistory.vue b/src/components/UserProfileComponents/RentHistoryComponents/RentHistory.vue
new file mode 100644
index 0000000..af96c67
--- /dev/null
+++ b/src/components/UserProfileComponents/RentHistoryComponents/RentHistory.vue
@@ -0,0 +1,79 @@
+<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
new file mode 100644
index 0000000..e1cc25a
--- /dev/null
+++ b/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue
@@ -0,0 +1,90 @@
+<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 }}
+ </router-link>
+ <div>
+ Fra:
+ {{ this.getDateString(historyItem.fromTime, isMultipleDays) }}
+ </div>
+ <div>
+ Til: {{ this.getDateString(historyItem.toTime, isMultipleDays) }}
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { parseCurrentUser } from '@/utils/token-utils';
+
+export default {
+ name: "RentHistoryItem",
+ props: {
+ historyItem: {
+ rentId: Number,
+ fromTime: Date,
+ toTime: Date,
+ listingId: Number,
+ renterId: Number,
+ accepted: Boolean,
+ },
+ },
+ computed: {
+ currentUser() {
+ return parseCurrentUser();
+ },
+ isMultipleDays() {
+ if (this.agreement.toTime - this.agreement.fromTime < 86400000) {
+ return false;
+ }
+ return true;
+ },
+ price() {
+ if (this.isMultipleDays) {
+ let numDays = Math.round(
+ (this.agreement.toTime - this.agreement.fromTime) / 86400000
+ );
+ return this.listing.pricePerDay * numDays;
+ }
+ return this.listing.pricePerDay;
+ },
+ isRenter(historyItem) {
+ return historyItem.renterId == currentUserId;
+ },
+ },
+ methods: {
+ getDateString(date, isMultipleDays) {
+ let today = new Date();
+ let dateString = date.getDate() + "." + date.getMonth();
+
+ if (date.getFullYear() != today.getFullYear()) {
+ dateString += "." + date.getFullYear();
+ }
+
+ if (isMultipleDays) {
+ return dateString;
+ }
+
+ dateString += " " + date.getHours() + ":" + date.getMinutes();
+ },
+ },
+};
+</script>
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 7537e2d..db95c63 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,15 +1,26 @@
<template>
<div />
+ <rent-history :ownerHistory="ownerHistory" :renterHistory="renterHistory"/>
</template>
<script>
+import RentHistory from "@/components/UserProfileComponents/RentHistoryComponents/RentHistory.vue"
+
export default {
data() {
return {
show: false,
+ ownerHistory: [{
+
+ }],
+ renterHistory: [{
+
+ }],
};
},
- components: {},
+ components: {
+ RentHistory
+ },
methods: {
toggleModal() {
this.show = !this.show;
--
GitLab