From 4d8210bba5633da0df34547bb76e6696149838d9 Mon Sep 17 00:00:00 2001
From: An Phan <an@construct.sg>
Date: Thu, 7 Jan 2016 14:15:25 +0800
Subject: [PATCH] Search form now works universally

---
 .../main-wrapper/main-content/albums.vue      | 25 ++++---------------
 .../main-wrapper/main-content/artists.vue     | 25 ++++---------------
 2 files changed, 10 insertions(+), 40 deletions(-)

diff --git a/resources/assets/js/components/main-wrapper/main-content/albums.vue b/resources/assets/js/components/main-wrapper/main-content/albums.vue
index c7e15496..b35c8bef 100644
--- a/resources/assets/js/components/main-wrapper/main-content/albums.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/albums.vue
@@ -1,22 +1,7 @@
 <template>
     <section id="albumsWrapper">
         <h1 class="heading">
-            <span>Albums
-                <i class="fa fa-angle-down toggler" 
-                    v-show="isPhone && !showingControls" 
-                    @click="showingControls = true"></i>
-                <i class="fa fa-angle-up toggler" 
-                    v-show="isPhone && showingControls" 
-                    @click.prevent="showingControls = false"></i>
-            </span>
-
-            <input 
-                v-show="!isPhone || showingControls"
-                type="search" 
-                v-model="q" 
-                :class="{ dirty: q }" 
-                debounce="100" 
-                placeholder="Search">
+            <span>Albums</span>
         </h1>
 
         <div class="albums main-scroll-wrap" v-el:wrapper @scroll="scrolling">
@@ -42,8 +27,6 @@
 </template>
 
 <script>
-    import isMobile from 'ismobilejs';
-    
     import albumItem from '../../shared/album-item.vue';
     import infiniteScroll from '../../../mixins/infinite-scroll';
     import albumStore from '../../../stores/album';
@@ -58,8 +41,6 @@
                 numOfItems: 9,
                 state: albumStore.state,
                 q: '',
-                isPhone: isMobile.phone,
-                showingControls: false,
             };
         },
 
@@ -81,6 +62,10 @@
                 this.q = '';
                 this.numOfItems = 9;
             },
+
+            'filter:changed': function (q) {
+                this.q = q;
+            },
         },
     };
 </script>
diff --git a/resources/assets/js/components/main-wrapper/main-content/artists.vue b/resources/assets/js/components/main-wrapper/main-content/artists.vue
index a048a657..427706b0 100644
--- a/resources/assets/js/components/main-wrapper/main-content/artists.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/artists.vue
@@ -1,22 +1,7 @@
 <template>
     <section id="artistsWrapper">
         <h1 class="heading">
-            <span>
-                Artists
-                <i class="fa fa-angle-down toggler" 
-                    v-show="isPhone && !showingControls" 
-                    @click="showingControls = true"></i>
-                <i class="fa fa-angle-up toggler" 
-                    v-show="isPhone && showingControls" 
-                    @click.prevent="showingControls = false"></i>
-            </span>
-            <input 
-                v-show="!isPhone || showingControls"
-                type="search" 
-                v-model="q" 
-                :class="{ dirty: q }" 
-                debounce="100" 
-                placeholder="Search">
+            <span>Artists</span>
         </h1>
     
         <div class="artists main-scroll-wrap" v-el:wrapper @scroll="scrolling">
@@ -41,8 +26,6 @@
 </template>
 
 <script>
-    import isMobile from 'ismobilejs';
-
     import artistItem from '../../shared/artist-item.vue';
     import infiniteScroll from '../../../mixins/infinite-scroll';
     import artistStore from '../../../stores/artist';
@@ -58,8 +41,6 @@
                 numOfItems: 9,
                 state: artistStore.state,
                 q: '',
-                isPhone: isMobile.phone,
-                showingControls: false,
             };
         },
 
@@ -81,6 +62,10 @@
                 this.q = '';
                 this.numOfItems = 9;
             },
+
+            'filter:changed': function (q) {
+                this.q = q;
+            },
         },
     };
 </script>