refactor: modal-move-page -> vue component

client/js/app.js

@@ -33,6 +33,7 @@ import colorPickerComponent from './components/color-picker.vue'
 import loadingSpinnerComponent from './components/loading-spinner.vue'
 import modalCreatePageComponent from './components/modal-create-page.vue'
 import modalCreateUserComponent from './components/modal-create-user.vue'
+import modalMovePageComponent from './components/modal-move-page.vue'
 import pageLoaderComponent from './components/page-loader.vue'
 import searchComponent from './components/search.vue'
 import treeComponent from './components/tree.vue'
@@ -100,6 +101,7 @@ $(() => {
       loadingSpinner: loadingSpinnerComponent,
       modalCreatePage: modalCreatePageComponent,
       modalCreateUser: modalCreateUserComponent,
+      modalMovePage: modalMovePageComponent,
       pageLoader: pageLoaderComponent,
       search: searchComponent,
       sourceView: sourceViewComponent,

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

@@ -8,7 +8,7 @@
           label.label Enter the new document path:
           p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
             input.input(type='text', placeholder='page-name', v-model='userPath', ref='createPageInput', @keyup.enter='create', @keyup.esc='cancel')
-            span.help.is-danger(v-show='isInvalid') This document path is invalid!
+            span.help.is-red(v-show='isInvalid') This document path is invalid!
         footer
           a.button.is-grey.is-outlined(v-on:click='cancel') Discard
           a.button.is-light-blue(v-on:click='create') Create

client/js/components/modal-move-page.vue

+<template lang="pug">
+  .modal(v-bind:class='{ "is-active": isShown }')
+    .modal-background
+    .modal-container
+      .modal-content
+        header.is-indigo Move document
+        section
+          label.label Enter the new document path:
+          p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
+            input.input(type='text', placeholder='page-name', v-model='movePath', ref='movePageInput', @keyup.enter='move', @keyup.esc='cancel')
+            span.help.is-red(v-show='isInvalid') This document path is invalid or not allowed!
+            span.note Note that moving or renaming documents can lead to broken links. Make sure to edit any page that links to this document afterwards!
+        footer
+          a.button.is-grey.is-outlined(v-on:click='cancel') Discard
+          a.button.is-indigo(v-on:click='move') Move
+</template>
+
+<script>
+  export default {
+    name: 'modal-move-page',
+    props: ['currentPath'],
+    data () {
+      return {
+        movePath: '',
+        isLoading: false,
+        isInvalid: false
+      }
+    },
+    computed: {
+      isShown () {
+        if(this.$store.state.modalMovePage.shown) {
+          this.movePath = this.currentPath
+          this.makeSelection()
+        }
+        return this.$store.state.modalMovePage.shown
+      }
+    },
+    methods: {
+      makeSelection: function () {
+        let self = this;
+        self._.delay(() => {
+          let startPos = (self._.includes(self.currentPath, '/') ? self._.lastIndexOf(self.movePath, '/') + 1 : 0
+          self.$helpers.form.setInputSelection(self.$refs.movePageInput, startPos, self.movePath.length)
+        }, 100)
+      },
+      cancel: function () {
+        this.$store.dispatch('modalMovePage/close')
+      },
+      move: function () {
+        this.isInvalid = false
+        let newDocPath = this.$helpers.pages.makeSafePath(this.movePath)
+        if (this._.isEmpty(newDocPath) || newDocPath === this.currentPath || newDocPath === 'home') {) {
+          this.isInvalid = true
+        } else {
+          this.isLoading = true
+          this.$http.put(window.location.href, {
+            move: newDocPath
+          }).then(resp => {
+            return resp.json()
+          }).then(resp => {
+            if (resp.ok) {
+              window.location.assign('/' + newDocPath)
+            } else {
+              this.loading = false
+              self.$store.dispatch('alert', {
+                style: 'red',
+                icon: 'square-cross',
+                msg: resp.msg
+              })
+            }
+          }).catch(err => {
+            this.loading = false
+            self.$store.dispatch('alert', {
+              style: 'red',
+              icon: 'square-cross',
+              msg: 'Error: ' + err.body.msg
+            })
+          })
+        }
+      }
+    }
+  }
+</script>

client/js/modals/create.js

-'use strict'
-
-import $ from 'jquery'
-import _ from 'lodash'
-import { setInputSelection } from '../helpers/form'
-import { makeSafePath } from '../helpers/pages'
-
-// -> Create New Document
-
-module.exports = (currentBasePath) => {
-  let suggestedCreatePath = currentBasePath + '/new-page'
-
-  $('.btn-create-prompt').on('click', (ev) => {
-    $('#txt-create-prompt').val(suggestedCreatePath)
-    $('#modal-create-prompt').toggleClass('is-active')
-    setInputSelection($('#txt-create-prompt').get(0), currentBasePath.length + 1, suggestedCreatePath.length)
-    $('#txt-create-prompt').removeClass('is-danger').next().addClass('is-hidden')
-  })
-
-  $('#txt-create-prompt').on('keypress', (ev) => {
-    if (ev.which === 13) {
-      $('.btn-create-go').trigger('click')
-    }
-  })
-
-  $('.btn-create-go').on('click', (ev) => {
-    let newDocPath = makeSafePath($('#txt-create-prompt').val())
-    if (_.isEmpty(newDocPath)) {
-      $('#txt-create-prompt').addClass('is-danger').next().removeClass('is-hidden')
-    } else {
-      $('#txt-create-prompt').parent().addClass('is-loading')
-      window.location.assign('/create/' + newDocPath)
-    }
-  })
-}

client/js/modals/move.js

-'use strict'
-
-import $ from 'jquery'
-import _ from 'lodash'
-import { setInputSelection } from '../helpers/form'
-import { makeSafePath } from '../helpers/pages'
-
-// -> Move Existing Document
-
-module.exports = (currentBasePath, alerts) => {
-  if (currentBasePath !== '') {
-    $('.btn-move-prompt').removeClass('is-hidden')
-  }
-
-  let moveInitialDocument = _.lastIndexOf(currentBasePath, '/') + 1
-
-  $('.btn-move-prompt').on('click', (ev) => {
-    $('#txt-move-prompt').val(currentBasePath)
-    $('#modal-move-prompt').toggleClass('is-active')
-    setInputSelection($('#txt-move-prompt').get(0), moveInitialDocument, currentBasePath.length)
-    $('#txt-move-prompt').removeClass('is-danger').next().addClass('is-hidden')
-  })
-
-  $('#txt-move-prompt').on('keypress', (ev) => {
-    if (ev.which === 13) {
-      $('.btn-move-go').trigger('click')
-    }
-  })
-
-  $('.btn-move-go').on('click', (ev) => {
-    let newDocPath = makeSafePath($('#txt-move-prompt').val())
-    if (_.isEmpty(newDocPath) || newDocPath === currentBasePath || newDocPath === 'home') {
-      $('#txt-move-prompt').addClass('is-danger').next().removeClass('is-hidden')
-    } else {
-      $('#txt-move-prompt').parent().addClass('is-loading')
-
-      $.ajax(window.location.href, {
-        data: {
-          move: newDocPath
-        },
-        dataType: 'json',
-        method: 'PUT'
-      }).then((rData, rStatus, rXHR) => {
-        if (rData.ok) {
-          window.location.assign('/' + newDocPath)
-        } else {
-          alerts.pushError('Something went wrong', rData.error)
-        }
-      }, (rXHR, rStatus, err) => {
-        alerts.pushError('Something went wrong', 'Save operation failed.')
-      })
-    }
-  })
-}

client/js/store/index.js

@@ -5,6 +5,7 @@ import alert from './modules/alert'
 import anchor from './modules/anchor'
 import modalCreatePage from './modules/modal-create-page'
 import modalCreateUser from './modules/modal-create-user'
+import modalMovePage from './modules/modal-move-page'
 import pageLoader from './modules/page-loader'
 
 Vue.use(Vuex)
@@ -26,6 +27,7 @@ export default new Vuex.Store({
     anchor,
     modalCreatePage,
     modalCreateUser,
+    modalMovePage,
     pageLoader
   }
 })

client/js/store/modules/modal-move-page.js

+'use strict'
+
+export default {
+  namespaced: true,
+  state: {
+    shown: false
+  },
+  getters: {},
+  mutations: {
+    shownChange: (state, shownState) => { state.shown = shownState }
+  },
+  actions: {
+    open({ commit }) { commit('shownChange', true) },
+    close({ commit }) { commit('shownChange', false) }
+  }
+}

server/views/modals/admin-createuser.pug

-
-.modal#modal-admin-users-create
-  .modal-background
-  .modal-container
-    .modal-content
-      header.is-blue
-        span Create / Authorize User
-        p.modal-notify(v-bind:class='{ "is-active": loading }'): i
-      section
-        label.label Email address:
-        p.control.is-fullwidth
-          input.input(type='text', placeholder='e.g. john.doe@company.com', v-model='email')
-      section
-        label.label Provider:
-        p.control.is-fullwidth
-          select(v-model='provider')
-            option(value='local') Local Database
-            if appconfig.auth.microsoft.enabled
-              option(value='windowslive') Microsoft Account
-            if appconfig.auth.google.enabled
-              option(value='google') Google ID
-            if appconfig.auth.facebook.enabled
-              option(value='facebook') Facebook
-            if appconfig.auth.github.enabled
-              option(value='github') GitHub
-            if appconfig.auth.slack.enabled
-              option(value='slack') Slack
-      section(v-if='provider=="local"')
-        label.label Password:
-        p.control.is-fullwidth
-          input.input(type='password', placeholder='', v-model='password')
-      section(v-if='provider=="local"')
-        label.label Full Name:
-        p.control.is-fullwidth
-          input.input(type='text', placeholder='e.g. John Doe', v-model='name')
-      footer
-        a.button.is-grey.is-outlined(v-on:click='cancel') Discard
-        a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Create User
-        a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Authorize User

server/views/modals/create.pug

-
-.modal#modal-create-prompt
-  .modal-background
-  .modal-container
-    .modal-content
-      header.is-light-blue Create New Document
-      section
-        label.label Enter the new document path:
-        p.control.is-fullwidth
-          input.input#txt-create-prompt(type='text', placeholder='page-name')
-          span.help.is-danger.is-hidden This document path is invalid!
-      footer
-        a.button.is-grey.is-outlined.btn-create-prompt Discard
-        a.button.is-light-blue.btn-create-go Create

server/views/modals/move.pug

-
-.modal#modal-move-prompt
-  .modal-background
-  .modal-container
-    .modal-content
-      header.is-indigo Move document
-      section
-        label.label Enter the new document path:
-        p.control.is-fullwidth
-          input.input#txt-move-prompt(type='text', placeholder='page-name')
-          span.help.is-red.is-hidden This document path is invalid or not allowed!
-        span.note Note that moving or renaming documents can lead to broken links. Make sure to edit any page that links to this document afterwards!
-      footer
-        a.button.is-grey.is-outlined.btn-move-prompt Discard
-        a.button.is-indigo.btn-move-go Move

server/views/pages/view.pug

@@ -11,8 +11,8 @@ mixin tocMenu(ti)
 block rootNavRight
   loading-spinner
   .nav-item
-    if rights.write
-      a.button.is-outlined.btn-move-prompt.is-hidden
+    if rights.write && pageData.meta.path !== 'home'
+      a.button.is-outlined(v-on:click='$store.dispatch("modalMovePage/open")')
         i.icon-shuffle
         span= t('nav.move')
     a.button.is-outlined(href='/source/' + pageData.meta.path)
@@ -82,4 +82,5 @@ block content
             != pageData.html
 
   modal-create-page(basepath=pageData.meta.path)
+  modal-move-page(current-path=pageData.meta.path)
   anchor