feat: save page - updated + page history

client/components/editor.vue

@@ -6,7 +6,9 @@
           v-icon(color='green', left) check
           span.white--text(v-if='mode === "create"') {{ $t('common:actions.create') }}
           span.white--text(v-else) {{ $t('common:actions.save') }}
-        v-btn.is-icon(outline, color='red').mx-0: v-icon(color='red') close
+        v-btn(outline, color='red').mx-0
+          v-icon(color='red', left) close
+          span.white--text {{ $t('common:actions.discard') }}
         v-btn(outline, color='blue', @click.native.stop='openModal(`properties`)', dark)
           v-icon(left) sort_by_alpha
           span.white--text {{ $t('editor:page') }}
@@ -42,6 +44,7 @@ import { get, sync } from 'vuex-pathify'
 import { AtomSpinner } from 'epic-spinners'
 
 import createPageMutation from 'gql/editor/create.gql'
+import updatePageMutation from 'gql/editor/update.gql'
 
 import editorStore from '@/store/editor'
 
@@ -90,35 +93,79 @@ export default {
     },
     async save() {
       this.showProgressDialog('saving')
-      if (this.$store.get('editor/mode') === 'create') {
-        const resp = await this.$apollo.mutate({
-          mutation: createPageMutation,
-          variables: {
-            content: this.$store.get('editor/content'),
-            description: this.$store.get('editor/description'),
-            editor: 'markdown',
-            locale: this.$store.get('editor/locale'),
-            isPrivate: false,
-            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'
+      try {
+        if (this.$store.get('editor/mode') === 'create') {
+          // --------------------------------------------
+          // -> CREATE PAGE
+          // --------------------------------------------
+
+          let resp = await this.$apollo.mutate({
+            mutation: createPageMutation,
+            variables: {
+              content: this.$store.get('editor/content'),
+              description: this.$store.get('editor/description'),
+              editor: 'markdown',
+              locale: this.$store.get('editor/locale'),
+              isPrivate: false,
+              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')
+            }
           })
-          this.$store.set('editor/mode', 'update')
+          resp = _.get(resp, 'data.pages.create', {})
+          if (_.get(resp, 'responseResult.succeeded')) {
+            this.$store.commit('showNotification', {
+              message: this.$t('editor:save.success'),
+              style: 'success',
+              icon: 'check'
+            })
+            this.$store.set('editor/id', _.get(resp, 'page.id'))
+            this.$store.set('editor/mode', 'update')
+          } else {
+            throw new Error(_.get(resp, 'responseResult.message'))
+          }
         } else {
+          // --------------------------------------------
+          // -> UPDATE EXISTING PAGE
+          // --------------------------------------------
 
+          let resp = await this.$apollo.mutate({
+            mutation: updatePageMutation,
+            variables: {
+              id: this.$store.get('editor/id'),
+              content: this.$store.get('editor/content'),
+              description: this.$store.get('editor/description'),
+              editor: 'markdown',
+              locale: this.$store.get('editor/locale'),
+              isPrivate: false,
+              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')
+            }
+          })
+          resp = _.get(resp, 'data.pages.update', {})
+          if (_.get(resp, 'responseResult.succeeded')) {
+            this.$store.commit('showNotification', {
+              message: this.$t('editor:save.success'),
+              style: 'success',
+              icon: 'check'
+            })
+          } else {
+            throw new Error(_.get(resp, 'responseResult.message'))
+          }
         }
-      } else {
-
+      } catch (err) {
+        this.$store.commit('showNotification', {
+          message: err.message,
+          style: 'error',
+          icon: 'warning'
+        })
       }
       this.hideProgressDialog()
     }

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

@@ -7,13 +7,24 @@
       v-icon(color='white') sort_by_alpha
       .subheading.white--text.ml-2 Page Properties
       v-spacer
-      v-btn(
+      v-btn.mx-0(
         outline
         dark
         @click.native='close'
         )
-        v-icon(left) close
-        span Close
+        v-icon(left) check
+        span {{ $t('common:actions.ok') }}
+      v-menu
+        v-btn.is-icon(
+          slot='activator'
+          outline
+          dark
+          )
+          v-icon more_horiz
+        v-list
+          v-list-tile
+            v-list-tile-avatar: v-icon delete
+            v-list-tile-title Delete Page
     v-card(tile)
       v-card-text
         v-subheader.pl-0 Page Info

client/components/setup.vue

@@ -50,7 +50,7 @@
               .body-1.pt-3
                 svg.icons.is-18.is-outlined.has-right-pad.is-text: use(xlink:href='#nc-cd-reader')
                 span You are about to install Wiki.js #[strong {{wikiVersion}}].
-              v-divider
+              v-divider.mt-3
               v-form
                 v-checkbox(
                   color='primary',
@@ -67,7 +67,7 @@
                   hint='Check this box if you are upgrading from Wiki.js 1.x and wish to migrate your existing data.'
                 )
             v-divider
-            .text-xs-center
+            .pt-3.text-xs-center
               v-btn(color='primary', @click='proceedToSyscheck', :disabled='loading') Start
 
           //- ==============================================
@@ -94,7 +94,7 @@
                       v-list-tile-title {{rs.title}}
                       v-list-tile-sub-title {{rs.subtitle}}
             v-divider
-            .text-xs-center
+            .pt-3.text-xs-center
               v-btn(@click='proceedToWelcome', :disabled='loading') Back
               v-btn(color='primary', @click='proceedToSyscheck', v-if='!loading && !syscheck.ok') Check Again
               v-btn(color='red', dark, @click='proceedToGeneral', v-if='!loading && !syscheck.ok') Continue Anyway
@@ -113,6 +113,8 @@
                 v-layout(row, wrap)
                   v-flex(xs12, sm6).pr-3
                     v-text-field(
+                      outline
+                      background-color='grey lighten-2'
                       v-model='conf.title',
                       label='Site Title',
                       :counter='255',
@@ -126,6 +128,8 @@
                     )
                   v-flex.pr-3(xs12, sm6)
                     v-text-field(
+                      outline
+                      background-color='grey lighten-2'
                       v-model='conf.port',
                       label='Server Port',
                       persistent-hint,
@@ -139,6 +143,8 @@
                 v-layout(row, wrap).mt-3
                   v-flex(xs12, sm6).pr-3
                     v-text-field(
+                      outline
+                      background-color='grey lighten-2'
                       v-model='conf.pathContent',
                       label='Content Data Path',
                       persistent-hint,
@@ -151,6 +157,8 @@
                     )
                   v-flex(xs12, sm6)
                     v-text-field(
+                      outline
+                      background-color='grey lighten-2'
                       v-model='conf.pathData',
                       label='Temporary Data Path',
                       persistent-hint,
@@ -170,15 +178,8 @@
                       persistent-hint,
                       hint='Should the site be accessible (read only) without login.'
                     )
-                    v-checkbox.mt-2(
-                      color='primary',
-                      v-model='conf.selfRegister',
-                      label='Allow Self-Registration',
-                      persistent-hint,
-                      hint='Can users create their own account to gain access?'
-                    )
             v-divider
-            .text-xs-center
+            .pt-3.text-xs-center
               v-btn(@click='proceedToSyscheck', :disabled='loading') Back
               v-btn(color='primary', @click='proceedToAdmin', :disabled='loading') Continue
 
@@ -196,7 +197,8 @@
                 v-layout(row, wrap)
                   v-flex(xs12)
                     v-text-field(
-                      autofocus
+                      outline
+                      background-color='grey lighten-2'
                       v-model='conf.adminEmail',
                       label='Administrator Email',
                       hint='The email address of the administrator account',
@@ -208,6 +210,8 @@
                     )
                   v-flex.pr-3(xs6)
                     v-text-field(
+                      outline
+                      background-color='grey lighten-2'
                       ref='adminPassword',
                       counter='255'
                       v-model='conf.adminPassword',
@@ -224,6 +228,8 @@
                     )
                   v-flex(xs6)
                     v-text-field(
+                      outline
+                      background-color='grey lighten-2'
                       ref='adminPasswordConfirm',
                       counter='255'
                       v-model='conf.adminPasswordConfirm',
@@ -238,7 +244,7 @@
                       data-vv-scope='admin',
                       :error-messages='errors.collect(`adminPasswordConfirm`)'
                     )
-              .text-xs-center
+              .pt-3.text-xs-center
                 v-btn(@click='proceedToGeneral', :disabled='loading') Back
                 v-btn(color='primary', @click='proceedToUpgrade', :disabled='loading') Continue
 
@@ -256,6 +262,8 @@
                 v-layout(row)
                   v-flex(xs12)
                     v-text-field(
+                      outline
+                      background-color='grey lighten-2'
                       v-model='conf.upgMongo',
                       placeholder='mongodb://',
                       label='Connection String to Wiki.js 1.x MongoDB database',
@@ -267,7 +275,7 @@
                       data-vv-scope='upgrade',
                       :error-messages='errors.collect(`upgMongo`)'
                     )
-            .text-xs-center
+            .pt-3.text-xs-center
               v-btn(@click='proceedToAdmin', :disabled='loading') Back
               v-btn(color='primary', @click='proceedToFinal', :disabled='loading') Continue
 
@@ -290,7 +298,7 @@
               v-alert(type='success', outline, :value='!loading && final.ok') Wiki.js was configured successfully and is now ready for use.
               v-alert(type='error', outline, :value='!loading && !final.ok') {{ final.error }}
             v-divider
-            .text-xs-center
+            .pt-3.text-xs-center
               v-btn(@click='!conf.upgrade ? proceedToAdmin() : proceedToUpgrade()', :disabled='loading') Back
               v-btn(color='primary', @click='proceedToFinal', v-if='!loading && !final.ok') Try Again
               v-btn(color='success', @click='finish', v-if='loading || final.ok', :disabled='loading') Continue
@@ -342,7 +350,6 @@ export default {
         pathContent: './content',
         port: siteConfig.port || 80,
         public: (siteConfig.public === true),
-        selfRegister: (siteConfig.selfRegister === true),
         telemetry: true,
         title: siteConfig.title || 'Wiki',
         upgrade: false,

client/graph/editor/update.gql

@@ -0,0 +1,12 @@
+mutation ($id: Int!, $content: String, $description: String, $editor: String, $isPrivate: Boolean, $isPublished: Boolean, $locale: String, $path: String, $publishEndDate: Date, $publishStartDate: Date, $tags: [String], $title: String) {
+  pages {
+    update(id: $id, content: $content, description: $description, editor: $editor, isPrivate: $isPrivate, isPublished: $isPublished, locale: $locale, path: $path, publishEndDate: $publishEndDate, publishStartDate: $publishStartDate, tags: $tags, title: $title) {
+      responseResult {
+        succeeded
+        errorCode
+        slug
+        message
+      }
+    }
+  }
+}

client/store/editor.js

@@ -1,6 +1,7 @@
 import { make } from 'vuex-pathify'
 
 const state = {
+  id: 0,
   content: '',
   description: '',
   isPublished: true,