refactor: alerts + admin profile + user create dialog as Vue components

client/js/app.js

@@ -6,12 +6,13 @@
 import $ from 'jquery'
 import _ from 'lodash'
 import Vue from 'vue'
-import Vuex from 'vuex'
+import VueResource from 'vue-resource'
+import store from './store'
 import io from 'socket.io-client'
 import i18next from 'i18next'
 import i18nextXHR from 'i18next-xhr-backend'
 import VueI18Next from '@panter/vue-i18next'
-import Alerts from './components/alerts.js'
+// import Alerts from './components/alerts.js'
 import 'jquery-smooth-scroll'
 import 'jquery-sticky'
 
@@ -19,18 +20,22 @@ import 'jquery-sticky'
 // Load Vue Components
 // ====================================
 
+import alertComponent from './components/alert.vue'
 import anchorComponent from './components/anchor.vue'
 import colorPickerComponent from './components/color-picker.vue'
 import loadingSpinnerComponent from './components/loading-spinner.vue'
 import searchComponent from './components/search.vue'
 
+import adminUsersCreateComponent from './modals/admin-users-create.vue'
+
 import adminProfileComponent from './pages/admin-profile.component.js'
 import adminSettingsComponent from './pages/admin-settings.component.js'
 
 // ====================================
-// Initialize i18next
+// Initialize Vue Modules
 // ====================================
 
+Vue.use(VueResource)
 Vue.use(VueI18Next)
 
 i18next
@@ -43,46 +48,18 @@ i18next
     fallbackLng: siteLang
   })
 
-// ====================================
-// Initialize Vuex
-// ====================================
-
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
-  state: {
-    loading: false
-  },
-  mutations: {
-    startLoading: state => { state.loading = true },
-    stopLoading: state => { state.loading = false }
-  }
-})
-
 $(() => {
-  // ====================================
-  // Scroll
-  // ====================================
-
-  $('a').smoothScroll({
-    speed: 500,
-    offset: -50
-  })
-
-  $('#header').sticky({ topSpacing: 0 })
-  $('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
-
   // ====================================
   // Notifications
   // ====================================
 
   $(window).bind('beforeunload', () => {
-    store.commit('startLoading')
+    store.dispatch('startLoading')
   })
   $(document).ajaxSend(() => {
-    store.commit('startLoading')
+    store.dispatch('startLoading')
   }).ajaxComplete(() => {
-    store.commit('stopLoading')
+    store.dispatch('stopLoading')
   })
 
   var alerts = {}
@@ -107,27 +84,41 @@ $(() => {
   const i18n = new VueI18Next(i18next)
   new Vue({
     components: {
+      alert: alertComponent,
       adminProfile: adminProfileComponent,
       adminSettings: adminSettingsComponent,
+      adminUsersCreate: adminUsersCreateComponent,
       anchor: anchorComponent,
       colorPicker: colorPickerComponent,
       loadingSpinner: loadingSpinnerComponent,
       search: searchComponent
     },
+    directives: {
+      // sticky: VueSticky
+    },
     store,
     i18n,
-    el: '#root'
+    el: '#root',
+    mounted() {
+      $('a').smoothScroll({
+        speed: 500,
+        offset: -50
+      })
+
+      $('#header').sticky({ topSpacing: 0 })
+      $('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
+
+      // ====================================
+      // Pages logic
+      // ====================================
+
+      require('./pages/view.js')(alerts)
+      require('./pages/all.js')(alerts, socket)
+      require('./pages/create.js')(alerts, socket)
+      require('./pages/edit.js')(alerts, socket)
+      require('./pages/source.js')(alerts)
+      require('./pages/history.js')(alerts)
+      require('./pages/admin.js')(alerts)
+    }
   })
-
-  // ====================================
-  // Pages logic
-  // ====================================
-
-  require('./pages/view.js')(alerts)
-  require('./pages/all.js')(alerts, socket)
-  require('./pages/create.js')(alerts, socket)
-  require('./pages/edit.js')(alerts, socket)
-  require('./pages/source.js')(alerts)
-  require('./pages/history.js')(alerts)
-  require('./pages/admin.js')(alerts)
 })