From 315f819326e022cdedafae65c81fa0912f8635b2 Mon Sep 17 00:00:00 2001
From: momijizukamori <momijizukamori>
Date: Wed, 14 Jun 2023 17:56:19 -0400
Subject: [PATCH] moving stuff into Blade templates

---
 resources/views/components/filters.blade.php  | 52 ++++++++++++-------
 .../views/components/pagination.blade.php     | 21 ++++++++
 .../views/components/search-bar.blade.php     | 22 ++++----
 resources/views/search.blade.php              | 48 +++++++++++++----
 4 files changed, 102 insertions(+), 41 deletions(-)
 create mode 100644 resources/views/components/pagination.blade.php

diff --git a/resources/views/components/filters.blade.php b/resources/views/components/filters.blade.php
index ebd1ef2e..9f6849c0 100644
--- a/resources/views/components/filters.blade.php
+++ b/resources/views/components/filters.blade.php
@@ -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>
\ No newline at end of file
diff --git a/resources/views/components/pagination.blade.php b/resources/views/components/pagination.blade.php
new file mode 100644
index 00000000..7ad4a66b
--- /dev/null
+++ b/resources/views/components/pagination.blade.php
@@ -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">&laquo;</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">&raquo;</span>
+        <span class="sr-only">Next</span>
+      </slot>
+    </a>
+  </li>
+</ul>
\ No newline at end of file
diff --git a/resources/views/components/search-bar.blade.php b/resources/views/components/search-bar.blade.php
index d70b4220..f7efeb54 100644
--- a/resources/views/components/search-bar.blade.php
+++ b/resources/views/components/search-bar.blade.php
@@ -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>
\ No newline at end of file
diff --git a/resources/views/search.blade.php b/resources/views/search.blade.php
index 16f67b3e..65f469e2 100644
--- a/resources/views/search.blade.php
+++ b/resources/views/search.blade.php
@@ -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