refactor: vuex re-org + modal-create-page

client/js/app.js

@@ -4,9 +4,11 @@
 /* eslint-disable no-new */
 
 import $ from 'jquery'
+import _ from 'lodash'
 import Vue from 'vue'
 import VueResource from 'vue-resource'
 import VueClipboards from 'vue-clipboards'
+import VueLodash from 'vue-lodash'
 import store from './store'
 import io from 'socket-io-client'
 import i18next from 'i18next'
@@ -15,6 +17,12 @@ import VueI18Next from '@panter/vue-i18next'
 import 'jquery-smooth-scroll'
 import 'jquery-sticky'
 
+// ====================================
+// Load Helpers
+// ====================================
+
+import helpers from './helpers'
+
 // ====================================
 // Load Vue Components
 // ====================================
@@ -40,6 +48,7 @@ import sourceViewComponent from './pages/source-view.component.js'
 Vue.use(VueResource)
 Vue.use(VueClipboards)
 Vue.use(VueI18Next)
+Vue.use(VueLodash, _)
 
 i18next
   .use(i18nextXHR)
@@ -78,6 +87,7 @@ $(() => {
 
   const i18n = new VueI18Next(i18next)
   new Vue({
+    mixins: [helpers],
     components: {
       alert: alertComponent,
       adminProfile: adminProfileComponent,

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

@@ -1,12 +1,12 @@
 <template lang="pug">
-  .modal(v-if='isShown')
+  .modal(v-bind:class='{ "is-active": isShown }')
     .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(v-class='{ "is-loading": isLoading }')
+          p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
             input.input(type='text', placeholder='page-name', v-model='entrypath', autofocus)
             span.help.is-danger(v-show='isInvalid') This document path is invalid!
         footer
@@ -15,30 +15,29 @@
 </template>
 
 <script>
-  import { isEmpty } from 'lodash'
-  // import { makeSafePath } from '../helpers/pages'
   import { mapState } from 'vuex'
 
   export default {
-    name: 'modal-create',
+    name: 'modal-create-page',
+    props: ['basepath'],
     data () {
       return {
         isLoading: false
       }
     },
-    computed: mapState('createPage', {
+    computed: {
-      entrypath: '',
+      entrypath () { return this.$store.state.modalCreatePage.entrypath }
-      isShown: 'shown',
+      isShown () { return this.$store.state.modalCreatePage.shown }
-      isInvalid: 'invalid'
+      isInvalid () { return this.$store.state.modalCreatePage.invalid }
-    }),
+    },
     methods: {
       cancel: function () {
-        this.$store.dispatch('createPageClose')
+        this.$store.dispatch('modalCreatePage/close')
       },
       create: function () {
         this.isInvalid = false
-        let newDocPath = makeSafePath(this.entrypath)
+        let newDocPath = this.helpers.pages.makeSafePath(this.entrypath)
-        if (isEmpty(newDocPath)) {
+        if (this._.isEmpty(newDocPath)) {
           this.$store.createPage.commit('')
         } else {
           this.isLoading = true
@@ -47,7 +46,7 @@
       }
     },
     mounted () {
-      // this.entrypath = currentBasePath + '/new-page'
+      this.$store.commit('modalCreatePage/pathChange', this.basepath + '/new-page')
     }
   }
 </script>

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

@@ -36,7 +36,7 @@
 
 <script>
   export default {
-    name: 'admin-users-create',
+    name: 'modal-create-user',
     data () {
       return {
         email: '',
@@ -48,12 +48,12 @@
     },
     computed: {
       isShown () {
-        return this.$store.state.adminUsersCreate.shown
+        return this.$store.state.modalCreateUser.shown
       }
     },
     methods: {
       cancel () {
-        this.$store.dispatch('adminUsersCreateClose')
+        this.$store.dispatch('modalCreateUser/close')
         this.email = ''
         this.provider = 'local'
       },

client/js/components/page-loader.js

@@ -1,13 +1,13 @@
 'use strict'
 
 import $ from 'jquery'
-import delay from 'lodash/delay'
+import _ from 'lodash'
 
 module.exports = {
 
-  complete () {
+  complete() {
     $('#page-loader').addClass('is-loaded')
-    delay(() => {
+    _.delay(() => {
       $('#page-loader').addClass('is-hidden')
     }, 1100)
   }

client/js/components/search.vue

@@ -18,7 +18,6 @@
 </template>
 
 <script>
-  import * as _ from 'lodash'
   import * as $ from 'jquery'
 
   export default {
@@ -44,7 +43,7 @@
           socket.emit('search', { terms: val }, (data) => {
             self.searchres = data.match
             self.searchsuggest = data.suggest
-            self.searchmovearr = _.concat([], self.searchres, self.searchsuggest)
+            self.searchmovearr = self._.concat([], self.searchres, self.searchsuggest)
             if (self.searchload > 0) { self.searchload-- }
           })
         } else {

client/js/components/tree.vue

@@ -15,8 +15,6 @@
 </template>
 
 <script>
-  import * as _ from 'lodash'
-
   export default {
     name: '',
     data () {
@@ -31,9 +29,9 @@
         self.$nextTick(() => {
           socket.emit('treeFetch', { basePath }, (data) => {
             if (self.tree.length > 0) {
-              let branch = _.last(self.tree)
+              let branch = self._.last(self.tree)
               branch.hasChildren = true
-              _.find(branch.pages, { _id: basePath }).isActive = true
+              self._.find(branch.pages, { _id: basePath }).isActive = true
             }
             self.tree.push({
               hasChildren: false,
@@ -49,14 +47,14 @@
       unfold (entryPath) {
         let self = this
         let lastIndex = 0
-        _.forEach(self.tree, branch => {
+        self._.forEach(self.tree, branch => {
           lastIndex++
-          if (_.find(branch.pages, { _id: entryPath }) !== undefined) {
+          if (self._.find(branch.pages, { _id: entryPath }) !== undefined) {
             return false
           }
         })
-        self.tree = _.slice(self.tree, 0, lastIndex)
+        self.tree = self._.slice(self.tree, 0, lastIndex)
-        let branch = _.last(self.tree)
+        let branch = self._.last(self.tree)
         branch.hasChildren = false
         branch.pages.forEach(page => {
           page.isActive = false

client/js/helpers/index.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export default {
+  helpers: {
+    form: require('./form'),
+    pages: require('./pages')
+  }
+}

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

@@ -1,15 +1,19 @@
 'use strict'
 
 export default {
+  namespaced: true,
   state: {
-    shown: false
+    entrypath: '',
+    shown: false,
+    invalid: false
   },
   getters: {},
   mutations: {
-    shownChange: (state, shownState) => { state.shown = shownState }
+    shownChange: (state, shownState) => { state.shown = shownState },
+    pathChange: (state, newpath) => { state.entrypath = newpath }
   },
   actions: {
-    adminUsersCreateOpen({ commit }) { commit('shownChange', true) },
+    open({ commit }) { commit('shownChange', true) },
-    adminUsersCreateClose({ commit }) { commit('shownChange', false) }
+    close({ commit }) { commit('shownChange', false) }
   }
 }

client/js/store/modules/modal-create-user.js

@@ -1,6 +1,7 @@
 'use strict'
 
 export default {
+  namespaced: true,
   state: {
     shown: false
   },
@@ -9,7 +10,7 @@ export default {
     shownChange: (state, shownState) => { state.shown = shownState }
   },
   actions: {
-    adminUsersCreateOpen({ commit }) { commit('shownChange', true) },
+    open({ commit }) { commit('shownChange', true) },
-    adminUsersCreateClose({ commit }) { commit('shownChange', false) }
+    close({ commit }) { commit('shownChange', false) }
   }
 }

fuse.js

@@ -46,6 +46,32 @@ if (args.d) {
   console.info(colors.bgWhite.black(' Starting Fuse in BUILD mode... '))
 }
 
+// ======================================================
+// BUILD VARS
+// ======================================================
+
+const ALIASES = {
+  'brace-ext-modelist': 'brace/ext/modelist.js',
+  'simplemde': 'simplemde/dist/simplemde.min.js',
+  'socket-io-client': 'socket.io-client/dist/socket.io.js',
+  'vue': (dev) ? 'vue/dist/vue.js' : 'vue/dist/vue.min.js',
+  'vue-lodash': 'vue-lodash/dist/vue-lodash.min.js'
+}
+const SHIMS = {
+  _preinit: {
+    source: '.build/_preinit.js',
+    exports: '_preinit'
+  },
+  jquery: {
+    source: 'node_modules/jquery/dist/jquery.js',
+    exports: '$'
+  },
+  mathjax: {
+    source: 'node_modules/mathjax/MathJax.js',
+    exports: 'MathJax'
+  }
+}
+
 // ======================================================
 // Global Tasks
 // ======================================================
@@ -191,27 +217,6 @@ let globalTasks = Promise.mapSeries([
 // Fuse Tasks
 // ======================================================
 
-const ALIASES = {
-  'brace-ext-modelist': 'brace/ext/modelist.js',
-  'simplemde': 'simplemde/dist/simplemde.min.js',
-  'socket-io-client': 'socket.io-client/dist/socket.io.js',
-  'vue': (dev) ? 'vue/dist/vue.js' : 'vue/dist/vue.min.js'
-}
-const SHIMS = {
-  _preinit: {
-    source: '.build/_preinit.js',
-    exports: '_preinit'
-  },
-  jquery: {
-    source: 'node_modules/jquery/dist/jquery.js',
-    exports: '$'
-  },
-  mathjax: {
-    source: 'node_modules/mathjax/MathJax.js',
-    exports: 'MathJax'
-  }
-}
-
 globalTasks.then(() => {
   let fuse = fsbx.FuseBox.init({
     homeDir: './client',
@@ -222,7 +227,7 @@ globalTasks.then(() => {
       fsbx.EnvPlugin({ NODE_ENV: (dev) ? 'development' : 'production' }),
       fsbx.VuePlugin(),
       ['.scss', fsbx.SassPlugin({ outputStyle: (dev) ? 'nested' : 'compressed' }), fsbx.CSSPlugin()],
-      fsbx.BabelPlugin({ comments: false, presets: ['es2015'] }),
+      dev && fsbx.BabelPlugin({ comments: false, presets: ['es2015'] }),
       fsbx.JSONPlugin(),
       !dev && fsbx.UglifyESPlugin({
         compress: { unused: false },
@@ -240,13 +245,14 @@ globalTasks.then(() => {
     })
   }
 
-  const bundleLibs = fuse.bundle('libs').instructions('~ index.js - brace')
+  // const bundleLibs = fuse.bundle('libs').instructions('~ index.js - brace')
-  const bundleApp = fuse.bundle('app').instructions('!> [index.js]')
+  // const bundleApp = fuse.bundle('app').instructions('!> [index.js]')
+  const bundleApp = fuse.bundle('app').instructions('> index.js')
   const bundleSetup = fuse.bundle('configure').instructions('> configure.js')
 
   switch (mode) {
     case 'dev':
-      bundleLibs.watch()
+      // bundleLibs.watch()
       bundleApp.watch()
       break
     case 'dev-configure':

package.json

@@ -139,7 +139,7 @@
     "eslint-plugin-node": "latest",
     "eslint-plugin-promise": "latest",
     "eslint-plugin-standard": "latest",
-    "fuse-box": "^2.0.0",
+    "fuse-box": "2.1.0-beta.10",
     "i18next-xhr-backend": "^1.4.1",
     "jest": "latest",
     "jquery": "^3.2.1",
@@ -147,6 +147,7 @@
     "jquery-simple-upload": "^1.0.0",
     "jquery-smooth-scroll": "^2.2.0",
     "jquery-sticky": "^1.0.4",
+    "lodash-cli": "^4.17.4",
     "lodash-es": "^4.17.4",
     "mathjax": "^2.7.1",
     "node-sass": "latest",
@@ -159,6 +160,7 @@
     "vee-validate": "^2.0.0-rc.3",
     "vue": "^2.3.3",
     "vue-clipboards": "^1.0.0",
+    "vue-lodash": "^1.0.3",
     "vue-resource": "^1.3.3",
     "vue-template-compiler": "^2.3.3",
     "vue-template-es2015-compiler": "^1.5.2",

server/views/auth/login.pug

@@ -18,7 +18,7 @@ html(data-logic='login')
     link(rel='manifest', href='/manifest.json')
 
     // JS / CSS
-    script(type='text/javascript', src='/js/libs.min.js')
+    //- script(type='text/javascript', src='/js/libs.min.js')
     script(type='text/javascript', src='/js/app.min.js')
 
   body

server/views/error-forbidden.pug

@@ -18,7 +18,7 @@ html(data-logic='error')
     link(rel='manifest', href='/manifest.json')
 
     // JS / CSS
-    script(type='text/javascript', src='/js/libs.min.js')
+    //- script(type='text/javascript', src='/js/libs.min.js')
     script(type='text/javascript', src='/js/app.min.js')
 
   body(class='is-forbidden')

server/views/error-notexist.pug

@@ -18,7 +18,7 @@ html(data-logic='error')
     link(rel='manifest', href='/manifest.json')
 
     // JS / CSS
-    script(type='text/javascript', src='/js/libs.min.js')
+    //- script(type='text/javascript', src='/js/libs.min.js')
     script(type='text/javascript', src='/js/app.min.js')
 
   body(class='is-notexist')

server/views/error.pug

@@ -18,7 +18,7 @@ html(data-logic='error')
     link(rel='manifest', href='/manifest.json')
 
     // JS / CSS
-    script(type='text/javascript', src='/js/libs.min.js')
+    //- script(type='text/javascript', src='/js/libs.min.js')
     script(type='text/javascript', src='/js/app.min.js')
 
   body(class='is-error')

server/views/layout.pug

@@ -23,7 +23,7 @@ html
       var siteRoot = '!{appconfig.host}';
 
     //- JS / CSS
-    script(type='text/javascript', src='/js/libs.min.js')
+    //- script(type='text/javascript', src='/js/libs.min.js')
     script(type='text/javascript', src='/js/app.min.js')
 
     block head

server/views/pages/admin/users.pug

@@ -3,7 +3,7 @@ extends ./_layout.pug
 block rootNavRight
   loading-spinner
   .nav-item
-    a.button(v-on:click='$store.dispatch("adminUsersCreateOpen")')
+    a.button(v-on:click='$store.dispatch("modalCreateUser/open")')
       i.icon-plus
       span= t('admin:users.createauthorize')
 
@@ -43,4 +43,4 @@ block adminContent
           td.is-centered= moment(usr.createdAt).format('lll')
           td.is-centered= moment(usr.updatedAt).format('lll')
 
-  admin-users-create
+  modal-create-user

server/views/pages/view.pug

@@ -25,13 +25,12 @@ block rootNavRight
       a.button(href='/edit/' + pageData.meta.path)
         i.icon-document-text
         span= t('nav.edit')
-      a.button.btn-create-prompt
+      a.button(v-on:click='$store.dispatch("modalCreatePage/open")')
         i.icon-plus
         span= t('nav.create')
 
 block content
 
-  //- #page-type-view.page-type-container(data-entrypath=pageData.meta.path)
   content-view(inline-template)
     .container.is-fluid.has-mkcontent
       .columns.is-gapless
@@ -82,6 +81,5 @@ block content
           .content.mkcontent
             != pageData.html
 
-  include ../modals/create.pug
+  modal-create-page(basepath=pageData.meta.path)
-  include ../modals/move.pug
   anchor