Merge pull request #2539 from brkcvn/live-search

Live search development for Apps search bar
This commit is contained in:
Cüneyt Şentürk
2022-07-19 14:25:18 +03:00
committed by GitHub
4 changed files with 74 additions and 4 deletions

View File

@ -61,7 +61,7 @@
</div>
<div class="flex flex-col lg:flex-row w-full justify-between">
<div class="h-full relative">
<div class="w-8/12 h-full">
<form method="GET" action="{{ url("/" . company_id()) }}/apps/search">
<div class="h-full flex items-center pl-2 gap-2">
<i class="material-icons text-light-gray">search</i>
@ -73,12 +73,42 @@
value="{{ isset($keyword) ? $keyword : '' }}"
placeholder="{{ trans('general.search_placeholder') }}"
autocomplete="off"
v-on:keyup="onLiveSearch($event)"
/>
</div>
<div
ref="liveSearchModal"
v-if="live_search.modal"
class="absolute w-full left-0 right-0 bg-white rounded-xl shadow-md pl-4 pr-4 pt-4 top-20 z-10"
:class="live_search.data.length > 8 ? 'pb-0' : 'pb-4'"
>
<ul class="grid sm:grid-cols-6 gap-8">
<li v-for="(item, index) in live_search.data.slice(0,8)" :key="index" class="sm:col-span-3 p-3 rounded-lg hover:bg-gray-100">
<a :href="route_url + '/apps/' + item.slug" class="flex items-center space-x-4">
<img v-for="(file, indis) in item.files"
:src="file.path_string"
:alt="item.name"
class="w-16 h-12 rounded-lg object-cover"
/>
<div>
<h6 class="font-bold" v-html="item.name"></h6>
<span class="text-sm text-gray-500 line-clamp-1" v-html="item.sort_desc ? item.sort_desc : item.description"></span>
</div>
</a>
</li>
<li v-if="live_search.not_found">{{ trans('modules.not_found') }}</li>
</ul>
<div v-if="live_search.data.length > 8" class="flex item-center justify-center mt-5 -mx-4">
<x-button type="submit" class="w-full h-10 flex items-center justify-center text-purple font-medium border-y rounded-bl-xl rounded-br-xl disabled:bg-gray-200 hover:bg-gray-100" override="class">{{ trans('modules.see_more') }}</x-button>
</div>
</div>
</form>
</div>
<div class="flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400">
<div class="flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400 mt-4 lg:mt-0">
<x-link href="{{ route('apps.home.index') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
<x-link.hover color="to-black-400">
{{ trans('modules.home') }}
@ -104,4 +134,4 @@
</x-link>
</div>
</div>
</div>
</div>