global search based on livewire improved
This commit is contained in:
Sevan Nerse
62
resources/assets/js/views/common/search.js
vendored
62
resources/assets/js/views/common/search.js
vendored
@@ -1,62 +0,0 @@
|
||||
/**
|
||||
* First we will load all of this project's JavaScript dependencies which
|
||||
* includes Vue and other libraries. It is a great starting point when
|
||||
* building robust, powerful web applications using Vue and Laravel.
|
||||
*/
|
||||
|
||||
require('./../../bootstrap');
|
||||
|
||||
import Vue from 'vue';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
import NProgressAxios from './../../plugins/nprogress-axios';
|
||||
|
||||
import clickOutside from './../../directives/click-ouside.js';
|
||||
|
||||
Vue.directive('click-outside', clickOutside);
|
||||
|
||||
const search = new Vue({
|
||||
el: '#global-search',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
show: false,
|
||||
count:0,
|
||||
keyword: '',
|
||||
items: {}
|
||||
}
|
||||
},
|
||||
|
||||
methods:{
|
||||
onChange() {
|
||||
this.show = false;
|
||||
|
||||
if (this.keyword.length) {
|
||||
axios.get(url + '/common/search', {
|
||||
params: {
|
||||
keyword: this.keyword
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.items = response.data;
|
||||
this.count = Object.keys(this.items).length;
|
||||
|
||||
if (this.count) {
|
||||
this.show = true;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
closeResult() {
|
||||
this.show = false;
|
||||
this.count = 0;
|
||||
this.items = {};
|
||||
}
|
||||
}
|
||||
});
|
||||
42
resources/views/livewire/common/search.blade.php
Normal file
42
resources/views/livewire/common/search.blade.php
Normal file
@@ -0,0 +1,42 @@
|
||||
<form wire:click.stop class="navbar-search navbar-search-light form-inline mb-0" id="navbar-search-main" autocomplete="off">
|
||||
<div class="form-group mb-0 mr-sm-3">
|
||||
<div class="input-group input-group-alternative input-group-merge">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text"><i class="fa fa-search"></i></span>
|
||||
</div>
|
||||
|
||||
<input type="text" name="search" wire:model.debounce.500ms="keyword" class="form-control" autocomplete="off" placeholder="{{ trans('general.search') }}">
|
||||
|
||||
@if($results)
|
||||
<div class="dropdown-menu dropdown-menu-xl dropdown-menu-center show" ref="menu">
|
||||
<div class="list-group list-group-flush">
|
||||
@foreach($results as $result)
|
||||
<a class="list-group-item list-group-item-action" href="{{ $result->href }}">
|
||||
<div class="row align-items-center">
|
||||
<div class="col ml--2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="name">{{ $result->name }}</div>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
<span class="type">{{ $result->type }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@push('scripts_end')
|
||||
<script type="text/javascript">
|
||||
$(window).click(function() {
|
||||
Livewire.emit('resetKeyword');
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -5,40 +5,7 @@
|
||||
@stack('navbar_search')
|
||||
|
||||
@can('read-common-search')
|
||||
<form class="navbar-search navbar-search-light form-inline mb-0" id="navbar-search-main" autocomplete="off">
|
||||
<div id="global-search" class="form-group mb-0 mr-sm-3">
|
||||
<div class="input-group input-group-alternative input-group-merge">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text"><i class="fa fa-search"></i></span>
|
||||
</div>
|
||||
|
||||
<input type="text" name="search" v-model="keyword" @input="onChange" v-click-outside="closeResult" class="form-control" autocomplete="off" placeholder="{{ trans('general.search') }}">
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-xl dropdown-menu-center" ref="menu" :class="[{show: show}]">
|
||||
<div class="list-group list-group-flush">
|
||||
<a class="list-group-item list-group-item-action" :href="item.href" v-for="(item, index) in items">
|
||||
<div class="row align-items-center">
|
||||
<div class="col ml--2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="name" v-text="item.name"></div>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
<span class="type" v-text="item.type"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</form>
|
||||
<livewire:common.search />
|
||||
@endcan
|
||||
|
||||
<ul class="navbar-nav align-items-center ml-md-auto">
|
||||
|
||||
@@ -5,8 +5,6 @@
|
||||
|
||||
@stack('scripts_start')
|
||||
|
||||
<script src="{{ asset('public/js/common/search.js?v=' . version('short')) }}"></script>
|
||||
|
||||
@stack('charts')
|
||||
|
||||
<script src="{{ asset('public/vendor/chart.js/dist/Chart.min.js') }}"></script>
|
||||
@@ -137,4 +135,9 @@
|
||||
@stack('body_scripts')
|
||||
|
||||
@livewireScripts
|
||||
|
||||
<!-- Livewire -->
|
||||
<script type="text/javascript">
|
||||
window.livewire_app_url = {{ company_id() }};
|
||||
</script>
|
||||
@stack('scripts_end')
|
||||
|
||||
Reference in New Issue
Block a user