refactor: vue fixes + modal-upgrade-system.vue

client/js/app.js

@@ -70,6 +70,7 @@ import modalCreateUserComponent from './components/modal-create-user.vue'
 import modalDeleteUserComponent from './components/modal-delete-user.vue'
 import modalDiscardPageComponent from './components/modal-discard-page.vue'
 import modalMovePageComponent from './components/modal-move-page.vue'
+import modalUpgradeSystemComponent from './components/modal-upgrade-system.vue'
 import pageLoaderComponent from './components/page-loader.vue'
 import searchComponent from './components/search.vue'
 import treeComponent from './components/tree.vue'
@@ -180,6 +181,7 @@ $(() => {
       modalDeleteUser: modalDeleteUserComponent,
       modalDiscardPage: modalDiscardPageComponent,
       modalMovePage: modalMovePageComponent,
+      modalUpgradeSystem: modalUpgradeSystemComponent,
       pageLoader: pageLoaderComponent,
       search: searchComponent,
       sourceView: sourceViewComponent,

client/js/components/anchor.vue

@@ -32,7 +32,7 @@
     },
     methods: {
       cancel () {
-        this.$store.dispatch('anchorClose')
+        this.$store.dispatch('anchor/close')
       },
       clipboardSuccess () {
         this.$store.dispatch('alert', {
@@ -40,7 +40,7 @@
           icon: 'clipboard',
           msg: this.$t('modal.anchorsuccess')
         })
-        this.$store.dispatch('anchorClose')
+        this.$store.dispatch('anchor/close')
       },
       clipboardError () {
         this.$store.dispatch('alert', {

client/js/components/modal-create-user.vue

@@ -28,7 +28,7 @@
               p.control.is-fullwidth
                 input.input(type='password', placeholder='', v-model='password')
             section(v-if='provider=="local"')
-              label.label {{ $t('modal.createuserfullname') }}
+              label.label {{ $t('modal.createusername') }}
               p.control.is-fullwidth
                 input.input(type='text', :placeholder='$t("modal.createusernameplaceholder")', v-model='name')
             footer

client/js/components/modal-upgrade-system.vue

@@ -0,0 +1,70 @@
+<template lang="pug">
+  transition(:duration="400")
+    .modal(v-show='isShown', v-cloak)
+      transition(name='modal-background')
+        .modal-background(v-show='isShown')
+      .modal-container
+        transition(name='modal-content')
+          .modal-content(v-show='isShown')
+            template(v-if='step === "running"')
+              header.is-blue Install
+              section.modal-loading
+                i
+                span Wiki.js {{ mode }} in progress...
+                em Please wait
+            template(v-if='step === "error"')
+              header.is-red Installation Error
+              section.modal-loading
+                span {{ error }}
+              footer
+                a.button.is-grey.is-outlined(@click='upgradeCancel') Abort
+                a.button.is-deep-orange(@click='upgradeStart') Try Again
+            template(v-if='step === "confirm"')
+              header.is-deep-orange Are you sure?
+              section
+                label.label You are about to {{ mode }} Wiki.js.
+                span.note You will not be able to access your wiki during the operation. Content will not be affected. However, it is your responsability to ensure you have a backup in the unexpected event content gets lost or corrupted.
+              footer
+                a.button.is-grey.is-outlined(@click='upgradeCancel') Abort
+                a.button.is-deep-orange(@click='upgradeStart') Start
+
+</template>
+
+<script>
+export default {
+  name: 'modal-upgrade-system',
+  data() {
+    return {
+      isLoading: false
+    }
+  },
+  computed: {
+    isShown() {
+      return this.$store.state.modalUpgradeSystem.shown
+    },
+    mode() {
+      return this.$store.state.modalUpgradeSystem.mode
+    },
+    step() {
+      return this.$store.state.modalUpgradeSystem.step
+    }
+  },
+  methods: {
+    upgradeCancel() {
+      this.isLoading = false
+      this.$store.dispatch('modalUpgradeSystem/close')
+    },
+    upgradeStart() {
+      this.$store.commit('modalUpgradeSystem/stepChange', 'running')
+      this.$http.post('/admin/settings/install', {
+        mode: this.mode
+      }).then(resp => {
+        // todo
+      }).catch(err => {
+        this.$store.commit('modalUpgradeSystem/stepChange', 'error')
+        this.error = err.body
+      })
+    }
+  }
+}
+</script>

client/js/pages/admin-settings.component.js

@@ -1,44 +1,11 @@
 'use strict'
 
-import * as $ from 'jquery'
-
 export default {
   name: 'admin-settings',
   data() {
-    return {
-      upgradeModal: {
-        state: false,
-        step: 'confirm',
-        mode: 'upgrade',
-        error: 'Something went wrong.'
-      }
-    }
+    return {}
   },
   methods: {
-    upgrade() {
-      this.upgradeModal.mode = 'upgrade'
-      this.upgradeModal.step = 'confirm'
-      this.upgradeModal.state = true
-    },
-    reinstall() {
-      this.upgradeModal.mode = 're-install'
-      this.upgradeModal.step = 'confirm'
-      this.upgradeModal.state = true
-    },
-    upgradeCancel() {
-      this.upgradeModal.state = false
-    },
-    upgradeStart() {
-      this.upgradeModal.step = 'running'
-      $.post('/admin/settings/install', {
-        mode: this.upgradeModal.mode
-      }).done((resp) => {
-        // todo
-      }).fail((jqXHR, txtStatus, resp) => {
-        this.upgradeModal.step = 'error'
-        this.upgradeModal.error = jqXHR.responseText
-      })
-    },
     flushcache() {
       window.alert('Coming soon!')
     },

client/js/pages/content-view.component.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import MathJax from 'mathjax'
+import $ from 'jquery'
 
 export default {
   name: 'content-view',
@@ -8,6 +9,15 @@ export default {
     return {}
   },
   mounted() {
+    let self = this
+    $('a.toc-anchor').each((i, elm) => {
+      let hashText = $(elm).attr('href').slice(1)
+      $(elm).on('click', (ev) => {
+        ev.stopImmediatePropagation()
+        self.$store.dispatch('anchor/open', hashText)
+        return false
+      })
+    })
     MathJax.Hub.Config({
       jax: ['input/TeX', 'input/MathML', 'output/SVG'],
       extensions: ['tex2jax.js', 'mml2jax.js'],
@@ -28,11 +38,3 @@ export default {
     MathJax.Hub.Configured()
   }
 }
-
-// module.exports = (alerts) => {
-//   if ($('#page-type-view').length) {
-//     let currentBasePath = ($('#page-type-view').data('entrypath') !== 'home') ? $('#page-type-view').data('entrypath') : ''
-//     require('../modals/create.js')(currentBasePath)
-//     require('../modals/move.js')(currentBasePath, alerts)
-//   }
-// }

client/js/store/index.js

@@ -12,6 +12,7 @@ import modalCreateUser from './modules/modal-create-user'
 import modalDeleteUser from './modules/modal-delete-user'
 import modalDiscardPage from './modules/modal-discard-page'
 import modalMovePage from './modules/modal-move-page'
+import modalUpgradeSystem from './modules/modal-upgrade-system'
 import pageLoader from './modules/page-loader'
 
 Vue.use(Vuex)
@@ -40,6 +41,7 @@ export default new Vuex.Store({
     modalDeleteUser,
     modalDiscardPage,
     modalMovePage,
+    modalUpgradeSystem,
     pageLoader
   }
 })

client/js/store/modules/anchor.js

@@ -1,6 +1,7 @@
 'use strict'
 
 export default {
+  namespaced: true,
   state: {
     shown: false,
     hash: ''
@@ -13,10 +14,11 @@ export default {
     }
   },
   actions: {
-    anchorOpen({ commit, dispatch }, hash) {
+    open({ commit }, hash) {
+      console.info('MIGUEL!')
       commit('anchorChange', { shown: true, hash })
     },
-    anchorClose({ commit, dispatch }) {
+    close({ commit }) {
       commit('anchorChange', { shown: false })
     }
   }

client/js/store/modules/modal-upgrade-system.js

@@ -0,0 +1,24 @@
+'use strict'
+
+export default {
+  namespaced: true,
+  state: {
+    shown: false,
+    mode: 'upgrade',
+    step: 'confirm'
+  },
+  getters: {},
+  mutations: {
+    shownChange: (state, shownState) => { state.shown = shownState },
+    modeChange: (state, modeState) => { state.mode = modeState },
+    stepChange: (state, stepState) => { state.step = stepState }
+  },
+  actions: {
+    open({ commit }, opts) {
+      commit('shownChange', true)
+      commit('modeChange', opts.mode)
+      commit('stepChange', 'confirm')
+    },
+    close({ commit }) { commit('shownChange', false) }
+  }
+}