検索ページの初期実装

app/Http/Controllers/SearchController.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Ejaculation;
+use App\Tag;
+use Illuminate\Http\Request;
+
+class SearchController extends Controller
+{
+    public function index(Request $request)
+    {
+        $inputs = $request->validate([
+            'q' => 'required'
+        ]);
+
+        $results = Ejaculation::query()
+            ->whereHas('tags', function ($query) use ($inputs) {
+                $query->where('name', 'like', "%{$inputs['q']}%");
+            })
+            ->where('is_private', false)
+            ->orderBy('ejaculated_date', 'desc')
+            ->with(['user', 'tags'])
+            ->paginate(20);
+
+        return view('search.index')->with(compact('inputs', 'results'));
+    }
+
+    public function relatedTag(Request $request)
+    {
+        $inputs = $request->validate([
+            'q' => 'required'
+        ]);
+
+        $results = Tag::query()
+            ->where('name', 'like', "%{$inputs['q']}%")
+            ->paginate(50);
+
+        return view('search.relatedTag')->with(compact('inputs', 'results'));
+    }
+}

resources/views/layouts/base.blade.php

@@ -44,21 +44,30 @@
                         <a class="nav-link" href="{{ route('ranking') }}">ランキング</a>
                     </li>--}}
                 </ul>
+                <form action="{{ stripos(Route::currentRouteName(), 'search') === 0 ? route(Route::currentRouteName()) : route('search') }}" class="form-inline mr-2">
+                    <div class="input-group">
+                        <input type="search" name="q" class="form-control" placeholder="検索..." value="{{ stripos(Route::currentRouteName(), 'search') === 0 ? $inputs['q'] : '' }}">
+                        <div class="input-group-append">
+                            <button class="btn btn-outline-secondary" type="submit"><span class="oi oi-magnifying-glass" aria-hidden="true"></span><span class="sr-only">検索</span></button>
+                        </div>
+                    </div>
+                </form>
+                <form class="form-inline mr-2">
+                    <a href="{{ route('checkin') }}" class="btn btn-outline-success">チェックイン</a>
+                </form>
                 <ul class="navbar-nav">
                     <li class="nav-item dropdown">
                         <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            <img src="{{ Auth::user()->getProfileImageUrl(30) }}" width="30" height="30" class="rounded d-inline-block align-top mr-2">
-                            {{ Auth::user()->display_name }} さん
+                            <img src="{{ Auth::user()->getProfileImageUrl(30) }}" width="30" height="30" class="rounded d-inline-block align-top">
                         </a>
                         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                            <h6 class="dropdown-header">{{ Auth::user()->display_name }} さん</h6>
+                            <div class="dropdown-divider"></div>
                             {{--<a href="#" class="dropdown-item">設定</a>--}}
                             <a href="{{ route('logout') }}" class="dropdown-item" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">ログアウト</a>
                         </div>
                     </li>
                 </ul>
-                <form class="form-inline">
-                    <a href="{{ route('checkin') }}" class="btn btn-outline-success">チェックイン</a>
-                </form>
             @endauth
             @guest
                 <ul class="navbar-nav ml-auto mr-2">

resources/views/search/base.blade.php

@@ -0,0 +1,19 @@
+@extends('layouts.base')
+
+@section('content')
+    <div class="container">
+        <h2 class="mb-4"><strong>{{ $inputs['q'] }}</strong> の検索結果</h2>
+        <ul class="nav nav-tabs">
+            <li class="nav-item">
+                <a class="nav-link {{ Route::currentRouteName() === 'search' ? 'active' : '' }}" href="{{ route('search', $inputs) }}">チェックイン</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link {{ Route::currentRouteName() === 'search.related-tag' ? 'active' : '' }}" href="{{ route('search.related-tag', $inputs) }}">関連するタグ</a>
+            </li>
+        </ul>
+        <div class="tab-content">
+            <p class="my-3 text-secondary">{{ $results->total() }} 件見つかりました</p>
+            @yield('tab-content')
+        </div>
+    </div>
+@endsection

