メンターメモに作成者と作成時間を追加し、１対多の関係に変更

app/assets/stylesheets/application.css

@@ -102,6 +102,7 @@
 @import "./application/blocks/user/_completed-practices-progress.css";
 @import "./application/blocks/user/_following.css";
 @import "./application/blocks/user/_group-company-name.css";
+@import "./application/blocks/user/_mentor-memos.css";
 @import "./application/blocks/user/_niconico-calendar.css";
 @import "./application/blocks/user/_sns-links.css";
 @import "./application/blocks/user/_user-data.css";

app/assets/stylesheets/application/blocks/user/_mentor-memos.css

@@ -0,0 +1,82 @@
+.mentor-memo-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.mentor-memo {
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.mentor-memo__inner {
+  padding: 1rem;
+}
+
+@media (width <= 47.9375em) {
+  .mentor-memo__inner {
+    padding: 0.75rem;
+  }
+}
+
+.mentor-memo:not(:last-child) {
+  border-bottom: solid 1px var(--border-tint);
+}
+
+.mentor-memo__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
+}
+
+.mentor-memo__writer-link {
+  display: inline-flex;
+  flex: 0 0 auto;
+  line-height: 1;
+}
+
+.mentor-memo__writer {
+  font-size: 0.875rem;
+  line-height: 1.4;
+  font-weight: 600;
+}
+
+.mentor-memo__created-at {
+  margin-left: auto;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  white-space: nowrap;
+  color: var(--muted-text);
+}
+
+.mentor-memo__body {
+  margin-bottom: 0.5rem;
+}
+
+.mentor-memo__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.mentor-memo__action {
+  font-size: 0.75rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  color: var(--muted-text);
+  transition: color 0.2s ease-in;
+}
+
+.mentor-memo__action:hover {
+  color: var(--link-text);
+}
+
+.mentor-memo__action.is-danger:hover {
+  color: var(--danger);
+}

app/controllers/api/mentor_memos_controller.rb

@@ -2,25 +2,55 @@
 
 class API::MentorMemosController < API::BaseController
   before_action :require_mentor_login_for_api
-  before_action -> { doorkeeper_authorize! :write }, only: %i[update], if: -> { doorkeeper_token.present? }
-  before_action -> { doorkeeper_authorize! :mentor }, only: %i[update], if: -> { doorkeeper_token.present? }
-  before_action :set_user, only: %i[update]
+  before_action -> { doorkeeper_authorize! :write }, only: %i[create update destroy], if: -> { doorkeeper_token.present? }
+  before_action -> { doorkeeper_authorize! :mentor }, only: %i[create update destroy], if: -> { doorkeeper_token.present? }
+  before_action :set_user, only: %i[create update destroy]
+  before_action :set_memo, only: %i[update destroy]
+  before_action :authorize_memo, only: %i[update destroy]
+
+  def create
+    memo = MentorMemo.new(mentor_memo_params)
+    memo.writer = current_user
+    memo.recipient = @user
+
+    if memo.save
+      render partial: 'users/mentor_memo', locals: { memo: }, status: :created
+    else
+      head :bad_request
+    end
+  end
 
   def update
-    if @user.update_mentor_memo(user_params[:mentor_memo])
+    if @mentor_memo.update(mentor_memo_params)
       head :ok
     else
       head :bad_request
     end
   end
 
+  def destroy
+    @mentor_memo.destroy
+
+    head :no_content
+  end
+
   private
 
   def set_user
-    @user = User.find(params[:id])
+    @user = User.find(params[:user_id])
+  end
+
+  def set_memo
+    @mentor_memo = @user.received_memos.find(params[:id])
   end
 
-  def user_params
-    params.require(:user).permit(:mentor_memo)
+  def mentor_memo_params
+    params.require(:mentor_memo).permit(:body)
+  end
+
+  def authorize_memo
+    return if @mentor_memo.writer == current_user || current_user.admin?
+
+    head :forbidden
   end
 end

app/controllers/products_controller.rb

@@ -28,6 +28,7 @@ def show
     Footprint.find_or_create_for(@product, current_user)
     @footprints = Footprint.fetch_for_resource(@product)
     @comments = @product.comments.order(:created_at)
+    @mentor_memos = @product.user.received_memos.includes(:writer).order(created_at: :desc)
     respond_to do |format|
       format.html
       format.md

app/controllers/reports_controller.rb

@@ -25,6 +25,7 @@ def show
     @recent_reports = Report.list.where(user_id: @report.user.id).limit(10)
     Footprint.find_or_create_for(@report, current_user)
     @footprints = Footprint.fetch_for_resource(@report)
+    @mentor_memos = @report.user.received_memos.includes(:writer).order(created_at: :desc)
     respond_to do |format|
       format.html
       format.md

app/controllers/talks_controller.rb

@@ -32,6 +32,7 @@ def index
   def show
     @comments = @talk.comments.order(:created_at)
     @reports = @user.reports.list.limit(20)
+    @mentor_memos = @user.received_memos.includes(:writer).order(created_at: :desc)
   end
 
   private

app/controllers/users_controller.rb

@@ -48,6 +48,8 @@ def show
     reports = @user.reports_with_learning_times
     @study_streak = StudyStreak.new(reports, include_wip: false)
 
