check-stamp.vueをRailsで実装(非Vue化)した

app/javascript/check-stamp.js

@@ -1,21 +1,53 @@
 import Vue from 'vue'
 import CheckStamp from 'check-stamp.vue'
 import store from 'check-store.js'
+import CSRF from 'csrf'
+import 'whatwg-fetch'
 
 document.addEventListener('DOMContentLoaded', () => {
-  const checkStamp = document.getElementById('js-check-stamp')
-  if (checkStamp) {
-    const checkableId = checkStamp.getAttribute('data-checkable-id')
-    const checkableType = checkStamp.getAttribute('data-checkable-type')
-    new Vue({
-      store,
-      render: (h) =>
-        h(CheckStamp, {
-          props: {
-            checkableId: checkableId,
-            checkableType: checkableType
-          }
-        })
-    }).$mount('#js-check-stamp')
-  }
+  setChecks()
 })
+
+const setChecks = () => {
+  const checkStamp = document.getElementById('js-check-stamp')
+  if (!checkStamp) return
+
+  const checkableType = checkStamp.getAttribute('data-checkable-type')
+  const checkableId = checkStamp.getAttribute('data-checkable-id')
+  fetch(
+    `/api/checks.json/?checkable_type=${checkableType}&checkable_id=${checkableId}`,
+    {
+      method: 'GET',
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-Token': CSRF.getToken()
+      },
+      credentials: 'same-origin'
+    }
+  )
+    .then((response) => {
+      return response.json()
+    })
+    .then((json) => {
+      const checkStampElement = document.querySelector('.stamp-approve')
+
+      if (!json[0]) return checkStampElement.classList.add('is-hidden')
+
+      checkStampElement.classList.remove('is-hidden')
+
+      const checkedUserName = document.querySelector('.is-user-name')
+      const checkedCreatedAt = document.querySelector('.is-created-at')
+      checkedUserName.textContent = json[0].user.login_name
+      checkedCreatedAt.textContent = json[0].created_at
+
+      store.dispatch('setCheckable', {
+        checkableId: checkableId,
+        checkableType: checkableType
+      })
+    })
+    .catch((error) => {
+      console.warn(error)
+    })
+}
+
+export default setChecks

app/javascript/checkable.js

@@ -1,3 +1,5 @@
+import setChecks from 'check-stamp.js'
+
 export default {
   computed: {
     isUnassignedAndUnchekedProduct() {
@@ -41,6 +43,7 @@ export default {
           if (json.message) {
             this.toast(json.message, 'error')
           } else {
+            setChecks()
             if (!this.checkId) {
               if (checkableType === 'Product') {
                 this.toast('提出物を確認済みにしました。')

app/views/checks/_check-stamp.html.slim

@@ -0,0 +1,6 @@
+.stamp.stamp-approve.show.is-hidden
+  h2.stamp__content.is-title
+    | 確認済
+  time.stamp__content.is-created-at
+  .stamp__content.is-user-name
+    .stamp__content-inner

app/views/products/_product_header.html.slim

@@ -1,5 +1,6 @@
 header.page-content-header
-  #js-check-stamp(data-checkable-id="#{product.id}" data-checkable-type='Product')
+  #js-check-stamp(data-checkable-type='Product' data-checkable-id="#{product.id}")
+  = render 'checks/check-stamp'
   .page-content-header__start
     .page-content-header__user
       = render 'users/icon', user: product.user, link_class: 'page-content-header__user-link', image_class: 'page-content-header__user-icon'

app/views/reports/_report_header.html.slim

@@ -1,5 +1,6 @@
 header.page-content-header
-  #js-check-stamp(data-checkable-id="#{report.id}" data-checkable-type='Report')
+  #js-check-stamp(data-checkable-type='Report' data-checkable-id="#{report.id}")
+  = render 'checks/check-stamp'
   .page-content-header__start
     .page-content-header__user
       = render 'users/icon', user: report.user, link_class: 'page-content-header__user-link', image_class: 'page-content-header__user-icon'