practice_memo.vueをhtmlとjsでの実装に変更

app/javascript/practice_memo.js

@@ -1,18 +1,132 @@
-import Vue from 'vue'
-import PracticeMemo from 'practice_memo.vue'
+import CSRF from 'csrf'
+import TextareaInitializer from 'textarea-initializer'
+import MarkdownInitializer from 'markdown-initializer'
+import { toast } from 'toast_react'
 
 document.addEventListener('DOMContentLoaded', () => {
-  const selector = '#js-practice-memo'
-  const practiceMemo = document.querySelector(selector)
+  const practiceMemo = document.querySelector('.practice-memo')
   if (practiceMemo) {
-    const practiceId = practiceMemo.getAttribute('data-practice-id')
-    new Vue({
-      render: (h) =>
-        h(PracticeMemo, {
-          props: {
-            practiceId: practiceId
-          }
-        })
-    }).$mount(selector)
+    TextareaInitializer.initialize('.a-markdown-input__textarea')
+    const markdownInitializer = new MarkdownInitializer()
+    const practiceId = practiceMemo.dataset.practice_id
+    let savedMemo = ''
+
+    const memoDisplay = practiceMemo.querySelector('.memo-display')
+    const memoEditor = practiceMemo.querySelector('.memo-editor')
+    const memoDisplayContent = memoDisplay.querySelector('.a-long-text')
+    const memoEditorPreview = memoEditor.querySelector(
+      '.a-markdown-input__preview'
+    )
+    const editorTextarea = memoEditor.querySelector(
+      '.a-markdown-input__textarea'
+    )
+
+    fetch(`/api/practices/${practiceId}.json`, {
+      method: 'GET',
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest'
+      },
+      credentials: 'same-origin',
+      redirect: 'manual'
+    })
+      .then((response) => {
+        return response.json()
+      })
+      .then((json) => {
+        if (json.memo) {
+          savedMemo = json.memo
+          editorTextarea.value = savedMemo
+          switchMemoDisplay(memoDisplay, savedMemo)
+          memoDisplayContent.innerHTML = markdownInitializer.render(savedMemo)
+          memoEditorPreview.innerHTML = markdownInitializer.render(savedMemo)
+        }
+      })
+      .catch((error) => {
+        console.warn(error)
+      })
+
+    const editButton = memoDisplay.querySelector('.card-main-actions__action')
+    const modalElements = [memoDisplay, memoEditor]
+    editButton.addEventListener('click', () =>
+      toggleClass(modalElements, 'is-hidden')
+    )
+
+    const saveButton = memoEditor.querySelector('.is-primary')
+    saveButton.addEventListener('click', () => {
+      toggleClass(modalElements, 'is-hidden')
+      savedMemo = editorTextarea.value
+      updateMemo(savedMemo, practiceId)
+      memoDisplayContent.innerHTML = markdownInitializer.render(savedMemo)
+      switchMemoDisplay(memoDisplay, savedMemo)
+    })
+
+    const cancelButton = memoEditor.querySelector('.is-secondary')
+    cancelButton.addEventListener('click', () => {
+      toggleClass(modalElements, 'is-hidden')
+      editorTextarea.value = savedMemo
+      memoEditorPreview.innerHTML = markdownInitializer.render(savedMemo)
+    })
+
+    editorTextarea.addEventListener('change', () => {
+      memoEditorPreview.innerHTML = markdownInitializer.render(
+        editorTextarea.value
+      )
+    })
+
+    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', () =>
+      toggleClass(tabElements, 'is-active')
+    )
   }
 })
+
+function updateMemo(memo, practiceId) {
+  const params = {
+    practice: {
+      memo: memo
+    }
+  }
+  fetch(`/api/practices/${practiceId}`, {
+    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)
+  })
+    .then(() => {
+      toast('保存しました！')
+    })
+    .catch((error) => {
+      console.warn(error)
+    })
+}
+
+function switchMemoDisplay(memoDisplay, memo) {
+  const memoContent = memoDisplay.querySelector('.any-memo')
+  const noMemoMessage = memoDisplay.querySelector('.no-memo')
+  memoContent.classList.toggle('is-hidden', memo === '')
+  noMemoMessage.classList.toggle('is-hidden', memo !== '')
+}
+
+function toggleClass(elements, className) {
+  elements.forEach((element) => {
+    element.classList.toggle(className)
+  })
+}

app/javascript/stylesheets/application/blocks/form/_form-tabs.sass

@@ -3,7 +3,8 @@
   margin-bottom: 1rem
   border-bottom: solid 1px var(--border)
   .a-card > &:first-child,
-  .a-card__inner > &:first-child
+  .a-card__inner > &:first-child,
+  .memo-editor > &:first-child
     padding-top: 1rem
 
 .form-tabs__tab

app/views/products/_practice_memo.html.slim

@@ -0,0 +1,44 @@
+.a-card.practice-memo data-practice_id=practice_id
+  .memo-display
+    .card-body
+      .card__description.any-memo.is-hidden
+        .a-long-text.is-md
+      .card-list.no-memo
+        .card-list__message
+          .container
+            .o-empty-message
+              .o-empty-message__icon
+                i.fa-regular.fa-sad-tear
+              .o-empty-message__text
+                | プラクティスメモはまだありません。
+    hr.a-border-tint
+    footer.card-footer
+      .card-main-actions
+        ul.card-main-actions__items
+          li.card-main-actions__item
+            button.card-main-actions__action.a-button.is-sm.is-secondary.is-block
+              i.fa-solid.fa-pen
+              | 編集
+  .memo-editor.is-hidden
+    .form-tabs.js-tabs
+      .form-tabs__tab.js-tabs__tab.editor-tab.is-active
+        | メモ
+      .form-tabs__tab.js-tabs__tab.preview-tab
+        | プレビュー
+    .card-body
+      .card__description
+        .a-markdown-input.js-markdown-parent
+          .a-markdown-input__inner.is-editor.js-tabs__content.is-active
+            textarea.a-text-input.a-markdown-input__textarea id='js-practice-memo' data-preview='#practice-memo-preview' name='practice[memo]'
+          .a-markdown-input__inner.is-preview.js-tabs__content
+            .a-long-text.a-markdown-input__preview
+    hr.a-border-tint
+    .card-footer
+      .card-main-actions
+        .card-main-actions__items
+          .card-main-actions__item
+            button.a-button.is-sm.is-primary.is-block
+              | 保存する
+          .card-main-actions__item
+            button.a-button.is-sm.is-secondary.is-block
+              | キャンセル

app/views/products/show.html.slim

@@ -74,7 +74,7 @@ header.page-header
               .side-tabs-contents__item#side-tabs-content-1
                 div(data-vue="UserRecentReports" data-vue-user-id:number="#{@product.user.id}")
               .side-tabs-contents__item#side-tabs-content-2
-                #js-practice-memo(data-practice-id="#{@product.practice_id}")
+                = render 'practice_memo', practice_id: @product.practice_id
               .side-tabs-contents__item#side-tabs-content-3
                 .user-info
                   = render 'users/user_secret_attributes', user: @product.user