- SearchBar.vue refactored

resources/js/components/FilesView/DesktopToolbar.vue

@@ -1,6 +1,7 @@
 <template>
     <div id="desktop-toolbar">
         <div class="toolbar-wrapper">
+
             <!-- Go back-->
             <div class="toolbar-go-back" v-if="homeDirectory">
                 <div @click="goBack" class="go-back-button">
@@ -18,9 +19,10 @@
 
             <!-- Tools-->
             <div class="toolbar-tools">
+
                 <!--Search bar-->
                 <div class="toolbar-button-wrapper">
-                    <SearchBar/>
+                    <SearchBar v-model="query" @reset-query="query = ''" :placeholder="$t('inputs.placeholder_search_files')" />
                 </div>
 
                 <!--Creating controls-->
@@ -50,12 +52,12 @@
 <script>
 import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
 import { ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
+import SearchBar from '@/components/FilesView/SearchBar'
 import UploadProgress from '@/components/FilesView/UploadProgress'
 import ToolbarButton from '@/components/FilesView/ToolbarButton'
-import SearchBar from '@/components/FilesView/SearchBar'
+import {debounce, last} from 'lodash'
 import { mapGetters } from 'vuex'
 import { events } from '@/bus'
-import { last } from 'lodash'
 
 export default {
     name: 'ToolBar',
@@ -77,10 +79,10 @@ export default {
             'homeDirectory'
         ]),
         hasCapacity() {
-            // Check if set storage limitation
+            // Check if storage limitation is set
             if (!this.$store.getters.config.storageLimit) return true
 
-            // Check if is loaded user
+            // Check if user is loaded
             if (!this.$store.getters.user) return true
 
             // Check if user has storage
@@ -137,7 +139,8 @@ export default {
     },
     data() {
         return {
-            sortingAndPreview: false
+            sortingAndPreview: false,
+            query: '',
         }
     },
     watch: {
@@ -149,7 +152,28 @@ export default {
             if (!this.sortingAndPreview) {
                 events.$emit('unClick')
             }
-        }
+        },
+        query: debounce(function (value) {
+
+            if (this.query !== '' && typeof this.query !== 'undefined') {
+
+                this.$store.dispatch('getSearchResult', value)
+
+            } else if (typeof value !== 'undefined') {
+
+                if (this.currentFolder) {
+
+                    // Get back after delete query to previously folder
+                    if (this.$isThisLocation('public')) {
+                        this.$store.dispatch('browseShared', [{folder: this.currentFolder, back: true, init: false}])
+                    } else {
+                        this.$store.dispatch('getFolder', [{folder: this.currentFolder, back: true, init: false}])
+                    }
+                }
+
+                this.$store.commit('CHANGE_SEARCHING_STATE', false)
+            }
+        }, 300),
     },
     methods: {
         goBack() {
@@ -206,10 +230,6 @@ export default {
         }
     },
     mounted() {
-        // events.$on('sortingAndPreview', (state) => {
-        //     this.sortingAndPreview = state
-        // })
-
         events.$on('unClick', () => {
             this.sortingAndPreview = false
         })

resources/js/components/FilesView/SearchBar.vue

@@ -7,29 +7,29 @@
             <x-icon class="pointer" size="19" />
         </div>
         <input
-                v-model="query"
-                class="query focus-border-theme"
-                type="text"
-                name="query"
-                :placeholder="$t('inputs.placeholder_search_files')"
+            v-model="query"
+            @input="$emit('input', query)"
+            class="query focus-border-theme"
+            type="text"
+            :placeholder="placeholder"
         />
     </div>
 </template>
 
 <script>
-    import { SearchIcon, XIcon } from 'vue-feather-icons'
-    import {mapGetters} from 'vuex'
-    import {debounce} from 'lodash'
+    import {SearchIcon, XIcon} from 'vue-feather-icons'
     import {events} from '@/bus'
 
     export default {
-        name: 'SearchBar',
+        name: 'DesktopSearchBar',
+        props: [
+            'placeholder'
+        ],
         components: {
             SearchIcon,
             XIcon,
         },
         computed: {
-            ...mapGetters(['currentFolder']),
             isQuery() {
                 return this.query !== '' && typeof this.query !== 'undefined'
             }
@@ -39,36 +39,14 @@
                 query: ''
             }
         },
-        watch: {
-            query(val) {
-                return this.getResult(val)
-            }
-        },
         methods: {
             resetQuery() {
                 this.query = ''
-            },
-            getResult: debounce(function (value) {
-                if (this.isQuery) {
-                    // Get search result if query is not empty
-                    this.$store.dispatch('getSearchResult', value)
-                } else if (typeof value !== 'undefined') {
-                    if (this.currentFolder) {
-
-                        // Get back after delete query to previosly folder
-                        if ( this.$isThisLocation('public') ) {
-                            this.$store.dispatch('browseShared', [{folder: this.currentFolder, back: true, init: false}])
-                        } else {
-                            this.$store.dispatch('getFolder', [{folder: this.currentFolder, back: true, init: false}])
-                        }
-                    }
-
-                    this.$store.commit('CHANGE_SEARCHING_STATE', false)
-                }
-            }, 300)
+                this.$emit('reset-query')
+            }
         },
         created() {
-            events.$on('clear-query', () => (this.query = undefined))
+            events.$on('clear-query', () => this.query = undefined)
         }
     }
 </script>