resources/views/search/index.blade.php

@@ -0,0 +1,121 @@
+@extends('search.base')
+
+@section('tab-content')
+    @if(empty($results))
+        <p>このタグが含まれるチェックインはありません。</p>
+    @else
+        <ul class="list-group">
+        @foreach($results as $ejaculation)
+            <li class="list-group-item border-bottom-only pt-3 pb-3">
+                <!-- span -->
+                <div class="d-flex justify-content-between">
+                    <h5>
+                        <a href="{{ route('user.profile', ['id' => $ejaculation->user->name]) }}" class="text-dark"><img src="{{ $ejaculation->user->getProfileImageUrl(30) }}" width="30" height="30" class="rounded d-inline-block align-bottom"> &commat;{{ $ejaculation->user->name }}</a>
+                        <a href="{{ route('checkin.show', ['id' => $ejaculation->id]) }}" class="text-muted"><small>{{ $ejaculation->ejaculated_date->format('Y/m/d H:i') }}</small></a>
+                    </h5>
+                    <div>
+                        <a class="text-secondary timeline-action-item" href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン"></span></a>
+                        @if ($ejaculation->user->isMe())
+                            <a class="text-secondary timeline-action-item" href="{{ route('checkin.edit', ['id' => $ejaculation->id]) }}"><span class="oi oi-pencil" data-toggle="tooltip" data-placement="bottom" title="修正"></span></a>
+                            <a class="text-secondary timeline-action-item" href="#" data-toggle="modal" data-target="#deleteCheckinModal" data-id="{{ $ejaculation->id }}" data-date="{{ $ejaculation->ejaculated_date }}"><span class="oi oi-trash" data-toggle="tooltip" data-placement="bottom" title="削除"></span></a>
+                        @endif
+                    </div>
+                </div>
+                <!-- tags -->
+                @if ($ejaculation->is_private || $ejaculation->tags->isNotEmpty())
+                    <p class="mb-2">
+                        @if ($ejaculation->is_private)
+                            <span class="badge badge-warning"><span class="oi oi-lock-locked"></span> 非公開</span>
+                        @endif
+                        @foreach ($ejaculation->tags as $tag)
+                            <span class="badge badge-secondary"><span class="oi oi-tag"></span> {{ $tag->name }}</span>
+                        @endforeach
+                    </p>
+                @endif
+                <!-- okazu link -->
+                @if (!empty($ejaculation->link))
+                    <div class="row mx-0">
+                        <div class="card link-card mb-2 px-0 col-12 col-md-6 d-none" style="font-size: small;">
+                            <a class="text-dark card-link" href="{{ $ejaculation->link }}" target="_blank" rel="noopener">
+                                <img src="" alt="Thumbnail" class="card-img-top bg-secondary">
+                                <div class="card-body">
+                                    <h6 class="card-title font-weight-bold">タイトル</h6>
+                                    <p class="card-text">コンテンツの説明文</p>
+                                </div>
+                            </a>
+                        </div>
+                        <p class="mb-2 col-12 px-0">
+                            <span class="oi oi-link-intact mr-1"></span><a href="{{ $ejaculation->link }}" target="_blank" rel="noopener">{{ $ejaculation->link }}</a>
+                        </p>
+                    </div>
+                @endif
+                <!-- note -->
+                @if (!empty($ejaculation->note))
+                    <p class="mb-0 tis-word-wrap">
+                        {!! Formatter::linkify(nl2br(e($ejaculation->note))) !!}
+                    </p>
+                @endif
+            </li>
+        @endforeach
+        </ul>
+        <ul class="pagination mt-4 justify-content-center">
+            <li class="page-item {{ $results->currentPage() === 1 ? 'disabled' : '' }}">
+                <a class="page-link" href="{{ $results->previousPageUrl() }}" aria-label="Previous">
+                    <span aria-hidden="true">&laquo;</span>
+                    <span class="sr-only">Previous</span>
+                </a>
+            </li>
+            @for ($i = 1; $i <= $results->lastPage(); $i++)
+                <li class="page-item {{ $i === $results->currentPage() ? 'active' : '' }}"><a href="{{ $results->url($i) }}" class="page-link">{{ $i }}</a></li>
+            @endfor
+            <li class="page-item {{ $results->currentPage() === $results->lastPage() ? 'disabled' : '' }}">
+                <a class="page-link" href="{{ $results->nextPageUrl() }}" aria-label="Next">
+                    <span aria-hidden="true">&raquo;</span>
+                    <span class="sr-only">Next</span>
+                </a>
+            </li>
+        </ul>
+    @endif
+@endsection
+
+@push('script')
+    <script>
+        $('.link-card').each(function () {
+            var $this = $(this);
+            $.ajax({
+                url: '{{ url('/api/checkin/card') }}',
+                method: 'get',
+                type: 'json',
+                data: {
+                    url: $this.find('a').attr('href')
+                }
+            }).then(function (data) {
+                var $title = $this.find('.card-title');
+                var $desc = $this.find('.card-text');
+                var $image = $this.find('img');
+
+                if (data.title === '') {
+                    $title.hide();
+                } else {
+                    $title.text(data.title);
+                }
+
+                if (data.description === '') {
+                    $desc.hide();
+                } else {
+                    $desc.text(data.description);
+                }
+
+                if (data.image === '') {
+                    $image.hide();
+                } else {
+                    $image.attr('src', data.image);
+                }
+
+                if (data.title !== '' || data.description !== '' || data.image !== '') {
+                    $this.removeClass('d-none');
+                }
+            });
+        });
+    </script>
+@endpush

