feat: editor page properties

client/components/editor.vue

@@ -7,25 +7,37 @@
           span.white--text Save
         v-btn(icon): v-icon(color='red') close
         v-btn(icon, @click.native.stop='openModal(`properties`)'): v-icon(color='white') sort_by_alpha
-        v-btn(icon, @click.native.stop='openModal(`access`)'): v-icon(color='white') vpn_lock
     v-content
       editor-code
       component(:is='currentModal')
       v-dialog(v-model='dialogProgress', persistent, max-width='350')
         v-card(color='blue darken-3', dark)
           v-card-text.text-xs-center.py-4
-            v-progress-circular(indeterminate, color='white', :width='1')
+            atom-spinner.is-inline(
+              :animation-duration='1000'
+              :size='60'
+              color='#FFF'
+              )
             .subheading Processing
             .caption.blue--text.text--lighten-3 Please wait...
 </template>
 
 <script>
 import _ from 'lodash'
+import { AtomSpinner } from 'epic-spinners'
+
+import savePageMutation from 'gql/editor/save.gql'
+
+import editorStore from '@/store/editor'
+
+/* global WIKI */
+
+WIKI.$store.registerModule('editor', editorStore)
 
 export default {
   components: {
+    AtomSpinner,
     editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor/editor-code.vue'),
-    editorModalAccess: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-access.vue'),
     editorModalProperties: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-properties.vue')
   },
   data() {
@@ -49,8 +61,14 @@ export default {
     hideProgressDialog() {
       this.dialogProgress = false
     },
-    save() {
+    async save() {
       this.showProgressDialog('saving')
+      // const resp = await this.$apollo.mutate({
+      //   mutation: savePageMutation,
+      //   variables: {
+
+      //   }
+      // })
     }
   }
 }
@@ -58,4 +76,8 @@ export default {
 
 <style lang='scss'>
 
+  .atom-spinner.is-inline {
+    display: inline-block;
+  }
+
 </style>