個別のお問い合わせにコメントがつけられるようにした

app/controllers/admin/inquiries_controller.rb

@@ -10,5 +10,6 @@ def index
 
   def show
     @inquiry = Inquiry.find(params[:id])
+    @comments = @inquiry.comments.order(created_at: :asc)
   end
 end

app/controllers/api/comments_controller.rb

@@ -22,7 +22,12 @@ def create
     @comment.user = current_user
     @comment.commentable = commentable
     if @comment.save
-      render :create, status: :created
+      # Inquiry以外はvueでJSONを使用している。コメント機能のJS変換が完了すれば下の'Inquiry'による分岐は不要なので削除してください。
+      if params[:commentable_type] == 'Inquiry'
+        render partial: 'comments/comment', locals: { commentable:, comment: @comment, user: current_user }, status: :created
+      else
+        render :create, status: :created
+      end
     else
       head :bad_request
     end

app/controllers/users/comments_controller.rb

@@ -15,7 +15,7 @@ def set_user
   def set_comments
     @comments =
       Comment
-      .where.not(commentable_type: 'Talk')
+      .where.not(commentable_type: %w[Talk Inquiry])
       .preload(commentable: { user: { avatar_attachment: :blob } })
       .eager_load(:user)
       .where(user_id: user)

app/javascript/comments_at_inquiry.js

@@ -0,0 +1,94 @@
+import initializeComment from 'initialize_comment.js'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const comments = document.querySelectorAll('.comment')
+  const loadingContent = document.querySelector('.loading-content')
+  if (!loadingContent) {
+    return
+  }
+  const commentContent = document.querySelector(
+    '#comments.thread-comments.loaded'
+  )
+  if (comments) {
+    loadingContent.style.display = 'none'
+    commentContent.style.display = 'block'
+  }
+
+  const initialComments = []
+  const commentTotalCount = comments.length
+  const initialLimit = 8
+  const incrementSize = 8
+  let commentRemaining = 0
+  const nextCommentAmount = 0
+
+  if (commentTotalCount <= initialLimit) {
+    comments.forEach((comment) => {
+      initialComments.push(comment)
+    })
+  } else {
+    for (let i = 1; i <= initialLimit; i++) {
+      initialComments.push(comments[commentTotalCount - i])
+    }
+    commentRemaining = commentTotalCount - initialLimit
+
+    const moreCommentButton = document.querySelector(
+      '.a-button.is-lg.is-text.is-block'
+    )
+    const moreComments = document.querySelector('.thread-comments-more')
+    if (commentRemaining > 0) {
+      moreComments.style.display = 'block'
+    }
+    displayMoreComments(commentRemaining, nextCommentAmount, moreCommentButton)
+  }
+  setComments(initialComments)
+
+  const moreCommentButton = document.querySelector(
+    '.a-button.is-lg.is-text.is-block'
+  )
+  const moreComments = document.querySelector('.thread-comments-more')
+  moreCommentButton.addEventListener('click', () => {
+    const nextComments = []
+    if (commentRemaining <= incrementSize) {
+      for (let i = 1; i <= commentRemaining; i++) {
+        nextComments.push(comments[commentRemaining - i])
+      }
+      setComments(nextComments)
+      commentRemaining = 0
+      moreComments.style.display = 'none'
+    } else {
+      for (let i = 1; i <= incrementSize; i++) {
+        nextComments.push(comments[commentRemaining - i])
+      }
+      commentRemaining = commentRemaining - incrementSize
+      setComments(nextComments)
+      displayMoreComments(
+        commentRemaining,
+        nextCommentAmount,
+        moreCommentButton
+      )
+    }
+  })
+
+  function displayMoreComments(
+    commentRemaining,
+    nextCommentAmount,
+    moreCommentButton
+  ) {
+    if (commentRemaining <= incrementSize) {
+      nextCommentAmount = commentRemaining
+      const commentText = `前のコメント（ ${nextCommentAmount} ）`
+      moreCommentButton.textContent = commentText
+    } else {
+      nextCommentAmount = `${incrementSize} / ${commentRemaining}`
+      const commentText = `前のコメント（ ${nextCommentAmount} ）`
+      moreCommentButton.textContent = commentText
+    }
+  }
+
+  function setComments(comments) {
+    comments.forEach((comment) => {
+      comment.style.display = ''
+      initializeComment(comment)
+    })
+  }
+})

app/javascript/initialize_comment.js

