FBC内の分報の削除・編集機能の追加

app/components/users/micro_reports/micro_report_component.html.slim

@@ -1,17 +1,56 @@
-.thread-comment
-  .thread-comment__start
-    = render 'users/icon', user: @user, link_class: 'page-content-header__user-link', image_class: 'page-content-header__user-icon'
-  .thread-comment__end
-    article.a-card
-      header.card-header
-        h2.thread-comment__title
-          = link_to user_path(@user), class: 'thread-comment__title-link a-text-link' do
+.micro-report(id="micro_report_#{@micro_report.id}" data-micro_report_id="#{@micro_report.id}" data-micro_report_content="#{@micro_report.content}")
+  .micro-report__start
+    = render 'users/icon', user: @user, link_class: 'micro-report__user-link', image_class: 'micro-report_user-icon'
+  .micro-report__end
+    .is-micro-report.micro-report-display
+      header.micro-report__header
+        h2.micro-report__title
+          = link_to user_path(@user), class: 'micro-report__title-link a-text-link' do
             = @user.login_name
-        time.thread-comment__created-at
+        time.micro-report__created-at
           = posted_datetime
-      hr.a-border-tint
-      .thread-comment__description
-        .a-long-text.is-md.js-markdown-view
+      .micro-report__body
+        .a-short-text.is-sm.js-markdown-view
           = @micro_report.content
-      hr.a-border-tint
-      = render(Reactions::ReactionsComponent.new(reactionable: @micro_report, current_user: @current_user))
+      .micro-report__footer
+        - if @micro_report.user == @current_user || admin_login?
+          .micro-report-actions
+            ul.micro-report-actions__items
+              li.micro-report-actions__item
+                button.micro-report-actions__action.a-text-link.js-editor-button
+                  | 内容修正
+              li.micro-report-actions__item
+                = link_to user_micro_report_path(@user, @micro_report), data: { confirm: '本当によろしいですか？' }, method: :delete, class: 'micro-report-actions__action a-muted-text-link' do
+                  span#delete
+                  | 削除する
+        = render(Reactions::ReactionsComponent.new(reactionable: @micro_report, current_user: @current_user))
+
+    .a-card.is-micro-report.micro-report-editor.is-hidden
+        .thread-comment-form__form
+          .a-form-tabs
+            .a-form-tabs__tab.js-edit-tab.is-active
+              | コメント
+            .a-form-tabs__tab.js-preview-tab
+              | プレビュー
+          .a-markdown-input
+            .a-markdown-input__inner.is-editor.is-active
+              .form-textarea
+                .form-textarea__body
+                  textarea.a-text-input.a-markdown-input__textarea id="js-comment-#{@micro_report.id}" data-preview="#js-comment-preview-#{@micro_report.id}" data-input=".js-comment-file-input-#{@micro_report.id}" name='micro_report[content]'
+                    = @micro_report.content
+                .form-textarea__footer
+                  .form-textarea__insert
+                    label.a-file-insert.a-button.is-xs.is-text-reversal.is-block
+                      | ファイルを挿入
+                      input(class="js-comment-file-input-#{@micro_report.id}" type='file' multiple)
+            .a-markdown-input__inner.is-preview
+              .a-long-text.is-md.a-markdown-input__preview id="js-comment-preview-#{@micro_report.id}"
+          .card-footer
+              .card-main-actions
+                .card-main-actions__items
+                  .card-main-actions__item
+                    button.a-button.is-sm.is-primary.is-block.js-save-button
+                      | 保存する
+                  .card-main-actions__item
+                    button.a-button.is-sm.is-secondary.is-block.js-cancel-button
+                      | キャンセル

app/components/users/micro_reports/micro_report_component.rb

@@ -17,4 +17,6 @@ def posted_datetime
       l(time, format: :date_and_time)
     end
   end
+
+  delegate :admin_login?, to: :helpers
 end

