Merge branch 'myItems' into 'main'

My items

See merge request !90

src/components/CommunityComponents/CommunityHome.vue

@@ -116,7 +116,7 @@ export default {
         title: "",
         pricePerDay: 0,
       },
-      search: "",
+      
       communityID: -1,
       community: {},
 

src/components/RentingComponents/NewRent.vue

@@ -32,8 +32,12 @@
     <button id="cancelButton" @click="cancelRent" class="text-primary-medium">
       Tilbake
     </button>
-    <div id="confirmButton">
-      <colored-button @click="sendRent" :text="'Send'"></colored-button>
+    <div id="confirm">
+      <colored-button
+        id="confirmButton"
+        @click="sendRent"
+        :text="'Send'"
+      ></colored-button>
     </div>
   </div>
   <div>
@@ -75,7 +79,6 @@ export default {
     newRentBox: {
       renterId: Number,
       title: String,
-      description: String,
       fromTime: Date,
       toTime: Date,
       listingID: Number,
@@ -100,40 +103,40 @@ export default {
       let monthString = "";
       //Gives the month the proper name
       switch (dateMonth) {
-        case 1:
+        case 0:
           monthString = "Januar";
           break;
-        case 2:
+        case 1:
           monthString = "Februar";
           break;
-        case 3:
+        case 2:
           monthString = "Mars";
           break;
-        case 4:
+        case 3:
           monthString = "April";
           break;
-        case 5:
+        case 4:
           monthString = "Mai";
           break;
-        case 6:
+        case 5:
           monthString = "Juni";
           break;
-        case 7:
+        case 6:
           monthString = "Juli";
           break;
-        case 8:
+        case 7:
           monthString = "August";
           break;
-        case 9:
+        case 8:
           monthString = "September";
           break;
-        case 10:
+        case 9:
           monthString = "Oktober";
           break;
-        case 11:
+        case 10:
           monthString = "November";
           break;
-        case 12:
+        case 11:
           monthString = "Desember";
           break;
         default:
@@ -209,7 +212,7 @@ export default {
   grid-column: 1/3;
   grid-row: 6/7;
 }
-#confirmButton {
+#confirm {
   grid-column: 1/3;
   grid-row: 7/8;
   align-content: center;

src/components/UserProfileComponents/UserItems.vue

+<template>
+  <div id = "headline" class = "text-xl md:text-2xl text-gray-600 font-medium w-full">
+      Dine gjenstander
+  </div>
+  <!-- Search field -->
+    <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-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
+        placeholder="Search"
+        v-model="search"
+        @change="searchWritten"
+      />
+    </div>
+
+    <div class="absolute inset-x-0 px-5 py-3">
+      <!-- ItemCards -->
+      <div class="flex items-center justify-center w-screen">
+        <!-- Shows items based on pagination -->
+        <div
+          class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
+          v-if="showItems"
+        >
+          <ItemCard
+            v-for="item in visibleItems"
+            :key="item"
+            :item="item"
+          />
+        </div>
+
+        <!-- Shows items based on search field input -->
+        <div
+          class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
+          v-if="showSearchedItems"
+        >
+          <ItemCard
+            v-for="item in searchedItems"
+            :key="item"
+            :item="item"
+          />
+        </div>
+      </div>
+      <!-- pagination -->
+      <div class="flex justify-center" v-if="showItems">
+        <PaginationTemplate
+          v-bind:items="items"
+          v-on:page:update="updatePage"
+          v-bind:currentPage="currentPage"
+          v-bind:pageSize="pageSize"
+          class="mt-10"
+        />
+      </div>
+    </div>
+</template>
+<script>
+import { GetUserListings, getItemPictures } from "@/utils/apiutil";
+import ItemCard from "@/components/ItemComponents/ItemCard.vue";
+import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
+
+export default {
+  name: "UserItems",
+  components: {
+    ItemCard,
+    PaginationTemplate
+  },
+  data() {
+    return {
+      items: [],
+      item: {
+        listingID: 0,
+        img: "",
+        address: "",
+        title: "",
+        pricePerDay: 0,
+      },
+      showItems: true,
+      showSearchedItems: false,
+        search: "",
+      //Variables connected to pagination
+      currentPage: 0,
+      pageSize: 12,
+      visibleItems: [],
+    };
+  },
+  computed: {
+    searchedItems() {
+      let filteredItems = [];
+
+      filteredItems = this.items.filter(
+        (p) =>
+          p.title.toLowerCase().includes(this.search.toLowerCase()) ||
+          p.address.toLowerCase().includes(this.search.toLowerCase()) ||
+          p.pricePerDay === Number(this.search)
+      );
+
+      return filteredItems;
+    },
+  },
+  methods: {
+    getUserListingsFromAPI: async function () {
+      this.items = await GetUserListings();
+      for (var i = 0; i < this.items.length; i++) {
+        let images = await getItemPictures(this.items[i].listingID);
+        if (images.length > 0) {
+          this.items[i].img = images[0].picture;
+        }
+      }
+    },
+      //Pagination
+    updatePage(pageNumber) {
+      this.currentPage = pageNumber;
+      this.updateVisibleTodos();
+    },
+    updateVisibleTodos() {
+      this.visibleItems = this.items.slice(
+        this.currentPage * this.pageSize,
+        this.currentPage * this.pageSize + this.pageSize
+      );
+
+      // if we have 0 visible items, go back a page
+      if (this.visibleItems.length === 0 && this.currentPage > 0) {
+        this.updatePage(this.currentPage - 1);
+      }
+    },
+    searchWritten: function () {
+      //This method triggers when search input field is changed
+      if (this.search.length > 0) {
+        this.showItems = false;
+        this.showSearchedItems = true;
+      } else {
+        this.showItems = true;
+        this.showSearchedItems = false;
+      }
+    },
+  },
+  async beforeMount() {
+    await this.getUserListingsFromAPI();
+    this.updateVisibleTodos();
+
+  },
+};
+</script>
+
+<style>
+#headline {
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;  
+  
+}
+</style>
\ No newline at end of file

src/components/UserProfileComponents/UserProfile.vue

@@ -33,7 +33,8 @@
         >
           <li>
             <router-link
-              to=""
+           
+              to="/user/userItems"
               class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
               >Mine gjenstander</router-link
             >

src/router/index.js

@@ -117,6 +117,11 @@ const routes = [
     component: () => import("../views/RentingViews/ItemInfoPageView.vue"),
     beforeEnter: guardRoute,
   },
+  {
+    path: "/user/userItems",
+    name: "UserItems",
+    component: () => import("../views/UserProfileViews/UserItemsView.vue"),
+  }
 ];
 
 const router = createRouter({

src/utils/apiutil.js

@@ -300,6 +300,19 @@ export async function LeaveCommunity(communityID) {
     });
 }
 
+export async function GetUserListings() {
+  return axios
+    .get(API_URL + "listing/userListings", {
+      headers: tokenHeader(),
+    })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+}
+
 export function postNewRating(ratingInfo) {
   return axios
       .post(API_URL + "rating/save", ratingInfo, {
@@ -313,4 +326,4 @@ export function postNewRating(ratingInfo) {
         console.log(error.response);
         return error;
       });
-}
\ No newline at end of file
+}

src/views/UserProfileViews/UserItemsView.vue

+<template>
+  <user-items> </user-items>
+</template>
+
+<script>
+import UserItems from "@/components/UserProfileComponents/UserItems.vue"
+export default {
+    name: "UserItemsView",
+    components:{
+        UserItems
+    }
+
+}
+</script>
+
+<style>
+
+</style>

tests/unit/component-tests/renting-compnents-tests/new-rent.spec.js

+import { mount } from "@vue/test-utils";
+import NewRent from "@/components/RentingComponents/NewRent.vue";
+
+describe("Confirm and send a rent request", () => {
+  let wrapper;
+  const route = {
+    params: {
+      id: 1,
+    },
+  };
+  const router = {
+    push: jest.fn(),
+  };
+  beforeEach(() => {
+    wrapper = mount(NewRent, {
+      props: {
+        newRentBox: {
+          title: "Telt",
+          listingID: 1,
+          fromTime: "2022-09-19",
+          toTime: "2022-09-23",
+          price: 200,
+          renterId: 1,
+          isAccepted: false,
+        },
+      },
+      global: {
+        mocks: {
+          $route: route,
+          $router: router,
+        },
+      },
+    });
+  });
+
+  it("Is instansiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+
+  it("Check if fields show correct informations", () => {
+    expect(wrapper.find("#rentTitle").text()).toEqual("Telt");
+    expect(wrapper.find("#fromTime").text()).toMatch("19. September 2022");
+    expect(wrapper.find("#toTime").text()).toMatch("23. September 2022");
+    expect(wrapper.find("#price").text()).toEqual("Totaltpris: 200 kr");
+  });
+});