resources/views/search/relatedTag.blade.php

@@ -0,0 +1,31 @@
+@extends('search.base')
+
+@section('tab-content')
+    <div class="row">
+    @forelse($results as $tag)
+        <p class="col-md-3"><a href="{{ route('search', ['q' => $tag->name]) }}" class="btn btn-outline-primary btn-block" role="button">{{ $tag->name }}</a></p>
+    @empty
+        <p class="col-12">このキーワードが含まれるタグはありません。</p>
+    @endforelse
+    </div>
+
+    @if(!empty($results))
+        <ul class="pagination mt-4 justify-content-center">
+            <li class="page-item {{ $results->currentPage() === 1 ? 'disabled' : '' }}">
+                <a class="page-link" href="{{ $results->previousPageUrl() }}" aria-label="Previous">
+                    <span aria-hidden="true">&laquo;</span>
+                    <span class="sr-only">Previous</span>
+                </a>
+            </li>
+            @for ($i = 1; $i <= $results->lastPage(); $i++)
+                <li class="page-item {{ $i === $results->currentPage() ? 'active' : '' }}"><a href="{{ $results->url($i) }}" class="page-link">{{ $i }}</a></li>
+            @endfor
+            <li class="page-item {{ $results->currentPage() === $results->lastPage() ? 'disabled' : '' }}">
+                <a class="page-link" href="{{ $results->nextPageUrl() }}" aria-label="Next">
+                    <span aria-hidden="true">&raquo;</span>
+                    <span class="sr-only">Next</span>
+                </a>
+            </li>
+        </ul>
+    @endif
+@endsection

routes/web.php

@@ -32,4 +32,8 @@ Route::middleware('auth')->group(function () {
 });
 
 Route::get('/info', 'InfoController@index')->name('info');
-Route::get('/info/{id}', 'InfoController@show')->where('id', '[0-9]+')->name('info.show');
+Route::get('/info/{id}', 'InfoController@show')->where('id', '[0-9]+')->name('info.show');
+
+Route::redirect('/search', '/search/checkin', 301);
+Route::get('/search/checkin', 'SearchController@index')->name('search');
+Route::get('/search/related-tag', 'SearchController@relatedTag')->name('search.related-tag');