<template>
    <div class="container">
        <h1>{{ title }}</h1>
        <div id="search">
        </div>
        <ul>
            <serie v-for="serie in series" :key="serie.id" :serie-details="serie" @clicked="toggleFavorites($event)"></serie>
        </ul>
    </div>
</template>

<script>
import Serie from '@/components/Serie.vue'
import seriesService from '@/services/series.service'
import favoritesService from '@/services/favorites.service'

export default {
    components: {
        Serie
    },
    data () {
        return {
            title: 'Liste des séries',
            series: []
        }
    },
    mounted () {
        seriesService.getSeries().then(response => (this.series = response.data.map(item => item.show)))
    },
    methods: {
        toggleFavorites (serie) {
            favoritesService.isFavorite(serie) ? favoritesService.removeFavorite(serie) : favoritesService.addFavorite(serie) 
        }
    }
}
</script>

<style scoped>
#search {
    padding-bottom: 15px;
}
ul {
    -webkit-padding-start: 0px;
}
</style>

<template>
    <div class="container">
        <h1>{{ title }}</h1>
        <div id="search">
            <input type="text" v-model="search" class="form-control" placeholder="Filtrer...">
        </div>
        <ul>
            <serie v-for="serie in filteredSeries" :key="serie.id" :serie-details="serie" @clicked="toggleFavorites($event)"></serie>
        </ul>
    </div>
</template>

<script>
import Serie from '@/components/Serie.vue'
import seriesService from '@/services/series.service'
import favoritesService from '@/services/favorites.service'

export default {
    components: {
        Serie
    },
    data () {
        return {
            title: 'Liste des séries',
            series: [],
            search: ''
        }
    },
    mounted () {
        seriesService.getSeries().then(response => (this.series = response.data.map(item => item.show)))
    },
    methods: {
        toggleFavorites (serie) {
            favoritesService.isFavorite(serie) ? favoritesService.removeFavorite(serie) : favoritesService.addFavorite(serie) 
        }
    },
    computed: {
        filteredSeries () {
                  return this.search === '' ? this.series : this.series.filter(serie => serie.name.toLowerCase().includes(this.search.toLowerCase()))
        }
    }
}
</script>

<style scoped>
#search {
    padding-bottom: 15px;
}
ul {
    -webkit-padding-start: 0px;
}
</style>

Add search input to filter series
Add search input to filter series