app/controllers/api/micro_reports_controller.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class API::MicroReportsController < API::BaseController
+  before_action :set_micro_report, only: %i[update]
+
+  def update
+    if @micro_report.update(micro_report_params)
+      head :ok
+    else
+      head :bad_request
+    end
+  end
+
+  private
+
+  def set_micro_report
+    @micro_report = current_user.admin? ? MicroReport.find(params[:id]) : current_user.micro_reports.find(params[:id])
+  end
+
+  def micro_report_params
+    params.require(:micro_report).permit(:content)
+  end
+end

app/controllers/users/micro_reports_controller.rb

@@ -2,8 +2,10 @@
 
 class Users::MicroReportsController < ApplicationController
   PAGER_NUMBER = 25
+  FIRST_PAGE = 1
 
   before_action :set_user
+  before_action :set_micro_report, only: %i[destroy]
 
   def index
     @micro_reports = @user.micro_reports.order(created_at: :asc).page(params[:page]).per(PAGER_NUMBER)
@@ -21,12 +23,30 @@ def create
     redirect_to user_micro_reports_path(@user, page: @user.latest_micro_report_page)
   end
 
+  def destroy
+    @micro_report.destroy!
+
+    referer_path = request.referer
+    matched_page_number = referer_path.match(/page=(\d+)/)
+    page_number = matched_page_number ? matched_page_number[1].to_i : FIRST_PAGE
+    if MicroReport.page(page_number).out_of_range?
+      redirect_to user_micro_reports_path(@user, page: @user.latest_micro_report_page)
+    else
+      redirect_to referer_path
+    end
+    flash[:notice] = '分報を削除しました。'
+  end
+
   private
 
   def set_user
     @user = User.find(params[:user_id])
   end
 
+  def set_micro_report
+    @micro_report = current_user.admin? ? MicroReport.find(params[:id]) : current_user.micro_reports.find(params[:id])
+  end
+
   def micro_report_params
     params.require(:micro_report).permit(:content)
   end

app/helpers/page_tabs/users_helper.rb

@@ -12,11 +12,9 @@ def user_page_tabs(user, active_tab:)
       tabs << { name: '提出物', link: user_products_path(user), count: user.products.length }
       tabs << { name: '質問', link: user_questions_path(user), count: user.questions.length }
       tabs << { name: '回答', link: user_answers_path(user), count: user.answers.length }
-      if Rails.env.development? || Rails.env.test? # 分報の編集、削除を実装したらこの条件は削除する
-        tabs << { name: '分報',
-                  link: "#{user_micro_reports_path(user, page: user.latest_micro_report_page)}#latest-micro-report",
-                  count: user.micro_reports.length }
-      end
+      tabs << { name: '分報',
+                link: "#{user_micro_reports_path(user, page: user.latest_micro_report_page)}#latest-micro-report",
+                count: user.micro_reports.length }
       tabs << { name: '相談部屋', link: talk_path(user.talk) } if current_user.admin? && !user.admin?
       render PageTabsComponent.new(tabs:, active_tab:)
     end

app/javascript/micro-reports-edit.js

