LoginSignup
0
0

More than 1 year has passed since last update.

[Laravel]コメントに紐づいたアンサーがアコーディオンで表示される実装

Posted at

ルーティング

routes/web.php
//コメント
Route::resource('comments','CommentController')->only([
    'store','destroy'
]);
Route::get('/comments/{recipe}','CommentController@create')->name('comments.create');
//アンサー
Route::resource('answers','AnswerController')->only([
  'index','store','destroy' 
]);
Route::get('/answers/{comment}','AnswerController@create')->name('answers.create');

Route::get('/answers','AnswerController@index')->name('answers.index');
Route::post('/answers','AnswerController@store')->name('answers.store');

モデル

Answer.php
protected $fillable = [
      'comment_id','body','user_id','recipe_id'  
    ];
    
    public function comment()
    {
      return $this->hasOne('App\Comment');
    }
    
    public function user()
    {
      return $this->belongsTo('App\User');
    }

Comment.php
 protected $fillable = ['recipe_id','user_id','body'];
    
    public function user()
    {
        return $this->belongsTo('App\User');
    }
    
    public function answer()
    {
        return $this->hasMany('App\Answer');
    }
AnswerController.php
public function create($id)
    {
        $user = \Auth::user();
        $comment = Comment::find($id);
        return view('answers.create',[
           'title' => '回答',
           'user' => $user,
           'comment' => $comment,
        ]);
    }
    
    public function store(AnswerRequest $request)
    {
        Answer::create([
           'comment_id' => $request->comment_id,
           'user_id' => \Auth::user()->id,
           'body' => $request->body,
        ]);
        // return redirect()->route('recipes.show', ['id' => ]);
        return redirect()->route('answers.index');
    }    
    
    public function destroy($id)
    {
        $answer = Answer::find($id);
        $answer->delete();
        return back();
    }

ビュー

answer/create.php
<div class="form-group">
<h1>質問回答</h1>
<form method="POST" action="{{ route('answers.store') }}">
    @csrf
    <!--<input type="hidden" name="recipe_id" value=" $recipe->id ">-->
    <input type="hidden" name="comment_id" value="{{ $comment->id }}">
    <textarea class="form-control" name="body"></textarea>
    <input class="button button_comment" type="submit" value="送信">
</form>
    
</div>

comments/create.php
<div class="form-group">
<h1>質問投稿</h1>
<form method="post" action="{{ route('comments.store') }}">
    @csrf
    <input type="hidden" name="recipe_id" value="{{ $recipe->id }}">
    <textarea class="form-control" name="body"></textarea>
    <input class="button button_comment" type="submit" value="送信">
</form>
    
</div>
recipes/show.php
<div class="faqs">
     <div class="faqs-inner inner">
       <h2>Q&A</h2>                
  <div class="accordion-area">
  @forelse($recipe->comments as $comment)
   <dl class="accordion-items">
   <dt class="accordion-title"> {{ $comment->body }}By{{$comment->user->name}}{{ $comment->created_at }}
<span class="accordion-icon"><a href="{{ route('answers.create',$comment->id) }}"><i style="margin-left:20px;" class="fa-solid fa-reply"></i></a></span>
    @if($comment->user->id === $user->id)
    <form method="POST" action="{{ route('comments.destroy',$comment) }}">
     @csrf
     @method('delete')
     @if(\Auth::user()->id === $recipe->user->id)
     <input class="icon_button" type="submit" value=&#xf2ed; class="fas">
     @endif
</form>
     @endif
     </dt>
<dd class="accordion-body">
    @forelse($comment->answer as $answer)
    <div class="accordion-text">{{ $answer->body}}By{{ $answer->user->name }}:{{ $answer->created_at}}</div>
   <!--<div class="accordion-text"></div>-->
@empty
<p>回答はありません</p>
@endforelse
</dd>
</dl>
@empty<p>質問はありません</p>
@endforelse
</div>
</div>

jQueryアコーディオン部分

.php
jQuery('.to-top').on("click",function () {
           console.log($(this))
         	jQuery('body,html').animate({
            scrollTop: 0
         	}, 1000);
         	return false;
           });
           jQuery('.accordion-title').click(function() {
        	jQuery(this).next().slideToggle();
        	jQuery(this).toggleClass( 'close' );
          });
          });

詰まったところ

コメントに紐づけるanswerの取得に時間がかかりました。
なんで詰まってたか忘れたけどリレーションを回して出してるだけだなあ笑

@forelse($comment->answer as $answer)
    <div class="accordion-text">{{ $answer->body}}By{{ $answer->user->name }}:{{ $answer->created_at}}</div>
   <!--<div class="accordion-text"></div>-->
@empty
<p>回答はありません</p>
@endforelse
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0