Put back in the text input for filtering by show title.

themes-default/slim/src/components/home.vue

@@ -118,18 +118,6 @@ export default {
                 setLayout({ page, layout });
             }
         },
-        filterByName: {
-            get() {
-                const { local } = this.stateLayout;
-                const { showFilterByName } = local;
-
-                return showFilterByName;
-            },
-            set(value) {
-                const { setLayoutLocal } = this;
-                setLayoutLocal({ key: 'showFilterByName', value });
-            }
-        },
         showList: {
             get() {
                 const { stateLayout } = this;

themes-default/slim/src/components/show-list/index.vue

@@ -11,6 +11,9 @@
                 <h3 class="header">{{listTitle}}</h3>
             </div>
             <div class="col-lg-12">
+                <div class="show-option">
+                    <input type="search" v-model="filterByName" class="form-control form-control-inline input-sm input200" placeholder="Filter Show Name">
+                </div>
                 <div class="show-option">
                     <!-- These need to patch apiv2 on change! -->
                     <select v-model="posterUiSortDir" id="postersortdirection" class="form-control form-control-inline input-sm" placeholder="Direction">
@@ -112,6 +115,18 @@ export default {
         ...mapGetters({
             showsInLists: 'showsInLists'
         }),
+        filterByName: {
+            get() {
+                const { local } = this.stateLayout;
+                const { showFilterByName } = local;
+
+                return showFilterByName;
+            },
+            set(value) {
+                const { setLayoutLocal } = this;
+                setLayoutLocal({ key: 'showFilterByName', value });
+            }
+        },
         mappedLayout() {
             const { layout } = this;
             if (layout === 'small') {
@@ -145,7 +160,8 @@ export default {
     methods: {
         ...mapActions({
             setPosterSortBy: 'setPosterSortBy',
-            setPosterSortDir: 'setPosterSortDir'
+            setPosterSortDir: 'setPosterSortDir',
+            setLayoutLocal: 'setLayoutLocal'
         })
     }
 };

themes-default/slim/src/components/show-list/poster.vue

@@ -140,7 +140,8 @@ export default {
             borderRadius: null,
             borderWidth: null,
             isotopeLoaded: false,
-            imgLazyLoad: null
+            imgLazyLoad: null,
+            filterByTitle: ''
         };
     },
     computed: {
@@ -152,7 +153,8 @@ export default {
             posterSortBy: state => state.config.layout.posterSortby,
             posterSortDir: state => state.config.layout.posterSortdir,
             posterSize: state => state.config.layout.local.posterSize,
-            currentShowTab: state => state.config.layout.local.currentShowTab
+            currentShowTab: state => state.config.layout.local.currentShowTab,
+            showFilterByName: state => state.config.layout.local.showFilterByName
         }),
         ...mapGetters({
             fuzzyParseDateTime: 'fuzzyParseDateTime'
@@ -278,6 +280,19 @@ export default {
             this.$nextTick(() => {
                 this.$refs[`isotope-${listTitle}`].arrange();
             });
+        },
+        showFilterByName(value) {
+            const { $refs, listTitle } = this;
+
+            const allContainers = $refs[`isotope-${listTitle}`].$el.querySelectorAll('.show-container');
+
+            for (const container of allContainers) {
+                if (container.textContent.toLowerCase().includes(value.toLowerCase())) {
+                    container.classList.remove('hide');
+                } else {
+                    container.classList.add('hide');
+                }
+            }
         }
     }
 };