diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 08a1468f9527895c878bf65e634ed4166362cd3a..63ccc0be85db9364b8f79ca0d1ab2fd19769fb87 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -1,17 +1,9 @@
<template>
- <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
- <div>
- <img
- class="cursor-pointer h-8 float-right"
- v-if="isLoggedIn"
- src="@/assets/members.png"
- alt="Medlemmer"
- @click="$router.push('/group/:id/memberlist')"
- />
- </div>
- <div class="mb-5 mt-5 border-b-2 border-blue-900">
- <label class="text-xl font-bold">Tøyenhus borettslag</label>
- </div>
+ <section class="w-full px-5 py-4 mx-auto rounded-md">
+
+ <CommunityHeader :admin-status="false" :community="community" class="mb-5"/>
+
+ <!-- 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">
@@ -34,8 +26,9 @@
/>
</div>
- <div class="absolute inset-x-0 px-6 py-3 mt-4">
- <div class="grid grid-cols-2">
+ <!-- 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">
<ItemCard v-for="item in searchedItems" :key="item" :item="item" />
</div>
</div>
@@ -44,12 +37,16 @@
<script>
import ItemCard from "@/components/CommunityComponents/ItemCard";
+import CommunityHeader from "@/components/BaseComponents/CommunityHeader";
+import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil";
export default {
name: "SearchItemListComponent",
components: {
+ CommunityHeader,
ItemCard,
},
+
computed: {
searchedItems() {
let filteredItems = [];
@@ -57,43 +54,41 @@ export default {
filteredItems = this.items.filter(
(p) =>
p.title.toLowerCase().includes(this.search.toLowerCase()) ||
- p.adresse.toLowerCase().includes(this.search.toLowerCase()) ||
- p.price === Number(this.search)
+ p.address.toLowerCase().includes(this.search.toLowerCase()) ||
+ p.pricePerDay === Number(this.search)
);
return filteredItems;
},
},
- created() {
- if(this.$store.state.user.token !== null){
- this.isLoggedIn = true
- }
- },
-
- /**
- * Her må det lages en metode som henter alle items (i en gruppe) fra databasen.
- * De kan deretter bli pusha inn i items array, og da burde de bli displayet i lista.
- * Når denne metoden er på plass kan items[] i data tømmes. Da vil alt dataen komme fra db.
- */
data() {
return {
- isLoggedIn: false,
- items: [
- { img: "", adresse: "Oslo", title: "Dyson", price: 1000 },
-
- { img: "", adresse: "Trondheim", title: "Gressklipper", price: 500 },
-
- { img: "", adresse: "Bergen", title: "Bil", price: 500 },
- ],
+ items: [],
item: {
img: "",
- adresse: "",
+ address: "",
title: "",
- price: 0,
+ pricePerDay: 0,
},
search: "",
+ communityID: -1,
+ community: {},
};
},
+ methods: {
+ 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;
+ 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 44abedf3ca02f74998e51ae0816ea00c1bdf3293..67d01a798800a5ddff31b1452fa48936e6317f4a 100644
--- a/src/components/CommunityComponents/ItemCard.vue
+++ b/src/components/CommunityComponents/ItemCard.vue
@@ -1,6 +1,6 @@
<template>
<div class="mt-5">
- <div class="w-4/5 rounded bg-gray-200">
+ <div class="w-52 rounded bg-gray-200">
<img
class="w-full"
:src="item.img || require('../../assets/default-product.png')"
@@ -8,10 +8,10 @@
/>
<div class="p-1 m-1">
<p class="text-gray-700 text-xs font-bold" id="adress">
- {{ item.adresse }}
+ {{ item.address }}
</p>
<p class="font-bold text-sm" id="title">{{ item.title }}</p>
- <p class="text-gray-700 text-xs" id="price">{{ item.price }} kr</p>
+ <p class="text-gray-700 text-xs" id="price">{{ item.pricePerDay }} kr</p>
</div>
</div>
</div>
@@ -22,9 +22,9 @@ export default {
props: {
item: {
img: String,
- adresse: String,
+ address: String,
title: String,
- price: Number,
+ pricePerDay: Number,
},
},
};
diff --git a/src/components/NavigationComponents/NavBar.vue b/src/components/NavigationComponents/NavBar.vue
index c440c3555f76aae08a30cb70d29002fdf3bf718a..a14c390128eea359968f895e823ecc620be36645 100644
--- a/src/components/NavigationComponents/NavBar.vue
+++ b/src/components/NavigationComponents/NavBar.vue
@@ -1,6 +1,6 @@
<template>
<nav
- class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid"
+ class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
>
<div class="logo">
<img
diff --git a/src/router/index.js b/src/router/index.js
index 79a605ba1591159d498c1abeedf8063a18512776..c8010e34653dc6042db7fa8c70679cd2d06d3473 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -93,7 +93,7 @@ const routes = [
component: () => import("../views/CommunityViews/MyCommunitiesView.vue"),
},
{
- path: "/community/:id",
+ path: "/community/:communityID",
name: "GroupHome",
component: () => import("../views/CommunityViews/CommunityHomeView.vue"),
},
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 36cc5d98091d38e0707974782c5f5f0bab692c51..b3aa02de8b647da5780bc6bafdcf542ecc59a784 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -147,3 +147,29 @@ export function getVisibleGroups() {
console.error(error);
});
}
+
+export async function GetCommunity(communityID) {
+ 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);
+ });
+}
diff --git a/tests/unit/apiutil-communityHome-mock.spec.js b/tests/unit/apiutil-communityHome-mock.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..e627100092bd72fc03e951682a4df9d58ecc78e6
--- /dev/null
+++ b/tests/unit/apiutil-communityHome-mock.spec.js
@@ -0,0 +1,58 @@
+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);
+ })
+});