diff --git a/src/components/BaseComponents/RatingModal.vue b/src/components/BaseComponents/RatingModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7710716f0ad69f69663b859c165a5455153cb8d7
--- /dev/null
+++ b/src/components/BaseComponents/RatingModal.vue
@@ -0,0 +1,157 @@
+<template>
+ <!-- Main modal -->
+ <div
+ v-if="visible"
+ class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
+ >
+ <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
+ <!-- Modal content -->
+ <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+ <!-- Modal header -->
+ <div
+ class="flex p-4 border-b rounded-t dark:border-gray-600"
+ >
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+ {{ name }}
+ </h3>
+ <button
+ @click="close()"
+ class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+ >
+ <svg
+ class="w-5 h-5"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+ clip-rule="evenodd"
+ ></path>
+ </svg>
+ </button>
+ </div>
+ <!-- Modal body -->
+ <div class="p-6 space-y-6">
+ <p class="text-lg text-base leading-relaxed text-gray-500 dark:text-gray-400">
+ {{ title }}
+ </p>
+ </div>
+
+ <div class="ml-6 mt-4">
+ <p class=" text-base leading-relaxed text-gray-500 dark:text-gray-400" v-show="renterIsReceiverOfRating">
+ Gi en vurdering til utleieren
+ </p>
+ <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400" v-show="!renterIsReceiverOfRating">
+ Gi en vurdering til leietakeren
+ </p>
+ </div>
+
+ <div class= "flex justify-center px-4">
+ <textarea class="w-full h-40 bg-gray-200 mb-4 ring-1 ring-gray-400 rounded-xl"/>
+ </div>
+
+ <div class="flex items-center justify-center mb-8">
+ <svg class="w-10 h-10 text-warn cursor-pointer" :class="rating[0]" @click="setRating(1)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
+ </path>
+ </svg>
+ <svg class="w-10 h-10 text-warn cursor-pointer" :class="rating[1]" @click="setRating(2)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
+ </path>
+ </svg>
+ <svg class="w-10 h-10 text-warn cursor-pointer" :class="rating[2]" @click="setRating(3)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
+ </path>
+ </svg>
+ <svg class="w-10 h-10 text-warn cursor-pointer" :class="rating[3]" @click="setRating(4)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
+ </path>
+ </svg>
+ <svg class="w-10 h-10 text-warn cursor-pointer" :class="rating[4]" @click="setRating(5)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
+ </path>
+ </svg>
+ </div>
+
+ <div class="flex justify-center mb-4">
+ <Button
+ :text="'Send en vurdering'"
+ @click="sendRating"></Button>
+ </div>
+
+ <!-- Modal footer -->
+ <div class="rounded-b border-t border-gray-200 dark:border-gray-600">
+ <!-- Slot: Add any html you want here -->
+ <slot />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import Button from "@/components/BaseComponents/ColoredButton";
+import { postNewRating} from "@/utils/apiutil";
+
+export default {
+ name: "RatingModal",
+ data(){
+ return{
+ score: 3,
+ comment: "",
+ rating:["text-warn", "text-warn", "text-warn", "text-gray-300", "text-gray-300"],
+ };
+ },
+ props: {
+ visible: Boolean,
+ name: String,
+ title: String,
+ rentID: Number,
+ renterIsReceiverOfRating: Boolean,
+
+ },
+
+ components: {
+ Button,
+ },
+ methods: {
+ setRating(ratingNumber){
+ this.score = ratingNumber;
+ for(let i = 0; i < 5; i++ ){
+ if(i < ratingNumber) {
+ this.rating[i] = "text-warn"
+ }
+ else {
+ this.rating[i] = "text-gray-300"
+ }
+ }
+ },
+ close() {
+ this.$emit("close");
+ },
+ async sendRating(){
+
+ const ratingInfo = {
+ score: this.score,
+ comment: this.comment,
+ renterIsReceiverOfRating: this.renterIsReceiverOfRating,
+ rentID: this.rentID
+ }
+
+ const postResponse = await postNewRating(ratingInfo);
+
+ console.log("posted: " + postResponse);
+
+ this.$router.push("/");
+
+ },
+ },
+};
+</script>
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index c3bf82cba6a7ea5ecaf82b2a0f33a2fa7534132a..0f0790dadcd232f9d7a90a0fe4451fdeec4fc7e1 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -116,7 +116,7 @@ export default {
title: "",
pricePerDay: 0,
},
- search: "",
+
communityID: -1,
community: {},
diff --git a/src/components/RentingComponents/NewRent.vue b/src/components/RentingComponents/NewRent.vue
index 32073aa24a66328935b56876748e554e8dc00925..7ced0d6da6b8575e6fa37f287ddc3ae464fa0072 100644
--- a/src/components/RentingComponents/NewRent.vue
+++ b/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;
diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
new file mode 100644
index 0000000000000000000000000000000000000000..73ae23b432b772e2718ce69230478a99c23a027f
--- /dev/null
+++ b/src/components/UserProfileComponents/UserItems.vue
@@ -0,0 +1,164 @@
+<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
diff --git a/src/components/UserProfileComponents/UserProfile.vue b/src/components/UserProfileComponents/UserProfile.vue
index 9235ab472cdd07769260c182f5acc0fddd9632a8..aa280f2bd99842d2e6ddd4fcf9ad0f3d2e3fddf7 100644
--- a/src/components/UserProfileComponents/UserProfile.vue
+++ b/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
>
diff --git a/src/router/index.js b/src/router/index.js
index 2f0d2e5ac5f619305ebf5431e4c0267a20dbe201..1f12a1c3eff8df8f9df225df171f3af8f226fa57 100644
--- a/src/router/index.js
+++ b/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({
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 7193b8a6cf707dbfec4527ae6bd94c060272c920..4a3becfcd9e287a3c7873d0ddd35c36daaf5a4e6 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -299,3 +299,31 @@ export async function LeaveCommunity(communityID) {
return error;
});
}
+
+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, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ console.log("poster: " + response.data);
+ return response;
+ })
+ .catch((error) => {
+ console.log(error.response);
+ return error;
+ });
+}
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 8755c39e632108ccca0f9ed1ce84f5db986e8105..32c28fcf4341712f117a4ed330b6a4886cf4603a 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- My communities, with pagination -->
<div v-if="loggedIn">
<div class="flex flex-row p-4 relative">
<div class="text-xl md:text-2xl text-gray-600 font-medium w-full">
@@ -10,18 +11,72 @@
alt="Opprett ny gruppe"
/>
</div>
- <CommunityList :communities="myCommunities" :member="true" />
+ <CommunityList :communities="visibleMyCommunities" :member="true" />
+
+ <!-- pagination my communities -->
+ <div class="flex justify-center">
+ <PaginationTemplate
+ v-bind:items="myCommunities"
+ v-on:page:update="updatePageMyCommunities"
+ v-bind:currentPage="currentPageMyCommunities"
+ v-bind:pageSize="pageSizeMyCommunities"
+ class="mt-10 mb-5"
+ />
+ </div>
</div>
+
+ <!-- Public communities, with search and pagination -->
<p class="text-xl md:text-2xl text-gray-600 font-medium w-full p-4">
Offentlige grupper
</p>
- <CommunityList :communities="publicCommunities" :member="false" />
+ <!-- Search field -->
+ <div class="relative mt-1 mx-2" 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>
+
+ <!-- Public communities list, two lists, one for when it's searched and one for pagination -->
+ <div v-if="showPaginated">
+ <CommunityList :communities="visiblePublicCommunities" :member="false" />
+ </div>
+ <div v-if="showSearched">
+ <CommunityList :communities="searchPublicCommunities" :member="false" />
+ </div>
+ <!-- pagination Public communities -->
+ <div class="flex justify-center">
+ <PaginationTemplate
+ v-bind:items="publicCommunities"
+ v-on:page:update="updatePagePublicCommunities"
+ v-bind:currentPage="currentPagePublicCommunities"
+ v-bind:pageSize="pageSizePublicCommunities"
+ class="mt-10 mb-5"
+ />
+ </div>
</template>
<script>
import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
import { UserAddIcon } from "@heroicons/vue/outline";
+import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
export default {
name: "HomeView",
@@ -30,31 +85,92 @@ export default {
loggedIn: false,
myCommunities: [],
publicCommunities: [],
+ search: '',
+ showSearched: false,
+ showPaginated: true,
+
+ //Variables connected to pagination
+ currentPagePublicCommunities: 0,
+ currentPageMyCommunities: 0,
+ pageSizeMyCommunities: 5,
+ pageSizePublicCommunities: 10,
+ visiblePublicCommunities: [],
+ visibleMyCommunities: [],
};
},
components: {
CommunityList,
UserAddIcon,
+ PaginationTemplate,
+ },
+ computed: {
+ searchPublicCommunities() {
+ let filteredItems = [];
+
+ filteredItems = this.publicCommunities.filter(
+ (p) =>
+ p.name.toLowerCase().includes(this.search.toLowerCase()) ||
+ p.location.toLowerCase().includes(this.search.toLowerCase())
+ );
+
+ return filteredItems;
+ },
+ },
+ methods:{
+ //Pagination
+ updatePagePublicCommunities(pageNumber) {
+ this.currentPagePublicCommunities = pageNumber;
+ this.updateVisibleCommunities();
+ },
+ updatePageMyCommunities(pageNumber) {
+ this.currentPageMyCommunities = pageNumber;
+ this.updateVisibleCommunities();
+ },
+ updateVisibleCommunities() {
+ this.visiblePublicCommunities = this.publicCommunities.slice(this.currentPagePublicCommunities * this.pageSizePublicCommunities, (this.currentPagePublicCommunities * this.pageSizePublicCommunities) + this.pageSizePublicCommunities);
+ this.visibleMyCommunities = this.myCommunities.slice(this.currentPageMyCommunities * this.pageSizeMyCommunities, (this.currentPageMyCommunities * this.pageSizeMyCommunities) + this.pageSizeMyCommunities);
+
+ // if we have 0 visible communities, go back a page
+ if (this.visiblePublicCommunities.length === 0 && this.currentPagePublicCommunities > 0) {
+ this.updatePagePublicCommunities(this.currentPagePublicCommunities -1);
+ }
+ if (this.visibleMyCommunities.length === 0 && this.currentPageMyCommunities > 0) {
+ this.updatePageMyCommunities(this.currentPageMyCommunities -1);
+ }
+ },
+ //Triggers when search field input is changed
+ searchWritten: function (){
+ //This method triggers when search input field is changed
+ if(this.search.length > 0){
+ this.showPaginated = false;
+ this.showSearched = true;
+ }
+ else{
+ this.showPaginated = true;
+ this.showSearched = false;
+ }
+ },
},
- async created() {
+ async beforeMount() {
this.publicCommunities = await getVisibleGroups();
this.loggedIn = this.$store.state.user.token !== null;
if (!this.loggedIn) return;
this.myCommunities = await getMyGroups();
- },
- mounted() {
- // Double loop is bad; find a better way to do this
+
+ // Loops through both arrays and removes myCommunities from public
for (var i = 0; i < this.publicCommunities.length; i++) {
for (var j = 0; j < this.myCommunities.length; j++) {
if (
- this.publicCommunities[i].communityId ===
- this.myCommunities[j].communityId
+ this.publicCommunities[i].communityId ===
+ this.myCommunities[j].communityId
) {
this.publicCommunities.splice(i, 1);
}
}
}
- },
+
+ this.updateVisibleCommunities();
+ }
};
</script>
diff --git a/src/views/UserProfileViews/UserItemsView.vue b/src/views/UserProfileViews/UserItemsView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..68183febcadb884441a48db2a600e4e305bd4878
--- /dev/null
+++ b/src/views/UserProfileViews/UserItemsView.vue
@@ -0,0 +1,18 @@
+<template>
+ <user-items> </user-items>
+</template>
+
+<script>
+import UserItems from "@/components/UserProfileComponents/UserItems.vue"
+export default {
+ name: "UserItemsView",
+ components:{
+ UserItems
+ }
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/tests/unit/component-tests/base-component-tests/pagination-template.spec.js b/tests/unit/component-tests/base-component-tests/pagination-template.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..c074ce41f5251ffb9c78f8fa491b86053931efb8
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/pagination-template.spec.js
@@ -0,0 +1,21 @@
+import {mount} from "@vue/test-utils";
+import Pagination from "@/components/BaseComponents/PaginationTemplate.vue";
+
+describe("PaginationTemplate", () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = mount(Pagination, {
+ //passing prop to component
+ props: {
+ items: [],
+ currentPage: 0,
+ pageSize: 4,
+ },
+ });
+ });
+
+ it("is instantiated", () => {
+ expect(wrapper.exists()).toBeTruthy();
+ });
+});
diff --git a/tests/unit/component-tests/renting-compnents-tests/new-rent.spec.js b/tests/unit/component-tests/renting-compnents-tests/new-rent.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..3f8ffafa68bf5dd606afdeda9214b57871ff174f
--- /dev/null
+++ b/tests/unit/component-tests/renting-compnents-tests/new-rent.spec.js
@@ -0,0 +1,46 @@
+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");
+ });
+});