feat: save conflict check polling

client/components/editor.vue

@@ -13,6 +13,9 @@
           full-width
         )
       template(slot='actions')
+        v-btn.mr-3.animated.fadeIn(color='amber', outlined, small, v-if='isConflict')
+          .overline.amber--text.mr-3 Conflict
+          status-indicator(intermediary, pulse)
         v-btn.animated.fadeInDown(
           text
           color='green'
@@ -55,9 +58,11 @@
 
 <script>
 import _ from 'lodash'
+import gql from 'graphql-tag'
 import { get, sync } from 'vuex-pathify'
 import { AtomSpinner } from 'epic-spinners'
 import { Base64 } from 'js-base64'
+import { StatusIndicator } from 'vue-status-indicator'
 
 import createPageMutation from 'gql/editor/create.gql'
 import updatePageMutation from 'gql/editor/update.gql'
@@ -72,6 +77,7 @@ export default {
   i18nOptions: { namespaces: 'editor' },
   components: {
     AtomSpinner,
+    StatusIndicator,
     editorApi: () => import(/* webpackChunkName: "editor-api", webpackMode: "lazy" */ './editor/editor-api.vue'),
     editorCode: () => import(/* webpackChunkName: "editor-code", webpackMode: "lazy" */ './editor/editor-code.vue'),
     editorCkeditor: () => import(/* webpackChunkName: "editor-ckeditor", webpackMode: "lazy" */ './editor/editor-ckeditor.vue'),
@@ -122,10 +128,15 @@ export default {
     pageId: {
       type: Number,
       default: 0
+    },
+    checkoutDate: {
+      type: String,
+      default: new Date().toISOString()
     }
   },
   data() {
     return {
+      isConflict: false,
       dialogProps: false,
       dialogProgress: false,
       dialogEditorSelector: false,
@@ -322,6 +333,29 @@ export default {
         }
       }, 500)
     }
+  },
+  apollo: {
+    isConflict: {
+      query: gql`
+        query ($id: Int!, $checkoutDate: Date!) {
+          pages {
+            checkConflicts(id: $id, checkoutDate: $checkoutDate)
+          }
+        }
+      `,
+      fetchPolicy: 'network-only',
+      pollInterval: 5000,
+      variables () {
+        return {
+          id: this.pageId,
+          checkoutDate: this.checkoutDate
+        }
+      },
+      update: (data) => _.cloneDeep(data.pages.checkConflicts),
+      skip () {
+        return this.mode === 'create' || !this.isDirty
+      }
+    }
   }
 }
 </script>