Fixed api call

src/components/BaseComponents/PaginationTemplate.vue

+<template>
+  <div v-if="totalPages() > 0">
+    <span v-if="showPreviousLink()"
+          class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
+          @click="updatePage(currentPage - 1)">
+      Forrige
+    </span>
+    <label class="mx-2">{{ currentPage + 1 }} av {{ totalPages() }}</label>
+    <span
+        v-if="showNextLink()"
+        class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
+        @click="updatePage(currentPage + 1)">
+      Neste
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'paginationTemplate',
+  props: ['items', 'currentPage', 'pageSize'],
+  methods: {
+    updatePage(pageNumber) {
+      this.$emit('page:update', pageNumber);
+    },
+    totalPages() {
+      return Math.ceil(this.items.length / this.pageSize);
+    },
+    showPreviousLink() {
+      return this.currentPage == 0 ? false : true;
+    },
+    showNextLink() {
+      return this.currentPage == (this.totalPages() - 1) ? false : true;
+    }
+  }
+}
+</script>

src/components/CommunityComponents/CommunityHome.vue

@@ -22,19 +22,39 @@
         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>
 
-    <!-- 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"
-          @click="goToItemInfoPage(item.listingID)"
+
+    <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" @click="goToItemInfoPage(item.listingID)" />
+        </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" @click="goToItemInfoPage(item.listingID)" />
+        </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>
@@ -42,8 +62,10 @@
 </template>
 
 <script>
-import CommunityHeader from "@/components/CommunityComponents/CommunityHeader.vue";
 import ItemCard from "@/components/ItemComponents/ItemCard";
+import CommunityHeader from "@/components/CommunityComponents/CommunityHeader";
+import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
+
 import {
   GetCommunity,
   GetListingsInCommunity,
@@ -54,6 +76,7 @@ export default {
   components: {
     CommunityHeader,
     ItemCard,
+    PaginationTemplate,
   },
   computed: {
     searchedItems() {
@@ -87,6 +110,14 @@ export default {
       search: "",
       communityID: -1,
       community: {},
+
+      showItems: true,
+      showSearchedItems: false,
+
+      //Variables connected to pagination
+      currentPage: 0,
+      pageSize: 12,
+      visibleItems: [],
     };
   },
   methods: {
@@ -114,10 +145,36 @@ export default {
       let res = await getItemPictures(itemid);
       return res;
     },
+    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;
+      }
+    },
+
+    //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);
+      }
+    },
   },
-  beforeMount() {
-    this.getCommunityFromAPI(); //To get the id of the community before mounting the view
-    this.getListingsOfCommunityFromAPI();
+  async beforeMount() {
+    await this.getCommunityFromAPI(); //To get the id of the community before mounting the view
+    await this.getListingsOfCommunityFromAPI();
+    this.updateVisibleTodos();
   },
 };
 </script>

src/components/CommunityComponents/CommunityRequestForm.vue

@@ -11,7 +11,7 @@
 
 
     <!-- Description -->
-    <div class="mt-6" :class="{ error: v$.group.description.$errors.length }">
+    <div class="mt-6" :class="{ error: v$.description.$errors.length }">
       <label
         class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
         id="descriptionLabel"
@@ -20,7 +20,7 @@
       <textarea
         id="description"
         rows="4"
-        v-model="v$.group.description.$model"
+        v-model="description"
         class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         required
       ></textarea>
@@ -28,7 +28,7 @@
       <!-- error message for description -->
       <div
         class="text-error"
-        v-for="(error, index) of v$.group.description.$errors"
+        v-for="(error, index) of v$.description.$errors"
         :key="index"
       >
         <div class="text-error text-sm">
@@ -49,6 +49,7 @@ import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required, helpers, maxLength } from "@vuelidate/validators";
 import Button from "@/components/BaseComponents/ColoredButton";
+import {tokenHeader}  from "@/utils/token-utils";
 import {GetCommunity} from "@/utils/apiutil";
 
 export default {
@@ -63,7 +64,6 @@ export default {
 
   validations() {
     return {
-      group: {
         description: {
           required: helpers.withMessage(
             () => "Meldingen kan ikke være tom",
@@ -74,7 +74,7 @@ export default {
             maxLength(200)
           ),
         },
-      },
+
     };
   },
   data() {
@@ -87,9 +87,12 @@ export default {
   computed: {
   },
   methods: {
-
+    //TODO fix so that community id is set (not null)
     async saveClicked() {
-      await axios.post(process.env.VUE_APP_BASEURL+ `community/${this.communityId}/private/join`);
+        this.communityID = await this.$router.currentRoute.value.params
+        .communityID;
+
+      await axios.post(process.env.VUE_APP_BASEURL+ `communities/${this.communityID}/private/join`, {message: this.description, }, {headers: tokenHeader()} );
     },
      getCommunityFromAPI: async function () {
       this.communityID = await this.$router.currentRoute.value.params