Merge pull request #2163 from brkcvn/search-box

Search box not show when the page is first loaded.

resources/assets/js/components/AkauntingSearch.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :id="'search-field-' + _uid" class="searh-field tags-input__wrapper">
+    <div :id="'search-field-' + _uid" class="searh-field tags-input__wrapper" :style="[!search_hidden ? {'height': '0px'} : {'height': 'auto'}]">
         <div class="tags-group" v-for="(filter, index) in filtered" :index="index">
             <span v-if="filter.option" class="el-tag el-tag--primary el-tag--small el-tag--light el-tag-option">
                 {{ filter.option }}
@@ -148,7 +148,8 @@ export default {
             description: 'List of filters'
         },
 
-        dateConfig: null,
+        dateConfig: null
+        
     },
 
     model: {
@@ -177,10 +178,20 @@ export default {
             values: [],
             current_value: null,
             show_date: false,
+            search_hidden: false
         };
     },
 
     methods: {
+        searchBoxShow() {
+            if(document.querySelector('.js-search-input-box')) {
+                let search_box_html = document.querySelector('.js-search-input-box');
+                search_box_html.remove();
+            }
+
+            this.search_hidden = true;
+        },
+
         onInputFocus() {
             if (!this.filter_list.length) {
                 return;
@@ -577,6 +588,8 @@ export default {
     },
 
     created() {
+        this.searchBoxShow();
+
         let path = window.location.href.replace(window.location.search, '');
 
         let cookie = Cookies.get('search-string');
@@ -715,6 +728,10 @@ export default {
         }
     },
 
+    mounted() {
+        this.searchBoxShow();
+    },
+
     computed: {
         filteredOptions() {
             this.filter_list.sort(function (a, b) {

resources/views/components/search-string.blade.php

@@ -1,3 +1,9 @@
+<div class="position-relative js-search-input-box" style="height: 45px;">
+    <div class="border-bottom-0 w-100 position-absolute left-0 right-0" style="z-index: 9;">
+        <input type="text" placeholder="Search or filter results..." class="form-control" />
+    </div>
+</div>
+
 <akaunting-search
     placeholder="{{ (!empty($filters)) ? trans('general.placeholder.search_and_filter') : trans('general.search_placeholder')}}"
     search-text="{{ trans('general.search_text') }}"