~jshsj/recipes_frontend

9d460b2fddb1c07a46cfb95bf696d9913124c6ff — JSH 1 year, 10 months ago a3277a2
Fixed filtering
1 files changed, 58 insertions(+), 45 deletions(-)

M components/RecipeList.vue
M components/RecipeList.vue => components/RecipeList.vue +58 -45
@@ 1,22 1,42 @@
<template>
<div class="container">
  <div class="filters layout">
            <div class="filter-buttons">
              <button id="all-button" class="category-button category--active" @click="filter_list_by_category('all')">Alle</button>
              <button v-for="category in categories" :key="category" :id="category + '-button'" class="category-button" @click="filter_list_by_category(category)">{{category}}</button>
            </div>
            <input @keyup="filter_list" v-model="search_input" placeholder="Suchen..." class="search-input">
            </div>
            <div class="layout">
  <div class="container">
    <div class="filters layout">
      <div class="filter-buttons">
        <button
          id="all-button"
          class="category-button category--active"
          @click="filter_list_by_category('all')"
        >Alle</button>
        <button
          v-for="category in categories"
          :key="category"
          :id="category + '-button'"
          class="category-button"
          @click="filter_list_by_category(category)"
        >{{category}}</button>
      </div>
      <input
        @keyup="filter_list"
        v-model="search_input"
        placeholder="Suchen..."
        class="search-input"
      >
    </div>
    <div class="layout">
      <transition-group name="list-complete" tag="div" class="recipelist-wrap">
            <RecipeListEntry v-for="recipe in filtered_list" :key="recipe.meta.slug" :recipe="recipe" class="recipe-list-item"/>
        <RecipeListEntry
          v-for="recipe in filtered_list"
          :key="recipe.meta.slug"
          :recipe="recipe"
          class="recipe-list-item"
        />
      </transition-group>
      </div>
    </div>
  </div>
</template>

<script>
import RecipeListEntry from "@/components/RecipeListEntry"
import RecipeListEntry from '@/components/RecipeListEntry'

export default {
  name: 'RecipeList',


@@ 24,20 44,20 @@ export default {
    RecipeListEntry
  },
  props: {
      recipeList: Array,
      categories: Array,
    recipeList: Array,
    categories: Array
  },
  data() {
  return {
    filtered_list: {},
    search_input: "",
    active_category: ""
  } 
    return {
      filtered_list: {},
      search_input: '',
      active_category: ''
    }
  },
  methods: {
    filter_list_by_category(category) {
      if (category == "all") {
        this.active_category = ""
      if (category == 'all') {
        this.active_category = ''
      } else {
        this.active_category = category
      }


@@ 49,21 69,22 @@ export default {

      let new_button = document.getElementById(category + '-button')
      new_button.classList.add('category--active')
      
      this.filter_list()
    },
    filter_list() {
      let search = this.search_input.trim().toLowerCase()
      this.filtered_list = this.recipeList
      if (this.active_category !== "") [
        this.filtered_list = this.filtered_list.filter(recipe => {
          return recipe.category_name == this.active_category
      if (this.active_category !== '')
        [
          (this.filtered_list = this.filtered_list.filter(recipe => {
            return recipe.category_name == this.active_category
          }))
        ]
      if (this.search_input !== '') {
        this.filtered_list = this.recipeList.filter(recipe => {
          return recipe.meta.slug.includes(search)
        })
      ]
      if (this.search_input !== "") {
      this.filtered_list = this.recipeList.filter(recipe => {
        return recipe.meta.slug.includes(search)
      })
    }
      }
    }
  },
  created() {


@@ 105,10 126,9 @@ $color-darker: rgb(114, 38, 0);

.filter-buttons {
  display: flex;
  flex-direction:row;
  flex-direction: row;
}


.category-button {
  color: $color-main;
  height: 40px;


@@ 131,12 151,11 @@ $color-darker: rgb(114, 38, 0);
  }

  &.category--active {
  color: $color-lighter;
}
    color: $color-lighter;
  }
}

.search-input {

  color: $color-main;
  padding: 0px 15px;
  height: 40px;


@@ 148,16 167,13 @@ $color-darker: rgb(114, 38, 0);
  text-transform: uppercase;
  background: #f7f2ef;
  border: none;



}


.recipe-list-item {
  transition: all .4s;
  transition: all 0.4s;
}
.list-complete-enter, .list-complete-leave-to {
.list-complete-enter,
.list-complete-leave-to {
  transform: translateY(-60px);
  opacity: 0;
}


@@ 165,7 181,4 @@ $color-darker: rgb(114, 38, 0);
.list-complete-leave-active {
  position: absolute;
}



</style>