Skip to content
Snippets Groups Projects
Commit 16776e38 authored by henrikburmann's avatar henrikburmann
Browse files

Can send hardcoded rent

parent 0eb85a51
No related branches found
No related tags found
1 merge request!81Renting
<template> <template>
<section class="w-full px-5 py-4 mx-auto rounded-md"> <section class="w-full px-5 py-4 mx-auto rounded-md">
<CommunityHeader
<CommunityHeader :admin-status="false" :community="community" class="mb-5"/> :admin-status="false"
:community="community"
class="mb-5"
/>
<!-- Search field --> <!-- Search field -->
<div class="relative" id="searchComponent"> <div class="relative" id="searchComponent">
...@@ -28,7 +31,9 @@ ...@@ -28,7 +31,9 @@
<!-- Item cards --> <!-- Item cards -->
<div class="absolute inset-x-0 px-6 py-3"> <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" /> <ItemCard v-for="item in searchedItems" :key="item" :item="item" />
</div> </div>
</div> </div>
...@@ -77,18 +82,20 @@ export default { ...@@ -77,18 +82,20 @@ export default {
}; };
}, },
methods: { methods: {
getCommunityFromAPI: async function (){ getCommunityFromAPI: async function () {
this.communityID = await this.$router.currentRoute.value.params.communityID; this.communityID = await this.$router.currentRoute.value.params
.communityID;
this.community = await GetCommunity(this.communityID); this.community = await GetCommunity(this.communityID);
}, },
getListingsOfCommunityFromAPI: async function(){ getListingsOfCommunityFromAPI: async function () {
this.communityID = await this.$router.currentRoute.value.params.communityID; this.communityID = await this.$router.currentRoute.value.params
.communityID;
this.items = await GetListingsInCommunity(this.communityID); this.items = await GetListingsInCommunity(this.communityID);
}, },
}, },
beforeMount() { beforeMount() {
this.getCommunityFromAPI(); //To get the id of the community before mounting the view this.getCommunityFromAPI(); //To get the id of the community before mounting the view
this.getListingsOfCommunityFromAPI(); this.getListingsOfCommunityFromAPI();
} },
}; };
</script> </script>
...@@ -11,7 +11,9 @@ ...@@ -11,7 +11,9 @@
{{ item.address }} {{ item.address }}
</p> </p>
<p class="font-bold text-sm" id="title">{{ item.title }}</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> </div>
</div> </div>
......
<template> <template>
<div class="confirmationBox"> <div class="confirmationBox">
<div> <div class="rentTitle">
<h1> <h1>
{{ title }} {{ title }}
</h1> </h1>
</div> </div>
<div>
<p>{{ description }}</p> <div class = "fromTime">
<p>Fra: {{ from_time }}</p>
</div> </div>
<div> <div class = "toTime">
<p>Fra: {{ from_time }}</p> <p>Til: {{ to_time }}</p>
</div> </div>
<div> <div class = "message">
<p>Til: {{ to_time }}</p> <label
</div>
<div>
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
id="descriptionLabel" id="descriptionLabel"
>Skriv en melding til utleier</label> >Skriv en melding til utleier</label
<textarea >
id="description" <textarea
rows="4" id="description"
v-bind="message" rows="4"
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" v-model="message"
required 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"
></textarea> required
></textarea>
</div>
<colored-button class = "cancelButton" :text="'Tilbake'"></colored-button>
<div class = "confirmButton">
<colored-button @click="sendRent" :text="'Send'"></colored-button>
</div> </div>
<button @click="cancelRent">Avbryt</button>
<button @click="sendRent">Send forespøsel</button>
</div> </div>
</template> </template>
<script> <script>
import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
import { postNewRent } from "@/utils/apiutil";
export default { export default {
name: "NewRent", name: "NewRent",
components: {
ColoredButton,
},
data() { data() {
return { return {
// title: "Objekt", title: this.newRentBox.title,
// from_time: "2022-04-03", message: "",
// to_time: "2022-04-10", price: this.newRentBox.price_per_day,
message: ""
}; };
}, },
props: { props: {
newRentBox: { newRentBox: {
renterId: Number,
title: String, title: String,
description: String, description: String,
from_time: Date, fromTime: Date,
to_time: Date, toTime: Date,
pricePerDay: Number,
listingId: Number,
isAccepted: Boolean
}, },
}, },
methods: { methods: {
cancelRent() { cancelRent() {
console.log("Canceled"); console.log("Canceled");
}, },
sendRent: function () { sendRent: async function () {
console.log(this.message); 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> </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>
...@@ -121,6 +121,20 @@ export function postNewgroup(groupInfo) { ...@@ -121,6 +121,20 @@ export function postNewgroup(groupInfo) {
return error; 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() { export function getMyGroups() {
return axios return axios
...@@ -149,27 +163,27 @@ export function getVisibleGroups() { ...@@ -149,27 +163,27 @@ export function getVisibleGroups() {
} }
export async function GetCommunity(communityID) { export async function GetCommunity(communityID) {
return axios return axios
.get(API_URL + "community/" + communityID, { .get(API_URL + "community/" + communityID, {
headers: tokenHeader(), headers: tokenHeader(),
}) })
.then((response) => { .then((response) => {
return response.data; return response.data;
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
}); });
} }
export async function GetListingsInCommunity(communityID) { export async function GetListingsInCommunity(communityID) {
return axios return axios
.get(API_URL + "community/" + communityID + "/listings", { .get(API_URL + "community/" + communityID + "/listings", {
headers: tokenHeader(), headers: tokenHeader(),
}) })
.then((response) => { .then((response) => {
return response.data; return response.data;
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
}); });
} }
<template> <template>
<div> <div>
<img <img
class="cursor-pointer h-8 mr-4 mt-4 float-right" class="cursor-pointer h-8 mr-4 mt-4 float-right"
v-if="isLoggedIn" v-if="isLoggedIn"
src="@/assets/newCommunity.png" src="@/assets/newCommunity.png"
alt="Legg til gruppe" alt="Legg til gruppe"
@click="$router.push('/createNewGroup')" @click="$router.push('/createNewGroup')"
/> />
</div> </div>
<div> <div>
<div id="myGroups" v-if="isLoggedIn"> <div id="myGroups" v-if="isLoggedIn">
<div class="m-4" >Mine grupper:</div> <div class="m-4">Mine grupper:</div>
<group-list :groupList="myGroups" /> <group-list :groupList="myGroups" />
</div> </div>
<div id="localGroups"> <div id="localGroups">
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
<group-list :groupList="localGroups" /> <group-list :groupList="localGroups" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
...@@ -48,9 +47,9 @@ export default { ...@@ -48,9 +47,9 @@ export default {
async created() { async created() {
await this.getMyGroups(); await this.getMyGroups();
await this.getPotentialGroups(); await this.getPotentialGroups();
if(this.$store.state.user.token !== null){ if (this.$store.state.user.token !== null) {
this.isLoggedIn = true this.isLoggedIn = true;
} }
}, },
}; };
</script> </script>
<template> <template>
<NewRent> </NewRent> <NewRent :newRentBox="item"> </NewRent>
</template> </template>
<script> <script>
import NewRent from "@/components/RentingComponents/NewRent.vue"; import NewRent from "@/components/RentingComponents/NewRent.vue";
export default { export default {
name: "NewRentView.vue", 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: { components: {
NewRent, NewRent,
}, },
......
import {GetCommunity, GetListingsInCommunity} from "@/utils/apiutil"; import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil";
import axios from "axios"; import axios from "axios";
jest.mock("axios"); jest.mock("axios");
describe("testing mocking of apiutil.js", () => { describe("testing mocking of apiutil.js", () => {
it("check that existing group returns correctly", async () => {
it("check that existing group returns correctly", async () => { const expectedResponse = {
communityId: 4040,
const expectedResponse = { name: "Fisken i vannet",
communityId: 4040, description: "For vi som liker fjell fisk",
name: "Fisken i vannet", visibility: 1,
description: "For vi som liker fjell fisk", location: "Bergen brygge",
visibility: 1, picture: "fish blub blub",
location: "Bergen brygge", };
picture: "fish blub blub"
}; axios.get.mockImplementation(() =>
Promise.resolve({ data: expectedResponse })
axios.get.mockImplementation(() => );
Promise.resolve({ data: expectedResponse })
); const communityResponse = await GetCommunity(4040);
expect(communityResponse.name).toBe(expectedResponse.name);
const communityResponse = await GetCommunity(4040); });
expect(communityResponse.name).toBe(expectedResponse.name);
}); it("check that existing group returns correct listings", async () => {
const expectedResponse = {
it("check that existing group returns correct listings", async () => { item1: {
title: "Fiskekurs",
const expectedResponse = { description: "Fisking og sånn",
item1: { pricePerDay: 200,
title: "Fiskekurs", address: "Vannet",
description: "Fisking og sånn", userID: 6,
pricePerDay: 200, categoryNames: null,
address: "Vannet", communityIDs: null,
userID: 6, },
categoryNames: null,
communityIDs: null item2: {
}, title: "TestFraFrontend",
description: "oslo",
item2: { pricePerDay: 500,
title: "TestFraFrontend", address: "oslo",
description: "oslo", userID: 1,
pricePerDay: 500, categoryNames: null,
address: "oslo", communityIDs: null,
userID: 1, },
categoryNames: null, };
communityIDs: null
}, axios.get.mockImplementation(() =>
}; Promise.resolve({ data: expectedResponse })
);
axios.get.mockImplementation(() =>
Promise.resolve({ data: expectedResponse }) const communityItemResponse = await GetListingsInCommunity(4040);
); expect(communityItemResponse).toBe(expectedResponse);
});
const communityItemResponse = await GetListingsInCommunity(4040);
expect(communityItemResponse).toBe(expectedResponse);
})
}); });
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment