feat: convert page

client/components/common/nav-header.vue

@@ -150,6 +150,9 @@
                 v-list-item.pl-4(@click='pageSource', v-if='mode !== `source` && hasReadSourcePermission')
                   v-list-item-avatar(size='24', tile): v-icon(color='indigo') mdi-code-tags
                   v-list-item-title.body-2 {{$t('common:header.viewSource')}}
+                v-list-item.pl-4(@click='pageConvert', v-if='hasWritePagesPermission')
+                  v-list-item-avatar(size='24', tile): v-icon(color='indigo') mdi-lightning-bolt
+                  v-list-item-title.body-2 {{$t('common:header.convert')}}
                 v-list-item.pl-4(@click='pageDuplicate', v-if='hasWritePagesPermission')
                   v-list-item-avatar(size='24', tile): v-icon(color='indigo') mdi-content-duplicate
                   v-list-item-title.body-2 {{$t('common:header.duplicate')}}
@@ -237,6 +240,7 @@
     page-selector(mode='move', v-model='movePageModal', :open-handler='pageMoveRename', :path='path', :locale='locale')
     page-selector(mode='create', v-model='duplicateOpts.modal', :open-handler='pageDuplicateHandle', :path='duplicateOpts.path', :locale='duplicateOpts.locale')
     page-delete(v-model='deletePageModal', v-if='path && path.length')
+    page-convert(v-model='convertPageModal', v-if='path && path.length')
 
     .nav-header-dev(v-if='isDevMode')
       v-icon mdi-alert
@@ -255,7 +259,8 @@ import movePageMutation from 'gql/common/common-pages-mutation-move.gql'
 
 export default {
   components: {
-    PageDelete: () => import('./page-delete.vue')
+    PageDelete: () => import('./page-delete.vue'),
+    PageConvert: () => import('./page-convert.vue')
   },
   props: {
     dense: {
@@ -274,6 +279,7 @@ export default {
       searchAdvMenuShown: false,
       newPageModal: false,
       movePageModal: false,
+      convertPageModal: false,
       deletePageModal: false,
       locales: siteLangs,
       isDevMode: false,
@@ -354,6 +360,9 @@ export default {
     this.$root.$on('pageMove', () => {
       this.pageMove()
     })
+    this.$root.$on('pageConvert', () => {
+      this.pageConvert()
+    })
     this.$root.$on('pageDuplicate', () => {
       this.pageDuplicate()
     })
@@ -416,6 +425,9 @@ export default {
     pageDuplicateHandle ({ locale, path }) {
       window.location.assign(`/e/${locale}/${path}?from=${this.$store.get('page/id')}`)
     },
+    pageConvert () {
+      this.convertPageModal = true
+    },
     pageMove () {
       this.movePageModal = true
     },

client/components/common/page-convert.vue

@@ -0,0 +1,122 @@
+<template lang='pug'>
+  v-dialog(
+    v-model='isShown'
+    max-width='550'
+    persistent
+    overlay-color='blue-grey darken-4'
+    overlay-opacity='.7'
+    )
+    v-card
+      .dialog-header.is-short.is-dark
+        v-icon.mr-2(color='white') mdi-lightning-bolt
+        span {{$t('common:page.convert')}}
+      v-card-text.pt-5
+        i18next.body-2(path='common:page.convertTitle', tag='div')
+          span.blue-grey--text.text--darken-2(place='title') {{pageTitle}}
+        v-select.mt-5(
+          :items=`[
+            { value: 'markdown', text: 'Markdown' },
+            { value: 'ckeditor', text: 'Visual Editor' },
+            { value: 'code', text: 'Raw HTML' }
+          ]`
+          outlined
+          dense
+          hide-details
+          v-model='newEditor'
+        )
+        .caption.mt-5 {{$t('common:page.convertSubtitle')}}
+      v-card-chin
+        v-spacer
+        v-btn(text, @click='discard', :disabled='loading') {{$t('common:actions.cancel')}}
+        v-btn.px-4(color='grey darken-3', @click='convertPage', :loading='loading').white--text {{$t('common:actions.convert')}}
+</template>
+
+<script>
+import _ from 'lodash'
+import { get } from 'vuex-pathify'
+import gql from 'graphql-tag'
+
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      newEditor: ''
+    }
+  },
+  computed: {
+    isShown: {
+      get() { return this.value },
+      set(val) { this.$emit('input', val) }
+    },
+    pageTitle: get('page/title'),
+    pagePath: get('page/path'),
+    pageLocale: get('page/locale'),
+    pageId: get('page/id'),
+    pageEditor: get('page/editor')
+  },
+  mounted () {
+    this.newEditor = this.pageEditor
+  },
+  methods: {
+    discard() {
+      this.isShown = false
+    },
+    async convertPage() {
+      this.loading = true
+      this.$store.commit(`loadingStart`, 'page-convert')
+      this.$nextTick(async () => {
+        try {
+          const resp = await this.$apollo.mutate({
+            mutation: gql`
+              mutation (
+                $id: Int!
+                $editor: String!
+                ) {
+                  pages {
+                    convert(
+                      id: $id
+                      editor: $editor
+                    ) {
+                      responseResult {
+                        succeeded
+                        errorCode
+                        slug
+                        message
+                      }
+                    }
+                  }
+              }
+            `,
+            variables: {
+              id: this.pageId,
+              editor: this.newEditor
+            }
+          })
+          if (_.get(resp, 'data.pages.convert.responseResult.succeeded', false)) {
+            this.isShown = false
+            _.delay(() => {
+              window.location.assign(`/e/${this.pageLocale}/${this.pagePath}`)
+            }, 400)
+          } else {
+            throw new Error(_.get(resp, 'data.pages.convert.responseResult.message', this.$t('common:error.unexpected')))
+          }
+        } catch (err) {
+          this.$store.commit('pushGraphError', err)
+        }
+        this.$store.commit(`loadingStop`, 'page-convert')
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>