filter

src/components/BaseComponents/FilterComponent.vue

+<template>
+  <div>
+    <div class="form-check" v-for="filter in filters" :key="filter">
+      <input
+          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+          type="radio"
+          name="flexRadioDefault"
+          :value="filter"
+          @change="checkRadioButton($event)"
+      />
+      <label
+          class="form-check-label inline-block text-gray-800"
+      >
+        {{ filter}}
+      </label>
+    </div>
+    <ColoredButton
+      :text="'Lagre'"
+      @click="saveFilter()"
+      class="m-2 w-fit"
+    />
+  </div>
+
+</template>
+
+<script>
+import ColoredButton from "@/components/BaseComponents/ColoredButton";
+export default {
+  name: "FilterComponent",
+  components: {
+    ColoredButton,
+  },
+  data(){
+    return{
+      radio: null,
+      filters: ['Pris: lav til høy', 'Pris: høy til lav', 'Tittel: A - Å', 'Tittel: Å - A'],
+    }
+  },
+  methods: {
+    checkRadioButton: function (event){
+      this.radio = event.target.value;
+    },
+
+    saveFilter: function(radio){
+      console.log("Save clicked");
+      //console.log(this.radio);
+      radio = this.radio;
+      this.$emit("filter", radio);
+    }
+  }
+}
+</script>

src/components/CommunityComponents/CommunityHome.vue

@@ -20,7 +20,7 @@
         <input
             type="text"
             id="searchInput"
-            class="w-4/5 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"
+            class="w-11/12 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"
@@ -29,11 +29,15 @@
           <ColoredButton
               :text="'Filter'"
               @click="OpenFilter()"
-              class="m-2 w-1/5"
+              class="m-2 w-fit"
           />
         </div>
+        <FilterComponent
+            class=" bg-white"
+            v-if="filterDialog"
+            v-on:filter="saveFilter"
+        />
       </div>
-
     </div>
 
     <div class="absolute inset-x-0 px-5 py-3">
@@ -85,6 +89,7 @@ import ItemCard from "@/components/ItemComponents/ItemCard";
 import CommunityHeader from "@/components/CommunityComponents/CommunityHeader";
 import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
 import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
+import FilterComponent from "@/components/BaseComponents/FilterComponent";
 
 import {
   GetCommunity,
@@ -98,6 +103,7 @@ export default {
     ItemCard,
     PaginationTemplate,
     ColoredButton,
+    FilterComponent,
   },
   computed: {
     searchedItems() {
@@ -132,6 +138,7 @@ export default {
       communityID: -1,
       community: {},
       filterDialog: false,
+      selectedFilter: null,
 
       showItems: true,
       showSearchedItems: false,
@@ -177,10 +184,20 @@ export default {
     },
 
     OpenFilter: function (){
-      this.filterDialog = true;
+      if(this.filterDialog === true){
+        this.filterDialog = false;
+      }
+      else {
+        this.filterDialog = true;
+      }
       console.log(this.filterDialog);
     },
 
+    saveFilter(radio){
+      this.selectedFilter = radio;
+      console.log(this.selectedFilter);
+    },
+
     //Pagination
     updatePage(pageNumber) {
       this.currentPage = pageNumber;