feat: save page

client/components/editor.vue

@@ -21,16 +21,27 @@
               :size='60'
               color='#FFF'
               )
-            .subheading Processing
-            .caption.blue--text.text--lighten-3 Please wait...
+            .subheading {{ $t('editor:save.processing') }}
+            .caption.blue--text.text--lighten-3 {{ $t('editor:save.pleaseWait') }}
+
+    v-snackbar(
+      :color='notification.style'
+      bottom,
+      right,
+      multi-line,
+      v-model='notificationState'
+    )
+      .text-xs-left
+        v-icon.mr-3(dark) {{ notification.icon }}
+        span {{ notification.message }}
 </template>
 
 <script>
 import _ from 'lodash'
-import { get } from 'vuex-pathify'
+import { get, sync } from 'vuex-pathify'
 import { AtomSpinner } from 'epic-spinners'
 
-import savePageMutation from 'gql/editor/save.gql'
+import createPageMutation from 'gql/editor/create.gql'
 
 import editorStore from '@/store/editor'
 
@@ -51,7 +62,9 @@ export default {
     }
   },
   computed: {
-    mode: get('editor/mode')
+    mode: get('editor/mode'),
+    notification: get('notification'),
+    notificationState: sync('notification@isActive')
   },
   mounted() {
     if (this.mode === 'create') {
@@ -77,12 +90,35 @@ export default {
     },
     async save() {
       this.showProgressDialog('saving')
-      // const resp = await this.$apollo.mutate({
-      //   mutation: savePageMutation,
-      //   variables: {
+      if (this.$store.get('editor/mode') === 'create') {
+        const resp = await this.$apollo.mutate({
+          mutation: createPageMutation,
+          variables: {
+            description: this.$store.get('editor/description'),
+            editor: 'markdown',
+            locale: this.$store.get('editor/locale'),
+            isPublished: this.$store.get('editor/isPublished'),
+            path: this.$store.get('editor/path'),
+            publishEndDate: this.$store.get('editor/publishEndDate'),
+            publishStartDate: this.$store.get('editor/publishStartDate'),
+            tags: this.$store.get('editor/tags'),
+            title: this.$store.get('editor/title')
+          }
+        })
+        if (_.get(resp, 'data.pages.create.responseResult.succeeded')) {
+          this.$store.commit('showNotification', {
+            message: this.$t('editor:save.success'),
+            style: 'success',
+            icon: 'check'
+          })
+          this.$store.set('editor/mode', 'update')
+        } else {
 
-      //   }
-      // })
+        }
+      } else {
+
+      }
+      this.hideProgressDialog()
     }
   }
 }

client/components/editor/editor-modal-properties.vue

@@ -32,30 +32,46 @@
           counter='255'
           v-model='description'
           )
-        v-text-field(
-          outline
-          background-color='grey lighten-2'
-          label='Path'
-          prefix='/'
-          append-icon='folder'
-          v-model='path'
-          )
       v-divider
-      v-card-text
-        v-subheader.pl-0 Tags
+      v-card-text.grey.lighten-5
+        v-subheader.pl-0 Path & Categorization
+        v-container.pa-0(fluid, grid-list-lg)
+          v-layout(row, wrap)
+            v-flex(xs12, md2)
+              v-select(
+                outline
+                background-color='grey lighten-2'
+                label='Locale'
+                suffix='/'
+                :items='namespaces'
+                v-model='locale'
+                hide-details
+              )
+            v-flex(xs12, md10)
+              v-text-field(
+                outline
+                background-color='grey lighten-2'
+                label='Path'
+                append-icon='folder'
+                v-model='path'
+                hint='Do not include any leading or trailing slashes.'
+                persistent-hint
+                @click:append='showPathSelector'
+                )
         v-combobox(
           background-color='grey lighten-2'
           chips
           deletable-chips
-          hide-details
           label='Tags'
           outline
           multiple
           v-model='tags'
           single-line
+          hint='Use tags to categorize your pages and make them easier to find.'
+          persistent-hint
           )
       v-divider
-      v-card-text.pb-5
+      v-card-text.pb-5.grey.lighten-4
         v-subheader.pl-0 Publishing State
         v-container.pa-0(fluid, grid-list-lg)
           v-layout(row, wrap)
@@ -64,6 +80,8 @@
                 label='Published'
                 v-model='isPublished'
                 color='primary'
+                hint='Unpublished pages can still be seen by users having write permissions.'
+                persistent-hint
                 )
             v-flex(xs12, md4)
               v-dialog(
@@ -165,6 +183,7 @@ export default {
       isShown: false,
       isPublishStartShown: false,
       isPublishEndShown: false,
+      namespaces: ['en'],
       tourSteps: [
         {
           target: '.dialog-header',
@@ -176,6 +195,7 @@ export default {
   computed: {
     title: sync('editor/title'),
     description: sync('editor/description'),
+    locale: sync('editor/locale'),
     tags: sync('editor/tags'),
     path: sync('editor/path'),
     isPublished: sync('editor/isPublished'),
@@ -193,6 +213,13 @@ export default {
     close() {
       this.isShown = false
       this.$parent.$parent.closeModal()
+    },
+    showPathSelector() {
+      this.$store.commit('showNotification', {
+        message: 'Coming soon!',
+        style: 'purple',
+        icon: 'directions_boat'
+      })
     }
   }
 }