検索ページの初期実装

This commit is contained in:
shibafu 2018-09-06 23:48:54 +09:00
parent 2441fe78b6
commit 69f212d705
6 changed files with 231 additions and 6 deletions

View File

@ -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'));
}
}

View File

@ -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">

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -33,3 +33,7 @@ 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::redirect('/search', '/search/checkin', 301);
Route::get('/search/checkin', 'SearchController@index')->name('search');
Route::get('/search/related-tag', 'SearchController@relatedTag')->name('search.related-tag');