From 4e9f436972bd594e254472a6d343a5edd87192e6 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 17 Aug 2019 21:05:51 +0100
Subject: [PATCH] Filter tile functionality

---
 src/components/FilterTile.vue | 31 +++++++++++++++++++++++++++++++
 src/views/Home.vue            | 18 ++++++++++++++++--
 2 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/components/FilterTile.vue

diff --git a/src/components/FilterTile.vue b/src/components/FilterTile.vue
new file mode 100644
index 00000000..041470f6
--- /dev/null
+++ b/src/components/FilterTile.vue
@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <el-input
+          placeholder="Start typing station name or code"
+          v-model="input"
+          v-on:input="userIsTypingSomething">
+        </el-input>
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'FilterTile',
+  data () {
+    return {
+      input: ''
+    }
+  },
+  methods: {
+    userIsTypingSomething (stuff) {
+      this.$emit('user-is-searchin', stuff)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 062360b3..460e456e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,13 +2,14 @@
   <div class="home">
     <h1>{{title}}</h1>
     <span class="subtitle">{{subtitle}}</span>
+    <FilterTile @user-is-searchin="searching" />
     <div class="item-group-container">
       <ItemGroup
         v-for="item in items"
         :key="item.id"
         :groupId="item.id"
         :title="item.name"
-        :items="item.items"
+        :items="filterTiles(item.items)"
       />
     </div>
   </div>
@@ -16,17 +17,30 @@
 
 <script>
 
+import FilterTile from '@/components/FilterTile.vue'
 import ItemGroup from '@/components/ItemGroup.vue'
 import * as linkData from './../data/item-data.json'
 
 export default {
   name: 'home',
   components: {
+    FilterTile,
     ItemGroup
   },
   data: () => {
     return {
-      items: linkData.default
+      items: linkData.default,
+      searchTile: ''
+    }
+  },
+  methods: {
+    searching (searchTile) {
+      this.searchTile = searchTile
+    },
+    filterTiles (allTiles) {
+      return allTiles.filter(tile => {
+        return tile.title.toLowerCase().includes(this.searchTile.toLowerCase())
+      })
     }
   },
   props: {