Can send hardcoded rent

src/components/CommunityComponents/CommunityHome.vue

 <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>

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>

src/components/RentingComponents/NewRent.vue

 <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>

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);
+    });
 }

src/views/CommunityViews/CommunityView.vue

 <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>

src/views/RentingViews/NewRentView.vue

 <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,
   },

tests/unit/apiutil-communityHome-mock.spec.js

-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);
+  });
 });