From 16776e389cfe4ad8cc631fc01e7be03823e3efe5 Mon Sep 17 00:00:00 2001
From: henrikburmann <haburmann@gmail.com>
Date: Fri, 29 Apr 2022 14:48:30 +0200
Subject: [PATCH] Can send hardcoded rent
---
.../CommunityComponents/CommunityHome.vue | 23 ++--
.../CommunityComponents/ItemCard.vue | 4 +-
src/components/RentingComponents/NewRent.vue | 117 +++++++++++++-----
src/utils/apiutil.js | 54 +++++---
src/views/CommunityViews/CommunityView.vue | 19 ++-
src/views/RentingViews/NewRentView.vue | 15 ++-
tests/unit/apiutil-communityHome-mock.spec.js | 101 ++++++++-------
7 files changed, 211 insertions(+), 122 deletions(-)
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 63ccc0b..03c7e4e 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -1,7 +1,10 @@
<template>
<section class="w-full px-5 py-4 mx-auto rounded-md">
-
- <CommunityHeader :admin-status="false" :community="community" class="mb-5"/>
+ <CommunityHeader
+ :admin-status="false"
+ :community="community"
+ class="mb-5"
+ />
<!-- Search field -->
<div class="relative" id="searchComponent">
@@ -28,7 +31,9 @@
<!-- Item cards -->
<div class="absolute inset-x-0 px-6 py-3">
- <div class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center">
+ <div
+ class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
+ >
<ItemCard v-for="item in searchedItems" :key="item" :item="item" />
</div>
</div>
@@ -77,18 +82,20 @@ export default {
};
},
methods: {
- getCommunityFromAPI: async function (){
- this.communityID = await this.$router.currentRoute.value.params.communityID;
+ getCommunityFromAPI: async function () {
+ this.communityID = await this.$router.currentRoute.value.params
+ .communityID;
this.community = await GetCommunity(this.communityID);
},
- getListingsOfCommunityFromAPI: async function(){
- this.communityID = await this.$router.currentRoute.value.params.communityID;
+ getListingsOfCommunityFromAPI: async function () {
+ this.communityID = await this.$router.currentRoute.value.params
+ .communityID;
this.items = await GetListingsInCommunity(this.communityID);
},
},
beforeMount() {
this.getCommunityFromAPI(); //To get the id of the community before mounting the view
this.getListingsOfCommunityFromAPI();
- }
+ },
};
</script>
diff --git a/src/components/CommunityComponents/ItemCard.vue b/src/components/CommunityComponents/ItemCard.vue
index 67d01a7..4f4b525 100644
--- a/src/components/CommunityComponents/ItemCard.vue
+++ b/src/components/CommunityComponents/ItemCard.vue
@@ -11,7 +11,9 @@
{{ item.address }}
</p>
<p class="font-bold text-sm" id="title">{{ item.title }}</p>
- <p class="text-gray-700 text-xs" id="price">{{ item.pricePerDay }} kr</p>
+ <p class="text-gray-700 text-xs" id="price">
+ {{ item.pricePerDay }} kr
+ </p>
</div>
</div>
</div>
diff --git a/src/components/RentingComponents/NewRent.vue b/src/components/RentingComponents/NewRent.vue
index 9218ebe..6e69d1c 100644
--- a/src/components/RentingComponents/NewRent.vue
+++ b/src/components/RentingComponents/NewRent.vue
@@ -1,65 +1,122 @@
<template>
<div class="confirmationBox">
- <div>
+ <div class="rentTitle">
<h1>
- {{ title }}
+ {{ title }}
</h1>
</div>
- <div>
- <p>{{ description }}</p>
+
+ <div class = "fromTime">
+ <p>Fra: {{ from_time }}</p>
</div>
- <div>
- <p>Fra: {{ from_time }}</p>
+ <div class = "toTime">
+ <p>Til: {{ to_time }}</p>
</div>
- <div>
- <p>Til: {{ to_time }}</p>
- </div>
- <div>
- <label
+ <div class = "message">
+ <label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
id="descriptionLabel"
- >Skriv en melding til utleier</label>
- <textarea
- id="description"
- rows="4"
- v-bind="message"
- class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
- required
- ></textarea>
+ >Skriv en melding til utleier</label
+ >
+ <textarea
+ id="description"
+ rows="4"
+ v-model="message"
+ class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+ required
+ ></textarea>
+ </div>
+ <colored-button class = "cancelButton" :text="'Tilbake'"></colored-button>
+ <div class = "confirmButton">
+ <colored-button @click="sendRent" :text="'Send'"></colored-button>
</div>
- <button @click="cancelRent">Avbryt</button>
- <button @click="sendRent">Send forespøsel</button>
</div>
</template>
<script>
+import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
+import { postNewRent } from "@/utils/apiutil";
export default {
name: "NewRent",
+ components: {
+ ColoredButton,
+ },
data() {
return {
- // title: "Objekt",
- // from_time: "2022-04-03",
- // to_time: "2022-04-10",
- message: ""
+ title: this.newRentBox.title,
+ message: "",
+ price: this.newRentBox.price_per_day,
};
},
props: {
newRentBox: {
+ renterId: Number,
title: String,
description: String,
- from_time: Date,
- to_time: Date,
+ fromTime: Date,
+ toTime: Date,
+ pricePerDay: Number,
+ listingId: Number,
+ isAccepted: Boolean
},
},
methods: {
cancelRent() {
console.log("Canceled");
},
- sendRent: function () {
- console.log(this.message);
+ sendRent: async function () {
+ const rent = {
+ // message: this.message,
+ listingId: this.newRentBox.listingId,
+ renterId: this.newRentBox.renterId,
+ isAccepted: false,
+ toTime: this.newRentBox.toTime,
+ fromTime: this.newRentBox.fromTime,
+ };
+ await postNewRent(rent);
+ console.log(rent);
},
},
};
</script>
-<style></style>
+<style>
+.confirmationBox{
+ margin-top: 60fr;
+ width: 70%;
+ margin: auto;
+ display: grid;
+ grid-template-columns: 1fr 3fr;
+ grid-template-rows: 1fr 1fr 1fr 3fr 1fr;
+ max-height: 90%;
+}
+.cancelButton{
+grid-column: 1/2;
+grid-row: 1/2;
+}
+.rentTitle{
+ margin-top: 10%;
+ text-align: center;
+ grid-column: 2/3;
+}
+.fromTime{
+ grid-row: 2/3;
+ grid-column: 1/3;
+ display: block;
+}
+.toTime{
+ grid-row: 3/4;
+ grid-column: 1/3;
+ display: block;
+}
+
+.message{
+ grid-column: 1/3;
+ grid-row: 4/5;
+}
+.confirmButton{
+ grid-column: 1/3;
+ grid-row: 5/6;
+ align-content: center;
+}
+</style>
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index b3aa02d..1f1fd53 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -121,6 +121,20 @@ export function postNewgroup(groupInfo) {
return error;
});
}
+export function postNewRent(rentInfo) {
+ return axios
+ .post(API_URL + "renting/renter/save", rentInfo, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ console.log("poster: " + response.data);
+ return response;
+ })
+ .catch((error) => {
+ console.log(error.response);
+ return error;
+ });
+}
export function getMyGroups() {
return axios
@@ -149,27 +163,27 @@ export function getVisibleGroups() {
}
export async function GetCommunity(communityID) {
- return axios
- .get(API_URL + "community/" + communityID, {
- headers: tokenHeader(),
- })
- .then((response) => {
- return response.data;
- })
- .catch((error) => {
- console.error(error);
- });
+ return axios
+ .get(API_URL + "community/" + communityID, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ console.error(error);
+ });
}
export async function GetListingsInCommunity(communityID) {
- return axios
- .get(API_URL + "community/" + communityID + "/listings", {
- headers: tokenHeader(),
- })
- .then((response) => {
- return response.data;
- })
- .catch((error) => {
- console.error(error);
- });
+ return axios
+ .get(API_URL + "community/" + communityID + "/listings", {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ console.error(error);
+ });
}
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index a227905..08d8116 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,16 +1,16 @@
<template>
<div>
<img
- class="cursor-pointer h-8 mr-4 mt-4 float-right"
- v-if="isLoggedIn"
- src="@/assets/newCommunity.png"
- alt="Legg til gruppe"
- @click="$router.push('/createNewGroup')"
+ class="cursor-pointer h-8 mr-4 mt-4 float-right"
+ v-if="isLoggedIn"
+ src="@/assets/newCommunity.png"
+ alt="Legg til gruppe"
+ @click="$router.push('/createNewGroup')"
/>
</div>
<div>
<div id="myGroups" v-if="isLoggedIn">
- <div class="m-4" >Mine grupper:</div>
+ <div class="m-4">Mine grupper:</div>
<group-list :groupList="myGroups" />
</div>
<div id="localGroups">
@@ -18,7 +18,6 @@
<group-list :groupList="localGroups" />
</div>
</div>
-
</template>
<script>
@@ -48,9 +47,9 @@ export default {
async created() {
await this.getMyGroups();
await this.getPotentialGroups();
- if(this.$store.state.user.token !== null){
- this.isLoggedIn = true
+ if (this.$store.state.user.token !== null) {
+ this.isLoggedIn = true;
}
- },
+ },
};
</script>
diff --git a/src/views/RentingViews/NewRentView.vue b/src/views/RentingViews/NewRentView.vue
index 1f10387..6a88825 100644
--- a/src/views/RentingViews/NewRentView.vue
+++ b/src/views/RentingViews/NewRentView.vue
@@ -1,11 +1,24 @@
<template>
- <NewRent> </NewRent>
+ <NewRent :newRentBox="item"> </NewRent>
</template>
<script>
import NewRent from "@/components/RentingComponents/NewRent.vue";
export default {
name: "NewRentView.vue",
+ data() {
+ return {
+ item: {
+ renterId: 3,
+ title: "Jekk til leie",
+ description: "Typ transport",
+ fromTime: "2022-07-26",
+ toTime: "2022-08-01",
+ pricePerDay: 4.0,
+ listingId: 157,
+ },
+ };
+ },
components: {
NewRent,
},
diff --git a/tests/unit/apiutil-communityHome-mock.spec.js b/tests/unit/apiutil-communityHome-mock.spec.js
index e627100..4ab75d6 100644
--- a/tests/unit/apiutil-communityHome-mock.spec.js
+++ b/tests/unit/apiutil-communityHome-mock.spec.js
@@ -1,58 +1,55 @@
-import {GetCommunity, GetListingsInCommunity} from "@/utils/apiutil";
+import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil";
import axios from "axios";
jest.mock("axios");
describe("testing mocking of apiutil.js", () => {
-
- it("check that existing group returns correctly", async () => {
-
- const expectedResponse = {
- communityId: 4040,
- name: "Fisken i vannet",
- description: "For vi som liker fjell fisk",
- visibility: 1,
- location: "Bergen brygge",
- picture: "fish blub blub"
- };
-
- axios.get.mockImplementation(() =>
- Promise.resolve({ data: expectedResponse })
- );
-
- const communityResponse = await GetCommunity(4040);
- expect(communityResponse.name).toBe(expectedResponse.name);
- });
-
- it("check that existing group returns correct listings", async () => {
-
- const expectedResponse = {
- item1: {
- title: "Fiskekurs",
- description: "Fisking og sånn",
- pricePerDay: 200,
- address: "Vannet",
- userID: 6,
- categoryNames: null,
- communityIDs: null
- },
-
- item2: {
- title: "TestFraFrontend",
- description: "oslo",
- pricePerDay: 500,
- address: "oslo",
- userID: 1,
- categoryNames: null,
- communityIDs: null
- },
- };
-
- axios.get.mockImplementation(() =>
- Promise.resolve({ data: expectedResponse })
- );
-
- const communityItemResponse = await GetListingsInCommunity(4040);
- expect(communityItemResponse).toBe(expectedResponse);
- })
+ it("check that existing group returns correctly", async () => {
+ const expectedResponse = {
+ communityId: 4040,
+ name: "Fisken i vannet",
+ description: "For vi som liker fjell fisk",
+ visibility: 1,
+ location: "Bergen brygge",
+ picture: "fish blub blub",
+ };
+
+ axios.get.mockImplementation(() =>
+ Promise.resolve({ data: expectedResponse })
+ );
+
+ const communityResponse = await GetCommunity(4040);
+ expect(communityResponse.name).toBe(expectedResponse.name);
+ });
+
+ it("check that existing group returns correct listings", async () => {
+ const expectedResponse = {
+ item1: {
+ title: "Fiskekurs",
+ description: "Fisking og sånn",
+ pricePerDay: 200,
+ address: "Vannet",
+ userID: 6,
+ categoryNames: null,
+ communityIDs: null,
+ },
+
+ item2: {
+ title: "TestFraFrontend",
+ description: "oslo",
+ pricePerDay: 500,
+ address: "oslo",
+ userID: 1,
+ categoryNames: null,
+ communityIDs: null,
+ },
+ };
+
+ axios.get.mockImplementation(() =>
+ Promise.resolve({ data: expectedResponse })
+ );
+
+ const communityItemResponse = await GetListingsInCommunity(4040);
+ expect(communityItemResponse).toBe(expectedResponse);
+ });
});
--
GitLab