모 학교에서 팀 개발에서 프리 마켓 앱을 작성 중이며 사용한 기술에 대해 공개하고 있습니다.
※초학자 때문에, 실수나 인식 차이가 많이 있다고 생각합니다만 양해 바랍니다.

상품 상세 페이지에 코멘트 기능을 구현했습니다.

전부 7회로 나누어 기사를 투고하고 있습니다.



내용
url


제1회
모델, 마이그레이션 편
htps : // 이 m/쇼_우/있어 ms/03108801146에 65d58413

제2회
라우팅편
htps : // 코 m / 쇼_우 / ms / 5c829b3060 2 919

제3회
컨트롤러편
htps : // 이 m/쇼_우/있어 ms/8528f336cf0d470cd719

제4.1회
뷰 편 (목록 표시)
htps : // 코 m/쇼_우/있어 ms/6190562270c722956547

제4.2회
뷰 편 (인풋 폼)
htps : // 이 m / 쇼_우 / ms / 67c2에 4fc6c605283에 2

제5회
jquery 편
htps : // 이 m/쇼_우/있어 ms/d72b60114f76380d05f6

제6회
ajax편
htps : // 코 m / 쇼 _ 우 / ms / 카에 d9b1471 63d43d3


~ 코드 전문 ~ htps : // 코 m / 쇼_우 / ms / 310 아 c5b653bdfcb99 아 2c

뷰 정보

코멘트 기능에 있어서의 뷰란, 상품에 끈 「코멘트의 일람을 표시시키는 화면」과 「코멘트를 입력시키는 화면」입니다.

목록 표시의 기본 아이디어는

상품에 붙이는 모든 코멘트를 컨트롤러로부터 받는다.

그 코멘트를 each do로 돌려서 하나씩 표시한다.
라는 구현이 됩니다.

items/show.html.haml

  - @commentALL.each do |comment|
    = comment.comment
    = comment.user.nickname

    #実装イメージ

단, each do로 돌릴 때 조건 분기하고 상태에 따라 표시를 바꿔야합니다

디스플레이 화면 구현 요구 사항

①자신(로그인중 유저)의 코멘트는 핑크(이름은 코멘트의 오른쪽에 표시)
예)
② 타인의 코멘트는 블루(이름은 코멘트의 왼쪽에 표시)
예)

③출품자의 화면에는, 코멘트에 「삭제 버튼」이 붙는다
예)

④ 「가삭제상태」의 코멘트에는 「출품자에 의해 이 코멘트는 삭제되었습니다.」라고 표시된다. 또한, 출품자의 화면에는, 임시 삭제 상태의 코멘트에 「복원 버튼」 「완전 삭제 버튼」이 붙는다.
예)

⑤출품자의 이름에는 「출품자」라고 표시된다
예)

이러한 요구 사항을 충족하는 조건 분기를 뷰에 제공해야 합니다.
조건 분기의 개략은 다음과 같이 했습니다.

개요

- @commentALL.each do |comment|
  - if comment.user_id == current_user.id   #コメントユーザーとログインユーザーが同一（自分のコメント）の場合  
    #ピンク色の吹き出しを表示
    - if comment.delete_check == 1   # 仮削除状態の場合
      # 「出品者によりこのコメントは削除されました。」と表示する。
      - if comment.item.seller == current_user  #ログイン中のユーザーが出品者である場合
        # 「復元ボタン」「完全削除ボタン」を表示する。
    - else #仮削除状態でない場合   
      #　コメント内容、時間を表示
      - if comment.item.seller == current_user  #ログイン中のユーザーが出品者である場合
        # 「削除ボタン」を表示
   # ニックネームを表示

  - else #コメントユーザーとログインユーザーが異なる（他人のコメント）の場合 
    # ニックネームを表示
    # 青色の吹き出しを表示
    - if comment.delete_check == 1   # 仮削除状態の場合
      # 「出品者によりこのコメントは削除されました。」と表示する。
      - if comment.item.seller == current_user  #ログイン中のユーザーが出品者である場合
        # 「復元ボタン」「完全削除ボタン」を表示する。
    - else #仮削除状態でない場合   
      #　コメント内容、時間を表示
      - if comment.item.seller == current_user  #ログイン中のユーザーが出品者である場合
        # 「削除ボタン」を表示

