-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
momijizukamori
committed
Jun 14, 2023
1 parent
9c8b98c
commit 315f819
Showing
4 changed files
with
102 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,41 @@ | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| {{ __('Filters') }} | ||
| Filters | ||
| </div> | ||
| <div class="card-body"> | ||
| <div class="input-group" style="padding-bottom: 10px"> | ||
| <label class="control-label">{{ __('Category') }}</label> | ||
| @include('components.categories') | ||
| @foreach ($sections as $name => $items) | ||
| <div class="input-group pb-2"> | ||
| <label class="control-label">{{ __($name + '.title')}}</label> | ||
| <select style="width: 100%" v-model="state.categories" :options="categories" label="name" placeholder="Tap to filter" multiple> | ||
| @foreach($items as $key => $value) | ||
| <option value ="{{$key}}"> {{ $value }}</option> | ||
| @endforeach | ||
| </select> | ||
| <div class="match_type"> Match | ||
| <div class="btn-group btn-group-toggle" data-toggle="buttons"> | ||
| <label class="btn btn-outline-secondary active"> | ||
| <input type="radio" name="{{ $name }}_matcher" value="OR" id="{{ $name }}_match_any" autocomplete="off" checked> Any | ||
| </label> | ||
| <label class="btn btn-outline-secondary"> | ||
| <input type="radio" name="{{ $name }}_matcher" value="AND" id="{{ $name }}_match_all" autocomplete="off"> All | ||
| </label> | ||
| <label class="btn btn-outline-secondary"> | ||
| <input type="radio" name="{{ $name }}_matcher" value="NONE" id="{{ $name }}_match_none" autocomplete="off"> None | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="input-group" style="padding-bottom: 10px"> | ||
| <label class="control-label">{{ __('Brand') }}</label> | ||
| @include('components.brands') | ||
| @endforeach | ||
| <div class="input-group pb-2"> | ||
| <label class="control-label">Year</label> | ||
| <v-select style="width: 100%" v-model="state.years" :options="years" placeholder="Tap to filter" multiple></v-select> | ||
| <div v-if="state.years.length > 0" class="match_type"> Match | ||
| <b-form-radio-group button-variant="outline-secondary" buttons size="sm" v-model="state.year_matcher" :options="options"></b-form-radio-group> | ||
| </div> | ||
| </div> | ||
| <div class="input-group" style="padding-bottom: 10px"> | ||
| <label class="control-label">{{ __('Features') }}</label> | ||
| @include('components.features') | ||
| </div> | ||
| <div class="input-group" style="padding-bottom: 10px"> | ||
| <label class="control-label">{{ __('Colorway') }}</label> | ||
| @include('components.colors') | ||
| </div> | ||
| <div class="input-group" style="padding-bottom: 10px"> | ||
| <label class="control-label">{{ __('Year') }}</label> | ||
| @include('components.years') | ||
|
|
||
| <div class="input-group pb-2"> | ||
| <button class="btn btn-block btn-outline-primary" style="width: 100%" name="action:clear">Clear Filters</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <ul class="pagination justify-content-center" v-if="data.total > data.per_page"> | ||
| <li class="page-item pagination-prev-nav" :class="{ 'disabled': !data.next_page_url }"> | ||
| <a class="page-link" href="#" aria-label="Previous" @click.prevent="selectPage(--data.current_page)"> | ||
| <slot name="prev-nav"> | ||
| <span aria-hidden="true">«</span> | ||
| <span class="sr-only">Previous</span> | ||
| </slot> | ||
| </a> | ||
| </li> | ||
| <li class="page-item pagination-page-nav" v-for="n in getPages()" :class="{ 'active': n === data.current_page }"> | ||
| <a class="page-link" href="#" @click.prevent="selectPage(n)">{{ n }}</a> | ||
| </li> | ||
| <li class="page-item pagination-next-nav" :class="{ 'disabled': !data.next_page_url }"> | ||
| <a class="page-link" href="#" aria-label="Next" @click.prevent="selectPage(++data.current_page)"> | ||
| <slot name="next-nav"> | ||
| <span aria-hidden="true">»</span> | ||
| <span class="sr-only">Next</span> | ||
| </slot> | ||
| </a> | ||
| </li> | ||
| </ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,13 @@ | ||
| <div class="card"> | ||
| <div class="card-body pb-0 pt-3"> | ||
| <div class="row"> | ||
| <div class="col-md-8 col-lg-9 col-xl-10 mb-3"> | ||
| <p class="sr-only">Type to search or filter</p> | ||
| <input class="form-control input-lg" type="text" name="search" placeholder="Type to filter items by name" role="search"> | ||
| </div> | ||
| <div class="col-md-4 col-lg-3 col-xl-2 mb-3"> | ||
| <button class="btn btn-block btn-outline-primary">{{ __('Search') }}</button> | ||
| </div> | ||
| </div> | ||
| <div class="card-body pb-0 pt-3"> | ||
| <div class="row"> | ||
| <div class="col-md-8 col-lg-9 col-xl-10 mb-3"> | ||
| <p class="sr-only">Type to search or filter</p> | ||
| <input autocomplete="off" id="search" class="form-control input-lg" type="text" name="search" placeholder="Type to filter items by name" role="search"> | ||
| </div> | ||
| <div class="col-md-4 col-lg-3 col-xl-2 mb-3"> | ||
| <button class="btn btn-block btn-outline-primary" name="action:search" id="search-btn">Search</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,41 @@ | ||
| @extends('layouts.app', ['title' => 'Search']) | ||
|
|
||
| @section('content') | ||
| <search-page | ||
| :categories="@include('components.categories')" | ||
| :brands="@include('components.brands')" | ||
| :features="@include('components.features')" | ||
| :tags="@include('components.tags')" | ||
| :colors="@include('components.colors')" | ||
| :years="@include('components.years')" | ||
| :user="{{ (auth()->user()) ? auth()->user()->toJson() : '{}' }}" | ||
| url="{{ route('search') }}" | ||
| endpoint="{{ route('api.search') }}" | ||
| ></search-page> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-sm-12 col-md-4 col-lg-3 mb-2 mb-3"> | ||
| @include('components.filters') | ||
| </div> | ||
|
|
||
| <div class="col-sm-12 col-md-8 col-lg-9"> | ||
| <div class="row mb-3"> | ||
| <div class="col px-2"> | ||
| @include('components.search-bar') | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 p-2" id="results"> | ||
| @forelse ($results['items'] as $item) | ||
| @include('items.card', compact('item')) | ||
| @empty | ||
| <div style="height: 14rem"> | ||
| <img src="/categories/other.svg" class="mw-100 mh-100"> | ||
| </div> | ||
| <p class="h4 text-center text-muted my-0">No Results!</p> | ||
| <p class="text-center">Try another search?</p> | ||
| @endforelse | ||
| </div> | ||
| </div> | ||
|
|
||
| <div v-if="results && results.last_page > 1" class="row"> | ||
| <div class="col mb-2 mt-4" id="pagination"> | ||
| @include('components.pagination') | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| @endsection |