checkStampを非Vue化した

app/javascript/check-stamp.js

@@ -1,21 +1,48 @@
-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')
-  }
+  setCheckStamp()
 })
+
+export const setCheckStamp = () => {
+  const checkStamp = document.getElementById('js-check-stamp')
+  if (!checkStamp) return
+
+  const checkableType = checkStamp.getAttribute('data-checkable-type')
+  const checkableId = checkStamp.getAttribute('data-checkable-id')
+  store.dispatch('setCheckable', {
+    checkableId: checkableId,
+    checkableType: checkableType
+  })
+  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 notChecked = !json[0]
+      const checkStampElement = document.querySelector('.stamp-approve')
+
+      checkStampElement.classList.toggle('is-hidden', notChecked)
+      if (notChecked) return
+
+      const checkedUserName = document.querySelector('.stamp__content-inner')
+      const checkedCreatedAt = document.querySelector('.is-created-at')
+      checkedUserName.textContent = json[0].user.login_name
+      checkedCreatedAt.textContent = json[0].created_at
+    })
+    .catch((error) => {
+      console.warn(error)
+    })
+}

app/javascript/check-store.js

@@ -7,8 +7,6 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     checkId: null,
-    userName: null,
-    createdAt: null,
     checkableId: null,
     checkableType: null,
     productId: null,
@@ -17,22 +15,15 @@ export default new Vuex.Store({
   },
   getters: {
     checkId: (state) => state.checkId,
-    userName: (state) => state.userName,
-    createdAt: (state) => state.createdAt,
     checkableId: (state) => state.checkableId,
     checkableType: (state) => state.checkableType,
     productId: (state) => state.productId,
     productCheckerId: (state) => state.productCheckerId,
     watchId: (state) => state.watchId
   },
   mutations: {
-    setCheckable(
-      state,
-      { checkId, userName, createdAt, checkableId, checkableType }
-    ) {
+    setCheckable(state, { checkId, checkableId, checkableType }) {
       state.checkId = checkId
-      state.userName = userName
-      state.createdAt = createdAt
       state.checkableId = checkableId
       state.checkableType = checkableType
     },
@@ -64,16 +55,12 @@ export default new Vuex.Store({
           if (json[0]) {
             commit('setCheckable', {
               checkId: json[0].id,
-              createdAt: json[0].created_at,
-              userName: json[0].user.login_name,
               checkableId: checkableId,
               checkableType: checkableType
             })
           } else {
             commit('setCheckable', {
               checkId: null,
-              createdAt: null,
-              userName: null,
               checkableId: checkableId,
               checkableType: checkableType
             })

app/javascript/checkable.js

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

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

@@ -0,0 +1,6 @@
+.stamp.stamp-approve.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'