+    @mentor_memos = @user.received_memos.includes(:writer).order(created_at: :desc)
+
     if logged_in?
       render :show
     else

app/javascript/importmap_application.js

@@ -49,7 +49,7 @@ import 'upload-image-to-article'
 import 'header-dropdown'
 import 'postal-code-address'
 import 'editor-selection-form'
-import 'user_mentor_memo'
+import 'mentor-memos'
 import 'invitation-url-updater'
 import 'movie-fileinput'
 import 'payment-methods-check-boxes'

app/javascript/initializeMentorMemo.js

@@ -0,0 +1,134 @@
+import TextareaInitializer from 'textarea-initializer'
+import MarkdownInitializer from 'markdown-initializer'
+import { put, destroy } from '@rails/request.js'
+
+export default function initializeMemo(memo, userId) {
+  const memoId = memo.dataset.memo_id
+  const memoBody = memo.dataset.memo_body
+  let savedMemo = memoBody || ''
+
+  TextareaInitializer.initialize(`#js-memo-${memoId}`)
+  const markdownInitializer = new MarkdownInitializer()
+
+  const memoDisplay = memo.querySelector('.memo-display')
+  const memoDisplayContent = memo.querySelector('.memo-text')
+
+  const memoEditor = memo.querySelector('.memo-editor')
+  const editorTextarea = memo.querySelector('.a-markdown-input__textarea')
+  const editorPreview = memo.querySelector('.a-markdown-input__preview')
+
+  if (memoBody) {
+    memoDisplayContent.innerHTML = markdownInitializer.render(savedMemo)
+    editorPreview.innerHTML = markdownInitializer.render(savedMemo)
+  }
+
+  const editButton = memo.querySelector('.js-edit-memo')
+  if (editButton) {
+    editButton.addEventListener('click', () => {
+      toggleEditor()
+      resetEditorTabs()
+    })
+  }
+
+  const saveButton = memo.querySelector('.js-save-memo')
+  editorTextarea.addEventListener('input', () => {
+    saveButton.disabled = editorTextarea.value.trim().length === 0
+  })
+
+  saveButton.addEventListener('click', async () => {
+    try {
+      const editedMemo = editorTextarea.value
+      await updateMemo(memoId, editedMemo, userId)
+      savedMemo = editedMemo
+      toggleEditor()
+      memoDisplayContent.innerHTML = markdownInitializer.render(savedMemo)
+    } catch (error) {
+      console.warn(error)
+    }
+  })
+
+  const cancelButton = memo.querySelector('.js-cancel-memo')
+  cancelButton.addEventListener('click', () => {
+    toggleEditor()
+    editorTextarea.value = savedMemo
+    editorPreview.innerHTML = markdownInitializer.render(savedMemo)
+    saveButton.disabled = editorTextarea.value.trim().length === 0
+  })
+
+  const deleteButton = memo.querySelector('.js-delete-memo')
+  if (deleteButton) {
+    deleteButton.addEventListener('click', async () => {
+      if (window.confirm('本当によろしいですか？')) {
+        try {
+          await deleteMemo(memoId, userId)
+          memo.remove()
+
+          const mentorMemos = document.querySelector('.mentor-memos')
+          const emptyMessage = mentorMemos.querySelector('.o-empty-message')
+          const memoList = mentorMemos.querySelectorAll('.mentor-memo')
+
+          if (!memoList.length) emptyMessage.classList.remove('is-hidden')
+        } catch (error) {
+          console.warn(error)
+        }
+      }
+    })
+  }
+
+  const editorTab = memoEditor.querySelector('.editor-tab')
+  const editorTabContent = memoEditor.querySelector('.is-editor')
+  const previewTab = memoEditor.querySelector('.preview-tab')
+  const previewTabContent = memoEditor.querySelector('.is-preview')
+
+  const tabElements = [
+    editorTab,
+    editorTabContent,
+    previewTab,
+    previewTabContent
+  ]
+  editorTab.addEventListener('click', () =>
+    toggleClass(tabElements, 'is-active')
+  )
+  previewTab.addEventListener('click', () => {
+    editorPreview.innerHTML = markdownInitializer.render(editorTextarea.value)
+    toggleClass(tabElements, 'is-active')
+  })
+
+  async function updateMemo(memoId, memoContent, userId) {
+    const params = {
+      mentor_memo: {
+        body: memoContent
+      }
+    }
+    const response = await put(`/api/users/${userId}/mentor_memos/${memoId}`, {
+      body: params
+    })
+
+    if (!response.ok) throw new Error('Failed to update')
+  }
+
+  async function deleteMemo(memoId, userId) {
+    const response = await destroy(
+      `/api/users/${userId}/mentor_memos/${memoId}`
+    )
+
+    if (!response.ok) throw new Error('Failed to delete')
+  }
+
+  function toggleEditor() {
+    toggleClass([memoDisplay, memoEditor], 'is-hidden')
+  }
+
+  function toggleClass(elements, className) {
+    elements.forEach((element) => {
+      element.classList.toggle(className)
+    })
+  }
+
+  function resetEditorTabs() {
+    editorTab.classList.add('is-active')
+    editorTabContent.classList.add('is-active')
+    previewTab.classList.remove('is-active')
+    previewTabContent.classList.remove('is-active')
+  }
+}