이미지로서는, 위로부터 comment를 흘려 가 if로 체에 걸쳐, 합치한 것은 표시한다고 하는 느낌입니다.
포인트로서는

포인트

・delete_checkカラムに格納している値が、　"0"　か　"1"　で仮削除状態かを判別して、表示内容を変える。
・自分のコメントは、ピンクの吹き出しを表示し、後ろにニックネームを表示する。
・他人のコメントは、ニックネームを前に表示し、後ろに青い吹き出しを表示する。

같은 곳입니다. 또, 위 블록(자신의 코멘트의 경우)과 아래의 블록(타인의 코멘트의 경우)에는 공통된 부분이 있으므로, 부분 템플릿으로 정리합니다.

결과 다음과 같이 되었습니다.

items/show.html.haml

 .commentBox
   .comment_list
     - if user_signed_in?
       - @commentALL.each do |comment|
         - if comment.user_id == current_user.id   
         #   ===================================
         #   コメントユーザーとログインユーザーが同一の場合  
         #   ===================================
           .comment_Me.comment_one_block{data:{index: comment.id}}                   
             - if comment.delete_check == 1   # 削除済の場合
               .comment_content
                 出品者によりこのコメントは削除されました。
                 = render 'items/template_comment/comment_delete_restore_btn',comment: comment 
                   - else   # 削除されていない場合
                     .comment_content
                       = comment.comment
                         .comment_create_at
                           = comment.created_at.strftime("%Y年%m月%d日 %H時%M分")
                         - if comment.item.seller == current_user
                           .comment_delete.me_pre_delete{data:{index: comment.id}}     
                             = link_to '削除する', comment_path(comment.id) ,method: :patch
                   = render 'items/template_comment/comment_name',comment: comment                    
             - else 
               #   ===================================
               #   コメントユーザーとログインユーザーが異なる場合の場合  
               #   ===================================
               .comment_Other.comment_one_block{data:{index: comment.id}}    
                 = render 'items/template_comment/comment_name',comment: comment               
                 - if comment.delete_check == 1   # 削除済の場合
                   .comment_content_other
                     出品者によりこのコメントは削除されました。
                     = render 'items/template_comment/comment_delete_restore_btn',comment: comment               
                 - else    # 削除されていない場合
                   .comment_content_other
                     = comment.comment
                     .comment_create_at
                       = comment.created_at.strftime("%Y年%m月%d日 %H時%M分")
                     - if comment.item.seller == current_user   # 出品者とログインユーザーが等しい場合
                       .comment_delete.other_pre_delete{data:{index: comment.id}}     
                         = link_to '削除する', comment_path(comment.id) ,method: :patch

items/items/template_comment/_comment_delete_restore_btn.html.haml

- if comment.item.seller == current_user    # 出品者とログインユーザーが等しい場合
  .comment_restore{data:{index: comment.id}} 
    = link_to "復元する",restore_comment_path(comment.id)
  .comment_delete.complete_delete{data:{index: comment.id}}     
    = link_to '完全に削除する', comment_path(comment.id) ,method: :delete

items/items/template_comment/_comment_name.html.haml

.comment_user_name
  = comment.user.nickname
  - if comment.user ==  comment.item.seller  # コメントユーザーと出品者が同じ場合
    .seller_display
      出品者

보충

1.同じ形でも異なるクラス名をつけているのは（me_pre_deleteとother_pre_deleteなど）、jqueryの実装のためです。（第５回　〜jquery〜　参照）
2. {data:{index: comment.id}}の記述はjqueryの実装のための記述です。（第５回　〜jquery編〜　参照）

다음 번(제4.2회)은 뷰(인풋 폼)편이 됩니다.