@@ -0,0 +1,117 @@
+import CSRF from 'csrf'
+import MarkdownInitializer from 'markdown-initializer'
+import TextareaInitializer from 'textarea-initializer'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const microReports = document.querySelectorAll('.micro-report')
+
+  microReports.forEach((microReport) => {
+    const microReportId = microReport.dataset.micro_report_id
+    const microReportContent = microReport.dataset.micro_report_content
+    TextareaInitializer.initialize(`#js-comment-${microReportId}`)
+    let savedMicroReport = ''
+
+    const microReportDisplay = microReport.querySelector(
+      '.micro-report-display'
+    )
+    const microReportEditor = microReport.querySelector('.micro-report-editor')
+
+    const microReporDisplayContent =
+      microReportDisplay.querySelector('.a-short-text')
+    const microReportEditorPreview = microReportEditor.querySelector(
+      '.a-markdown-input__preview'
+    )
+    const editorTextarea = microReportEditor.querySelector(
+      '.a-markdown-input__textarea'
+    )
+
+    const markdownInitializer = new MarkdownInitializer()
+    if (microReportContent) {
+      microReporDisplayContent.innerHTML =
+        markdownInitializer.render(microReportContent)
+      microReportEditorPreview.innerHTML =
+        markdownInitializer.render(microReportContent)
+    }
+
+    const modalElements = [microReportDisplay, microReportEditor]
+    const editButton = microReportDisplay.querySelector('.js-editor-button')
+    if (editButton) {
+      editButton.addEventListener('click', () => {
+        if (!savedMicroReport) {
+          savedMicroReport = editorTextarea.value
+        }
+        toggleVisibility(modalElements, 'is-hidden')
+      })
+    }
+    const saveButton = microReportEditor.querySelector('.js-save-button')
+    if (saveButton) {
+      saveButton.addEventListener('click', () => {
+        toggleVisibility(modalElements, 'is-hidden')
+        savedMicroReport = editorTextarea.value
+        updatemicroReport(microReportId, savedMicroReport)
+        microReporDisplayContent.innerHTML =
+          markdownInitializer.render(savedMicroReport)
+      })
+    }
+
+    const cancelButton = microReportEditor.querySelector('.js-cancel-button')
+    cancelButton.addEventListener('click', () => {
+      toggleVisibility(modalElements, 'is-hidden')
+      editorTextarea.value = savedMicroReport
+      microReportEditorPreview.innerHTML =
+        markdownInitializer.render(savedMicroReport)
+    })
+
+    editorTextarea.addEventListener('input', () => {
+      microReportEditorPreview.innerHTML = markdownInitializer.render(
+        editorTextarea.value
+      )
+    })
+
+    const editTab = microReportEditor.querySelector('.js-edit-tab')
+    const editorTabContent = microReportEditor.querySelector('.is-editor')
+    const previewTab = microReportEditor.querySelector('.js-preview-tab')
+    const previewTabContent = microReportEditor.querySelector('.is-preview')
+    const tabElements = [
+      editTab,
+      editorTabContent,
+      previewTab,
+      previewTabContent
+    ]
+    editTab.addEventListener('click', () =>
+      toggleVisibility(tabElements, 'is-active')
+    )
+    previewTab.addEventListener('click', () =>
+      toggleVisibility(tabElements, 'is-active')
+    )
+  })
+
+  function toggleVisibility(elements, className) {
+    elements.forEach((element) => {
+      element.classList.toggle(className)
+    })
+  }
+
+  function updatemicroReport(microReportId, content) {
+    if (content.length < 1) {
+      return null
+    }
+    const params = {
+      id: microReportId,
+      micro_report: { content: content }
+    }
+    fetch(`/api/micro_reports/${microReportId}`, {
+      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)
+    })
+  }
+})

app/javascript/packs/application.js

@@ -61,6 +61,7 @@ import '../sort-faq.js'
 import '../sort-faq-category.js'
 import '../micro-report-form-tabs.js'
 import '../micro-reports.js'
+import '../micro-reports-edit.js'
 import '../answer.js'
 import '../new-answer.js'
 import '../coding-test.js'

app/javascript/stylesheets/application.sass

@@ -127,5 +127,7 @@
 @import application/blocks/coding-test/coding-tests-item
 
 @import application/blocks/micro-report/micro-reports
+@import application/blocks/micro-report/micro-report
 @import application/blocks/micro-report/micro-report-form
 @import application/blocks/micro-report/micro-report-form-tabs
+@import application/blocks/micro-report/micro-report-actions

app/javascript/stylesheets/application/blocks/micro-report/_micro-report-actions.sass

@@ -0,0 +1,3 @@
+.micro-report-actions__items
+  display: flex
+  gap: 1rem