@@ -0,0 +1,159 @@
+import CSRF from 'csrf'
+import TextareaInitializer from 'textarea-initializer'
+import MarkdownInitializer from 'markdown-initializer'
+
+export default function initializeComment(comment) {
+  const commentId = comment.dataset.comment_id
+  const commentDescription = comment.dataset.comment_description
+
+  let savedComment = ''
+  TextareaInitializer.initialize(`#js-comment-${commentId}`)
+  const markdownInitializer = new MarkdownInitializer()
+
+  const commentDisplay = comment.querySelector('.comment-display')
+  const commentEditor = comment.querySelector('.comment-editor')
+  const commentDisplayContent = commentDisplay.querySelector('.a-long-text')
+  commentDisplayContent.innerHTML =
+    markdownInitializer.render(commentDescription)
+
+  const commentEditorPreview = commentEditor.querySelector(
+    '.a-markdown-input__preview'
+  )
+  const editorTextarea = commentEditor.querySelector(
+    '.a-markdown-input__textarea'
+  )
+
+  if (commentDescription) {
+    commentDisplayContent.innerHTML =
+      markdownInitializer.render(commentDescription)
+    commentEditorPreview.innerHTML =
+      markdownInitializer.render(commentDescription)
+  }
+
+  const editButton = commentDisplay.querySelector('.card-main-actions__action')
+  const modalElements = [commentDisplay, commentEditor]
+  if (editButton) {
+    editButton.addEventListener('click', () => {
+      if (!savedComment) {
+        savedComment = editorTextarea.value
+      }
+      toggleVisibility(modalElements, 'is-hidden')
+    })
+  }
+
+  const saveButton = commentEditor.querySelector('.is-primary')
+  if (saveButton) {
+    saveButton.addEventListener('click', () => {
+      toggleVisibility(modalElements, 'is-hidden')
+      savedComment = editorTextarea.value
+      updateComment(commentId, savedComment)
+      commentDisplayContent.innerHTML = markdownInitializer.render(savedComment)
+    })
+  }
+
+  const cancelButton = commentEditor.querySelector('.is-secondary')
+  cancelButton.addEventListener('click', () => {
+    toggleVisibility(modalElements, 'is-hidden')
+    editorTextarea.value = savedComment
+    commentEditorPreview.innerHTML = markdownInitializer.render(savedComment)
+  })
+
+  editorTextarea.addEventListener('input', () => {
+    commentEditorPreview.innerHTML = markdownInitializer.render(
+      editorTextarea.value
+    )
+  })
+
+  const deleteButton = comment.querySelector('.card-main-actions__muted-action')
+  if (deleteButton) {
+    deleteButton.addEventListener('click', () => {
+      if (window.confirm('本当に宜しいですか？')) {
+        deleteComment(commentId)
+      }
+    })
+  }
+
+  const editTab = commentEditor.querySelector('.edit-comment-tab')
+  const editorTabContent = commentEditor.querySelector('.is-editor')
+  const previewTab = commentEditor.querySelector('.comment-preview-tab')
+  const previewTabContent = commentEditor.querySelector('.is-preview')
+
+  const tabElements = [editTab, editorTabContent, previewTab, previewTabContent]
+  editTab.addEventListener('click', () =>
+    toggleVisibility(tabElements, 'is-active')
+  )
+
+  previewTab.addEventListener('click', () =>
+    toggleVisibility(tabElements, 'is-active')
+  )
+
+  const createdAtElement = comment.querySelector('.thread-comment__created-at')
+  if (createdAtElement && navigator.clipboard) {
+    createdAtElement.addEventListener('click', () => {
+      const commentURL = location.href.split('#')[0] + '#comment_' + commentId
+      navigator.clipboard
+        .writeText(commentURL)
+        .then(() => {
+          createdAtElement.classList.add('is-active')
+          setTimeout(() => {
+            createdAtElement.classList.remove('is-active')
+          }, 4000)
+        })
+        .catch((error) => {
+          console.error(error)
+        })
+    })
+  }
+
+  function toggleVisibility(elements, className) {
+    elements.forEach((element) => {
+      element.classList.toggle(className)
+    })
+  }
+
+  function updateComment(commentId, description) {
+    if (description.length < 1) {
+      return null
+    }
+    const params = {
+      id: commentId,
+      comment: { description: description }
+    }
+    fetch(`/api/comments/${commentId}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-Token': CSRF.getToken()
+      },
+      credentials: 'same-origin',
+      redirect: 'manual',
+      body: JSON.stringify(params)
+    }).catch((error) => {
+      console.warn(error)
+    })
+  }
+
+  function deleteComment(commentId) {
+    fetch(`/api/comments/${commentId}.json`, {
+      method: 'DELETE',
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-Token': CSRF.getToken()
+      },
+      credentials: 'same-origin',
+      redirect: 'manual'
+    })
+      .then(() => {
+        const deletedComment = document.querySelector(
+          `.thread-comment.comment[data-comment_id='${commentId}']`
+        )
+        if (deletedComment) {
+          deletedComment.remove()
+        }
+      })
+      .catch((error) => {
+        console.warn(error)
+      })
+  }
+}