refactor: modal-move-page -> vue component

2017-05-26 22:23:05 -04:00
parent 62e7ea5b2b
commit 3cb53bd1d5
11 changed files with 107 additions and 160 deletions
--- a/client/js/components/modal-move-page.vue
+++ b/client/js/components/modal-move-page.vue
@@ -0,0 +1,83 @@
+<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>