Merge pull request #2169 from brkcvn/search-box-top

Search box done development for blade

resources/assets/js/components/AkauntingSearch.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :id="'search-field-' + _uid" class="searh-field tags-input__wrapper" :style="[!search_hidden ? {'height': '0px'} : {'height': 'auto'}]">
+    <div :id="'search-field-' + _uid" class="searh-field tags-input__wrapper js-search">
         <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 }}
@@ -178,20 +178,10 @@ 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;
@@ -588,8 +578,6 @@ export default {
     },
 
     created() {
-        this.searchBoxShow();
-
         let path = window.location.href.replace(window.location.search, '');
 
         let cookie = Cookies.get('search-string');
@@ -729,7 +717,6 @@ export default {
     },
 
     mounted() {
-        this.searchBoxShow();
     },
 
     computed: {

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

@@ -1,4 +1,4 @@
-<div class="position-relative js-search-input-box" style="height: 45px;">
+<div class="position-relative js-search-box-hidden" style="height: 48.5px;">
     <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>

resources/views/partials/admin/scripts.blade.php

@@ -16,6 +16,15 @@
         'use strict';
 
         var Layout = (function() {
+            if (document.querySelector('.js-search-box-hidden')) {
+                let search_box_html = document.querySelector('.js-search-box-hidden');
+                let search_box_vue_component = search_box_html.parentNode.querySelector('.js-search');
+
+                search_box_vue_component.classList.add('d-none');
+                search_box_html.classList.add('d-none');
+                search_box_vue_component.classList.remove('d-none');
+            }
+
             function pinSidenav() {
                 $('.sidenav-toggler').addClass('active');
                 $('.sidenav-toggler').data('action', 'sidenav-unpin');